快捷導(dǎo)航

js最全的數(shù)組的降維5種辦法(小結(jié))

更新時間：2020年04月28日 09:22:34 作者：淡水河橋

這篇文章主要介紹了js最全的數(shù)組的降維5種辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

業(yè)務(wù)開發(fā)中，二維數(shù)組、多維數(shù)組轉(zhuǎn)為一維數(shù)組這種需求是少不了的，有些多維數(shù)組里面可能嵌套會更深，數(shù)組降維就是來解決此問題的

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

let arr = [[222, 333, 444], [55, 66, 77], {a: 1} ]
arr += '';
arr = arr.split(',');
 
console.log(arr); // ["222", "333", "444", "55", "66", "77", "[object Object]"]

所有的元素會轉(zhuǎn)換為字符串，且元素為對象類型會被轉(zhuǎn)換為 "[object Object]" ，對于同一種類型數(shù)字或字符串還是可以的。

2、遞歸

function reduceDimension(arr){
  let ret = [];
  let toArr = function(arr){
    arr.forEach(function(item){
      item instanceof Array ? toArr(item) : ret.push(item);
    });
  }
  toArr(arr);
  return ret;
}

3、Array.prototype.flat()

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

4、

// 不使用遞歸，使用 stack 無限反嵌套多層嵌套數(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ù)組中的元素，不會改動原始輸入 original input
   stack.push(...next);
  } else {
   res.push(next);
  }
 }
 // 使用 reverse 恢復(fù)原數(shù)組的順序
 return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

5、

// 使用 reduce、concat 和遞歸無限反嵌套多層嵌套的數(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), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

到此這篇關(guān)于js最全的數(shù)組的降維5種辦法(小結(jié))的文章就介紹到這了,更多相關(guān)js 數(shù)組降維內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: