把多維數(shù)組（尤其是二維數(shù)組）轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開發(fā)中的常用邏輯，最近跟著黃軼老師學(xué)習(xí)Vue2.6.1.1版本源碼時(shí),看到源碼對(duì)二維數(shù)組降維的代碼,所以這里來(lái)寫一篇,記錄一下,加強(qiáng)印象

二維數(shù)組降為一維數(shù)組

循環(huán)降維

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   for (let j = 0; j < children[i].length; j++) {
    reduce.push(children[i][j]);
   }
  } else {
   reduce.push(children[i]);
  }
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

此方法思路簡(jiǎn)單，利用雙重循環(huán)遍歷二維數(shù)組中的每個(gè)元素并放到新數(shù)組中。

concat降維

MDN上對(duì)于concat的介紹

“concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”

concat

如果concat方法的參數(shù)是一個(gè)元素，該元素會(huì)被直接插入到新數(shù)組中；如果參數(shù)是一個(gè)數(shù)組，該數(shù)組的各個(gè)元素將被插入到新數(shù)組中；將該特性應(yīng)用到代碼中：

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  reduce = reduce.concat(children[i]);
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children 的元素如果是一個(gè)數(shù)組，作為concat方法的參數(shù)，數(shù)組中的每一個(gè)子元素會(huì)被獨(dú)立插入進(jìn)新數(shù)組。利用concat方法，我們將雙重循環(huán)簡(jiǎn)化為了單重循環(huán)。

apply和concat降維

MDN上對(duì)于apply方法的介紹

“The apply() method calls a function with a given this value and arguments provided as an array.”

apply

apply方法會(huì)調(diào)用一個(gè)函數(shù)，apply方法的第一個(gè)參數(shù)會(huì)作為被調(diào)用函數(shù)的this值，apply方法的第二個(gè)參數(shù)（一個(gè)數(shù)組，或類數(shù)組的對(duì)象）會(huì)作為被調(diào)用對(duì)象的arguments值，也就是說(shuō)該數(shù)組的各個(gè)元素將會(huì)依次成為被調(diào)用函數(shù)的各個(gè)參數(shù)；將該特性應(yīng)用到代碼中：

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 return Array.prototype.concat.apply([], children);
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children作為apply方法的第二個(gè)參數(shù)，本身是一個(gè)數(shù)組，數(shù)組中的每一個(gè)元素（還是數(shù)組，即二維數(shù)組的第二維）會(huì)被作為參數(shù)依次傳入到concat中，效果等同于[].concat(1, 2, 3, [4, 5, 6], 7, 8, [9, 10])。利用apply方法，我們將單重循環(huán)優(yōu)化為了一行代碼

Vue2.6.11版本源碼降維

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
// :any 可以去掉 這里是Vue通過(guò)Flow指定傳入的參數(shù)類型可以是任意類型
function simpleNormalizeChildren(children: any) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   return Array.prototype.concat.apply([], children);
  }
 }
 return children;
}

simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

多維數(shù)組降為一維數(shù)組

遞歸降維

遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用自己；

遞歸函數(shù)的使用要注意函數(shù)終止條件避免死循環(huán)；

// 多維數(shù)組
let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
function simpleNormalizeChildren(children) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   children = Array.prototype.concat.apply([], children);
   for(let j =0; j<children.length; j++) {
    simpleNormalizeChildren(children)
   }
  }
 }
 return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

到此這篇關(guān)于JS數(shù)組降維的實(shí)現(xiàn)Array.prototype.concat.apply([], arr)的文章就介紹到這了,更多相關(guān)JS數(shù)組降維內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論