如何使用 ES10 中的 flat() 和 flatMap() 方便地处理数组
ES10（或称为 ECMAScript 2019）是 JavaScript 的最新版本，其中包含了很多新的特性。其中 flat() 和 flatMap() 是在处理数组时非常有用的函数，能够以更方便的方式进行数组的处理。在这篇文章中，我们将介绍 flat() 和 flatMap() 的使用方法，以及它们在实际项目中的应用。
flat() 函数
我们先来看 flat() 函数。flat() 函数可以将多维数组“扁平化”，也就是将多维数组变成一维数组。通俗来讲，就是将数组中的元素全部拉平，放在同一个数组内。
flat() 函数第一次应用返回一个新数组，该数组从原始数组中提取所有嵌套的数组中的元素。默认情况下，它只会“扁平化”一层，如果原数组中还有嵌套数组，需要使用嵌套的 flat() 函数来继续“扁平化”。
const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]上述代码中，我们定义了一个包含嵌套数组的数组。使用 flat() 函数后，返回一个新数组，该数组中包含原数组中所有的元素。
除了默认“扁平化一层”，flat() 函数还可以接收一个参数用于指定要“扁平化”的层数，如下所示。
const arr = [1, 2, [3, [4]]];
const flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3, 4]上述代码中，我们定义了一个包含两层嵌套数组的数组，并使用 flat() 函数“扁平化”整个数组。
flatMap() 函数
接下来我们来看 flatMap() 函数。flatMap() 函数其实就是 flat() 函数和 map() 函数的组合体。它可以先对数组进行 map() 操作，再对返回的新数组进行 flat() 操作。
const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(item => [item, item * 2]);
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]上述代码中，我们首先定义了一个数组 arr，然后使用 flatMap() 函数，将原数组 arr 映射成一个新数组，这里的映射规则是将每个元素分别乘以 1 和 2，并将它们作为一个新数组返回。最后再使用 flat() 函数将新数组“扁平化”。最后的输出结果是一个新的扁平化后的数组 [1, 2, 2, 4, 3, 6]。
除了使用箭头函数，flatMap() 函数还可以接受一个函数作为参数，例如：
const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(function (item) {
return [item, item * 2];
});
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]实际运用
那么 flat() 和 flatMap() 函数在实际项目中如何应用呢？以下是一些示例。
1. 使用 flat() 函数合并多个数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const mergedArr = [].concat(...[arr1, arr2, arr3]);
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]
// 使用 flat() 函数简化代码
const mergedArr2 = [arr1, arr2, arr3].flat();
console.log(mergedArr2); // [1, 2, 3, 4, 5, 6]2. 使用 flatMap() 函数生成新的数组
const arr = [1, 2, 3];
const newFlatMapArr = arr.flatMap(item => [item * 2]);
console.log(newFlatMapArr); // [2, 4, 6]3. 使用 flat() 和 map() 函数操作多维数组
const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.flat().map(item => item * 2);
console.log(flatArr); // [2, 4, 6, 8, 10, 12]总结
ES10 中的 flat() 和 flatMap() 函数可以方便地操作数组。使用这两个函数可以简化代码，提高开发效率。在实际项目中，我们可以根据实际需求选择不同的函数来处理数组。不过需要注意的是，这两个函数可能会带来一定的性能开销，因此在大型项目中需要进行测试和优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b46771add4f0e0ffd534f4