天天看點

js将多元數組變成一維數組

一.js多元數組轉換成一維數組

 //1.遞歸:注意這個不相容IE

function arrReduce(someArr){
    for(let i = 0;i< someArr.length;i++ ){
        if(Array.isArray(someArr[i])){
            arrReduce(someArr[i]);
        }else{
            arrMax.push(someArr[i]);
        }
    } 
 }
let content = [1,2,3,4,5,[6,7,[8,9,10,[11,12,13]]]];
let arrMax = [];//存放轉換數組元素
arrReduce(content);
console.log(arrMax);      

----------------------------------------------------------------------------------------------------------------------------------------------------------

//2.reduce方法

let arr1 = [1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]];
const flatten1 = arr1 => arr1.reduce((acc,val) => acc.concat(Array.isArray(val)? flatten1(val):val),[],)
console.log(flatten1(arr1));      

//3.數組的join()

let arr1 = [1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]], newArray = new Array();
//輸入的一維數組全是number類型
for(let item of arr1.join().split(",")){
     newArray.push(Number(item));
}
console.log(newArray);      

//4.toString

let arrPol = [1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]], newArray = new Array();
for(let item of arrPol.toString().split(',')){
     newArray.push(Number(item));
}
console.log(newArray);      

//5.空字元串''

let arrKol = [1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]];
let newArr = [];
for(let item of (arrKol + '').split(',')){
     newArr.push(Number(item));
}
console.log(newArr);      

//6.ES6的flat(n): n非必填項,n預設是1,表示扁平化深度.

//預設轉化成一維
console.log([1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]].flat()); // [1,2,3,3,4,5,6,7,8,9,10,11,12,13]
 
// 指定轉換的嵌套層數
console.log([1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]].flat(2)); //[1, 2, Array(2), 5, 6, 7, 8, 9, Array(3)]
 
// 不管嵌套多少層
console.log([1,[2,[[3,4],5],6,7,[8,9,[10,11,[12,13]]]]].flat(Infinity)); // [1,2,3,3,4,5,6,7,8,9,10,11,12,13]
 
// 自動跳過空位
console.log([1, [2, , 3, ,4]].flat()); // [1, 2, 3, 4]      

總結:

       這些都是綜合比較得來的,實作辦法太多了,還有map(),reduce()+遞歸,es6新增的擴充運算符,flatMap()...前端本身就是一個在尋求更加完美的解決過程,而不是滿足于某一種方式實作,我們追求近乎完美的過程中提升自我,尋找平衡。

參考來源:

1.​​多元數組變成一維數組​​