ES10 的全新的 Array.flat 和 Array.flatMap 教程

在 JavaScript 的 ES10 中，提供了全新的 Array.flat 和 Array.flatMap 方法，它们可以很方便地处理嵌套数组的操作。

Array.flat

Array.flat 方法是用来将嵌套数组展开成一维数组。它可以传入一个数值参数，代表要展开的层数。如果不传参数，默认为 1，即展开一层。如果需要展开所有层，可以传入 Infinity。下面是一些示例代码：

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, [4, 5]]];
arr2.flat(); // [1, 2, 3, [4, 5]]

const arr3 = [1, 2, [3, [4, 5]]];
arr3.flat(2); // [1, 2, 3, 4, 5]

实际上，Array.flat 方法还可以接受一个可选参数，代表展开数组时要去除的空位。默认情况下不去空位，可以传入 true 去除。下面是一些示例代码：

const arr4 = [1, , [2, , 3]];
arr4.flat(); // [1, undefined, 2, undefined, 3]
arr4.flat(2); // [1, undefined, 2, undefined, 3]
arr4.flat(2, true); // [1, 2, 3]

Array.flatMap

Array.flatMap 方法则是在展开嵌套数组的基础上，对展开后的一维数组进行操作，并返回一个新的数组。常见的场景是展开后对每个元素进行操作，然后再合并起来。它接受一个函数作为参数，这个函数会被应用于每个元素上，并返回一个新的数组。最后这些数组会被 flat 方法合并成一个数组。下面是一些示例代码：

const arr5 = [1, 2, 3];
arr5.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

const arr6 = ['hello', 'world'];
arr6.flatMap(x => x.split('')); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

在使用 Array.flatMap 时，注意函数返回值必须是一个数组，否则会报错。如果需要返回一个非数组的值，可以先将这个值转成数组再返回。下面是一些示例代码：

const arr7 = [1, 2, 3];
arr7.flatMap(x => x % 2 ? [x, x * 2] : x); // [1, 2, 4, 3, 6]

总结

ES10 的 Array.flat 和 Array.flatMap 方法可以方便地处理嵌套数组的操作，可以大大简化代码。注意这两个方法在老的浏览器（比如 Internet Explorer）中不一定支持，需要进行兼容性处理。

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