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