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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
百度地图api如何使用
Aug 03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
班主任个人工作反思
2014/04/28 职场文书
公益广告标语
2014/06/19 职场文书
升学宴演讲稿
2014/09/01 职场文书
优秀团员事迹材料
2014/12/25 职场文书
财产保全担保书
2015/01/20 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers