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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
node+multer实现图片上传的示例代码
Feb 18 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
解决中英文字符串长度问题函数
2007/01/16 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js运动应用实例解析
2015/12/28 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
django的model操作汇整详解
2019/07/26 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python 实现性别识别
2020/11/21 Python
一套Delphi的笔试题二
2013/05/11 面试题
编辑个人求职信范文
2013/09/21 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
给校长的一封建议书
2014/03/12 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
就业协议书样本
2014/08/20 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
《认识钟表》教学反思
2016/02/16 职场文书