ES9 中的 Array.prototype.flat/deep Flat 详解

在 ES9 中，JavaScript 引入了两个新的数组方法：Array.prototype.flat() 和 Array.prototype.flatMap() ，这两个方法可以让我们更方便地处理嵌套数组。本文将详细介绍 Array.prototype.flat() 方法。

flat() 方法

Array.prototype.flat() 方法可以将嵌套的数组“扁平化”，即将多维数组转换为一维数组。该方法返回一个新的数组，不会改变原数组。

语法

arr.flat([depth])

参数：

• depth：可选，指定要“扁平化”的层数，默认为 1。

示例

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

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

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

上述示例中，arr1 中有一个嵌套数组，执行 flat() 方法后，得到一个一维数组。arr2 中有两个嵌套数组，执行 flat() 方法后，只“扁平化”了一层，得到一个包含一个嵌套数组的一维数组。arr3 中有两个嵌套数组，执行 flat(2) 方法后，“扁平化”了两层，得到一个一维数组。

deep Flat

有时候我们需要“扁平化”多维数组，可以使用递归的方式来实现“深度”扁平化。下面是一个实现“深度”扁平化的示例：

const deepFlat = (arr) => {
  return arr.reduce((acc, val) => {
    return Array.isArray(val) ? acc.concat(deepFlat(val)) : acc.concat(val);
  }, []);
}

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

上述示例中，我们定义了一个 deepFlat() 函数，使用 reduce() 方法实现递归“深度”扁平化。该函数接收一个数组作为参数，如果该数组中的元素是数组，就递归调用 deepFlat() 函数，否则将该元素添加到结果数组中。

总结

Array.prototype.flat() 方法可以将多维数组“扁平化”，非常方便。如果需要“深度”扁平化，可以使用递归的方式实现。掌握这个方法，可以让我们更方便地处理多维数组，提高开发效率。

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