ES10 中 Array.flat 和 Array.flatMap 方法的错误示范与解决方式

ES10 中 Array.flat 和 Array.flatMap 是非常实用的数组处理方法，但在使用过程中，也容易犯一些错误。本文将介绍一些常见的错误示范，并提供正确的解决方案，以保证代码的正确性和可读性。

Array.flat 方法

Array.flat 方法用于将一个嵌套的数组展开为一个单层的数组。例如：

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

在使用 Array.flat 方法时，有一些注意事项：

1. flat 方法默认只展开一层

如果需要展开多层嵌套数组，请在调用 flat 方法时传入一个数字参数，表示需要展开的层数。例如：

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

2. flat 方法不会改变原始数组

Array.flat 方法会返回一个新的数组，而不会改变原始数组。如果希望直接修改原始数组，可以使用以下代码：

const nestedArray = [1, 2, [3, 4, [5, 6]]];
nestedArray.splice(0, nestedArray.length, ...nestedArray.flat()); // [1, 2, 3, 4, 5, 6]

在这个例子中，使用 flat 方法将嵌套数组展开后，使用 splice 方法直接修改了原始数组。

Array.flatMap 方法

Array.flatMap 方法与 Array.map 方法类似，但它会先执行一个映射函数，然后将结果展开为一个单层数组。例如：

const numbers = [1, 2, 3];
const doubledNumbers = numbers.flatMap((number) => [number, number * 2]);
console.log(doubledNumbers); // [1, 2, 2, 4, 3, 6]

在使用 Array.flatMap 方法时，也有一些需要注意的地方：

1. flatMap 方法会跳过空数组

Array.flatMap 方法会跳过映射函数返回的空数组。例如：

const numbers = [1, 2, 3];
const doubledNumbers = numbers.flatMap((number) =>
  number % 2 === 0 ? [number, number * 2] : [],
);
console.log(doubledNumbers); // [2, 4]

在这个例子中，映射函数只返回了偶数的倍数，因此结果数组中只有 2 和 4，而不是 1，2，2，4，3，6。

2. flatMap 方法不会递归展开数组

与 Array.flat 方法不同，Array.flatMap 方法不会递归展开数组。例如：

const numbers = [1, 2, 3];
const nestedNumbers = [numbers, [4, 5, 6]];
const doubledNumbers = nestedNumbers.flatMap((number) => [number, number * 2]);
console.log(doubledNumbers); // [[1, 2, 3], [1, 2, 3, 2, 4, 6], [4, 5, 6], [4, 10, 12]]

在这个例子中，嵌套数组没有被展开，因此结果数组中包含了原始数组和嵌套数组。

总结

ES10 中的 Array.flat 和 Array.flatMap 方法是非常实用的数组处理方法，但在使用时也需要注意一些细节。本文介绍了一些常见的错误示范，并提供了正确的解决方案，希望可以帮助读者更好地理解和应用这两个方法。

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