数组扁平化的五种方式

数组的扁平化--5种方式

reduce

利用reduce需要递归，有一定的性能消耗

//利用reduce实现
var array=[1,2,[3,4,{name:'doing'}],[5,[6,7]],{name:'jack',age:[12,34,23]}]

function flatten(arr) {
    return arr.reduce(function (prev, next) {
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(array)) //[1,2,3,4,{name:'doing'},5,6,7,{name:'jack',age:[12,34,23]}]

扩展运算符

通过扩展运算符确实可以避免递归，但是却要使用到循环，如果数组层级过高，循环的消耗也不小

var array=[1,2,[3,4,{name:'doing'}],[5,[6,7]],{name:'jack',age:[12,34,23]}]
//利用扩展运算符
function flatten(arr) {
    var arr;
    while (arr.some(v => Array.isArray(v))) {
        arr = [].concat(...arr);   //一次... 数组降一维
        console.log(arr)
    }
    return arr;
}

console.log(flatten(array)) //[1,2,3,4,{name:'doing'},5,6,7,{name:'jack',age:[12,34,23]}]

正则

正则处理不了 对象里又含数组的情况

var array=[1,2,[3,4,{name:'doing'}],[5,[6,7,[8]]],{age:23}]

function flatten(arr) {
    let str = JSON.stringify(arr).replace(/[|]/g, ''); 
    return JSON.parse(Array.of('[' + str + ']')[0]); 
    //return JSON.parse(`[${JSON.stringify(arr).replace(/[|]/g,'')}]`);

//JSON.stringify使数组序列化为字符串，否则对象会是object object
//JSON.parse将数据转换为 JavaScript 对象
//Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
}

console.log(flatten(array)) //[1,2,3,4,{name:'doing'},5,6,7,{age:23}]

flat

兼容性不好

var array=[1,2,[3,4,{name:'doing'}],[5,[6,7,[8]]],{name:'jack',age:[12,34,23]}]
console.log(array.flat(Infinity)) //[1,2,3,4,{name:'doing'},5,6,7,{name:'jack',age:[12,34,23]}]

generator

var array=[1,2,[3,4,{name:'doing'}],[5,[6,7,[8]]],{name:'jack',age:[12,34,23]}]

function* flatten(arr) {
    if (!Array.isArray(arr)) yield arr;
    else for (let el of arr) yield* flatten(el);
}

let flattened = [...flatten(array)]
console.log(flattened) //[1,2,3,4,{name:'doing'},5,6,7,{name:'jack',age:[12,34,23]}]