彻底拆解扁平化数组：性能&使用场景

前端

2023-09-14 03:59:09

JavaScript 是一种用于构建交互式 Web 应用程序的强大语言。它提供了多种方法来处理和操作数据，其中一个常见的任务是扁平化数组。

什么是扁平化数组？

扁平化数组是指将多维数组转换为一维数组的过程。这在处理数据时非常有用，因为一维数组更易于遍历和操作。

在 JavaScript 中，有几种方法可以扁平化数组：

flat() 方法
扩展运算符（...）
Array.prototype.reduce() 方法

1.1 `flat()` 方法

flat() 方法是扁平化数组的最简单方法。它接受一个参数，该参数指定要扁平化的数组的深度。

例如，要将一个二维数组扁平化为一维数组，可以使用以下代码：

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

console.log(flatArr); // [1, 2, 3, 4]

如果要将一个数组扁平化为任意深度，可以使用以下代码：

const arr = [[1, 2], [3, [4, 5], 6], 7, [8, [9, 10]]];
const flatArr = arr.flat(Infinity);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

1.2 扩展运算符（...）

扩展运算符（...）也可以用来扁平化数组。与 flat() 方法不同，扩展运算符不会创建一个新的数组，而是将数组中的元素直接添加到另一个数组中。

例如，要将一个二维数组扁平化为一维数组，可以使用以下代码：

const arr = [[1, 2], [3, 4]];
const flatArr = [...arr[0], ...arr[1]];

console.log(flatArr); // [1, 2, 3, 4]

如果要将一个数组扁平化为任意深度，可以使用以下代码：

const arr = [[1, 2], [3, [4, 5], 6], 7, [8, [9, 10]]];
const flatArr = [...arr].flat(Infinity);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

1.3 `Array.prototype.reduce()` 方法

Array.prototype.reduce() 方法也可以用来扁平化数组。该方法接受一个回调函数和一个初始值作为参数。回调函数用于将数组中的元素逐个累积到初始值中。

例如，要将一个二维数组扁平化为一维数组，可以使用以下代码：

const arr = [[1, 2], [3, 4]];
const flatArr = arr.reduce((acc, cur) => acc.concat(cur), []);

console.log(flatArr); // [1, 2, 3, 4]

如果要将一个数组扁平化为任意深度，可以使用以下代码：

const arr = [[1, 2], [3, [4, 5], 6], 7, [8, [9, 10]]];
const flatArr = arr.reduce((acc, cur) => acc.concat(cur.flat(Infinity)), []);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

在性能方面，flat() 方法是最快的，扩展运算符其次，Array.prototype.reduce() 方法最慢。

以下是在 Chrome 浏览器中对不同方法进行的性能测试结果：