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 20 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 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
深入PHP变量存储的详解
2013/06/13 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python中的随机函数小结
2018/01/27 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
基于python3的socket聊天编程
2020/02/17 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
公务员上班玩游戏检讨书
2014/09/17 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2016年春节慰问信息
2015/03/25 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python