javascript最新版本_js最新使用的几大特性-es2020

大家好，我是刘俊余。

这篇文章主要给大家介绍一下ES2020。

首先大家先不要紧张说又要学一堆东西了。Es2020不会增加很多新特性。

先给大家普及一下。Es2020是什么呢。 明明我们写的是js怎么蹦出来个ES版本。

大家可以这么理解。JavaScript 是 ECMAScript 的方言。ECMAScript是一个标准化了脚本语言相当于汉语。发布一个新版本的 ECMAScript 时，并不意味着所有 JavaScript 引擎都会马上拥有新的特性。这取决于 JavaScript 引擎开发者是否支持最新特性。

换句话说，JavaScript 是 ECMAScript 的方言。

这下子大家了解了。Es对我们前端开发者有多重要了吧。 新特性谷歌浏览器已经支持了。 那我们先睹为快吧。

BigInt

BigInt是一种新的类型

直接上代码

const X = BigInt(Number.MAX_SAFE_INTEGER) + 1,

const Y = BigInt(Number.MAX_SAFE_INTEGER) + 2;

x==y //true

超过最大数值之后计算会出现错误。 这时候我们就可以使用BigInt.使用BigInt之后，我们就可以很准确的表示很大的数字。

const x = 9007199254740994n; //9007199254740994

typeof 9007199254740994n //bigint

const y = 9007199254740998n; //9007199254740998

const z = 10n+10 //VM1348:1 Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

const z = 10n+10n = 20n

matchAll

let str = '我爱javascript,我在写javascript';
let res = str.match(/javascript);  
// ["javascript", index: 2, input: "我爱javascript,我在写javascript", groups: undefined]

这段代码我们通过正则表达式匹配"javascript"这个单词相关的索引位置信息以及内容等等。

这段代码只返回了字符串中匹配的第一个实例。还不是匹配出来的所有实例

那如果我们改变一下正则

let str = '我爱javascript,我在写javascript';
let res = str.match(/javascript/g);  
// ["javascript", "javascript"]

发现只能返回两个结果，数组中并没有结果的索引等其他信息。

let str = '我爱javascript,我在写javascript';
let res = str.matchAll(/javascript/g);  
console.log(...res);

那现在我们可以使用matchAll来匹配所有符合正则的实例并且他会返回该实例的所有信息。

Promise.allSettled

Promise.all 让我们可以使用多个回调，等他们都有了返回结果之后再继续执行某事。

不过promise.all有个缺点就是如果有一个回调reject了。那我们promise就拿不到结果。

我们看一下代码

const promise1 = Promise.resolve('resolve1');
const promise2 = Promise.resolve('resolve2');
const promise3 = Promise.reject('resolve3');
const promiseA = [promise1,promise2,promise3];
Promise.all(promiseA).then((a)=> console.log(a)) 
//Promise {<rejected>: "resolve3"}

我们得到的仅仅告诉我们哪个请求呗reject掉了.

那现在我们使用Promise.allSettled看看我们能得到什么。

const promise1 = Promise.resolve('resolve1');
const promise2 = Promise.resolve('resolve2');
const promise3 = Promise.reject('resolve3');
const promiseA = [promise1,promise2,promise3];
Promise.allSettled(promiseA).then((a)=> console.log(a)) 
//(3) [{…}, {…}, {…}]
//0: {status: "fulfilled", value: "resolve1"}
//1: {status: "fulfilled", value: "resolve2"}
//2: {status: "rejected", reason: "resolve3"}
//length: 3

现在我们得到我们想到的数组了，并且可以看到每个promise的状态，以及返回的结果。

这时候我们不用担心某一个请求挂掉了之后影响其他的请求

optional chaining

这个特性真的特别好用.我觉得这个新特性是这个版本更新的最有用的特性。

还是先看一段代码

const obj = {
    a:{
       b:{
          c:'你找到我了'
       }
    }
}

如果我们要找到c的话，必须要这么写

if(obj && obj.a && obj.a.b && obj.a.b.c){

console.log('这时候你才可以使用c')

}

我们必须要检查C是否在那里，让我们的代码特别难看。

现在我们可以使用optional chining新特性.

const name  = obj.a?.b?.c?.name   // 你找到我了
也就是在我们使用之前加一个问号
const name  = obj.a?.b?.d.name   // undefined

我们快速的浏览了es2020. 如果你们有任何疑问都可以在下面进行留言。大家相互讨论也可以让我知道你已经认真看过这篇文章了。这对我真的很重要。谢谢