js二维数组如何变为一维数组

在 JavaScript 中，将二维数组转换为一维数组（扁平化）有多种方法，可根据数组结构复杂度、性能需求和兼容性选择。以下是最常用的实现方式：

1. 使用 flat() 方法（ES2019+）

MDN释义：flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：var newArray = arr.flat([depth]) depth 默认为 1

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

如果不知道数组是多少维度，可以传 Infinity 来展开任意深度的嵌套数组

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

方法2：使用 reduce 与 concat

• reduce
  reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

  • 基本用法:
    const total = [1, 2, 3].reduce((acc, cur) => acc + cur, 1); // 6

• concat
  concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。concat() 也适用于字符串。

  • 基本用法：
    var arr = [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

实例：

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

// 三维及以上可以使用递归
function flatArr(arr, dep = 1) {
  if (dep > 0) {
    return arr.reduce(
      (acc, cur) =>
        acc.concat(Array.isArray(cur) ? flatArr(cur, dep - 1) : cur),
      []
    );
  } else {
    return arr;
  }
}
flatArr([1, 2, [3, 4, [5, 6]]], 3)；
// [1, 2, 3, 4, 5, 6]

// 不知道数组维度，可以传 Infinity
flatArr([1, 2, [3, 4, [5, 6]]], Infinity)；
// [1, 2, 3, 4, 5, 6]

方法3：扩展运算符

// 二维
const arr = [1, 2, [3, 4]];
var newArr = [].concat(...arr);
// [1, 2, 3, 4]

方法4：使用forWach

forEach() 方法对数组的每个元素执行一次给定的函数。

基本用法：
arr.forEach(((item, index) => item))

实例：

// 二维及以上维度
const newArr = []; // 全局变量或者闭包也可以

function flatArr(arr, dep = 1) {
  arr.forEach(ele => {
    if(Array.isArray(ele) && dep > 0) {
      flatArr(ele, dep - 1);
    } else {
      newArr.push(ele);
    }
  });
  return newArr;
}

flatArr([1, 2, [3, 4, [5, 6]]], 3)；
// [1, 2, 3, 4, 5, 6]```

## 方法5：使用堆栈stack

```bash
// 无递归数组扁平化，使用堆栈
// 注意：深度的控制比较低效，因为需要检查每一个值的深度
// 也可能在 shift / unshift 上进行 w/o 反转，但是末端的数组 OPs 更快
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // 使用 pop 从 stack 中取出并移除值
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 使用 push 送回内层数组中的元素，不会改动原始输入
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // 反转恢复原数组的顺序
  return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

// 递归版本的反嵌套
function flatten(array) {
  var flattend = [];
  (function flat(array) {
    array.forEach(function(el) {
      if (Array.isArray(el)) flat(el);
      else flattend.push(el);
    });
  })(array);
  return flattend;
}

方法6：使用 Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

function* flatArr(array) {
  for (const item of array) {
      if (Array.isArray(item)) {
          yield* flatArr(item);
      } else {
          yield item;
      }
  }
}

const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = [...flatArr(arr)];
// [1, 2, 3, 4, 5, 6]