ES5环境下JavaScript flatMap替代方案及映射逻辑实现咨询

完整实现代码 #

var b = [{
  "errorname": [{
    "name": "Error 01",
    "desc_1": "Test: 01",
    "desc_2": "Testing"
  }, {
    "name": "Error 03",
    "desc_1": "Test: 03",
    "desc_2": "Testing"
  }],
}, {
  "errorname": [{
    "name": "Error 02",
    "desc_1": "Test: 02",
    "desc_2": "Testing"
  }, {
    "name": "Error 09",
    "desc_1": "Test: 09",
    "desc_2": "Testing"
  } ]
}];

// 替代flatMap：先map提取errorname数组，再用concat合并为一维数组
var errorList = Array.prototype.concat.apply([], b.map(function(o) {
  return o.errorname;
}));

// 替代解构剩余运算符：手动拷贝排除name的属性
var mapEntries = errorList.map(function(item) {
  var entryValue = {};
  for (var key in item) {
    if (item.hasOwnProperty(key) && key !== 'name') {
      entryValue[key] = item[key];
    }
  }
  return [item.name, entryValue];
});

var errorMap = new Map(mapEntries);

console.log(errorMap);

配套样式代码保持不变：

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

改造说明 #

• flatMap 替代逻辑：ES9的flatMap等价于「先执行map生成二维数组，再对结果做1层扁平化」，ES5环境下可以通过Array.prototype.concat.apply([], 二维数组)实现，apply会把二维数组的每一项作为concat的参数传入，最终合并为一维数组。
• 对象剩余运算符替代逻辑：原代码中{name, ...e}的作用是提取name属性，剩余属性存入e对象，ES5下通过for...in遍历对象属性，跳过name属性，将其余自有属性拷贝到新对象即可实现，hasOwnProperty判断用于避免原型链上的属性被意外拷贝。
• 所有ES6+语法（箭头函数、const关键字、解构赋值、剩余运算符）均替换为ES5原生支持的写法，可在低版本Electron环境正常运行。

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