ES9 新特性：Array.prototype.{flat,flatMap}() 方法详解

介绍

ES9 为数组新增了两个方法：Array.prototype.flat() 和 Array.prototype.flatMap()。

Array.prototype.flat() 方法用于将多维数组扁平化为一维数组，而 Array.prototype.flatMap() 则是先对每个元素进行映射，再对结果进行扁平化。这两个方法都返回新的一维数组。

使用方法

Array.prototype.flat()

Array.prototype.flat() 方法可以接收一个可选的整数参数，表示要扁平化的层数。如果不传参数，默认值为 1。如果传入 Infinity，表示要将所有嵌套数组扁平化为一维数组。

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

Array.prototype.flatMap()

Array.prototype.flatMap() 方法接收一个函数作为参数，该函数会对数组中的每个元素进行处理。处理后的结果会被扁平化为一个新的一维数组。

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

上面的例子中，我们对数组中的每个元素都进行了乘以 2 的操作，然后把处理后的结果扁平化成了一个新的数组。

案例应用

扁平化多维数组

我们可以使用 Array.prototype.flat() 方法轻松地将多维数组转换为一维数组。

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

数组展开

在 JavaScript 中，我们可以使用展开运算符将数组展开成多个参数。

console.log(...[1, 2, 3]); // 1 2 3

使用 Array.prototype.flatMap() 方法，我们可以将数组中的每个元素映射成一个新的数组，然后将这些新的数组扁平化成一个新的数组。

const arr = ['hello', 'world', ''];
const flatMapArr = arr.flatMap(x => x.split(' ')); // ['hello', 'world']

上面的例子中，我们先将每个字符串转换成一个新的数组，然后扁平化成了一个新的一维数组。

总结

ES9 中新增的 Array.prototype.flat() 和 Array.prototype.flatMap() 方法可以更加简便地处理数组，提高开发效率。具体使用时，需要根据实际需求选择不同的方法，并注意方法参数的使用。

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