JavaScript数组的扁平化：将 2D JavaScript 二维数组转换为 1D 一维数组（多种方法）

什么是数组扁平化？

数组扁平化：指将一个多维数组转化为一个一维数组。

给定数组：

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

目标值：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

 方法：

​ 解决方案 1：使用 concat（） 和 apply（） ​

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  var myNewArray = [].concat.apply([], myArray);
    return myNewArray;
    }
  flatten(myArray);
 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

​ 解决方案 2：使用 reduce（） ​

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  var myNewArray =  myArray.reduce(function(prev, curr) {
  return prev.concat(curr);
});
    return myNewArray;
    }
  flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
      return arr.reduce((res,next) =>{
        return res.concat(Array.isArray(next)? flatten(next) : next);
      },[]);
    }
  flatten(myArray);
 
 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 3：递归遍历

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
    let result = []
    for (const item of arr) {
        if (Array.isArray(item)) {
            result = result.concat(flatten1(item))
        } else {
            result.push(item)
        }
    }
    return result
    }
  flatten(myArray);
 
 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 4：在 ES6 中使用点差运算符(扩展运算符)

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  var myNewArray =  [].concat(...arr);
    return myNewArray;
    }
  flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

​ 解决方案 5：在 ES10 中使用 flat（） ​

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  var myNewArray =  myArray.flat();
    return myNewArray;
    }
  flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 6：for循环

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
  function flatten(arr) {
    var res = [];
    for (let i = 0, length = arr.length; i < length; i++) {
      if (Array.isArray(arr[i])) {
        res = res.concat(flatten(arr[i])); //concat 并不会改变原数组
      //res.push(...flatten(arr[i])); //扩展运算符
      } else {
        res.push(arr[i]);
      }
    }
    return res;
  }
  flatten(myArray);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  var myNewArray =  [];
for (var i = 0; i < arr.length; ++i) {
  for (var j = 0; j < arr[i].length; ++j)
    myNewArray.push(arr[i][j]);
}
    return myNewArray;
    }
  flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案7：while循环

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
      while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
        //arr = Array.prototype.concat.apply([],arr);
      }
      return arr;
    }
  flatten(myArray);
 
 
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 8：使用toString()+split()或者join()+split()

原理很简单，先把数组转换成字符串，这个过程会吧[]去掉，然后再调用split()方法转换成数组,最后不能忘了，吧每一项转换为数组，即调用map()方法。

方法1：arr.toString().split(',').map(item => +item);

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
     return arr.toString().split(',').map(item => +item);
    }
  flatten(myArray);
 
 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

方法2：arr.join(',').split(',').map(item => +item);

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
     return arr.join(',').split(',').map(item => +item);
    }
  flatten(myArray);
 
 
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 9：正则表达式

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
   let result = JSON.stringify(arr); 
    // JSON.stringify 转换后的结果 '[1,[2,34,[12,4]],23]'
    result = result.replace(/(\[|\])/g, '');
    return JSON.parse(`[${result}]`)
    }
  flatten(myArray);
 
 
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案 10：栈

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
 function flatten(arr) {
  let res = [];
    const stack = [].concat(arr);
    while (stack.length > 0) {
        // pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
        const item = stack.pop();
        if (Array.isArray(item)) {
            /**
             * push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
             * 用扩展运算符展开一层
             */
            stack.push(...item);
        } else {
            // unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
            item !== undefined && res.unshift(item);
        }
    }
    return res;
    }
  flatten(myArray);
 
 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

资料：

JS数组扁平化的一些方法(7-8种) - 掘金引子：这些日子在看es相关的新属性是有一个数组的方法 flat() 引起的我的注意。 我去找了一下维基百科，上面并没有关于扁平化的直接解释，只有一个扁平化组织释义。 金字塔组织，这个众所周知，它表现的层级结构就是一个金字塔式的形状。 扁平化组织（Flat organizatio…https://juejin.cn/post/6844903805876699150js数组扁平化的六种方法_爱吃肉的薄凉的博客-CSDN博客_js数组扁平化处理我也不知道为什么要整理这么多种方法，算是拓展个思路吧。🤦‍♂️let array = [1, [2, 34, [12, 4]], 23];1.递归遍历function flatten1(array) { let result = [] for (const item of array) { if (Array.isArray(item)) { result = result.concat(flatten1(item)) } e.https://blog.csdn.net/weixin_43544093/article/details/123842757