什么是数组扁平化?

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

给定数组:

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]

\