ES7 新特性：Array.prototype.flat() 详解

ES7 新特性中的 Array.prototype.flat() 可以让我们更加轻松地将嵌套层级的数组扁平化。这个 API 很实用，可以让我们更加高效地操作数组数据。

基础用法

在使用这个 API 之前，我们先回顾一下基础用法。通常，我们可以使用 reduce 方法来将二维数组降维为一维数组。

const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.reduce((pre, cur) => pre.concat(cur), []);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

这个方法的基础用法还是比较简单的，但是如果涉及到多层嵌套的数组，就需要考虑递归调用的问题，而这时候 Array.prototype.flat() 就派上用场了。

基础示例

Array.prototype.flat() 可以将多维数组转换为一维数组，非常方便。下面是基础示例代码：

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

这个基础示例中，我们将两层嵌套的数组变成了一层，非常容易上手，而在实际工作中，我们用到的往往是更加复杂的多层嵌套情况。

多层嵌套情况

在实际工作中，我们经常会碰到多层嵌套的数组，这时候使用 Array.prototype.flat() 可以事半功倍。下面是一个多层嵌套的例子：

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

在这个例子中，我们使用了 flat() 方法的第二个参数，用来指定需要扁平化的层数。如果我们不指定这个参数，那么默认扁平化一层。实际上，这个参数也可以设置为 Infinity，表示一直扁平化到最后一层。

与 map 和 filter 结合使用

由于 Array.prototype.flat() 可以将多维数组转换为一维数组，与 map 和 filter 等方法结合使用，可以大大减少代码量，提高开发效率。下面是一个例子：

const arr = [1, [2, 3], 4, [5, [6, 7]]];
const flatArr = arr
  .flat(Infinity)
  .filter((item) => item % 2 === 0)
  .map((item) => '$' + item);
console.log(flatArr); // ['$2', '$4', '$6']

在这个例子中，我们将多层嵌套的数组扁平化为一维数组之后，再使用 filter 和 map 方法，过滤出偶数并在前面添加美元符号。

总结

Array.prototype.flat() 是 ES7 中的新特性，它可以轻松地将多维数组转换成一维数组，还可以设置扁平化的层数。与 map 和 filter 等方法结合使用，可以大大减少代码量，提高开发效率。

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