记忆关键词

String.prototype.replaceAll
Array.prototype.at
BigInt
??
?.
#
import()
top level await
Proxy
Promise.any

api用法与解释

String.prototype.replaceAll

方法使用和String.prototype.replace()类似，可以替换所有匹配的字符。

replace如果不编写正则，只会替换第一次出现的字符串。

'youzi.laotielaile.com'.replace(/youzi/g,'js'); // js.laotielaile.com

'youzi.laotielaile.com'.replace('youzi','js'); // js.laotielaile.com

复制代码

Array.prototype.at

这个方法可以接收一个正整数或负整数作为参数，返回指定位置的成员。

let arr = ['a','b','c','d'];
arr.at(0);  // a
arr.att(-1); // d

复制代码

BigInt

定义了一种新的数据类型 BigInt，用来表示任意位数的整数。

// 超过 53 个二进制位的数值（相当于 16 个十进制位），无法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

// 可以通过数字后面添加n来转换类型
1000n // BigInt

// 可以使用BigInt函数
BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

复制代码

被称为null判断运算符，它的行为与||类似，但是更严禁。

重点：运算符左侧的值为null或undefined时，才返回右侧的值。 ，也就是说var a = 0??1;时，一定返回的是0；

let exampleNull = null;
let exampleUndefined = undefined;
let exampleNumberZero = 0;
let exampleString = '';

exampleNull ?? 'echo null'; // echo null
exampleUndefined ?? 'echo undefined'; // echo undefined
exampleNumberZero ?? 'echo 0'; // 0
exampleString ?? 'echo ""'; // ''

复制代码

?.被称为链判断运算符。在链式调用的时候判断，判断左侧的对象是否为null或undefined，如果是的，就不再往下运算，返回undefined，如果不是，则返回右侧的值。

let opts = {
    name: "ESM",
    address: {
        code: "100000",
        tel: "010-001100"
    }
};
let code = opts.address && opts.address.code;

// 使用链判断运算符
let code = opts.address?.code;

复制代码

在类中通过哈希前缀#标记的字段都将被私有，注意子类是无法继承的。

class ClassPrivate {
    #privateKey;
    #privateFoo() {
        return 'hello ES2020';
    }
    constructor() {
        this.#privateKey = "#";
    }
}

const instanceExample = new ClassPrivate();
console.log(instanceExample.privateKey); //undefined
console.log(instanceExample.privateFoo); //undefined

复制代码

import()与top level await

top level await是顶层await的使用，可以不用写async就能使用。

使用 import() 语句实现按需加载，返回的是一个 promise。它可以优化静态import。

不通过babel，直接在浏览器中使用的话，需要在script标签中使用type="module"标记，并且值必须是一个静态资源的地址。

import('/modules/index.js').then((module) => {
    console.log(module, module.default)
});

// 可以直接写await，目前使用babel/preset-env,版本为laster 2 version的还不可以。
let example = await import('/modules/index.js');
复制代码

Proxy

Proxy替代了Object defineProperty方法，优势如下：

Proxy是对整个对象的代理，可以深度检测。
对象上新增属性，Proxy可以监听。
Proxy天生对数组类型可以监听，不必重写数组方法。
若对象内部属性要全部递归代理，Proxy可以只在调用的时候递归。
Proxy可以代理function。

使用也很简单，Proxy本质是构造函数，通过new即可产生对象，它接收两个参数：

target表示的就是要拦截（代理）的目标对象
handler是用来定制拦截行为（13种）

一般对象操作配合Reflect使用。

function defineActive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            // 可以做依赖收集
            e.$on(target, key);
            return target[key];
        },
        set(target, key, val) {
            target[key] = val;
            // 触发依赖
            e.$emit(target, key);
        }
    })
};
复制代码

Promise.any

Promise.any 接收一组Promise实例作为参数。

只要其中的一个 promise 成功，就返回那个已经成功的 promise。
如果可迭代对象中，没有一个 promise 成功，就返回一个失败的 promise 和 AggregateError 类型的实例。

try {
  // Any of the promises was fulfilled.
  let promises = Promise.resolve({});
  let PromiseFrist = await Promise.any(promises);
  
  console.log(PromiseFrist);
} catch (err) {
  // All of the promises were rejected.
  console.log(err);
}

作者：右子
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一文学习并掌握常用ES2021

记忆关键词

api用法与解释