JS数组按key分组代码在Edge、IE中报错如何解决？

报错原因 #

• IE浏览器报错：IE全版本不支持ES6及以上语法，你代码里用到的箭头函数、const声明、Array.prototype.find方法都不属于ES5标准，所以直接触发语法错误。
• 旧版Edge（EdgeHTML内核，非Chromium版）报错：该版本未实现对象展开运算符{...curr}的语法支持，你已经用Object.assign的方案解决了该问题。

原实现性能评估 #

原实现不是最优方案，时间复杂度为O(n²)：每次reduce遍历元素时，都会调用find遍历一次已处理的结果数组，数据量较大时性能损耗非常明显。
更优的实现是用哈希表存储已出现的id映射，将时间复杂度降低到O(n)，同时还可以规避Array.prototype.find的兼容问题。

全兼容实现方案 #

你可以直接使用以下ES5标准的兼容代码，支持IE9及以上、所有版本Edge、Chrome、Firefox：

var d = [
  {"teamID":1,"name":"WMH ED Medics","id":1,"username":"WHT\\andrew.bones","lastLoggedIn":null,"archive":false,"forename":"andrew","surname":"bones","band":"Band 7","role":"Developer","competency":"Kicks","employeeNumber":"123"},
  // 其余数组项保持不变
];

function reduceJson(baseData,k) {
  // 用哈希表存储id和对应节点的映射，避免每次遍历查找
  var idMap = {};
  var newData = [];
  for (var i = 0; i < baseData.length; i++) {
    var curr = baseData[i];
    if (idMap[curr.id]) {
      idMap[curr.id][k].push(curr[k]);
    } else {
      // 兼容低版本浏览器的对象拷贝，替代Object.assign和对象展开
      var newNode = {};
      for (var key in curr) {
        if (curr.hasOwnProperty(key)) {
          newNode[key] = curr[key];
        }
      }
      newNode[k] = [curr[k]];
      idMap[curr.id] = newNode;
      newData.push(newNode);
    }
  }
  return newData;
}
console.log(reduceJson(d,"name"))

如果你的项目有引入polyfill，也可以保留reduce的写法，只替换箭头函数、const和对象展开部分即可。

内容的提问来源于stack exchange，提问作者pee2pee