JavaScript解密之旅-----数组的扁平化方法总结

---

数组的扁平化处理

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

---

一、ES6语法…

• ES6 对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。
• 也可以理解为 … 是对二维数组变成一维数组

// 方案1
 let arr = [1,2,3,[4,5,[6,7,[8,9]]]]
 function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
flatten(arr )

二、toString & split || join & split

• 将数组变为字符串然后再用split分割还原为数组

// 方案一
let arr = [1,2,3,[4,5,[6,7,[8,9]]]]
function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
} 
flatten(arr)
// 方案二
function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}
flatten(arr)
// 方案三 
function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item //+可以快速获得Number类型
    })
}
 
flatten(arr)

三、reduce

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

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

四、递归

• 此方案与方法一中得方案二一致
• 通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中，代码如下:

let arr = [1,2,3,[4,5,[6,7,[8,9]]]]
// 方案一
function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}
flatten(arr) 
// 方案二
 function flatten(arr) {
        const result = [];
        arr.map((i) => {
            if (Array.isArray(i))
                result.push(...flatten(i));
            else
                result.push(i);
        })
        return result;
  }
flatten(arr )

五、 ES7 flat

• flat（[depth]） 指定要提取嵌套数组的结构深度，默认值为 1。depth是扁平化的层数
• Infinity 参数可以进行无限扁平化

let arr = [1,2,3,[4,5,[6,7,[8,9]]]]
arr  = arr.flat(Infinity);