優雅的陣列降維——Javascript中apply方法的妙用

發表於2016-02-18

將多維陣列(尤其是二維陣列)轉化為一維陣列是業務開發中的常用邏輯,除了使用樸素的迴圈轉換以外,我們還可以利用Javascript的語言特性實現更為簡潔優雅的轉換。本文將從樸素的迴圈轉換開始,逐一介紹三種常用的轉換方法,並藉此簡單回顧Array.prototype.concat方法和Function.prototype.apply方法。
以下程式碼將以把二維陣列降維到一維陣列為例。

1. 樸素的轉換

此方法思路簡單,利用雙重迴圈遍歷二維陣列中的每個元素並放到新陣列中。

 

2. 利用concat轉換
先來回顧一下MDN上對於該方法的介紹:
“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).”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

即如果concat方法的引數是一個元素,該元素會被直接插入到新陣列中;如果引數是一個陣列,該陣列的各個元素將被插入到新陣列中;將該特性應用到程式碼中:

arr的每一個元素都是一個陣列,作為concat方法的引數,陣列中的每一個子元素又都會被獨立插入進新陣列。
利用concat方法,我們將雙重迴圈簡化為了單重迴圈。

 

3. 利用apply和concat轉換
按照慣例,先來回顧一下MDN上對於apply方法的介紹:
“The apply() method calls a function with a given this value and arguments provided as an array.”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

即apply方法會呼叫一個函式,apply方法的第一個引數會作為被呼叫函式的this值,apply方法的第二個引數(一個陣列,或類陣列的物件)會作為被呼叫物件的arguments值,也就是說該陣列的各個元素將會依次成為被呼叫函式的各個引數;將該特性應用到程式碼中:

arr作為apply方法的第二個引數,本身是一個陣列,陣列中的每一個元素(還是陣列,即二維陣列的第二維)會被作為引數依次傳入到concat中,效果等同於[].concat([1,2], [3,4], [5,6])。
利用apply方法,我們將單重迴圈優化為了一行程式碼,很簡潔有型有木有啊~

讀者也可參照本文思路,自己利用遞迴實現N維陣列降維的邏輯。

相關文章