Finition ES7 ~ ES11

   // 创建promise对象
    const p = new Promise((resolve, reject) => {
        // resolve("用户数据");
        reject("失败了");
    })
    // await表达式 要放在async函数中,一旦失败借助try{...}catch{...}捕获异常
    async function main() {
        try {
            let result = await p;
            console.log(result, '成功');//resolve==> 成功
        } catch (e) {
            console.log(e, '失败');//reject==> 失败
        }
    }
    // 调用函数
    main()

(Application pratique : envoi d'une demande)

Celui de gauche est sous forme de promesse, et celui de droite est sous forme d'async+wait (vous pouvez en recevoir plusieurs à la fois)

2.2. Extension de la méthode objet

    let obj={
        name:'小花',
        year:['2001','2002','2003'],
        class:'九年级一班'
    }
    // 获取对象所有的键
    console.log(Object.keys(obj));//['name', 'year', 'class']
    console.log(Object.values(obj));//获取对象所有的值
    // 将对象的键和值整合为数组
    console.log(Object.entries(obj));//['name', '小花']...
    // 创建Map
    const m=new Map(Object.entries(obj))
    console.log(m.get('class'));//九年级一班

3.ES9

3.1, paramètres de repos, opérateurs d'expansion

    function connect({ host, port, ...user }) {
        console.log(host, port, user);//127.0.0.1 3306 {username: 'root', password: 'root123'}
    }
    connect({
        host: '127.0.0.1',
        port: '3306',
        username: 'root',
        password: 'root123'
    })
    let obj1 = {
        name: 'dan'
    }
    let obj2 = {
        age: '18'
    }
    const total = { ...obj1, ...obj2 }
    console.log(total);//{name: 'dan', age: '18'}

3.2. Expansion régulière

3.2.1. Regroupement de capture nommé (il y a un problème avec la balise a)

    let str = "<h1>标题</h1>"
    const reg1 = /<h1>(.*)<\/h1>/;
    const reg2 = /<h1>(?<text>.*)<\/h1>/;
    const result = reg2.exec(str)
    console.log("result", result);
// ["<h1>标题</h1>", "标题", { groups: { text: '标题' } }]
    let str1 = "href='http://www.baidu.com'"
    const reg = /href='(.*)'/;
// http://www.baidu.com

3.2.2. Assertion directe et assertion inverse

Signification : Trouver du contenu pertinent en fonction des informations spécifiées


    let strVal = 'QAZEDC2354你看这里5555啦啦啦'
    // const reg = /\d+(?=啦)/;//正向断言
    const reg = /(?<=里)\d+/;//反向断言
    console.log(reg.exec(strVal));['5555']

3.2.3.Mode dotAll

Généralement, pour les données dont le contenu est constitué d'éléments HTML, si vous souhaitez intégrer le contenu du texte, vous pouvez l'utiliser.

matchAll dans ES11 peut également obtenir les effets suivants.

    let strHtml = `
    <ul>
        <li>
            <h1>救赎</h1>
            <p>上映日期：11月</p>
        </li>
        <li>
            <h1>晚安</h1>
            <p>上映日期：2月</p>
        </li>
    </ul>`
    // const reg = /<li>\s+<h1>(.*?)<\/h1>\s+<p>(.*?)<\/p>/;//非dotAll模式
    const reg = /<li>.*?<h1>(.*?)<\/h1>.*?<p>(.*?)<\/p>/gs;//dotAll模式,加上g，可以拿到所有
    let result;
    let data = []
    while (result = reg.exec(strHtml)) {
        data.push({ title: result[1], time: result[2] })
    }
    console.log(reg.exec(strHtml), data);

4. ES10

4.1. Object.fromEntries() convertit un tableau bidimensionnel en objet

const result = Object.fromEntries([
  ['name', 'lisa'],
  ['subject', 'Java,html,c++']
])
console.log(result);//{name: 'lisa', subject: 'Java,html,c++'}

ES8 Object.entries() convertit l'objet en un tableau à deux dimensions.Ces deux opérations peuvent être considérées comme des opérations inverses.

const result = Object.entries({ name: 'lisa', subject: 'Java,html,c++' })
console.log(result);

4.2. Méthodes d'extension de chaîne trimStart() et trimEnd()

Il y a trim() dans ES5, qui supprime tous les espaces. Ces deux-là servent à supprimer les espaces de début et de suite.

    let str='   Iloveyou   '

    console.log(str);

    console.log(str.trimStart());

    console.log(str.trimEnd());

4.3. Méthodes d'extension de tableau flat et flatMap

flat(n) : convertit un tableau multidimensionnel en tableau à bits faibles, n est la profondeur

    const arr = [1, 2, 3, [5, 6, 7]]
    console.log(arr.flat());// [1, 2, 3, 5, 6, 7]
    // 三维数组转一维数组 ,深度为2
    const arr2 = [2, 4, 6, [1, 3, [8, 9], 5]]
    console.log(arr2.flat(2));// [2, 4, 6, 1, 3, 8, 9, 5]

flatMap() : convertit le tableau de la boucle en un tableau de bits faibles

    const brr = [9, 8, 7].flatMap(item => [item * 10])
    console.log(brr);// [90, 80, 70](flatMap)   [[90],[80],[70]](map)

5.ES11

5.1, méthode Promise.allSettled()

Dans le cas de plusieurs promesses de manière asynchrone, si vous souhaitez obtenir tous les résultats, vous pouvez utiliser all ou allSettled.

Cependant, le premier signalera une erreur dès qu'une erreur asynchrone se produit, tandis que le second peut obtenir n'importe quel résultat possible.

  const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据---1')
        }, 1000);
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('数据---2')
            reject('数据---2')
        }, 1000);
    })
    const result = Promise.all([p1, p2]);
    const result2 = Promise.allSettled([p1, p2]);
    console.log(result,result2);

5.2. Chaîne String.prototype.matchAll()

L'extraction rapide du contenu du texte HTML, combinée à la mise en boucle, a le même effet que le mode dotAll d'ES9.

    let strHtml = `
    <ul>
        <li>
            <h1>救赎</h1>
            <p>上映日期：11月</p>
        </li>
        <li>
            <h1>晚安</h1>
            <p>上映日期：2月</p>
        </li>
    </ul>`;
    const reg = /<li>.*?<h1>(.*?)<\/h1>.*?<p>(.*?)<\/p>/gs
    const result = strHtml.matchAll(reg)
    // for (let v of result) {
    //     console.log(v);
    // }
    const arr = [...result]
    console.log(arr);

5.3. Opérateur de chaîne en option ?.

?.Trouvez la valeur d'attribut correspondante plus rapidement que les propriétés de l'objet.

  function main(config) {
        // const dbHost = config && config.db && config.db.host;
        const dbHost = config?.db?.host;//可选链操作符
        console.log(dbHost);//120.0.0.1
    }
    main({
        db: {
            host: '120.0.0.1',
            username: 'root'
        }
    })

1.ES7

1.1、includes()

1.2, ** opérateur exposant

2.ES8

2.1. Fonction asynchrone + expression d'attente