阅读 979

【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
复制代码
回调accumulatorcurrentValuecurrentIndexarray
第一次调用所有参数值011[0, 1, 2, 3, 5]
第二次调用所有参数值122[0, 1, 2, 3, 5]
第三次调用所有参数值333[0, 1, 2, 3, 5]
第四次调用所有参数值654[0, 1, 2, 3, 5]

参考

用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核心原理精讲-若离

文章分类
前端
文章标签