如何在IE11不兼容场景下将键值对数组添加到JavaScript Map？

没问题，我来给你几个适配IE11的解决方案，既能快速把你的键值对数组转换成可通过字符串键访问的结构，又不用手动逐个调用Map.set()：

方案1：转成普通JavaScript对象（最省心的兼容方案） #

IE11对普通对象的支持非常完善，而且用对象访问值的语法更直观（可以用obj[key]或者obj.key）。我们可以用Array.forEach快速遍历数组填充对象：

let arr = [ ['ar', ['cl', 'bl']], ['bs', ['kl', 'ml']], ['cs', ['rk', 'uk']], ['da', ['mk', 'ak']] ];
let keyedObj = {};

// 遍历数组填充对象
arr.forEach(item => {
  keyedObj[item[0]] = item[1];
});

// 访问示例
console.log(keyedObj['ar']); // 输出: ['cl', 'bl']
console.log(keyedObj.bs);    // 输出: ['kl', 'ml']

注：IE11完全支持Array.forEach，所以这个方案没有兼容性问题。

方案2：手动填充Map实例（保留Map特性） #

如果你确实需要使用Map而不是普通对象（比如需要键的类型不限于字符串、要保持插入顺序等），IE11的Map虽然不支持构造函数直接传入数组，但支持Map.set()方法。我们同样可以用遍历快速填充：

let arr = [ ['ar', ['cl', 'bl']], ['bs', ['kl', 'ml']], ['cs', ['rk', 'uk']], ['da', ['mk', 'ak']] ];
let map = new Map();

// 遍历数组填充Map
arr.forEach(item => {
  map.set(item[0], item[1]);
});

// 访问示例
console.log(map.get('ar')); // 输出: ['cl', 'bl']
console.log(map.get('cs')); // 输出: ['rk', 'uk']

方案3：封装可复用工具函数（更健壮） #

如果需要多次做类似的转换，可以封装一个工具函数，顺便做一些边界校验，避免非法输入导致报错：

function createMapFromArray(arr) {
  const map = new Map();
  // 先校验输入是否为有效数组
  if (!Array.isArray(arr)) return map;
  
  arr.forEach(item => {
    // 确保每个项是包含键和值的数组
    if (Array.isArray(item) && item.length >= 2) {
      map.set(item[0], item[1]);
    }
  });
  return map;
}

// 使用示例
let arr = [ ['ar', ['cl', 'bl']], ['bs', ['kl', 'ml']], ['cs', ['rk', 'uk']], ['da', ['mk', 'ak']] ];
let myMap = createMapFromArray(arr);
console.log(myMap.get('da')); // 输出: ['mk', 'ak']

选择建议 #

• 如果只是需要字符串键访问值，优先选方案1（普通对象），语法更简洁；
• 如果需要Map的专属特性（比如非字符串键、迭代器支持等），选方案2或3。

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