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 定义初始化数组函数
Sep 07 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
Javascript之Date对象详解
Jun 07 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
JavaScript工具库MyTools详解
Jan 01 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JS 常用校验函数
2009/03/26 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python关键字and和or用法实例
2015/05/28 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python http基本验证方法
2018/12/26 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
实习教师自我鉴定
2013/09/27 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
木工主管岗位职责
2013/12/08 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Golang连接并操作MySQL
2022/04/14 MySQL