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剩余字数计算的代码
Jul 03 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
Vue数据双向绑定底层实现原理
Nov 22 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
一个域名查询的程序
2006/10/09 PHP
一个简洁的多级别论坛
2006/10/09 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
Python延时操作实现方法示例
2018/08/14 Python
python实现抖音点赞功能
2019/04/07 Python
django实现日志按日期分割
2020/05/21 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
幼儿园校车司机的岗位职责
2014/01/30 职场文书
文明倡议书范文
2014/04/15 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
党员心得体会范文2016
2016/01/23 职场文书
会计专业自荐信范文
2019/05/22 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python