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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
JavaScript this 深入理解
2009/07/30 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Django REST framework内置路由用法
2019/07/26 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
用 Python 制作地球仪的方法
2020/04/24 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
数控专业个人求职信范例
2013/11/29 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
学生上课说话检讨书
2014/10/25 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
年度考核表个人总结
2015/03/06 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技