JavaScript 數(shù)組展開(扁平化)和underscore的 flatten

awokezhou 發(fā)布于2019-08-23 17:52 / 1854人閱讀

摘要：原文地址數(shù)組展開就是將嵌套的數(shù)組扁平化轉(zhuǎn)換為一維的判斷每一項是否是數(shù)組，然后遞歸遞歸調(diào)用數(shù)組在調(diào)用會將數(shù)組轉(zhuǎn)換成再執(zhí)行方法會變成還需要將所有的參數(shù)轉(zhuǎn)換為數(shù)字，所以這種方式的不足就是如果數(shù)組里面是既有數(shù)字又有字符串，會全部展開為數(shù)字轉(zhuǎn)為數(shù)字方

原文地址
數(shù)組展開就是將嵌套的數(shù)組扁平化（轉(zhuǎn)換為一維的）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、判斷每一項是否是數(shù)組，然后遞歸

const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"a"]]
function flatten(arr){
    let result=[]
    for(let i=0,l=arr.length;i
2、toString
數(shù)組在調(diào)用toString()會將數(shù)組轉(zhuǎn)換成"1,2,1,2,3,1,2",再執(zhí)行split(",")方法會變成["1", "2", "1", "2", "3", "1", "2"]
還需要將所有的參數(shù)轉(zhuǎn)換為數(shù)字，所以這種方式的不足就是如果數(shù)組里面是[1,2,3,"4","5"]既有數(shù)字又有字符串，會全部展開為數(shù)字
const arr=[[[1, 2], [1, 2, 3]], [1, 2]]
function flatten(arr){
    return arr.toString().split(",").map(item => {
        //轉(zhuǎn)為數(shù)字
        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)  //如果是數(shù)組同樣的遞歸調(diào)用
    },[])
}
console.log(flatten(arr),arr)
4、解構(gòu)的方式
利用es6新增結(jié)構(gòu)方法可以提取一層的方法，來一層層提取出來
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
function flatten(arr){
    while(arr.some(item => Array.isArray(item))){
        //如果當(dāng)前數(shù)組中還有數(shù)組，則展開
        arr=[].concat(...arr)
    }
    return arr
}
console.log(flatten(arr),arr)
5、js原生方法flat
flat(depth) 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。參數(shù)depth表示要提取嵌套數(shù)組的結(jié)構(gòu)深度,默認(rèn)為1
const arr=[[[1, 2], [1, 2, 3,"a"]], [1, 2,"b"]]
arr.flat(Infinity)
6、Underscore.js的flatten方法
先上代碼
/**
 * param {Array} input 要操作的數(shù)組
 * param {Boolean} shallow 淺展開，及為true時，只展開一層，為false是深度展開
 * param {Boolean} strict 遍歷第一層時，是否放棄非數(shù)組對象
 * param {Array} output 保存最后輸出的內(nèi)容
 */
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方法對類數(shù)組對象也有支持
    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將返回數(shù)組當(dāng)作參數(shù)傳遞，可以省去在遞歸的時候?qū)?shù)據(jù)一層層的return到上一層，在性能上會有所提升
::: tip 注意
當(dāng)shallow為false時,strict為true是，返回的永遠(yuǎn)時[] ，這是因為，當(dāng)shallow為false時是深度迭代，，當(dāng)最后迭代到不是數(shù)組的時候，就會進(jìn)入到else if中，如果此時strict為true則就不會進(jìn)入到這個分支中，那么output就永遠(yuǎn)不會被操作，
:::