ES7

Array.prototype.includes
includes()方法用來檢測數(shù)組用是否包含某個元素，返回布爾值。

const arr = ["1","2","3"];
console.log(arr.includes("1"));//true
console.log(arr.includes("4"));//false

指數(shù)操作符
在ES7中引入指數(shù)運(yùn)算符**,用來實(shí)現(xiàn)冪運(yùn)算，功能和Math.pow結(jié)果相同。

console.log(2**10);//1024
console.log(Math.pow(2,10));//1024

ES8

async和await
async和await兩種語法結(jié)合可以讓異步代碼像同步代碼一樣。

async函數(shù)
1、async函數(shù)的返回值為promise對象。
2、promise對象的結(jié)果由async函數(shù)執(zhí)行的返回值決定。
await表達(dá)式
1、await必須寫在async函數(shù)中；
2、await右側(cè)的表達(dá)式一般為promise對象；
3、await返回的是promise成功的值；
4、await的promise失敗了，就會拋出異常，需要通過try...catch捕捉處理。

const p = new Promise((resolve, reject)=>{
    //成功
    //resolve("用戶數(shù)據(jù)");
    // 失敗
    reject("失敗了");
});
async function main() {
    try {
        let result = await p;
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

Object.values和Object.entries
1、Object.values()方法返回一個給定對象的所有可枚舉值的數(shù)組；
2、Object.entries()方法返回一個給定對象自身可遍歷屬性[key,value]的數(shù)組；

Object.getOwnPropertyDescriptors
該方法返回指定對象所有自身屬性的描述對象

let obj = {
    name: "名字",
    cities: ["濟(jì)南", "泰安"]
};
console.log(Object.keys(obj));//["name","cities"]
console.log(Object.values(obj));//["名字", ["濟(jì)南", "泰安"]]
console.log(Object.entries(obj));//[["name","名字"],["cities", ["濟(jì)南", "泰安"]]]
console.log(Object.getOwnPropertyDescriptors(obj));
/*Object
cities: {value: Array(2), writable: true, enumerable: true, configurable: true}
name: {value: '名字', writable: true, enumerable: true, configurable: true}
[[Prototype]]: Object*/

另外：entries可以配合map使用

const map = new Map(Object.entries(obj));

ES9

擴(kuò)展運(yùn)算符和rest參數(shù)
rest參數(shù)與spread擴(kuò)展運(yùn)算符在ES6中已經(jīng)引入，不過ES6中只針對于數(shù)組；
在ES9中為對象提供了像數(shù)組一樣的rest參數(shù)和擴(kuò)展運(yùn)算符。
rest參數(shù)，用...開頭，如果多傳了參數(shù)會放在這個對象中

function connect({ host, port, ...user }) {
    console.log(host);
    console.log(port);
    console.log(user);//{username: 'admin', password: 'admin', type: 'master'}
}
connect({
    host: "127.0.0.1",
    port: 3306,
    username: 'admin',
    password: 'admin',
    type: 'master'
});

擴(kuò)展運(yùn)算符可以用于對象的合并

const one = {
    name: '名字'
}
const two = {
    age: 18
}
const obj = { ...one, ...two };
console.log(obj);//{name: '名字', age: 18}

正則擴(kuò)展
1、命令捕獲分組

let str = '<a 
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);//https://www.baidu.com
console.log(result.groups.text);//百度

2、反向斷言

let str = 'ffj大法術(shù)法換行44444我我我';
/*//正向斷言
const reg = /\d+(?=我)/;
console.log(reg.exec(str)[0]);//44444*/
//反向斷言
const reg = /(?<=行)\d+/;
console.log(reg.exec(str)[0]);//44444

3、dotAll模式
增加模式修正符s，可以除換行符以外的任意單個字符

let str = `
    <ul>
        <li>
            <a href="">學(xué)習(xí)</a>
            <p>CSS</p>
        </li>
        <li>
            <a href="">練習(xí)</a>
            <p>JavaScript</p>
        </li>
    </ul>`;
const reg = /<li>.*?<a href=\"\">(.*?)<\/a>.*?<p>(.*?)<\/p>/gsi;
let data = [];
let result;
while (result = reg.exec(str)) {
    data.push({ title: result[1], time: result[2] });
}

console.log(data);//[{title: '學(xué)習(xí)', time: 'CSS'},{title: '練習(xí)', time: 'JavaScript'}]

ES10

對象擴(kuò)展方向Object.fromEntries
將二維數(shù)組轉(zhuǎn)換為對象，將Map轉(zhuǎn)換為對象，用法正好與ES8的Object.entries相反。

const result = Object.fromEntries([
     ["name", "名字"],
     ["age", 18]
]);
console.log(result);//{name: '名字', age: 18}

const map = new Map();
map.set(`name`,`名字`);
map.set(`age`,18);
const result = Object.fromEntries(map);
console.log(result);//{name: '名字', age: 18}

字符串方法擴(kuò)展
trimStart和trimEnd

let str = `    I love you      `;
console.log(str.trimStart());//`I love you      `
console.log(str.trimEnd());//`    I love you`

數(shù)組方法擴(kuò)展
1、flat：將多維數(shù)組轉(zhuǎn)化為低維數(shù)組

const arr = [1,2,3,[4,5,[6,7]]];
console.log(arr.flat());//[1, 2, 3, 4, 5, [6, 7]]
console.log(arr.flat(2));//[1, 2, 3, 4, 5, 6, 7]
console.log(arr.flat().flat());//[1, 2, 3, 4, 5, 6, 7]

2、flatMap：替換map方法降低數(shù)組維度

const arr = [1,2,3];
const result = arr.flatMap(item=>[item * 10]);
console.log(result);//[10,20,30]

Symbol.prototype.description

let s = Symbol(`名字`);
console.log(s.description);//名字

ES11

私有屬性
私有屬性只能在class內(nèi)部調(diào)用。

class Person {
    name;
    #age;
    constructor(name, age) {
        this.name = name;
        this.#age = age;
    }
    intro() {
        console.log(`${this.name}的年齡是${this.#age}歲`)
    }
}
const girl = new Person(`小紅`,18);
console.log(girl.name);//#age是私有屬性這里不能方法，訪問會報(bào)錯
girl.intro();//小紅的年齡是18歲```

Promise.allSettled
Promise.allSettled是JavaScript中用于處理多個Promise的靜態(tài)方法，它會等待所有傳入的Promise完成（無論成功或失敗），并返回一個包含每個Promise結(jié)果的對象數(shù)組;

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(`x - 1`);
    }, 1000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(`x - 2`);
    }, 1000);
});

const result = Promise.allSettled([p1,p2]);
console.log(result);

String.prototype.matchAll
ES9-dotAll模式里的就可以優(yōu)化為：

let str = `
    <ul>
        <li>
            <a href="">學(xué)習(xí)</a>
            <p>CSS</p>
        </li>
        <li>
            <a href="">練習(xí)</a>
            <p>JavaScript</p>
        </li>
    </ul>`;
const reg = /<li>.*?<a href=\"\">(.*?)<\/a>.*?<p>(.*?)<\/p>/gsi;
const result = str.matchAll(reg);
const arr = [...result];
let data = [];
for (const item of arr) {
    data.push({ title: item[1], time: item[2] });
}
console.log(data);//[{title: '學(xué)習(xí)', time: 'CSS'},{title: '練習(xí)', time: 'JavaScript'}]

可選鏈操作符
?.

function main(config) {
    //之前寫法：
    // const dbHost = config && config.db && config.db.host;
    const dbHost = config?.db?.host;
    console.log(dbHost);
}
main({
    db: {
        host: `192.168.1.100`
    }
}); 

動態(tài)import
可以實(shí)現(xiàn)用到的時(shí)候才引用，其中import方法返回的是一個promise對象。

//hello.js
export function hello() {
    alert(`你好`);
}
//調(diào)用
import(`./hello.js`).then(module => {
    module.hello();
});

BigInt類型
主要用于更大數(shù)值的運(yùn)算，可以使用BigInt()方法將普通數(shù)值轉(zhuǎn)換為BigInt類型

let n = 521n;
//BigInt(521);
console.log(n,typeof(n));//521n 'bigint'

注意：浮點(diǎn)型不能轉(zhuǎn)換為BigInt類型，BigInt類型不能與其他類型進(jìn)行運(yùn)算。

絕對全局對象globalThis
globalThis 是 JavaScript 中用于跨環(huán)境統(tǒng)一訪問全局對象的標(biāo)準(zhǔn)化屬性，旨在解決不同運(yùn)行時(shí)環(huán)境下全局對象引用方式不一致的問題。