es10新增特性

链式调用?

js中在调用某个非对象上的属性时会报TypeError的错误，如下：

let obj = {
    name: 'aaa',
    age: 18
}

console.log(obj.school.address) //Uncaught TypeError: Cannot read property 'address' of undefined

使用链式调用之后，js语句会输出undefined，不会报错

console.log(obj.school?.address)  //undefined

空值合并??

为变量 fruit 赋值，如果当前值不存在，则赋为默认值 'apple'，可以使用逻辑运算符||实现，如下：

let value = 0;
let fruit = value || 'apple'
console.log(fruit) // apple

js假值有false、null、0、""、undefined 和 NaN，|| 逻辑符会将假值过滤掉，但如果我们不想要过滤 0 或者 '' 字符，这时可以使用新增合并属性 ??，合并符只会过滤掉 null和 undefined，如下：

fruit = NaN ?? 'apple'
console.log(fruit) //NaN

fruit = 0 ?? 'apple'
console.log(fruit) //0

fruit = null ?? 'apple'
console.log(fruit) // 'apple'

私有属性

es10 为类class新增了私有属性，私有属性只能够在类内部进行调用，如下：

class Fruit {
    #shape = 'circle';
    constructor(size){
        this.size = size;
    }
    getShape(){
        return this.#shape;
    }
}

let apple = new Fruit();
console.log(apple.getShape()) // circle
console.log(apple.#shape) // Uncaught SyntaxError: Private field '#shape' must be declared in an enclosing class

静态字段

类定义之后，类里面的方法是无法直接访问的，只能通过定义实例来调用，但是es10新增了 static 字段，通过 static 可以直接调用类方法，如下：

class Fruit {
    constructor(size){
        this.size = size;
    }
    getColor(){
        return 'red'
    }
    static getShape(){
        return 'circle';
    }
}

Fruit.getFruit() //circle
Fruit.getColor() //Uncaught TypeError: Fruit.getColor is not a function

Array.flat(n)

展开嵌套数组的方法，默认展开一层，如果想要展开多层，可以传入参数n，如

let arr = [1,2,[3,[4,5]]]

arr.flat() // [1,2,3,[4,5]]
arr.flat(2) //  [1,2,3,4,5]

// Infinity 可以展开所有的嵌套
arr.flat(Infinity) // [1,2,3,4,5]

Array.flatMap

flatMap 就是 flat + map 的组合操作：如下

[1,2,3].flatMap(num=>[num, num*num]) // [1, 1, 2, 4, 3, 9]

String.trimStart、String.trimEnd

去除字符前后的空格，同 trimLeft、trimRight

'   123'.trimStart() //'123'
'123     '.trimStart() //'123'