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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 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的面试题集
2006/11/19 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
paypal即时到账php实现代码
2010/11/28 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python开发简易版在线音乐播放器
2017/03/03 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
运动会开幕式邀请函
2014/01/22 职场文书
教师现实表现材料
2014/02/14 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
环保建议书作文500字
2015/09/14 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
各种货币符号快捷输入
2022/02/17 杂记
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python