ES7 的 `flat()` 和 `flatMap()` 方法解决多层嵌套数组问题

ES7 的 flat() 和 flatMap() 方法解决多层嵌套数组问题

在前端开发中，我们经常会遇到多层嵌套数组的问题。例如，一个数组中包含了多个嵌套数组，需要将它们展开成一个简单的一维数组。在以前，我们可以使用 reduce() 方法来实现这个功能，但是 flat() 和 flatMap() 方法的引入让这个问题变得更加简单和快速。

flat() 方法简介

flat() 方法是数组的一个原生方法，用于将多层嵌套的数组展开成一个简单的一维数组。它的语法如下：

array.flat([depth])

其中，depth 参数用于指定展开的深度，如果不指定 depth 参数，则默认为 1。如果指定了 depth 为一个大于等于 0 的整数，则展开多层嵌套数组，如果 depth 为一个小于 0 的整数，则相当于没有作用。

下面是使用 flat() 方法将多层嵌套数组展开成一维数组的示例代码：

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

const deepArr = [1, 2, [3, 4, [5, 6]]];
const allFlatArr = deepArr.flat(Infinity);
console.log(allFlatArr); // [1, 2, 3, 4, 5, 6];

flatMap() 方法简介

flatMap() 方法是 flat() 方法的一个衍生方法，它对每一个数组元素都执行一个映射函数，然后将返回值展开成一个简单的一维数组。它的语法如下：

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 函数用于对每一个数组元素进行映射，thisArg 参数用于指定 callback 函数中 this 关键字的指向。

下面是使用 flatMap() 方法将嵌套数组中的元素进行平方处理后展开成一维数组的示例代码：

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

与 reduce() 方法的比较

使用 reduce() 方法可以解决多层嵌套数组的问题，但是相比 flat() 和 flatMap() 方法，它的代码量相对较大。下面是使用 reduce() 方法将多层嵌套数组展开成一维数组的示例代码：

const arr = [1, 2, [3, 4, [5, 6]]];
const reduceArr = arr.reduce((acc, cur) => Array.isArray(cur) ? acc.concat(cur.reduce((a, c) => a.concat(c), [])) : acc.concat(cur), []);
console.log(reduceArr); // [1, 2, 3, 4, 5, 6]

可以看到，使用 reduce() 方法实现这个功能的代码比较冗长。而使用 flat() 和 flatMap() 方法则代码更加简洁，易于阅读和理解。

总结

本文介绍了 ES7 中的 flat() 和 flatMap() 方法，它们可以非常方便地解决多层嵌套数组的问题，并且代码简洁易读。在实际开发中，我们可以根据具体需求选择使用这两个方法中的一个。

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