優雅的數組降維——Javascript中apply方法的妙用

將多維數組（尤爲是二維數組）轉化爲一維數組是業務開發中的經常使用邏輯，除了使用樸素的循環轉換之外，咱們還能夠利用Javascript的語言特性實現更爲簡潔優雅的轉換。本文將從樸素的循環轉換開始，逐一介紹三種經常使用的轉換方法，並藉此簡單回顧Array.prototype.concat方法和Function.prototype.apply方法。
如下代碼將以把二維數組降維到一維數組爲例。

function reduceDimension(arr) {
    var reduced = [];
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].length; j++) {
            reduced.push(arr[i][j]);
        }
    }
    return reduced;
}

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

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

function reduceDimension(arr) {
    var reduced = [];
    for (var i = 0; i < arr.length; i++){
        reduced = reduced.concat(arr[i]);
    }
    return reduced;
}

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值，也就是說該數組的各個元素將會依次成爲被調用函數的各個參數；將該特性應用到代碼中：

function reduceDimension(arr) {
    return Array.prototype.concat.apply([], arr);
}

arr做爲apply方法的第二個參數，自己是一個數組，數組中的每個元素（仍是數組，即二維數組的第二維）會被做爲參數依次傳入到concat中，效果等同於[].concat([1,2], [3,4], [5,6])。