JavaScript 实现数组扁平化的 6 种方式：全面解析，掌握核心要点

2023-09-02 23:20:29

使用 Array.prototype.flat() 方法

Array.prototype.flat() 方法是 ES6 中引入的数组新方法，它可以将嵌套数组扁平化为一维数组。该方法接受一个参数，指定要展平的数组的深度。例如，flat(1) 将展平一级嵌套数组，flat(2) 将展平二级嵌套数组，依此类推。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

console.log(arr.flat());
// [1, 2, 3, 4, 5, 6, 7, 8]

console.log(arr.flat(2));
// [1, 2, 3, 4, 5, 6, 7, 8]

console.log(arr.flat(3));
// [1, 2, 3, 4, 5, 6, 7, 8]

2. 使用 Array.prototype.reduce() 方法

Array.prototype.reduce() 方法可以将数组中的元素依次累积，最终返回一个累积值。我们可以利用这个特性来实现数组扁平化。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flattenedArray = arr.reduce((acc, cur) => {
  return acc.concat(Array.isArray(cur) ? cur.reduce((acc, cur) => acc.concat(cur), []) : cur);
}, []);

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

3. 使用 ES6 箭头函数

ES6 箭头函数可以简化 reduce() 方法的写法，使其更加简洁。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flattenedArray = arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? cur.reduce((acc, cur) => acc.concat(cur), []) : cur), []);

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

4. 使用 concat() 方法

concat() 方法可以将多个数组连接成一个新的数组。我们可以利用这个特性来实现数组扁平化。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flattenedArray = [].concat.apply([], arr);

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

5. 使用 join() 方法

join() 方法可以将数组中的元素连接成一个字符串。我们可以利用这个特性来实现数组扁平化。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flattenedArray = arr.join().split(",");

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

6. 使用递归

递归是一种解决问题的通用方法，它可以将一个问题分解成多个子问题，然后逐一解决这些子问题。我们可以利用递归来实现数组扁平化。

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flattenedArray = [];

function flatten(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      flatten(arr[i]);
    } else {
      flattenedArray.push(arr[i]);
    }
  }
}

flatten(arr);

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