This's FE Life
  • Home
  • Categories
    • LifeStyle
    • Travel
  • Tags
    • 冰山工作室
    • 前端
    • JavaScript
    • Web

© Carlo All Rights Reserved 2021 . 辽ICP备15007588号

【大力金刚掌】如何实现数组扁平化–冰山工作室–carlo

WEB基础 5月 08, 2019

数组扁平化,顾名思义就是将多层嵌套的多位数组转换成结构清晰,层级更少的数组。

期待效果如下:

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

1、深度遍历

最容易想到的方法,递归调用

let arr = [1, [2, [3, 4]]];
let flatten = (arr)=>  {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Object.prototype.toString.call(arr[i])==='[object Array]') {
            result = result.concat(flatten(arr[i]))
        }
        else {
            result.push(arr[i])
        }
    }
    return result;
}
console.log(flatten(arr))

2.使用arr.reduce简化代码

数组reduce方法本身就是一个迭代器,reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    return arr.reduce(function(prev, next){
        console.log(prev,next)
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}

console.log(flatten(arr))

3.对于纯数字的数组

toString方法,也可以使用其他方法(join),返回了一个逗号分隔的扁平的字符串,这时候我们再 split,然后转成数字,对于特殊数据不适用

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item
    })
}

console.log(flatten(arr))

4.正则来了

JSON.stringify转化为字符串,用正则替换掉[],拼接为JSON数组,JSON.parse转为数组

let arr = [1, [2, 3.3, ['a,b,c,d,e']]];

let flatten = (arr)=> {
    console.log(JSON.stringify(arr).replace(/\[|\]/g, ''))
    return JSON.parse(`[${JSON.stringify(arr).replace(/\[|\]/g, '')}]`);
}
console.log(flatten(arr))

5.ES6

拓展运算符

let arr = [1, [2, 3.3, ['a,b,c,d,e',undefined,null]]];
//console.log([].concat(...arr)); // 浅拷贝,只拷贝一层

function flatten(arr) {
 while (arr.some(item => Object.prototype.toString.call(item)==='[object Array]')) {
        arr = [].concat(...arr);
    }
    return arr;
}

console.log(flatten(arr))


//_.flatMapDeep([1, [2, 3.3, ['a,b,c,d,e',undefined,null]]]); //lodash实际也是采用这种方法

lodash

6.最好的方法

说了这么多,有没有现成的方法可以使用呢?

ES10

let arr = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
arr.flat();               // [1,2,3,4,5,6,Array(4)]
arr.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
arr.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
arr.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]
}

ES10

Share
Facebook Twitter Linkedin Google+
  • JavaScript
  • 冰山工作室
  • 前端
Newer Older