7個ECMAScript 11的新特性，你需要了解一下
1、String.prototype.matchAll
// matchAll 用于字符串批量匹配正則, 返回一個 可迭代對象let str = `<ul><li><a>肖生克的救贖</a><p>上映日期: 1994-09-10</p></li><li><a>阿甘正傳</a><p>上映日期: 1994-07-06</p></li></ul>`;// 聲明正則const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;// 調(diào)用方法const result = str.matchAll(reg);const arr = [...result];console.log(arr);
2、類的私有屬性
class Person {// 公有屬性name;// 私有屬性constructor(name,age,weight) {this.name = name;this.this.}intro(){console.log(this.name);console.log(this.console.log(this.}}const boy = new Person('張三',22,'80kg');console.log(boy.name);// Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class// console.log(boy.#age);// console.log(boy.#weight);boy.intro();
3、Promise.allSettled
// Promise.allSettled()不管參數(shù)中的promise是fulfilled還是rejected，都會等參數(shù)中的實(shí)例都返回結(jié)果，包裝實(shí)例才會結(jié)束。// 聲明兩個promise對象const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('商品數(shù)據(jù) -1');}, 1000)});const p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('出錯啦');}, 1000)});// 調(diào)用 allSettled 方法const result = Promise.allSettled([p1,p2]);console.log(result);/*Promise {<pending>}__proto__: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: Array(2)0: {status: "fulfilled", value: "商品數(shù)據(jù) -1"}1: {status: "rejected", reason: "出錯啦"}length: 2__proto__: Array(0)*/
4、可選鏈操作符
// 項(xiàng)目中經(jīng)常會遇到深層次嵌套屬性的驗(yàn)證，我們所能做的就是通過&&每層依次驗(yàn)證，這樣看起來代碼很繁瑣，但又不得不這樣做。// 為了簡化代碼, 使用" ?. "可選鏈?zhǔn)讲僮鞣? 會自動檢測 ? 前面的對象是否存; 存在 則調(diào)用 , 不存在 則為 undefinedfunction main(config){// const dbHost = config && config.db && config.db.host;const dbHost = config?.db?.host;console.log(dbHost); // 192.168.1.100}main({db:{host:'192.168.1.100',user:'root'},cache:{host:'192.168.1.200',user:'admin'}});
5、動態(tài) import 導(dǎo)入
// 動態(tài) import ,用于模塊懶加載, 用到一個模塊的時候再加載, 沒用到就不加載// 使用 improt(路徑) 方法, 返回一個promise 對象<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button id="btn">點(diǎn)擊按鈕</button></body><script>let btn = document.getElementById('btn');btn.onclick = function(){import('./34.ES11-動態(tài)import.js').then(module=>{console.log(module);module.hello();});}</script></html>// 34.ES11-動態(tài)import.jsexport function hello() {console.log('hello');}
6、bigInt
// 大整型let n = 123n;console.log(n, typeof (n)); // 123n "bigint"// 函數(shù)let n2 = 123;console.log(BigInt(n2)); // 123n// console.log(BigInt(1.2)); //報(bào)錯// 大數(shù)值運(yùn)算let max = Number.MAX_SAFE_INTEGER;console.log(max); // 9007199254740991console.log(max + 1); // 9007199254740992console.log(max + 2); // 9007199254740992console.log(BigInt(max)); //9007199254740991nconsole.log(BigInt(max) + 1n); // 9007199254740992nconsole.log(BigInt(max) + 2n); //9007199254740993n
7、 globalThis 對象
// global 是一個變量, 永遠(yuǎn)指向頂級對象// 在js中console.log(globalThis); // window// 在node中console.log(globalThis); // global
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號 
評論
圖片
表情