持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

扁平化在日常的工作中我们也会经常用到，也是面试时经常考的一道题，今天总结一下常见和不常见的数组扁平化的几种方式

数组扁平化

数组的扁平化其实就是将一个嵌套多层的数组 array（嵌套可以是任何层数）转换为只有一层的数组。其实就是把多维的数组“拍平”，输出最后的一维数组。

比如现在有一个叫flatten的函数可以实现这个功能,调用它就能实现这样的效果

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

01、使用递归实现

普通的递归思路很容易理解，就是通过循环递归的方式，一项一项地去遍历，遍历过程中发现元素还是数组的时候进行递归操作，继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。

把数组的结果通过数组的 concat 方法拼接到最后要返回的 result 数组上，那么最后输出的结果就是扁平化后的数组。

// 方法1
var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    let result = [];
    for(let i = 0; i < arr.length; i++) {
        if(Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;
}
flatten(arr);  //  [1, 2, 3, 4，5]

02、使用 reduce函数迭代实现

通过递归的方式我们可以发现扁平化的本质就是对数组的每一项进行处理，那么我们也可以利用reduce 来实现数组的拼接,reduce 的第一个参数用来返回最后累加的结果,思路和递归是一样的，只不过使用它之后代码变得更简洁了

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.reduce(function(prev, next){
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

03、使用 扩展运算符实现

采用了扩展运算符和 some 的方法也能达到数组扁平化的目的

可以先用数组的 `some` 方法把数组中仍然是数组的元素过滤出来，然后执行 `concat` 操作，利用 ES6 的展开运算符，将其拼接到原数组中，最后返回原数组

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

上面几种方式都带有递归循环的思路来实现数组扁平化，除此之外还有其他方式能实现数组扁平化

04、使用 split 和 toString 实现

由于数组会默认带一个 toString 的方法，所以可以把数组直接转换成逗号分隔的字符串，然后再用 split 方法把字符串重新转换为数组

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

05、使用 ES6 中的 flat实现

ES6中有一个flat方法，可以直接实现数组的扁平化

arr.flat([depth])

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

var arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

对数组的嵌套层数不确定的时候，最好直接使用 Infinity

06、使用正则和 JSON 实现

使用JSON.stringify 的方法先把数组转换为字符串，然后通过正则表达式过滤掉字符串中的数组的方括号，最后再利用 JSON.parse 把它转换成数组。

var arr = [1, [2, [3, 4, 5]]];
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，5]