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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
javascript内存管理详细解析
Nov 11 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
Vue监听页面刷新和关闭功能
Jun 20 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学习笔记之 函数声明
2011/06/09 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
微信小程序签到功能
2018/10/31 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python微信公众号开发平台
2018/01/25 Python
图解Python变量与赋值
2018/04/03 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
一年级小学生评语
2014/04/22 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
教师党员自我评价范文
2015/03/04 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL