如何使用 JavaScript 展平数组

作者

在 JavaScript 中展平数组

How to Flatten an Array using JavaScript

使用该flat()方法来展平数组，例如const flat = arr.flat().

该flat方法采用一个参数，该参数指示嵌套数组应展平的深度。该方法返回一个新数组，子数组元素连接到其中。

索引.js
const arr = [['a'], ['b', 'c'], ['d']];

const flat = arr.flat();

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们使用
Array.flat
方法来展平数组。

该方法采用的唯一参数是数组应展平到的深度级别。

我们没有为参数传递值，因此它默认为1.

如果您的数组嵌套更深并且您保留默认深度值
1，则数组不会完全变平。

索引.js
const arr = [[['a']], [['b', 'c']], [['d']]];

// ✅ 1 Level
const flat1 = arr.flat(1);
// 👉️ [ ['a'], ['b', 'c'], ['d'] ]
console.log(flat1);

// ✅ 2 Levels
const flat2 = arr.flat(2);
// 👉️ ['a', 'b', 'c', 'd']
console.log(flat2);

如果您不知道数组的嵌套深度并且想要完全展平它，请将其Infinity作为参数传递给该flat()方法。

索引.js
const arr = [[['a']], [['b', 'c']], [['d']]];

const flat = arr.flat(Infinity);
// 👉️ ['a', 'b', 'c', 'd']
console.log(flat);

传递Infinity给该flat方法将数组展平到一个级别。

使用 concat() 在 JavaScript 中展平数组

使用concat()带有扩展语法 (…) 的方法来展平数组，例如[].concat(...arr).

扩展语法解压数组并将子数组作为参数传递给方法。该concat()方法将子数组连接成一个新数组并返回结果。

索引.js
const arr = [['a'], ['b', 'c'], ['d']];

const flat = [].concat(...arr);
console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们使用
扩展语法 (…)
解压缩数组并将所有子数组作为逗号分隔值传递给
Array.concat
方法。

该concat()方法采用多个数组并将它们连接成一个新数组。

索引.js
// 👇️ ['a', 'b']
console.log([].concat(['a'], ['b']));

请注意，此方法只会展平数组1级别。

您还可以通过使用
Array.reduce方法来采用更实用的
方法。

使用 reduce() 在 JavaScript 中展平数组

要在 JavaScript 中展平数组：

  1. 使用reduce()遍历数组。
  2. 在每次迭代中，使用扩展语法将累积数组和子数组的值解包到一个新数组中。
索引.js
const arr = [['a'], ['b', 'c'], ['d']];

const flat = arr.reduce((accumulator, array) => {
  return [...accumulator, ...array];
}, []);

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们传递给reduce()方法的函数会为数组中的每个元素（子数组）调用。

我们将accumulator变量的初始值设置为一个空数组。

accumulator在每次迭代中，我们将当前子数组中的值解压缩到一个新数组中并返回结果。

最终的结果是一个已经展平到 1 级的数组。

如果您不习惯，一种更具可读性和直观性的方法reduce()是使用
Array.forEach
方法。

使用 forEach() 在 JavaScript 中展平数组

要展平数组：

  1. 将新变量初始化为空数组。
  2. 使用该forEach()方法遍历数组的数组。
  3. 在每次迭代中，解压子数组的值并将它们推入新数组。
索引.js
const arr = [['a'], ['b', 'c'], ['d']];

const flat = [];

arr.forEach(array => {
  flat.push(...array);
});

console.log(flat); // 👉️ ['a', 'b', 'c', 'd']

我们传递给forEach()方法的函数被数组中的每个元素调用。

在每次迭代中，我们使用扩展语法和push方法来解包子数组的值并将它们推入新数组。

在最后一次迭代之后，flat变量包含一个已展平到 1 级的数组。

–