在 ES10 中，新增了一个 flat() 方法，它可以将一个多维数组变成一个一维数组。这对于前端开发中处理数据的场景非常有用。本文将详细介绍 Array.flat() 的用法以及注意事项，并提供一些示例代码。
用法
Array.flat() 方法会遍历数组，对于每一个元素，如果其是一个数组，就将其中的元素取出来，并将其合并到新数组中。该方法具有一个可选参数 depth，用于指定需要拉平的数组层数。默认值为 1，表示只拉平一层数组。例如:
const arr = [1, 2, [3, 4]]; console.log(arr.flat()); // [1, 2, 3, 4] const arr2 = [1, [2, [3, [4]]]]; console.log(arr2.flat()); // [1, 2, [3, [4]]] console.log(arr2.flat(2)); // [1, 2, 3, [4]] console.log(arr2.flat(Infinity)); // [1, 2, 3, 4]
在第一个示例中，arr 是一个包含两个数字和一个数组的数组，我们使用 flat() 将其转换为一个一维数组。在第二个示例中，arr2 是一个包含多层嵌套数组的数组，我们使用 flat() 将其转换为一个二维数组和一个数字的数组。最后一个示例中，我们使用 flat() 将其完全展开成一个一维数组。由于我们不知道数组的层数，我们可以使用 Infinity 作为参数。
注意事项
当使用 flat() 方法时，应注意以下几点：
该方法会返回一个新的数组，原数组不会被修改。
如果数组中的某个元素是
null或undefined，则flat()方法会将其忽略掉。如果数组的某个元素不是数组，
flat()方法会将其视为一个只有一个元素的数组并合并进新数组中。如果
depth参数小于或等于 0，则flat()方法会返回原数组，而不会进行任何操作。如果
depth参数大于等于数组层数，则flat()方法会完全展开数组。flat()方法只会拉平一层数组，如果需要拉平多层数组，需要指定depth参数。flat()方法不会改变原数组的值，如果想改变原数组的值，可以使用Array.prototype.splice()或Array.prototype.push()。
示例代码
下面是一些使用 Array.flat() 方法的示例代码：
// 合并多个数组
const arr1 = [1, 2, [3, 4]];
const arr2 = [5, 6, [7, 8]];
const arr3 = [9, 10, [11, 12]];
const combined = [arr1, arr2, arr3].flat();
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// 拉平嵌套的对象数组
const user = {
name: 'John Doe',
hobbies: ['reading', 'hiking', 'music'],
friends: [
{ name: 'Bob', hobbies: ['eating', 'sleeping'] },
{ name: 'Jane', hobbies: ['dancing', 'swimming'] }
]
};
const hobbies = Object.values(user).flat().filter(item => Array.isArray(item));
console.log(hobbies); // [['reading', 'hiking', 'music'], ['eating', 'sleeping'], ['dancing', 'swimming']]在第一个示例中，我们本次合并了三个数组。在第二个示例中，我们拉平了一个嵌套的对象数组，并找到了其中所有的嵌套数组。这些示例说明了 Array.flat() 方法对于前端开发人员的实际应用价值。
总结
我们在本文中学习了 Array.flat() 方法的用法以及需要注意的事项。虽然该方法是一个新功能，但它已成为前端开发中不可或缺的一部分。我们希望您可以掌握该方法，并在实际开发中使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ae371dadd4f0e0ff7c4dc6