个人认为目前比较好用的ECMAScript（16-20）新特性

ECMAScript(16、17、18、19)新特性

Array.prototype.includes

• includes 是数组上的简单实例方法,可以轻松查找到数组中是否包含指定内容(包括NaN)
• 返回布尔值

    const arr = [1, 2, 3, 4, 5, NaN]
    if (arr.indexOf(3) >= 0) {
        console.log(true)
    }
    if (arr.includes(3)) {
        console.log(true)
    }

    arr.includes(NaN) // true
    arr.indexOf(NaN) // -1

Object.values()

• Object.values()是类似于Object.Keys()的新函数,但返回对象自身属性的所有值,不包括原型链中的任何值

    const cars = { BMW: 3, Tesla: 2, Toyota: 1 }
    const vals = Object.keys(cars).map(key => cars[key])
    console.log(vals) // [3, 2, 1]

    const values = Object.values(cars)
    console.log(values) // [3, 2, 1]

Object.entries()

• Object.entries()与Object.keys 类似，但它不是仅返回键，而是以数组方式返回键和值, 这使得在循环中使用对象或将对象转换为映射等操作变得非常简单.

    const cars = { BMW: 3, Tesla: 2, Toyota: 1 }

    Object.keys(cars).forEach(key => {
        console.log('key: ' + key + ' value: ' + cars[key])
    })

    for(let [key, value] of Object.entries(cars)) {
        console.log(`key: ${key} value: ${value}`)
    }

    const cars = { BMW: 3, Tesla: 2, Toyota: 1 }

    const map1 = new Map()
    Object.keys(cars).forEach(key => {
        map1.set(key,cars[key])
    })

    const map = new Map(Object.entries(cars)) // map {BMW: 3, Tesla: 2, Toyota: 1}

异步迭代(Asynchronous Iteration)

• 这是一个及其好用的新特性,让我们能够非常容易的创建异步循环代码

    const promise = [
        new Promise(resolve => resolve(1)),
        new Promise(resolve => resolve(2)),
        new Promise(resolve => resolve(3)),
    ]

    // 使用 for-of 遍历不会等待每一个Promise resolve
    async test1() => {
        for(const obj of promise) {
            console.log(obj) // promise promise promise
        }
    }

    // 使用 for-await-of 遍历会等待每一个Promise resolve之后,进入下次循环
    async test2() => {
        for await (const obj of promise) {
            console.log(obj) // 1, 2, 3
        }
    }

    test1()
    test2()

Object.fromEntries()

• 在JavaScript中,将数据从一种格式转换为另一种格式非常常见,为了便于将对象转换为数组,ES2017引入了Object.entries()方法. 此方法将对象作为参数,并以[key,value]的形式返回对象自己可枚举字符串键控属性对的数组

    const obj = {one: 1, two: 2, three: 3};
    console.log(Object.entries(obj));
    // [["one", 1], ["two", 2], ["three", 3]]

• 如果我想要做相反的事情并将键值对列表转换为对象呢? ES2019引入Object.fromEntries()方法,此静态方法允许你轻松的将键值对列表转换为对象

    const myArray = [['one', 1], ['two', 2], ['three', 3],]
    const obj = Object.fromEntries(myArray)
    console.log(obj) // {'one': 1, 'two': 2, 'three': 3,}

PS: 传递给Object.fromEntries()的参数可以是实现迭代协议的任何对象,只要它返回一个两元素,类似于数组的对象即可

例如: Object.fromEntries()将Map对象作为参数,并创建一个新对象,其键和对应值有Map中的对给出:

    const map = new Map()
    map.set('one', 1)
    map.set('two', 2)
    map.set('three', 3)
    const obj = Object.fromEntries(map)
    console.log(obj)

• 使用Object.fromEntries()的另一种情况是处理URL的查询字符串

    const paramsString = 'param1=foo&param2=baz'
    const searchParams = new URLSearchParams(paramsString)
    Object.fromEntries(searchParams)

此代码中,查询字符串将传递给URLSearchParams()构造函数,然后将返回值(即URLSearchParams对象实例)传递给Object.fromEntries()方法,结果是一个包含每个参数作为属性的对象

trimStart() and trimEnd()

• trimStart()和trimEnd()方法再实现与trimLeft和trimRight相同

    const str = "  string  "
    // ES2019
    console.log(str.trimStart()) // "string  "
    console.log(str.trimEnd()) // "  string"

flat() and flatMap()

• flat()方法可以将多维数组展平一维数组

    const arr = ['a', 'b', 'c', ['d', 'e',]]
    const flattened = arr.flat()
    console.log(flattened)

• 以前经常使用的是reduce()或者concat()来展平多维数组

    const arr = ['a', 'b', 'c', ['d', 'e',]]
    const flattened1 = [].concat.apply([], arr)
    // 或者
    const flattened2 = [].concat(...arr)

• 数组存在空值展平时将被丢弃

    const arr = ['a', '', '', 'b', ['c', 'd']]
    const fattened = arr.flat()
    console.log(fattened)

• flat()还接受一个可选参数,该参数指定嵌套数组应该被展平的级别数,如果未提供参数,则将使用默认值1

    const arr = [10, [20, [30]]]
    console.log(arr.flat()) // [10, 20, [30]]
    console.log(arr.flat(1)) // [10, 20, [30]]
    console.log(arr.flat(2)) // [10, 20, 30]

• flatMap()方法是将map()和flat()组合成一个方法.首先使用提供的函数的返回值创建一个新数组,然后连接该数组的所有子数组元素

    const arr = [4.25, 19.99, 25.5]
    console.log(arr.map(value => [Math.round(value)])) // [[4], [20], [26]]
    console.log(arr.flatMap(value => [Math.round(value)])) // [4, 20, 26]

• 数组将被展平的深度级别为1,如果要从结果中删除项目,只需返回一个空数组

    const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]]
    arr.flatMap(value => {
        if(value >= 10) {
            return [] // 删除大于10的
        } else {
            return Math.round(value)
        }
    })
    // [7, 8, 9]

PS: 除了正在处理的当前元素外,回调函数还将接收元素的索引和数组本身的引用

Symbol对象的description属性

• 在创建Symbol时,可以为调试目的向其添加description(描述).有时候,能够直接访问代码中的description是很有用的
• Symbol对象添加了只读属性description,该对象返回包含Symbol描述的字符串

    let sym = Symbol('foo')
    console.log(sym.description) // foo

    sym = Symbol()
    console.log(sym.description) // undefined

    sym = Symbol.for('bar')
    console.log(sym.description) // bar

可选的catch

• try catch语句中的catch有时候并没有用

    try {
        // 使用浏览器可能尚未实现的功能
    } catch (unused) {
        // 这里回调函数已经帮我们处理还的错误
    }

• 上述代码中catch回调的信息并没有用处,但这样写是为了避免SyntaxError错误,ES2019可以省略catch周围的括号

    try {
        // huhu
    } catch {
        // lala
    }