ES11：对 JavaScript Array.Flat()、FlatMap() 进行比较-JavaScript中文网-JavaScript教程资源分享门户

在 ES11 中，JavaScript 引入了两个新的数组方法：Array.flat() 和 Array.flatMap()。这两个方法都可以用于展平嵌套的数组，但它们之间有一些重要的区别。本文将对这两个方法进行比较，并探讨它们的学习和指导意义。

Array.flat()

Array.flat() 方法可以将嵌套的数组展平为一个新的数组。默认情况下，它只会展平一层，但是可以通过传递一个可选的参数来指定要展平的层数。例如：

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

在上面的例子中，我们传递了参数 2，表示要展平两层。如果不传递参数，则默认只展平一层。

Array.flat() 方法还可以去除数组中的空项。例如：

const arrayWithEmptyItems = [1, 2, , 4, 5];
const flattenedArray = arrayWithEmptyItems.flat();
console.log(flattenedArray); // [1, 2, 4, 5]

在上面的例子中，我们的原始数组中有一个空项，但是在展平后的数组中，它被去除了。

Array.flatMap()

Array.flatMap() 方法与 Array.map() 方法类似，但是它会将返回的数组展平为一个新的数组。例如：

const array = [1, 2, 3];
const mappedArray = array.map((x) => [x * 2]);
console.log(mappedArray); // [[2], [4], [6]]
const flatMappedArray = array.flatMap((x) => [x * 2]);
console.log(flatMappedArray); // [2, 4, 6]

在上面的例子中，我们使用 Array.map() 方法将原始数组中的每个元素乘以 2，并返回一个包含这些新值的数组。然后我们使用 Array.flatMap() 方法对这个数组进行展平，得到一个包含所有新值的单一数组。

需要注意的是，Array.flatMap() 方法只能展平一层。如果需要展平多层，仍然需要使用 Array.flat() 方法。

总结

Array.flat() 和 Array.flatMap() 方法都可以用于展平嵌套的数组，但是它们之间有一些重要的区别：

Array.flat() 方法可以展平多层数组，并且可以去除空项。
Array.flatMap() 方法可以将返回的数组展平为一个新的数组，但是只能展平一层。

在实际开发中，我们可以根据具体的需求选择使用哪个方法。

示例代码

// javascriptcn.com 代码示例
// Array.flat()
const nestedArray = [1, 2, [3, 4, [5, 6]]];
const flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

const arrayWithEmptyItems = [1, 2, , 4, 5];
const flattenedArray = arrayWithEmptyItems.flat();
console.log(flattenedArray); // [1, 2, 4, 5]

// Array.flatMap()
const array = [1, 2, 3];
const mappedArray = array.map((x) => [x * 2]);
console.log(mappedArray); // [[2], [4], [6]]
const flatMappedArray = array.flatMap((x) => [x * 2]);
console.log(flatMappedArray); // [2, 4, 6]

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65582139d2f5e1655d25a6c2