【前端面試】6種方法實現數組扁平化（數組降維）

本文內容

1、介紹數組扁平化（數組降維）的核心思想
2、使用6種方法實現數組扁平化

---

核心思想

效果

// 源數組：[1, [2, [3, [4, 5]]]]
// 降維後數組：[1, 2, 3, 4, 5]

思路

對源數組的所有元素進行遍歷，

判斷遍歷的元素是否爲數組，

若不是數組則.concat()進之前的計算結果中（初始計算結果爲空數組[] ），

若是數組則遞歸調用函數繼續遍歷。

---

6種實現方法

1、lodash插件

let arr = [1, [2, [3, [4, 5]]]];
let result = _.flattenDeep(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]

// lodash方法補充：
// _.flattenDeep(array)  ==>  將array遞歸爲一維數組
// _.flatten(array)  =>  減少一級array嵌套深度
// _.flattenDepth(array, [depth=1])  =>  根據 depth 遞歸減少 array 的嵌套層級

2、reduce()

function flatten(array) {
  return array.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flatten(item) : item);
  }, []);
};

let arr = [1, [2, [3, [4, 5]]]];
let result = flatten(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]

3、toString() + split() + map()

function flatten(array) {
  return array.toString().split(',').map((item) => {
    return Number(item);
  });
};

let arr = [1, [2, [3, [4, 5]]]];
let result = flatten(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]

4、join() + split() + map()

function flatten(array) {
  return array.join(',').split(',').map((item) => {
    return Number(item);
  });
};

let arr = [1, [2, [3, [4, 5]]]];
let result = flatten(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]

5、遍歷 + 遞歸

function flatten(array) {
  let res = [];
  array.map((item) => {
    if (Array.isArray(item)) {
      res = res.concat(flatten(item));
    } else {
      res.push(item);
    }
  });
  return res;
};

let arr = [1, [2, [3, [4, 5]]]];
let result = flatten(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]

6、擴展運算符

function flatten(array) {
  while (array.some(item => Array.isArray(item))) {
    array = [].concat(...array);
  }
  return array;
};

let arr = [1, [2, [3, [4, 5]]]];
let result = flatten(arr);
console.log(result);
// [ 1, 2, 3, 4, 5 ]