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

二維數組降為一維數組

循環降維

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]

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

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方法的參數是一個元素，該元素會被直接插入到新數組中；如果參數是一個數組，該數組的各個元素將被插入到新數組中；將該特性應用到代碼中：

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 的元素如果是一個數組，作為concat方法的參數，數組中的每一個子元素會被獨立插入進新數組。利用concat方法，我們將雙重循環簡化為了單重循環。

apply和concat降維

MDN上對于apply方法的介紹

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

apply

apply方法會調用一個函數，apply方法的第一個參數會作為被調用函數的this值，apply方法的第二個參數（一個數組，或類數組的對象）會作為被調用對象的arguments值，也就是說該數組的各個元素將會依次成為被調用函數的各個參數；將該特性應用到代碼中：

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方法的第二個參數，本身是一個數組，數組中的每一個元素（還是數組，即二維數組的第二維）會被作為參數依次傳入到concat中，效果等同于[].concat(1, 2, 3, [4, 5, 6], 7, 8, [9, 10])。利用apply方法，我們將單重循環優化為了一行代碼

Vue2.6.11版本源碼降維

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];// :any 可以去掉 這里是Vue通過Flow指定傳入的參數類型可以是任意類型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]

多維數組降為一維數組

遞歸降維

遞歸函數就是在函數體內調用自己；

遞歸函數的使用要注意函數終止條件避免死循環；

// 多維數組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]

到此這篇關于JS數組降維的實現Array.prototype.concat.apply([], arr)的文章就介紹到這了,更多相關JS數組降維內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！