实现数组扁平化

一、什么是数组扁平化

数组的扁平化其实就是将一个嵌套多层的数组 array（嵌套可以是任何层数）转换为只有一层的数组。

二、数组扁平化的实现

 方法一：ES6中的数组flat()方法 

arr.flat([depth]) 

其中 depth 是 flat 的参数，depth 是可以传递数组的展开深度（默认不填、数值是 1），即展开一层数组。传 Infinity，代表不论多少层都要展开。

// ES6  Array.flat(Infinity)
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
const result = arr.flat(Infinity);
 
console.log(result, "result");  // [1,2,3,4,5,6,7,8,9,10]

方法二：递归实现

通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。

// 递归实现
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
function flatten(arr) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      res = res.concat(flatten(arr[i]));
    } else {
      res.push(arr[i]);
    }
  }
  return res;
}
const result = flatten(arr);
 
console.log(result, "result");  // [1,2,3,4,5,6,7,8,9,10]

方法三：利用reduce函数

从方法二递归函数中可以看出，本质是对数组的每一项进行处理，那么我们也可以用reduce 来实现数组的拼接，从而简化方法二的代码。

// reduce函数
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
function flatten(arr) {
  return arr.reduce(function (total, current) {
    return total.concat(Array.isArray(current) ? flatten(current) : current);
  }, []);
}
const result = flatten(arr);
 
console.log(result, "result");  // [1,2,3,4,5,6,7,8,9,10]

可以看到 reduce 的第一个参数用来返回最后累加的结果，思路和第一种递归方法是一样的，但是通过使用 reduce 之后代码变得更简洁了，也同样解决了扁平化的问题。