十分钟教你上手ES2020新特性


Posted in Javascript onFebruary 12, 2020

前言

ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。想阅读更多优质文章,请点击我的博客

本文以简单的代码示例来介绍 ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释。

可选链操作符(Optional Chaining)

可选链 可让我们在查询具有多个层级的对象时,不再需要进行冗余的各种前置校验。

日常开发中,当需要访问嵌套在对象内部好几层的属性时,可能就会得到臭名昭著的错误Uncaught TypeError: Cannot read property...,这种错误,让整段程序运行中止。

十分钟教你上手ES2020新特性

于是,你就要修改你的代码来处理来处理属性链中每一个可能的undefined对象,比如:

let nestedProp = obj && obj.first && obj.first.second;

在访问 obj.first.second 之前,要先确认 obj 和 obj.first 的值非 null(且不是 undefined)。

有了可选链式调用 ,可以大量简化类似繁琐的前置校验操作,而且更安全:

let nestedProp = obj?.first?.second;

如果obj或obj.first是null/undefined,表达式将会短路计算直接返回undefined。

可选链操作符的支持情况:

十分钟教你上手ES2020新特性

空位合并操作符(Nullish coalescing Operator)

当我们查询某个属性时,经常会给没有该属性就设置一个默认的值,比如下面两种方式:

let c = a ? a : b // 方式1
let c = a || b // 方式2

这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0, '', false),这些值可能是在某些情况下有效的输入。

let x = {
 profile: {
  name: '浪里行舟',
  age: ''
 }
}
console.log(x.profile.age || 18) //18

上例中age的属性为空字符串,却被等同为假值,为了解决这个问题,ES2020诞生了个新特性--空位合并操作符,用 ?? 表示。如果表达式在??的左侧运算符求值为 undefined 或 null,就返回其右侧默认值。

let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

例如有以下代码:

const x = null;
const y = x ?? 500;
console.log(y); // 500
const n = 0
const m = n ?? 9000;
console.log(m) // 0

空位合并操作符的支持情况:

十分钟教你上手ES2020新特性

Promise.allSettled

我们知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all 调用会立即终止,并返回一个reject的新的 Promise 对象。

const promises = [
 Promise.resolve(1),
 Promise.resolve(2),
 Promise.reject('error')
];
 
 
Promise.all(promises)
 .then(responses => console.log(responses))
 .catch(e => console.log(e)) // "error"

假如有这样的场景:一个页面有三个区域,分别对应三个独立的接口数据,使用 Promise.all 来并发请求三个接口,如果其中任意一个接口出现异常,状态是reject,这会导致页面中该三个区域数据全都无法出来,这个状况我们是无法接受,Promise.allSettled的出现就可以解决这个痛点:

Promise.allSettled([
 Promise.reject({ code: 500, msg: '服务异常' }),
 Promise.resolve({ code: 200, list: [] }),
 Promise.resolve({ code: 200, list: [] })
]).then(res => {
 console.log(res)
 /*
    0: {status: "rejected", reason: {…}}
    1: {status: "fulfilled", value: {…}}
    2: {status: "fulfilled", value: {…}}
  */
 // 过滤掉 rejected 状态,尽可能多的保证页面区域数据渲染
 RenderContent(
  res.filter(el => {
   return el.status !== 'rejected'
  })
 )
})

Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路, 也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。

Promise.allSettled的支持情况:

十分钟教你上手ES2020新特性

String.prototype.matchAll

如果一个正则表达式在字符串里面有多个匹配,现在一般使用g修饰符或y修饰符,在循环里面逐一取出。

function collectGroup1 (regExp, str) {
 const matches = []
 while (true) {
  const match = regExp.exec(str)
  if (match === null) break
  matches.push(match[1])
 }
 return matches
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// [ 'foo', 'bar', 'baz' ]

值得注意的是,如果没有修饰符 /g, .exec() 只返回第一个匹配。现在通过String.prototype.matchAll方法,可以一次性取出所有匹配。

function collectGroup1 (regExp, str) {
 let results = []
 for (const match of str.matchAll(regExp)) {
  results.push(match[1])
 }
 return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// ["foo", "bar", "baz"]

上面代码中,由于string.matchAll(regex)返回的是遍历器,所以可以用for...of循环取出。

String.prototype.matchAll的支持情况:

十分钟教你上手ES2020新特性

Dynamic import

现在前端打包资源越来越大,前端应用初始化时根本不需要全部加载这些逻辑资源,为了首屏渲染速度更快,很多时候都是动态导入(按需加载)模块,比如懒加载图片等,这样可以帮助您提高应用程序的性能。

其中按需加载这些逻辑资源都一般会在某一个事件回调中去执行:

el.onclick = () => {
 import('/modules/my-module.js')
  .then(module => {
   // Do something with the module.
  })
  .catch(err => {
   // load error;
  })
}

import()可以用于script脚本中,import(module) 函数可以在任何地方调用。它返回一个解析为模块对象的 promise。

这种使用方式也支持 await 关键字。

let module = await import('/modules/my-module.js');

通过动态导入代码,您可以减少应用程序加载所需的时间,并尽可能快地将某些内容返回给用户。

Dynamic import的支持情况:

十分钟教你上手ES2020新特性

BigInt

javascript 在 Math 上一直很糟糕的原因之一是只能安全的表示-(2^53-1)2^53-1 范的值,即Number.MIN_SAFE_INTEGERNumber.MAX_SAFE_INTEGER,超出这个范围的整数计算或者表示会丢失精度。

var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991
 
 
num = num + 1; // -> 9007199254740992
 
 
// 再次加 +1 后无法正常运算
num = num + 1; // -> 9007199254740992
 
 
// 两个不同的值,却返回了true
9007199254740992 === 9007199254740993 // -> true

于是 BigInt 应运而生,它是第7个原始类型,可安全地进行大数整型计算。你可以在BigInt上使用与普通数字相同的运算符,例如 +, -, /, *, %等等。

创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可。例如,123 变为 123n。也可以使用全局方法 BigInt(value) 转化,入参 value 为数字或数字字符串。

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"

只要在数字末尾加上 n,就可以正确计算大数了:

1234567890123456789n * 123n;
// -> 151851850485185185047n

不过有一个问题,在大多数操作中,不能将 BigInt与Number混合使用。比较Number和 BigInt是可以的,但是不能把它们相加。

1n < 2 
// true
 
 
1n + 2
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

BigInt的支持情况:

十分钟教你上手ES2020新特性

globalThis

globalThis 是一个全新的标准方法用来获取全局 this 。之前开发者会通过如下的一些方法获取:

  • 全局变量 window:是一个经典的获取全局对象的方法。但是它在 Node.js 和 Web Workers 中并不能使用
  • 全局变量 self:通常只在 Web Workers 和浏览器中生效。但是它不支持 Node.js。一些人会通过判断 self 是否存在识别代码是否运行在 Web Workers 和浏览器中
  • 全局变量 global:只在 Node.js 中生效

过去获取全局对象,可通过一个全局函数:

// ES10之前的解决方案
const getGlobal = function(){
 if(typeof self !== 'undefined') return self
 if(typeof window !== 'undefined') return window
 if(typeof global !== 'undefined') return global
 throw new Error('unable to locate global object')
}
 
 
// ES10内置
globalThis.Array(0,1,2) // [0,1,2]
 
 
// 定义一个全局对象v = { value:true } ,ES10用如下方式定义
globalThis.v = { value:true }

而 globalThis 目的就是提供一种标准化方式访问全局对象,有了 globalThis 后,你可以在任意上下文,任意时刻都能获取到全局对象。

如果您在浏览器上,globalThis将为window,如果您在Node上,globalThis则将为global。因此,不再需要考虑不同的环境问题。

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

新提案也规定了,Object.prototype 必须在全局对象的原型链中。下面的代码在最新浏览器中已经会返回 true 了:

Object.prototype.isPrototypeOf(globalThis); // true

globalThis的支持情况:

十分钟教你上手ES2020新特性

参考文章

TC39 Proposals

MDN文档

种草 ES2020 新特性

ES2020 Features in simple examples

New Features In ES2020 You Should Check

5 ECMAScript Proposals To Look Out For In ES2020

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

Javascript 相关文章推荐
jQuery动态添加、删除元素的方法
Jan 09 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 #Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 #Javascript
浅析vue-router实现原理及两种模式
Feb 11 #Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 #Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 #Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 #Javascript
You might like
php多任务程序实例解析
2014/07/19 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js获取form表单所有数据的简单方法
2016/08/18 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python笔记之facade模式
2019/11/20 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
高中数学教学反思
2014/01/30 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
2015年重阳节主持词
2015/07/04 职场文书
安全责任协议书范本
2016/03/23 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Redis集群的关闭与重启操作
2021/07/07 Redis