ES9 中扁平化数组的两个关键字

扁平化数组是前端中常用的操作，其主要功能是将多维嵌套的数组转化为一维数组。在ES9中，有两个关键字可以帮助我们更容易地实现数组扁平化操作：flat()和flatMap()。

flat()

flat()方法可以将多维嵌套的数组转化为一维数组。该方法可以接受一个可选参数depth，用于指定扁平化嵌套数组的深度，如果不指定，则默认将数组全部扁平化至一维数组。

const arr = [1, 2, [3, 4, [5, 6]]];
const flattenedArr = arr.flat(2);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

在上述示例中，原始数组arr中包含三个元素，其中第三个元素又是一个嵌套数组。通过调用flat(2)方法将该数组的嵌套层数指定为2，将整个数组扁平化为一维数组，最终输出结果为[1, 2, 3, 4, 5, 6]。

需要注意的是，如果原始数组中存在空元素或者空数组，则调用flat()方法时会将这些空元素或空数组移除。另外，flat()方法只能对数组进行一次扁平化操作，如果需要对数组进行多次扁平化操作，则需要多次调用flat()方法。

flatMap()

flatMap()方法与flat()方法类似，都可以用于数组扁平化操作，但它可以在扁平化后对每个元素进行映射操作。该方法接受一个函数作为参数，该函数将被应用于每个扁平化后的数组元素上。

const arr = [1, 2, 3];
const mappedArr = arr.flatMap(num => [num * 2]);
console.log(mappedArr); // [2, 4, 6]

在上述示例中，原始数组arr包含三个元素1、2和3。通过调用flatMap()方法，将每个元素乘以2得到一个新数组，最终输出结果为[2, 4, 6]。

需要注意的是，flatMap()方法除了进行扁平化操作，还对每个元素进行了映射操作。如果需要对数组进行多次扁平化和映射操作，则可以结合flat()和map()方法使用。

const arr = [[1, 2], [3, 4], [5, 6]];
const mappedArr = arr.flatMap(subArr => subArr.map(num => num * 2));
console.log(mappedArr); // [2, 4, 6, 8, 10, 12]

在上述示例中，原始数组arr包含三个子数组，每个子数组中都包含两个数字。通过调用flatMap()方法结合map()方法，将每个元素乘以2得到一个新数组，最终输出结果为[2, 4, 6, 8, 10, 12]。

总结

通过对ES9中的两个关键字flat()和flatMap()的介绍，我们可以更容易地完成数组扁平化操作，并对扁平化后的数组进行映射操作。这些操作对于前端开发中的数据处理和组件开发非常有帮助。需要注意的是，在使用flatMap()方法时，要确保映射操作返回的是一个数组，否则将会抛出错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664470bed3423812e42537fa