数组展开就是将嵌套的数组扁平化（转换为一维的）eg:

const arr=[[[1, 2], [1, 2, 3]], [1, 2]] => [1, 2, 1, 2, 3, 1, 2] 
console.log(flatten(arr))  //[1,2,1,2,3,1,2]

1、判断每一项是否是数组，然后递归

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"a"]]
function flatten(arr){
    let result=[]
    for(let i=0,l=arr.length;i<l;i++){
        if(Array.isArray(arr[i])){
            //递归调用
            result=result.concat(flatten(arr[i]))  
        }else{
            result.push(arr[i])
    return result
console.log(flatten(arr),arr)

2、toString

数组在调用toString()会将数组转换成 "1,2,1,2,3,1,2" ,再执行 split(",") 方法会变成 ["1", "2", "1", "2", "3", "1", "2"] 还需要将所有的参数转换为数字，所以这种方式的不足就是如果数组里面是 [1,2,3,"4","5"] 既有数字又有字符串，会 全部展开为数字

const arr=[[[1, 2], [1, 2, 3]], [1, 2]]
function flatten(arr){
    return arr.toString().split(",").map(item => {
        //转为数字
        return +item
console.log(flatten(arr),arr)

3、reduce方法

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
    return arr.reduce((pre,next) => {
        return pre.concat(Array.isArray(next) ? flatten(next) : next)  //如果是数组同样的递归调用
    },[])
console.log(flatten(arr),arr)

4、解构的方式

利用es6新增结构方法可以提取一层的方法，来一层层提取出来

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
        //如果当前数组中还有数组，则展开
        arr=[].concat(...arr)
    return arr
console.log(flatten(arr),arr)

5、js原生方法flat

flat(depth) 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。参数 depth 表示要提取嵌套数组的结构深度,默认为1

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
arr.flat(Infinity)

6、Underscore.js的flatten方法

* param {Array} input 要操作的数组 * param {Boolean} shallow 浅展开，及为true时，只展开一层，为false是深度展开 * param {Boolean} strict 遍历第一层时，是否放弃非数组对象 * param {Array} output 保存最后输出的内容 var flatten = function ( input, shallow, strict, output = [] ) { var idx = output.length; for ( var i = 0 , length = getLength(input); i < length; i++) { var value = input[i]; // 说明flatten方法对类数组对象也有支持 if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) { if (shallow) { // 只展开一层 var j = 0 , len = value.length; while (j < len) output[idx++] = value[j++]; } else { // 深度迭代,递归展开 flatten(value, shallow, strict, output); idx = output.length; } else if (!strict) { output[idx++] = value; return output;

output 将返回数组当作参数传递，可以省去在递归的时候将数据一层层的 return 到上一层，在性能上会有所提升

当 shallow 为 false 时, strict 为 true 是，返回的永远时 [] ，这是因为，当 shallow 为 false 时是深度迭代，，当最后迭代到不是数组的时候，就会进入到 else if 中，如果此时 strict 为 true 则就不会进入到这个分支中，那么 output 就永远不会被操作，

落魄阴阳师 前端工程师 @ 宇宙独角兽🦄️