在 ES10 中使用 Array.flat 和 Array.flatMap 方法错误的跟踪

前言

在 ECMAScript 2019 (即 ES10) 中，新增了两个常用数组方法：Array.flat() 和 Array.flatMap() 分别用于展平多维数组和进行一次数组映射并展平结果数组。虽然这两个方法带来了便利，但在使用时，我们也需要注意一些潜在的错误和注意事项。

本文将结合具体实例，详细介绍在 ES10 中使用 Array.flat() 和 Array.flatMap() 方法时容易遇到的错误和解决方案，为大家提供一些指导和帮助。

一、Array.flat() 的错误

1.1 flat() 方法仅能按一层展平

使用 Array.flat() 方法时，需要注意其只能按照一层展平数组。如果数组内部嵌套了多层数组，需要连续多次使用 flat() 方法才能展平。下面我们来看一个例子：

const arr1 = [1, 2, [3, 4]];
const arr2 = [1, 2, [3, [4, 5]]];

console.log(arr1.flat()); // [1, 2, 3, 4]
console.log(arr2.flat(2)); // [1, 2, 3, 4, 5]

在上面代码中，arr1 仅有一层嵌套，因此调用 arr1.flat() 方法仅展平一层，返回 [1, 2, 3, 4]。而在 arr2 中，有两层嵌套，因此我们需要使用传参的方式展平两层数组，才能得到期望的结果 [1, 2, 3, 4, 5]。

1.2 flat() 方法对空元素的操作

当数组中存在空元素（即 undefined）时，使用 flat() 方法可能会出现一些问题。下面来看一个例子：

const arr1 = [1, 2, 3, , 4];
const arr2 = [1, 2, [3, , 4]];

console.log(arr1.flat()); // [1, 2, 3, 4]
console.log(arr2.flat()); // [1, 2, 3, undefined, 4]

在上面代码中，arr1 中的第四个元素为空，因此调用 flat() 方法时，它会被忽略，最终返回结果为 [1, 2, 3, 4]。而在 arr2 中，内部数组的第二个元素为空，因此在对它进行 flat() 操作时，会被认为是一个空位，因此最终结果数组中会包含一个 undefined。针对这种情况，我们可以使用 flat() 方法的附带参数来忽略空位：

console.log(arr2.flat(Infinity)); // [1, 2, 3, 4]

1.3 flat() 方法对对象类型的操作

flat() 方法默认会移除数组中的非数组对象类型。但是，如果你想保留数组中的对象类型，可以使用 flatMap() 方法或传入 Infinity 参数。下面来看一个例子：

const arr1 = [1, 2, {a: 3}];
const arr2 = [1, 2, [{a: 3}]];

console.log(arr1.flat()); // [1, 2, {a: 3}]
console.log(arr2.flat()); // [1, 2, {a: 3}]

console.log(arr1.flat(Infinity)); // [1, 2, {a: 3}]
console.log(arr2.flat(Infinity)); // [1, 2, {a: 3}]

在上面代码中，arr1 中的第三个元素是一个对象，因此展平数组时，它被保留了下来；而在 arr2 中，第三个元素是一个嵌套数组，因此，展平数组后，它会被认为是一个非数组对象，也被保留了下来。

二、Array.flatMap() 的错误

2.1 flatMap() 方法的精准应用

Array.flatMap() 方法可以将映射后的结果数组一次性展平，它可以有效地减少代码量，增加代码可读性。下面来看一个例子：

const arr1 = [1, 2, 3];

console.log(arr1.flatMap(x => [x * 2])); // [2, 4, 6]
console.log(arr1.map(x => [x * 2]).flat()); // [2, 4, 6]

在上面的例子中，我们使用了 Array.flatMap() 方法对数组 arr1 进行一次映射并展平返回结果。与传统的使用 map() 内部再使用 flat() 的方法相比，使用 flatMap() 更加简洁明了。 Array.flatMap() 方法可以提高程序的可读性，更加清晰地展示代码的目的和实质。

2.2 flatMap() 方法与嵌套数组

与 Array.flat() 不同，Array.flatMap() 方法映射的结果数组内部可以有嵌套数组，这些被嵌套的数组会被自动展开。下面来看一个例子：

const arr1 = [1, 2, 3];

console.log(arr1.flatMap(x => [[x], [x*2]]));  // [[1], [2], [2], [4], [3], [6]]

在上面的例子中，我们对数组 arr1 进行一次映射，并返回一个二维的数组。通过使用 Array.flatMap()，一次性展平了得到的结果数组，所以最终返回的是一个一维数组。

2.3 对 flatMap() 方法的额外处理

当使用 Array.flatMap() 方法时，有时需要对返回的数组进行进一步处理，此时需要对 callbacks 参数传递给 flatMap() 方法的回调函数调用返回的每个元素进行预处理。下面来看一个例子：

const arr1 = ['我是小明', '我是小红', '', '我是小刚'];

console.log(arr1.flatMap(x => x.split('')).flatMap(x => x.toUpperCase()));
// [ '我', '是', '小', '明', '我', '是', '小', '红', '我', '是', '小', '刚' ]

在上面的例子中，我们首先使用 flatMap() 对数组 arr1 进行了一次映射和展平，获取到以下数组：

[ '我', '是', '小', '明', '我', '是', '小', '红', '', '我', '是', '小', '刚' ]

上面的数组中包含一个空字符串，为了得到想要的结果，我们采用了链式调用的方式对返回的结果进行了额外处理，并使用了 split() 和 toUpperCase() 方法完成了顺利的处理。

三、总结

本文通过引入具体实例，详细的介绍了在 ES10 中使用 Array.flat() 和 Array.flatMap() 方法中可能出现的错误以及解决方案。通过本文的学习，相信读者们可以更好的应用这两个常用数组方法，使代码更加简洁通俗易懂，提高了开发效率。

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