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()

（実際の応用：リクエストの送信）

左側がPromise形式、右側がasync+await形式（一度に複数受信可能）

2.2. オブジェクトメソッドの拡張

    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、残りのパラメータ、展開演算子

    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. 定期的な拡張

3.2.1. 名前付きキャプチャのグループ化 (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. 順方向アサーションと逆方向アサーション

意味: 指定された情報に基づいて関連コンテンツを検索します。


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

3.2.3. dotAll モード

通常、内容が html 要素であるデータの場合、内部のテキスト内容を取得したい場合に使用できます。

ES11 の matchAll では次のような効果も得られます。

    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() は 2 次元配列をオブジェクトに変換します

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

ES8 Object.entries() はオブジェクトを 2 次元配列に変換しますが、これら 2 つの操作は逆操作と言えます。

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

4.2. 文字列拡張メソッドtrimStart()およびtrimEnd()

ES5にはスペースをすべて削除するtrim()があり、この2つは先頭と後ろのスペースを削除するものです。

    let str='   Iloveyou   '

    console.log(str);

    console.log(str.trimStart());

    console.log(str.trimEnd());

4.3. 配列拡張メソッド flat および flatMap

flat(n): 多次元配列を低ビット配列に変換します。n は深さです

    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(): ループ内の配列を低ビット配列に変換します。

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

5.ES11

5.1、Promise.allSettled()方法

複数の Promise を非同期で取得する場合、すべての結果を取得したい場合は、all または allSettled を使用できます。

ただし、前者は非同期エラーが発生するとエラーを報告しますが、後者は考えられるあらゆる結果を取得できます。

  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. 文字列 String.prototype.matchAll()

HTML テキストコンテンツを迅速に抽出し、ループと組み合わせると、ES9 の dotAll モードと同じ効果が得られます。

    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. オプションのチェーン演算子?

?.オブジェクトのプロパティよりも早く、対応する属性値を見つけます。

  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、含む()

1.2、** 指数演算子

2.ES8

2.1. async 関数 + await 式