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和css(外部文件)
Apr 17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue实现扫码功能
Jan 17 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随机输出名人名言的代码
2012/10/07 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
期末学生评语大全
2014/04/24 职场文书
班子四风对照检查材料
2014/08/21 职场文书
综治工作心得体会
2014/09/11 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL