ES2021新特性 ES12

• es6入门教程 https://es6.ruanyifeng.com/

空值合并运算符

• 获取对象的属性的时候，我们经常需要为null/undefined的属性设置默认值。现在我们都是使用||运算符来处理，例如

let userInfo = {};
let name = userInfo.name || 'Lucky';

• 但是false,0,’ ‘值被替换掉，导致运算结果不准确
• 空合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为空(null)或未定义(undefined)时返回其右侧操作数，否则返回其左侧操作数。

const foo = null ?? 'default string';
const baz = 0 ?? 42;
console.log(foo); // default string
console.log(baz); // 0

.前边加? 可选链运算符

• 我们有时候为了访问深层嵌套的属性，一不小心就会报undefined的错，需要写一个很长的&&链去检查每个属性是否存在，代码如下
• 业务代码中经常会遇到这样的情况，a对象有个属性b,b也是一个对象有个属性c,
• 我们需要访问c，经常会写成a.b.c，但是如果f不存在时，就会出错

const a = {
    b: {
        c: 123,
    }
}
console.log(a.b.c); // 123;
console.log(a.f.c); // f不存在所以会报错

• ECMAScript2020定义可选链运算符解决该问题，通过在.之前添加一个?将键名变成可选

let person = {};
console.log(person?.profile?.age ?? 18); // 18

• 可选链运算符也可以运用在方法上

let age = getUserInfo?.().data?.info?.age;

String.prototype.replaceAll

• String 原型上的 replaceAll() 函数允许替换子字符串的所有实例，而无需使用正则表达式。
• 如果在字符串上使用了 replace()，它只会替换该值的第一个实例。
• 另一方面，replaceAll() 提供替换该值的所有实例的功能
• 在字符串操作里面我们在某些业务场景下需要做的操作是去替换字符串里面的某些内容，比如字符串aabbccbbdd中要求删掉字符b,
• 那么一般能想到的有两种方法，第一种是用正则去删除，另一种是使用for循环遍历字符。

// 使用正则
let str = 'aabbccbbdd'
console.log(str.replace(/b/g,''))
// 循环遍历
let str = 'aabbccbbdd'
let res = ''
for (let i = 0, len = str.length; i < len; i++) {
    if(str[i] != 'b'){
        res += str[i]
    }
}
console.log(res)

• 使用replaceAll

let str = 'aabbccbbdd'
let res = str.replaceAll('b','') // 'aaccdd'

• 使用replace()

let str = 'aabbccbbdd'
console.log(str.replace('b','0')) //'aa0bccbbdd'

数字分隔符

• 数字分隔符允许您在文字数字的数字之间添加下划线，这使它们更具可读性。
• 当文件被解析时，这些下划线将被自动去除。请参阅以下代码片段以了解如何使用数字分隔符。

let n1 = 1_000_000_000;
console.log(n1); // This will print: 1000000000
let n2 = 1_000_000_000.150_200
console.log(n2); // This will print: 1000000000.1502
let n3 = 0x95_65_98_FA_A9
console.log(n3); // This will print: 641654651561
let n4 = 155_326_458_156_248_168_514n
console.log(n4); // This will print: 155326458156248168514n

- 注意，下划线不能连续，也不能放在开头和结尾，放在开头，就变成字符串了，会被当成变量名，放在结尾会直接报语法错误

逻辑赋值运算符

逻辑或分配(|| =)

• x || = y：仅当 x 为假时，才将 y 赋值给 x。如果 x 是真，则不会进行赋值运算。

//简写
x ||= y
//全写
x || (x = y)
//前置条件
x = 0, y = 10
//根据前置条件运行的结果 
10

逻辑与分配（&& =）

• x && = y：仅当 x 为真时，才将 y 赋值给 x。如果 x 为假，则不会进行赋值运算。

//简写
x &&= y
//全写
x && (x = y)
//前置条件
x = 1, y = 11 
//根据前置条件运行的结果 
11

逻辑空分配（?? =）

= x ?? = y：仅当 x 为 null 或 undefined 时，才将 y 分配给 x。如果 x 既不是 null 也不是 undefined 则不会进行赋值。

//简写
x ??= y
//全写
x ?? (x = y)
//前置条件
x = null, y = 12
//根据前置条件运行的结果 
12

异步加载模块 - import()

• 有时候我们需要动态加载一些模块，这时候就可以使用 import() 了

// logger.js
export default {
    log: function() {
        console.log(...arguments);
    }
};

import('./logger.js')
  .then((module)=>{
  module.default.log('p9');
})

• 当然，也可以使用await进行等待

let module = await import('./logger.js');

通过 # 给 class 添加私有变量

class Counter{
    #number = 10
    increment(){
        this.#number++;
    }
    getNum(){
        return this.#number;
    }
}
const counter = new Counter();
counter.increment();
console.log(counter.getNum()) // 11
console.log(counter.#number)  // SyntaxError