数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层。

数组扁平化概念:数组扁平化是指将一个多维数组变为一维数组

// 多层嵌套
[1, 2, [3, 4]]

// 一层
[1, 2, 3, 4]

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
console.log(arr.flat(Infinity))
  
 //  注意：flat和flatMap方法为ES2019(ES10)方法，目前还未在所有浏览器完全兼容。
 function flatten(arr) {
     var arr_flat = arr.flat(Infinity);
     return arr_flat
}
console.log(flatten(arr))

打印结果：

1. 递归实现

递归实现数组扁平化 递归的遍历每一项，若为数组则继续遍历，否则concat

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten1(arr) {
   var res = [];
   arr.map(item => {
       if(Array.isArray(item)) {
           res = res.concat(flatten1(item));
       } else {
           res.push(item);
       }
   });
   return res;
}
console.log(flatten1(arr))

打印结果：

2. reduce

reduce:遍历数组每一项，若值为数组则递归遍历，否则concat。
reduce方法接受一个函数作为参数，这个函数作为一个累加器，从左到右遍历 (升序) 整个类型数组，最后将结果汇总为单个值返回。

reduce方法还接受一个可选的参数initialValue，作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reducer 函数接收4个参数:

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引) 可选
4. Source Array (src) (源数组) 可选

reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten4(arr) {  
   return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten4(item) : item);
    }, []);
}
console.log(flatten4(arr))

打印结果：

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce包含两个参数：回调函数，传给total的初始值

// 求数组的各项值相加的和： 
arr.reduce((total, item)=> {  // total为之前的计算结果，item为数组的各项值
    return total + item;
}, 0);

3. 使用扩展运算符...

扩展运算符:es6的扩展运算符能将二维数组变为一维

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试，返回boolean值。

注意：对于放在空数组上的任何条件，此方法返回false。

console.log([].concat(...[1, 2, 3, [4, 5]]))

打印结果：

我们用这种方法只可以扁平一层，但是顺着这个方法一直思考，我们可以写出这样的方法：

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten5(arr) {
	// 循环展开嵌套的数组，直到没有嵌套
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten5(arr))

打印结果：

4. 去重

数组去重要考虑的太多了，这里只简单的用Set返回一个不重复的值

function flatten(arr) {
    // 循环展开嵌套的数组，直到没有嵌套
    while(arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return Array.from(new Set(arr));;
}

flatten([1, 1, 2, [3, [3, 5, 6], 4]]); // [1, 2, 3, 5, 6, 4]

5. toString & split

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten2(arr) {
    return arr.toString().split(',').map(function(item) {
      // 因为split分割后形成的数组的每一项值为字符串，
      // 所以需要用一个map方法遍历数组将其每一项转换为数值型
        return Number(item);
    })
} 
console.log(flatten2(arr))

打印结果：

6. join & split:
和上面的toString一样，join也可以将数组转换为字符串

var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten3(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}
console.log(flatten3(arr))

打印结果：