JavaScript 数组睁开(扁平化)和underscore的 flatten

原文地点
数组睁开就是将嵌套的数组扁平化(转换为一维的)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到上一层,在机能上会有所提拔
::: tip 注重
shallowfalse时,stricttrue是,返回的永久时[] ,这是由于,当shallowfalse时是深度迭代,,当末了迭代到不是数组的时刻,就会进入到else if中,假如此时stricttrue则就不会进入到这个分支中,那末output就永久不会被操纵,
:::

    原文作者:一介码农
    原文地址: https://segmentfault.com/a/1190000019342188
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞