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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
javascript 必知必会之closure
Sep 21 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 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实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php for 循环使用的简单实例
2016/06/02 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
如何在python中实现线性回归
2020/08/10 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
什么是Web Service?
2012/07/25 面试题
优秀本科生求职推荐信
2014/02/24 职场文书
投资意向书范本
2014/04/01 职场文书
合伙协议书范本
2014/04/21 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
奖励申请报告范文
2015/05/15 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技