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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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
Terran剧情介绍
2020/03/14 星际争霸
php intval的测试代码发现问题
2008/07/27 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
Dojo 学习要点
2010/09/03 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
深入理解vue Render函数
2017/07/19 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python列表推导式操作解析
2019/11/26 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
大学学年自我鉴定
2013/10/28 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
诚信考试承诺书
2014/03/27 职场文书
节能宣传周活动总结
2014/05/08 职场文书
国际贸易实训总结
2015/08/03 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技