8種多維數(shù)組降維的方法

來(lái)源 | https://www.fly63.com

01、數(shù)組字符串化

   

    

     

     

     

     

    
    
let arr = [[123456], [333], 789]arr += ''arr = arr.split(',')console.log(arr)
   

02、 遞歸

   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
function demo(arr) {    var newArr = []    for (var i = 0; i < arr.length; i++) {        if (Array.isArray(arr[i])) {        // 如果是數(shù)組，調(diào)用遞歸函數(shù) dimension 將其扁平化，然后再 push 到 newArr 中            newArr.push.apply(newArr, demo(arr[i]))        } else {            // 不是數(shù)組直接 push 到 newArr 中            newArr.push(arr[i])        }    }    return newArr} var array = ['1', '2', ['2', ['6', ['4', '9'], '8'], '5'], '3', '3', '2']var reduce = demo(array)console.log(reduce)
   

03、利用contact

   

    

     

     

     

     

     

     

     

     

     

     

    
    
var a = [1,[2],[3,4]]    var result = []    for(var i=0; i<a.length; i++){        if(a[i].constructor == Array) {            result = result.concat(a[i])        }else {            result.push(a[i])        }    }    console.log(result) // [1,2,3,4]
   

04、利用擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符相當(dāng)于數(shù)組拆成最小單位了，...[1,，2,，[3， 4]] 相當(dāng)于變成了 1，2, [3, 4]；這樣 [ ].concat(...a) 就相當(dāng)于 [ ].concat(1，2，[3，4])

   

    

     

     

     

     

    
    
var a = [1,[2],[3,4]]var result = []result = [].concat(...a)console.log(result) // [1,2,3,4]
   

05、利用apply

這個(gè)跟擴(kuò)展運(yùn)算符類似，apply 會(huì)把數(shù)組a 拆分，拆成 1,2，[3, 4] 依次傳遞給concat方法， 效果就跟 擴(kuò)展運(yùn)算符一樣了。

   

    

     

     

     

     

    
    
var a = [1,2,[3,4]]var result = []result = Array.prototype.concat.apply([], a)console.log(result) // [1,2,3,4]
   

06、Array.prototype.flat()

   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
var arr1 = [1, 2, [3, 4]]console.log(arr1.flat())// [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]console.log(arr2.flat())// [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]console.log(arr3.flat(2))// [1, 2, 3, 4, 5, 6]//使用 Infinity 作為深度，展開任意深度的嵌套數(shù)組console.log(arr3.flat(Infinity))// [1, 2, 3, 4, 5, 6]
   

07、使用 stack 無(wú)限反嵌套多層嵌套數(shù)組

   

    

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    
    
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];function flatten(input) {    const stack = [...input];    const res = [];    while (stack.length) {        // 使用 pop 從 stack 中取出并移除值        const next = stack.pop();        if (Array.isArray(next)) {           // 使用 push 送回內(nèi)層數(shù)組中的元素，不會(huì)改動(dòng)原始輸入 original input            stack.push(...next);        } else {        res.push(next);    } }    // 使用 reverse 恢復(fù)原數(shù)組的順序    return res.reverse();}console.log(flatten(arr1)); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
   

08、使用 reduce、concat 和遞歸無(wú)限反嵌套多層嵌套的數(shù)組

   

    

     

     

     

     

     

     

     

     

     

     

    
    
var arr1 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]]function flattenDeep(arr1) {   return arr1.reduce(      (acc, val) =>         Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val),      []   )}console.log(flattenDeep(arr1))// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
   

本文完~

往期推薦

2021 TWeb 騰訊前端技術(shù)大會(huì)精彩回顧(附PPT)

面試題：說(shuō)說(shuō)事件循環(huán)機(jī)制(滿分答案來(lái)了)

專心工作只想搞錢的前端女程序員的2020

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧