前端必刷手写题系列 [8]：Array.flat 浅析

2024-02-28 00:02:12

在前端开发中，数组操作是不可或缺的一部分。而对于数组拍平操作，相信不少开发者并不陌生。最近，Array.flat 作为 ES2019 引入的新方法，让数组拍平操作变得更加简洁高效。本文将深入剖析 Array.flat 的用法和特性，帮助开发者在实际开发中游刃有余地使用它。

理解 Array.flat

Array.flat 方法顾名思义，可以将嵌套数组拍平为一维数组。它接受一个可选参数depth，表示拍平的深度。如果不指定 depth，则默认拍平所有层级。例如：

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

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

指定拍平深度

通过指定 depth 参数，可以控制拍平的深度。例如：

const arr = [[1, 2], [3, 4, [5, 6]]];
const flattenedArr1 = arr.flat(1); // 拍平一层
const flattenedArr2 = arr.flat(2); // 拍平两层

console.log(flattenedArr1); // [1, 2, 3, 4, [5, 6]]
console.log(flattenedArr2); // [1, 2, 3, 4, 5, 6]

与 Array.reduce 的区别

在 Array.flat 出现之前，使用 Array.reduce 方法是实现数组拍平的常见方式。然而，Array.flat 提供了更简洁高效的解决方案。

// 使用 Array.reduce
const arr = [[1, 2], [3, 4, [5, 6]]];
const flattenedArr = arr.reduce((acc, cur) => acc.concat(cur), []);

// 使用 Array.flat
const flattenedArr = arr.flat();