亚太娱乐平台报道十分钟上手 ES 2020 新特性_亚太娱乐平台官网资讯

来自:CSDN 2020-03-24

以下文章来源于前端工匠 ,作者浪里行舟君

作者 | 浪里行舟

责编 | 郭芮

ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 ( ES2015 ) 那样包含大批新特性。但也添加了许多有趣且有用的特性。本文的代码地点://github.com/ljianshu/Blog

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

可选链操作符(Optional Chaining)

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

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

于是,你就要修改你的代码来处置来处置属性链中每一个可能的 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。

可选链操作符的撑腰情况:

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

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

let c = a ? a : b // 方式 1let 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 ) ; // 500const n = 0const m = n ?? 9000;console.log ( m ) // 0

空位合并操作符的撑腰情况:

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 的撑腰情况:

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 的撑腰情况:

Dynamic import

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

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

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 的撑腰情况:

BigInt

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

var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991

num = num + 1; // -> 9007199254740992

// 再次加 +1 后无法正常运算 num = num + 1; // -> 9007199254740992

// 两个差别的值,却返回了 true9007199254740992 === 9007199254740993 // -> true

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

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

const aNumber = 111;const aBigInt = BigInt ( aNumber ) ;aBigInt === 111n // truetypeof aBigInt === 'bigint' // truetypeof 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 的撑腰情况:

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.jsglobalThis === self// node.jsglobalThis === global// browser.jsglobalThis === window

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

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

globalThis 的撑腰情况:

作者:浪里行舟,硕士研究生,专注于前端,运营有个人公众号前端工匠,致力于打造适合初中级工程师能够快速汲取的一系列优质文章。

声明:本文为作者天游娱乐官网平台登陆,版权归其一切。

var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fc03c8be482cb50421070dc544ea100c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var src = document.location.protocol +'//js.passport.qihucdn.com/11.0.1.js?0cafbe109ab248eb7be06d7f99c4009f'; document.write('