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]