【JavaScript】数组扁平化的六种方式

什么是数组扁平化？

其实就是把多维数组转化成一维数组(降维)

[1,2,[3,4,5,[6,7,8]]] => [1,2,3,4,5,6,7,8]

数组扁平化的六种方式

• ES6中的flat方法 (推荐使用)

直接调用ES6中的flat方法

arr.flat([depth])

depth表示展开深度，默认为1，这里直接传入Infinity(无限大，所以不论多少层都可以展开)。

const testArray = [1, [2, [3, [4, [5, [6, [7, [[[[[[8, ['ha']]]]]]]]]]]]]];
const resultArray = testArray.flat(Infinity);
console.log(resultArray); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'ha'] 
复制代码

推荐这个，最简单了，后面的不用看啦！！！?

假设面试时，面试官说，实现一下flat方法可以不？?额······忘记了

以免GG，可以看下这里：实现flat

说实话，有flat方法后不太可能自己还去实现扁平化的方法。所以后面的这些懂就行，不太推荐使用。

• 递归调用

知识点： concat合并数组 , 递归调用

const testArray = [1, [2, [3, [4, [5, [6, [7, [[[[[[8, ['ha']]]]]]]]]]]]]];
function flatten(arr) {
  let result = [];
  arr.forEach((item)=>{
    if (Array.isArray(item)) {
      // 是数组的话，递归调用
      result = result.concat(flatten(item));
    } else {
      // 不是数组的话push
      result.push(item);
    }
  })
  return result; 
}

const result = flatten(testArray);
console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'ha'] 
复制代码

• reduce

知识点： reduce

不理解reduce的可以看看这个例子

[0, 1, 2, 3, 5].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
// 结果为 11
复制代码

参考

用reduce实现扁平化，其实也用到了递归方法，只是reduce一来可以实现遍历，二来可以快速处理参数并返回，代码比上一种方法要简洁一些

const testArray = [1, [2, [3, [4, [5, [6, [7, [[[[[[8, ['ha']]]]]]]]]]]]]];
function flatten(arr) {
  return arr.reduce((prev, curv) => {
    return prev.concat(Array.isArray(curv) ? flatten(curv) : curv);
  }, []);
}
const result = flatten(testArray);
console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'ha'] 
复制代码

• 扩展运算符实现

知识点： some

处理逻辑就是：当数组里面有一个元素为数组，则数组进行解构（用扩展运算符实现），每一次循环都可以减少一次（倒数第二）外层的[]，直到数组里面不再有数组，这个方法是真机智！代码也很简洁！

例子：
console.log(...[1, 2, 3]); // 输出1,2,3

function flatten(arr) {
  while (arr.some(item => (Array.isArray(item)))) {
    arr = [].concat(...arr);
  }
  return arr;
}
const result = flatten(testArray);
console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'ha'] 
复制代码

• 正则匹配（看看就好，不推荐）

逻辑就是转成字符串之后，进行正则匹配，把所有[]去掉，然后在最外层加一个[]；

var arr = [1, [2, [3, 4]]];
function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4]
复制代码

• toString再split（看看就好，不推荐）

数字类型会变成字符串，所以这个其实并不是真正的扁平化

var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(',');
}
console.log(flatten(arr)); //   ["1", "2", "3", "4"]

复制代码

总结

假设在真实场景中遇到需要扁平化的处理，直接flat(Infinity)就好，其他都是瞎折腾??

本文参考：
MDN ,
JavaScript核心原理精讲-若离