ES10 新增的数组 flat() 和 flatMap() 方法

在 JavaScript 中，数组是很重要和常用的数据结构，我们经常需要对数组进行扁平化处理和映射操作。ES10 新增了两个数组方法 flat() 和 flatMap()，为我们处理数组提供了更加简洁、高效、易于理解的方法。

flat() 方法

flat() 方法可以将一个多维数组进行扁平化，生成一个新的一维数组。它可以接受一个可选的参数，用于指定需要扁平化的深度（默认为 1），意味着只能处理一层嵌套的数组，而不能处理多层嵌套的数组。

const arr = [1, 2, [3, 4]];

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

可以通过指定深度来处理多层嵌套的数组：

const arr = [1, 2, [3, [4, 5]]];

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

如果不想扁平化 undefined、null 和空值，可以传入 Infinity 作为深度参数：

const arr = [1, 2, [3, [4, [5, 6, null, undefined]]]];

const newArr = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]

flatMap() 方法

flatMap() 方法是 flat() 和 map() 方法的组合。它对数组中的每个元素进行映射操作，然后把映射的结果扁平化成一个新的数组。

const arr = [1, 2, 3];

const newArr = arr.flatMap(x => [x * 2]); // [2, 4, 6]

实际上，flatMap() 方法相当于 map() 方法后再调用 flat() 方法。可以用下面的代码实现相同的功能：

const arr = [1, 2, 3];

const newArr = arr.map(x => [x * 2]).flat(); // [2, 4, 6]

但是，flatMap() 方法比 map() 后再调用 flat() 方法更加高效和简洁，因为它减少了中间数组的创建。

总结

ES10 中新增的数组方法 flat() 和 flatMap() 可以极大地方便我们对数组进行扁平化和映射操作，提升了代码的可读性和效率。但是，需要注意的是，这两个方法不是所有浏览器都支持，如果需要兼容旧浏览器，需要使用 polyfill 库进行兼容。

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