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拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
JS实现图片预览的两种方式
2017/06/27 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python实时获取cmd的输出
2015/12/13 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
社区健康教育工作方案
2014/06/03 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS