【前端面试】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 ]