JavaScript:ES2019 的新特性(译)


Posted in Javascript onAugust 08, 2019

作为最流行的编程语言和最重要的 Web 开发语言之一,JavaScript 不断演变,每次迭代都会得到一些新的内部更新。让我们来看看 ES2019 有哪些新的特性,并加入到我们日常开发中:

Array.prototype.flat()

Array.prototype.flat() 递归地将嵌套数组拼合到指定深度。默认值为 1,如果要全深度则使用 Infinity 。此方法不会修改原始数组,但会创建一个新数组:

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); 
// [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6, 7, 8]

flat() 方法会移除数组中的空项:

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 Array.prototype.map 和 深度值为 1的 Array.prototype.flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]); 
// [[4], [8], [12]]

arr1.flatMap(x => [x * 4]); 
// [4, 8, 12]

更好的示例:

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); 
// [["This","is","a"],["regular"],["sentence"]]

sentence.flatMap(x => x.split(" ")); 
// ["This","is","a","regular", "sentence"]

// 可以使用 归纳(reduce) 与 合并(concat)实现相同的功能
sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);

String.prototype.trimStart() 和 String.prototype.trimEnd()

除了能从字符串两端删除空白字符的 String.prototype.trim() 之外,现在还有单独的方法,只能从每一端删除空格:

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";
  • trimStart() :别名 trimLeft(),移除原字符串左端的连续空白符并返回,并不会直接修改原字符串本身。
  • trimEnd() :别名 trimRight(),移除原字符串右端的连续空白符并返回,并不会直接修改原字符串本身。

Object.fromEntries

将键值对列表转换为 Object 的新方法。

它与已有 Object.entries() 正好相反,Object.entries()方法在将对象转换为数组时使用,它返回一个给定对象自身可枚举属性的键值对数组。

但现在您可以通过 Object.fromEntries 将操作的数组返回到对象中。

下面是一个示例(将所有对象属性的值平方):

const obj = { prop1: 2, prop2: 10, prop3: 15 };

// 转化为键值对数组:
let array = Object.entries(obj); 
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]

将所有对象属性的值平方:

array = array.map(([key, value]) => [key, Math.pow(value, 2)]); 
// [["prop1", 4], ["prop2", 100], ["prop3", 225]]

我们将转换后的数组 array 作为参数传入 Object.fromEntries ,将数组转换成了一个对象:

const newObj = Object.fromEntries(array); 
// {prop1: 4, prop2: 100, prop3: 225}

可选的 Catch 参数

新提案允许您完全省略 catch() 参数,因为在许多情况下,您并不想使用它:

try {
 //...
} catch (er) {
 //handle error with parameter er
}

try {
 //...
} catch {
 //handle error without parameter
}

Symbol.description

description 是一个只读属性,它会返回 Symbol 对象的可选描述的字符串,用来代替 toString() 方法。

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"

testSymbol.toString(); // "Symbol(Desc)"

Function.toString()

现在,在函数上调用 toString() 会返回函数,与它的定义完全一样,包括空格和注释。

之前:

function /* foo comment */ foo() {}

foo.toString(); // "function foo() {}"

现在:

foo.toString(); // "function /* foo comment */ foo() {}"

JSON.parse() 改进

行分隔符 (u2028) 和段落分隔符 (u2029),现在被正确解析,而不是报一个语法错误。

var str = '{"name":"Bottle\u2028AnGe"}'
JSON.parse(str)
// {name: "Bottle
AnGe"}

原文链接:JavaScript: What's new in ES2019

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
给js文件传参数(详解)
Jul 13 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
Vue中的验证登录状态的实现方法
Mar 09 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
小程序实现投票进度条
Nov 20 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 #Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 #Javascript
javascript实现blob加密视频源地址的方法
Aug 08 #Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 #Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 #Javascript
js如何实现元素曝光上报
Aug 07 #Javascript
详解Element-UI中上传的文件前端处理
Aug 07 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
vue打包后显示空白正确处理方法
2017/11/01 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python循环输出三角形图案的例子
2019/11/22 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
房屋维修申请报告
2015/05/18 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
《小小的船》教学反思
2016/02/18 职场文书
初中历史教学反思
2016/02/19 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers