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替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
layui表格数据重载
Jul 27 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
iview实现图片上传功能
Jun 29 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
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
基于python实现简单日历
2018/07/28 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python初学者常见错误详解
2019/07/02 Python
Django stark组件使用及原理详解
2019/08/22 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python读取mysql数据绘制条形图
2020/03/25 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
配件采购员岗位职责
2013/12/03 职场文书
公司租房协议书
2014/10/14 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript