十分钟教你上手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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
微信小程序sessionid不一致问题解决
Aug 30 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python支付宝支付示例详解
2019/08/22 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
人力资源总监工作说明
2014/03/03 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
企业职业病防治方案
2014/05/29 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Android Studio 计算器开发
2022/05/20 Java/Android