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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JS常用函数使用指南
Nov 23 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
js模拟实现百度搜索
Jun 28 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
使用php清除bom示例
2014/03/03 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP时间函数使用详解
2019/03/21 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
家庭暴力离婚起诉书
2015/05/18 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Golang实现可重入锁的示例代码
2022/05/25 Golang