在 ES7 中，新增了一个非常实用的数组方法：Array.prototype.flat()。该方法可以将多维数组平展为一维数组，非常适用于处理复杂的数据结构。本文将详细介绍该方法的使用方法和指导意义。
什么是数组平展？
数组平展指的是将多维数组转换为一维数组的过程。例如，将以下多维数组平展为一维数组：
const arr = [[1, 2], [3, [4, 5]]]; // 将 arr 平展为 [1, 2, 3, 4, 5]
在 ES6 之前，我们可以使用递归来实现数组平展：
function flatten(arr) {
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}
const arr = [[1, 2], [3, [4, 5]]];
console.log(flatten(arr)); // [1, 2, 3, 4, 5]但是，这个方法在处理大型数组时可能会导致栈溢出。因此，ES7 中新增的 Array.prototype.flat() 方法成为了更好的选择。
Array.prototype.flat() 方法的使用方法
Array.prototype.flat() 方法可以将多维数组平展为一维数组，并且可以指定平展的层数。该方法的语法如下：
arr.flat([depth])
其中，arr 表示要平展的数组，depth 表示要平展的层数，默认为 1。如果不指定 depth 或者指定为 Infinity，那么将会平展所有层级的数组。
以下是一些示例：
// javascriptcn.com 代码示例 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] const arr4 = [1, 2, [3, [4, 5]]]; console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5]
Array.prototype.flat() 方法的指导意义
Array.prototype.flat() 方法可以使我们更方便地处理复杂的数据结构。例如，在处理树形结构数据时，我们可以使用该方法将树形结构转换为一维数组，方便进行遍历和操作。
以下是一个示例：
// javascriptcn.com 代码示例
const tree = [
{
name: 'node1',
children: [
{
name: 'node2',
children: [
{
name: 'node3'
}
]
},
{
name: 'node4',
children: [
{
name: 'node5',
children: [
{
name: 'node6'
}
]
}
]
}
]
}
];
const nodes = tree.flatMap(node => {
return [node, ...(node.children ? node.children.flatMap(child => child) : [])];
});
console.log(nodes);在上面的示例中，我们使用 Array.prototype.flatMap() 方法将树形结构转换为一维数组。该方法可以将数组中的每个元素映射为一个新的元素，并将所有新元素组合成一个新的一维数组。在这个示例中，我们将每个节点和它的子节点映射为一个新的元素，然后将所有新元素组合成一个新的一维数组。
总结
ES7 中新增的 Array.prototype.flat() 方法可以将多维数组平展为一维数组，非常实用。该方法可以使我们更方便地处理复杂的数据结构，例如树形结构数据。在使用该方法时，需要注意指定平展的层数，以避免栈溢出的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6551d889d2f5e1655db922ec