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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
理解JavaScript原型链
Oct 25 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
DWZ刷新dialog解决方法
2013/03/03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python变量和字符串详解
2017/04/29 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
详解python深浅拷贝区别
2019/06/24 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
银行介绍信范文
2014/01/10 职场文书
小学敬老月活动方案
2014/02/11 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
毕业留言寄语大全
2014/04/10 职场文书
公司建议书怎么写
2014/05/15 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python