ES10 之强大的 Flat() 方法和 flatMap() 方法

ES10 之强大的 Flat() 方法和 flatMap() 方法

在前端编程当中，数据处理是一个非常重要的环节，尤其是在面对海量数据的时候，处理的效率和准确率都是至关重要的。ES10 引入了 flat() 和 flatMap() 方法，大大简化了数组的处理，让数据的操作更加方便和高效。

flat() 方法

顾名思义，flat() 方法是将多维数组“摊平”成一维数组的方法。它的作用是将一个嵌套的数组转换成一个单层的数组。具体使用方法如下：

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

上述代码中，我们定义了一个包含了两层数组的数组，然后使用 flat() 方法将其变成了一个一维数组。在实际应用中，我们可以用 flat() 方法来处理从 API 请求数据多层嵌套的场景，简化数据处理过程，提高代码的可读性和可维护性。

除此之外，flat() 方法还支持参数，用于指定需要“摊平”的层数，示例如下：

const array = [1, 2, [3, [4, 5]]];
const flattenedArray1 = array.flat();
const flattenedArray2 = array.flat(2);
console.log(flattenedArray1); // [1, 2, 3, [4, 5]]
console.log(flattenedArray2); // [1, 2, 3, 4, 5]

从上述代码可以看出，当没有指定 flat() 方法的参数时，默认只将一层的数组“摊平”，而参数为 2 时则将所有的嵌套层数都“摊平”。参数同样适用于值为 undefined 或 null 的元素，它们会被忽略掉。

flatMap() 方法

再来看一下 flatMap() 方法，该方法结合了 map() 和 flat() 两个方法，可以对数组进行映射和“摊平”操作。它的使用方法如下：

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

上述代码中，我们首先定义了一个数组，然后使用 flatMap() 方法对数组进行了映射和“摊平”处理，将每一个元素映射成一个包含自身和自身两倍的数组，最后使用 flat() 方法将所有数组“摊平”成一个单层数组。

需要注意的是，由于 flatMap() 方法内部使用了 map() 方法，所以它与 map() 使用时的返回值类型相关。如果返回值为一个数组，那么 flatMap() 方法会将其“摊平”；如果返回值为一个非数组类型，则会被包装成一个单元素数组，当然也可以返回一个包含多个元素的数组。

值得一提的是，与 map() 方法一样，flatMap() 方法同样具有链式调用的特性，示例如下：

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

在实际应用中，我们可以使用 flatMap() 方法和其他高阶函数如 filter()、reduce() 等来处理数组，简化数据处理过程，提高代码的可读性和可维护性。

总结

ES10 引入的 flat() 和 flatMap() 方法让数组的处理变得更加简单、高效。通过本文的介绍，我们详细了解了 flat() 和 flatMap() 方法的使用方法、注意事项以及如何将它们与其他高阶函数相结合使用。希望通过这篇文章的阅读，对大家实际的前端开发有所指导和启示。

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