详解ECMAScript2019/ES10新属性

每年都有一些新的属性进入ECMA262标准，今年发布的ECMAScript2019/ES10同样也有很多新的特性，本文将会挑选一些普通开发者会用到的新属性进行深入的解读。

Array.prototype.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN

简单来说flat这个函数就是按照一定的深度depth将一个深层次嵌套的数组拍扁, 例子:

const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10]console.log(nestedArr.flat())// [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10]console.log(nestedArr.flat(2))// [1, 2, 3, 4, 5, 6, [7, [8], 9], 10]console.log(nestedArr.flat(3))// [1, 2, 3, 4, 5, 6, 7, [8], 9, 10]console.log(nestedArr.flat(4))// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]console.log(nestedArr.flat(Infinity))// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

由上面的例子可以看出flat会按照指定的深度depth将一个数组扁平化，如果需要将数组完全拍扁变成一维数组，则指定depth为无限大，即是Infinity，相反如果不指定深度，其默认值是1。

Array.prototype.flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient. -- MDN

简单来说flatMap等于一个数组先调用完map函数再调用flat函数将其扁平化，扁平化的深度固定为1，先通过一个简单的例子感受一下:

const myArr = [1, 2, 3]myArr .map(n => [n * n]) // [[1], [4], [9]] .flat() // [1, 4, 9]// 用flatMap可以一步到位myArr.flatMap(n => [n * n]) // [1, 4, 9]

从上面的例子来看flatMap如果只是将flat和map做了一个简单的组合好像可有可无，其实不然，flatMap有个强大的功能是可以在map的时候添加和删除元素，这个无论是map还是filter都没有这个功能。

要想删除某一个元素只需要在mapper函数里面返回一个空的数组[], 而增加元素只需在mapper函数里面返回一个长度大于1的数组，具体可以看下面的例子：

// 假如我们想要删除掉原数组里面所有的负数，同时将单数转换为一个复数和1const a = [5, 4, -3, 20, 17, -33, -4, 18]//    |/ / x  |  | /  x  x  |//    [4,1, 4,  20, 16,1,     18]a.flatMap(n => (n < 0) ? []: // 删除负数 (n % 2 == 0) ? [n] : // 保留复数         [n - 1, 1] // 单数变为一个复数和1)// [4, 1, 4, 20, 20, 16, 1, 18]

Object.fromEntries()

The Object.fromEntries() method transforms a list of key-value pairs into an object. --MDN

fromEntries方法将一个iterable对象返回的一系列键值对(key-value pairs)转换为一个object。先看一个简单的例子理解一下:

// key-value pairs数组const entriesArr = [['k1', 1], ['k2', 2]]console.log(Object.fromEntries(entriesArr)// {k1: 1, k2: 2}const entriesMap = new Map([ ['k1', 1], ['k2', 2]]) // {"k1" => 1, "k2" => 2}console.log(Object.fromEntries(entriesMap))// {k1: 1, k2: 2}

再来看一个自定义的iterable对象例子深入理解一下: