JS数组扁平化

本来是不想写的，想了一下还是写下来吧。

数组扁平化意思就是将多维数组变成1维数组，在JS中要实现数组扁平化方法有很多种，下面随便列举几种。话不多说，往下看代码。

 

方法1、最基础的for循环 + 递归

var arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];
function arrFlat(arr){
  var temp = [];
  for(var i=0; i<arr.length; i++){
    if(Array.isArray(arr[i])){
      temp = temp.concat(arrFlat(arr[i]));
    }else{
      temp.push(arr[i]);
    }
  }
  return temp;
}
console.log(arrFlat(arr))  //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

方法2、toString()

let arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];
console.log(arr.toString())  //"1,2,3,4,5,6,7,9,10,11,12"
arr = arr.toString().split(',').map(item => Number(item))//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

方法3、JSON.stringify()

let arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];
JSON.stringify(arr)  //"[1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]]"
JSON.stringify(arr).replace(/(\[|\])/g, '')  //"1,2,3,4,5,6,7,8,9,10,11,12"
arr = JSON.stringify(arr).replace(/(\[|\])/g, '').split(',').map(item => Number(item));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

方法4、concat() + ...运算符

例如 [].concat(...arr) 就可以将多维数组扁平化一层。

let arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];
console.log([].concat(...arr))  //[1, 2, 3, 4, 5, [6, 7, [8, 9]], 10, 11, 12]
while(arr.some(item => Array.isArray(item))){
  arr = [].concat(...arr)
}
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

方法5、flat()

这是ES6提供的数组扁平化方法。用法也是很简单。返回一个新数组。

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

 

flat()的简单实现

目前 flat() 的兼容性还比较差，可以更低级的语法手动实现一下。

/**
 * @param {number} n 扁平化深度，默认为1
 */
function myFlat(n){
  var temp = [];
  n = (n === 'infinity' || !isNaN(n)) ? n : 1;  //扁平化深度，默认为1
  var m = 0;
  function fn(arr){
    if(n !== 'infinity'){
      //与n比较，判断是否停止递归
      if(m > n){
        temp.push(arr);
        return m = 1;
      }
      m++;
    }
    
    for(var i=0; i<arr.length; i++){
      if(Array.isArray(arr[i])){
        fn(arr[i]);
      }else{
        if(i === arr.length-1) m = 1;
        temp.push(arr[i])
      }
    }
  }
  fn(this);
  return temp;
}
Array.prototype.myFlat = myFlat;

var arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];
arr = arr.myFlat()  //[1, 2, 3, 4, 5, [6, 7, [8, 9]], 10, 11, 12]
arr = arr.myFlat(2)  //[1, 2, 3, 4, 5, 6, 7, [8, 9], 10, 11, 12]
arr = arr.myFlat('infinity')  //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]