ES10 中新增的 flat 和 flatMap 方法实现数组扁平化

在 JavaScript 中，数组是一种常用的数据类型。在实际开发中，经常会遇到需要将多维数组扁平化的情况。在 ES10 中，新增了两个方法：flat() 和 flatMap()，可以方便地实现数组扁平化。

1. flat() 方法

flat() 方法可以将多维数组扁平化为一维数组。该方法可以接受一个参数，表示扁平化的深度。如果不传参数，则默认扁平化一层。

示例代码：

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

上面的代码中，flat(2) 表示将 arr 数组扁平化到第二层，即将 [[3, [4, 5]]] 扁平化成 [3, [4, 5]]，最终得到一维数组 [1, 2, 3, 4, 5]。

需要注意的是，flat() 方法会移除数组中的空位（undefined），例如：

const arr = [1, , 2, , 3];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3]

上面的代码中，arr 数组中存在两个空位，使用 flat() 方法扁平化后，空位被移除了。

2. flatMap() 方法

flatMap() 方法在 flat() 方法的基础上，提供了对数组元素的映射功能。该方法接受一个函数作为参数，该函数会被应用到数组的每个元素上，并返回一个新的数组。然后使用 flat() 方法将新数组扁平化。

示例代码：

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

上面的代码中，flatMap() 方法将数组 arr 中的每个元素乘以 2，得到一个新数组 [2, 4, 6]，然后使用 flat() 方法将其扁平化成一维数组。

需要注意的是，flatMap() 方法会自动去除返回值中的空位（undefined），例如：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x, undefined]);
console.log(flatMapArr); // [1, 2, 3]

上面的代码中，函数返回值中包含了一个空位（undefined），使用 flatMap() 方法后，该空位被自动去除了。

3. 总结

ES10 中新增的 flat() 和 flatMap() 方法可以方便地实现数组扁平化。flat() 方法可以将多维数组扁平化为一维数组，flatMap() 方法在 flat() 方法的基础上，提供了对数组元素的映射功能。需要注意的是，flat() 和 flatMap() 方法会移除数组中的空位（undefined）。

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