ES2019 方法之新增 array.flat() 的说明

在 ES2019 中新增了一个非常实用的方法——array.flat()，这个方法可以让我们更加方便地处理多层嵌套的数组。在本文中，我们将详细介绍这个方法，并提供一些示例代码，帮助大家更好地理解和应用它。

什么是 array.flat()？

array.flat() 是一个数组的实例方法，可以将多层嵌套的数组“拍平”成一维数组。它的用法非常简单，只需调用数组实例的 flat() 方法即可：

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

在上面的示例中，arr 数组包含了三层嵌套，使用 flat() 方法后，它被“拍平”成了一维数组。

array.flat() 的参数

array.flat() 方法接受一个可选的参数，用于指定“拍平”数组的深度。这个参数默认值为 1，表示只“拍平”一层，如果设置为 Infinity，则会“拍平”所有层级的嵌套。下面是示例代码：

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

array.flat() 的应用场景

array.flat() 方法在实际开发中非常实用，它可以用来解决处理多层嵌套的数组的问题。例如，我们要从一个多层嵌套的数组中提取所有数字，并计算它们的和：

const arr = [1, 2, [3, 4, [5, 6]]];
const sum = arr.flat(Infinity)
              .filter(item => typeof item === 'number')
              .reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 21

在上面的示例中，我们先使用 flat() 方法将 arr 数组“拍平”，然后使用 filter() 过滤出其中的数字，最后使用 reduce() 方法计算它们的和。

array.flat() 和扩展运算符的比较

在 ES6 中，我们已经有了扩展运算符(...)，也可以用来“拍平”数组。那么，array.flat() 和扩展运算符有什么区别呢？

实际上，array.flat() 方法和扩展运算符在功能上非常相似，都可以将多层嵌套的数组“拍平”。不过，它们的使用场景略有不同。

扩展运算符主要用于将一个数组展开成另一个数组的一部分，例如：

const arr1 = [1,2,3];
const arr2 = [4,5,...arr1,6,7];
console.log(arr2); // [4, 5, 1, 2, 3, 6, 7]

在上面的示例中，我们使用了扩展运算符将 arr1 数组“展开”到 arr2 数组的中间。

而 array.flat() 方法则更适合用于将多层嵌套的数组“拍平”，例如：

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

在上面的示例中，我们使用了 flat() 方法将 arr 数组“拍平”，从而得到一个一维数组 flatArr。

总结

array.flat() 是一个非常实用的数组方法，它可以让我们更加方便地处理多层嵌套的数组。在实际开发中，使用它可以大大简化我们的代码。

同时，我们还需要注意它和扩展运算符的区别，根据实际需求选择不同的方法。

希望本文对大家有所帮助，感谢阅读！

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