js將一個具備相同鍵值對的一維數組轉換成二維數組

這兩天，一個前端朋友在面試的筆試過程當中遇到了一道相似於「用js實現將一個具備相同code值的一維數組轉換成相同code值在一塊兒的二維數組」的題目。他面試事後，把這個問題拋給了我，問我會實現嗎？說實話，一開始，我也懵，我惟一能想起來的就是遍歷這個一維數組，而後拿數組中的code值來作比較，可是真實現起來就沒那麼容易了，何況之前我也沒有實現過這樣的功能，平時的開發中好像也沒遇到過這樣的功能。

來看看大概的筆試題吧：

let arr = [
      {code: "China", name: "xiaohuai"},
      {code: "Africa", name: "neiLuoBi"},   
      {code: "Asia", name: "hanGuo"},
      {code: "China", name: "tnnyang"},
      {code: "Africa", name: "nanFei"},      
      {code: "China", name: "yangMan"}
]

以上是一個具備相同code值的一維數組，須要轉換成以下的二維數組：

let arr = [
    [ {code: "China", name: "xiaohuai"}, {code: "China", name: "tnnyang"}, {code: "China", name: "yangMan"} ],
    [ {code: "Africa", name: "neiLuoBi"}, {code: "Africa", name: "nanFei"} ],
    [ {code: "Asia", name: "hanGuo"} ]  
]

看明白了吧。

那麼就來看看如何實現這樣的一個效果吧：

let arr = [
      {code: "China", name: "xiaohuai"},
      {code: "Africa", name: "neiLuoBi"},   
      {code: "Asia", name: "hanGuo"},
      {code: "China", name: "tnnyang"},
      {code: "Africa", name: "nanFei"},      
      {code: "China", name: "yangMan"}
]

var map = new Map();
var newArr = [];
arr.forEach(item => {
     map.has(item.code) ? map.get(item.code).push(item) : map.set(item.code, [item]);
})

newArr = [...map.values()];
    
console.log(newArr);

實現了一維數組轉二維，那麼再將轉換後的二維數組轉換爲一維數組呢？仍是直接上代碼吧：

let arr = [
    [ {code: "China", name: "xiaohuai"}, {code: "China", name: "tnnyang"}, {code: "China", name: "yangMan"} ],
    [ {code: "Africa", name: "neiLuoBi"}, {code: "Africa", name: "nanFei"} ],
    [ {code: "Asia", name: "hanGuo"} ]  
]

//方法一：
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;
}

console.log(reduceDimension(arr));

//方法二：
console.log([].concat.apply([], arr));

方法一是循環遍歷，沒啥說的。方法二有必要說一下，apply方法會調用一個函數，apply方法的第一個參數會做爲被調用函數的this值，apply方法的第二個參數（一個數組，或類數組的對象）會做爲被調用對象的arguments值，也就是說該數組的各個元素將會依次成爲被調用函數的各個參數。

本文參考：
https://segmentfault.com/q/1010000015730645
http://www.javashuo.com/article/p-ejwrcxqt-km.html
http://www.javashuo.com/article/p-gplrxsyb-gh.html