ES7 ~ ES11

  • 数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // includes 用来检测数组中是否包含某个元素，返回布尔值
    let arr = [12, 3, 5, 6];

    console.log(arr.includes(2)); // false
    console.log(arr.includes(3)); // true

    // keys/values/entries
    // ............数组         json
    // for...in    下标（key）   key
    // for...of    值（value）   X （不适用json, json是不可迭代对象，没有实现iterator接口）

    // keys    =>  所有的key拿出来
    for(let key of arr.keys()){
        console.log(key); //0 1 2 3
    }

    // values  =>  所有的value拿出来
    for(let valu of arr.values()){
        console.log(valu); //12 3 5 6
    }

    // entries =>  所有的key-value对拿出来
    for(let entry of arr.entries()){
        console.log(entry); //[0, 12] [1, 3] [2, 55] [3, 6]
    }

  • 对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    let school = {
        neme: '学校名字',
        cities: ['北京', '上海', '天津']
    }

    //获取对象的所有值
    Object.keys(school);

    //获取对象所有值
    Object.values(school);

    //entries 获取对象所有键值对
    Object.entries(school);

    //创建map
    const m = new Map(Object.entries(school));
    console.log(m.get('cities'));

    //对象属性的描述对象
    console.log(Object.getOwnPropretyDescriptors(school));

  • 求幂 Math.pow() 与 Math.pow() 一样

    1
    2
    console.log(Math.pow(3, 8));  // 6561
    console.log(3**8);            // 6561

  • 补位 padStart/padEnd

    1
    2
    3
    4
    5
    console.log('(' + 'abc'.padStart(5) + ')');     // (  abc)
    console.log('(' + 'abc'.padStart(5, 0) + ')');  // (00abc)

    console.log('(' + 'abc'.padEnd(5) + ')');       // (abc  )
    console.log('(' + 'abc'.padEnd(5, 0) + ')');    // (abc00)

  • 语法容忍度

    1. [12, 6, 8] => [12, 6, 8,]
    2. function(a, b, c){} => function(a, b, c,){}

  • async await => generator yield

    1. 不依赖于外部的runner了 统一/性能
    2. 可以用箭头函数

  • async 和 await

    async 和 await 两种语法结合可以让异步代码像同步代码一样

    async
    · async 函数的返回值为 promise函数
    · promise 对象的结果由 async 函数执行的返回值决定
    await
    · await 必须写在 async 函数中
    · await 右侧的表达式一般为 promise 对象
    · await 返回的是 promise 成功的值
    · await 的 promise 失败了。就会抛出异常，需要通过 try…catch 捕获处理

  • Rest 参数与 spread 扩展运算符再ES6中已经引入，不过ES6中只针对于数组，在ES9中为对象提供了像数组一样的 rest 参数和扩展运算符

  • trimStart 清除字符串前面空白； trimEnd 清除字符串后面空白

    1
    2
    3
    4
    let str = '   love   ';

    str.trimStart();
    str.trimEnd();

  • flat flatMap

    1
    2
    3
    4
    5
    6
    7
    let arr = [1, 2, 3, 4, [5, 6, 7]];
    //flat 将多维数组降为低维数组
    //参数位深度，是一个数字
    arr.flart(1);

    //flatMap
    let result = arr.flatMap(item => [item * 10]);

  • Symbol.prototype.description 获取 Symbol 的描述字符串

    1
    2
    3
    let s = Symbol('哈哈哈');

    console.log(s.description); //哈哈哈

  • 私有属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    class Person{
            //公有属性
            name;
            //私有属性
            #age;
            #weight;
            //构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }

            intro(){
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }

        //实例化
        const girl = new Person('晓红', 18, '45kg');

        // console.log(girl.name);
        // console.log(girl.#age);     //报错
        // console.log(girl.#weight);  //报错

        girl.intro();

  • Promise.allSettled Promise.all

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //声明两个promise对象
    const p1 = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve('商品数据 - 1');
        },1000)
    });

    const p2 = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve('商品数据 - 2');
            // reject('出错啦!');
        },1000)
    });

    //调用 allsettled 方法
    // const result = Promise.allSettled([p1, p2]);  //无论哪个对象报错错都会返回成功

    // const res = Promise.all([p1, p2]);            //都成功才会反成功，有一个错就会报错

    console.log(res);

  • String.prototype.matchAll

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    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

    //调用方法
    const result = str.matchAll(reg);

    // for(let v of result){
    //     console.log(v);
    // }

    const arr = [...result];

    console.log(arr);

  • 可选链操作符 ?.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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',
                username: 'root'
            },
            cache: {
                host: '192.168.1.200',
                username:'admin'
            }
        })

  • 动态import加载

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // import * as m1 from "./hello.js";
    //获取元素
    const btn = document.getElementById('btn');

    btn.onclick = function(){
        import('./hello.js').then(module => {
            module.hello();
        });
    }

  • 新数据类型 BigInt 大整形 用于大数值的运算

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //大整形
    // let n = 521n;
    // console.log(n, typeof(n));

    //函数
    // let n = 123;
    // console.log(BigInt(n));
    // console.log(BigInt(1.2));

    //大数值运算
    let max = Number.MAX_SAFE_INTEGER;
    console.log(max);
    console.log(max + 1);
    console.log(max + 2);

    console.log(BigInt(max))
    console.log(BigInt(max) + BigInt(1))
    console.log(BigInt(max) + BigInt(2))

  • globalThis 绝对全局对象