JavaScript ES2019中的8个新特性详解


Posted in Javascript onFebruary 20, 2019

前言

JavaScript 不断改进和添加更多功能。TC39 已经完成并批准了 ES2019 的这 8 个功能,它有 4 个阶段,这些阶段是:

  • Stage 0: Strawman
  • Stage 1: Proposals
  • Stage 2: Drafts
  • Stage 3: Candidates
  • Stage 4: Finished/Approved

以下链接可以查看Stage 0,Stage 1 ? 3 和Final Stage

可选的 Catch 绑定

能够在不使用 catch 绑定的地方选择性地删除它

try {
 // trying to use a new ES2019 feature
 // which may not be implemented in other browsers
} catch (unused) {
 // revert back to old way
}

现在可以删除未使用的绑定

try {
 ...
} catch {
 ...
}

JSON 超集

此提议的动机是 JSON 字符串可以包含未转义的 U + 2028 LINE SEPARATOR 和 U + 2029 PARAGRAPH SEPARATOR 字符,而 ECMAScript 字符串则不能。在 ES2019 之前,它会产生错误SyntaxError: Invalid or unexpected token

const LS = eval('"\u2028"');
const PS = eval("'\u2029'");

符号说明

在 ES2015 中引入符号,具有非常独特的功能。在 ES2019 中,它现在可以提供给定的描述。其目的是避免间接获得所提供的描述Symbol.prototype.toString

const mySymbol = Symbol("myDescription");

console.log(mySymbol); // Symbol(myDescription)

console.log(mySymbol.toString()); // Symbol(myDescription)

console.log(mySymbol.description); // myDescription

Function.prototype.toString - 修订版

我们之前已经在函数原型中使用了toString方法,但是在 ES2019 中它已被修改并包含函数内的注释,请注意它在Arrow Functions上不起作用。

function /* comment */ foo /* another comment */() {}

// Before
console.log(foo.toString()); // function foo(){}

// Now ES2019
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}

// Arrow Syntax
const bar /* comment */ = /* another comment */ () => {};

console.log(bar.toString()); // () => {}

Object.fromEntries

它是 Object.entries 的反向方法,它也是克隆对象的方法之一

const obj = {
 prop1: 1,
 prop2: 2
};

const entries = Object.entries(obj);

console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]

const fromEntries = Object.fromEntries(entries);

console.log(fromEntries); // Object { prop1: 1, prop2: 2 }

console.log(obj === fromEntries); // false

注意:任何嵌入式对象/数组都只是通过引用复制。

格式良好的 JSON.stringify

这也是由同一个人提出的,并且与 JSON 超集特征有关 。ES2019 不是将未配对的代理代码点作为单个 UTF-16 代码单元返回,而是用 JSON 转义序列表示它们

// Before
console.log(JSON.stringify("\uD800")); // "�"

// Now ES2019
console.log(JSON.stringify("\uD800")); // "\ud800"

String.prototype trimStart 和 trimEnd

我们已经在 String 原型中使用了trim方法,它删除了字符串开头和结尾之间的空格。但是现在开始介绍 ES2019 的 trimStart和trimEnd

// Trim
const name = "  Codedam ";
console.log(name.trim()); // "Codedam"

// Trim Start
const description = "  Unlocks Secret Codes ";
console.log(description.trimStart()); // "Unlocks Secret Codes "

// Trim End
const category = " JavaScript ";
console.log(category.trimEnd()); // " JavaScript"

Array.prototype flat 和 flatMap

flat方法创建一个新数组,所有子数组元素以递归方式连接到指定的深度。 默认情况下,深度为 1,使数组上第一层嵌套数组变平。

const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]

// You can use Infinity to flatten all the nested arrays no matter how deep the array is

const arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];
arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap 类似于 flat 并且与 map 相关,其中它映射数组然后将其展平

const arr = ["Codedam", "is Awsome", "!"];

const mapResult = arr.map(item => item.split(" "));
console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]

const flatMapResult = arr.flatMap(chunk => chunk.split(" "));
console.log(flatMapResult); // ['Codedam', 'is', 'Awsome', '!'];

其他

强调一下现在 Stage 3 中的一些有用的即将推出的功能。

  • globalThis
  • BigInt
  • import()
  • Legacy RegEx
  • Private instance methods and accessors
  • String.prototype.matchAll

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
详解如何较好的使用js
Dec 16 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 #Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
详解webpack 最简打包结果分析
Feb 20 #Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
小程序红包雨的实现示例
Feb 19 #Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
JavaScript常用工具方法封装
2019/02/12 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python中的super()方法使用简介
2015/08/14 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
运行Python编写的程序方法实例
2020/10/21 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
研究生考核个人自我鉴定
2014/03/27 职场文书
小学节能减排倡议书
2014/05/15 职场文书
关于做家务的心得体会
2016/01/23 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书