快捷導(dǎo)航

JS數(shù)組降維的實現(xiàn)Array.prototype.concat.apply([], arr)

更新時間：2020年04月28日 09:18:51 作者：Web泓

這篇文章主要介紹了JS數(shù)組降維的實現(xiàn)Array.prototype.concat.apply([], arr)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

二維數(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]

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

concat降維

MDN上對于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ù)是一個元素，該元素會被直接插入到新數(shù)組中；如果參數(shù)是一個數(shù)組，該數(shù)組的各個元素將被插入到新數(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 的元素如果是一個數(shù)組，作為concat方法的參數(shù)，數(shù)組中的每一個子元素會被獨立插入進新數(shù)組。利用concat方法，我們將雙重循環(huán)簡化為了單重循環(huán)。

apply和concat降維

MDN上對于apply方法的介紹

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

apply

apply方法會調(diào)用一個函數(shù)，apply方法的第一個參數(shù)會作為被調(diào)用函數(shù)的this值，apply方法的第二個參數(shù)（一個數(shù)組，或類數(shù)組的對象）會作為被調(diào)用對象的arguments值，也就是說該數(shù)組的各個元素將會依次成為被調(diào)用函數(shù)的各個參數(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方法的第二個參數(shù)，本身是一個數(shù)組，數(shù)組中的每一個元素（還是數(shù)組，即二維數(shù)組的第二維）會被作為參數(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通過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ù)組降維的實現(xiàn)Array.prototype.concat.apply([], arr)的文章就介紹到這了,更多相關(guān)JS數(shù)組降維內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: