如何基于基础颜色数据动态创建JavaScript Map对象，无需预定义变量

不用预先定义每个颜色的Map变量，你可以用一个统一的对象容器来存储所有动态生成的Map，不管有多少种颜色都能自动处理，代码更简洁易维护。

修改后的实现代码 #

const colorMap = {
  "black": {
    "filterHelper": [
      "Black",
      "Black Agate",
      "Black Caiman",
      // 省略其他别名...
    ]
  },
  "blue": {
    "filterHelper": [
      "Blue",
      "Other blue synonyms.."
    ]
  },
  "brown": {
    "filterHelper": [
      "Brown",
      "Other brown synonyms.."
    ]
  },
  // 其他13种颜色...
};

// 创建一个对象，用来存放所有颜色对应的Map
const colorMaps = {};

for (const [colorKey, colorData] of Object.entries(colorMap)) {
  // 取出当前颜色的别名数组
  const colorArray = colorData.filterHelper;
  // 获取颜色的通用名称（数组第一项）
  const colorName = colorArray[0];
  
  // 动态创建Map并存入容器，保持和原变量名一致的命名（比如black对应blackMap）
  colorMaps[`${colorKey}Map`] = new Map();
  colorMaps[`${colorKey}Map`].set(colorName, colorArray);
}

// 用法示例：访问黑色的Map
console.log(colorMaps.blackMap.get("Black"));
// 访问蓝色的Map
console.log(colorMaps.blueMap.get("Blue"));

关键说明 #

• 用colorMaps作为统一容器，彻底告别逐个定义blackMap、blueMap这类变量的繁琐操作
• 遍历过程中通过${colorKey}Map自动生成对应键名，和你原来的变量命名习惯保持一致
• 如果不需要xxxMap的格式，还可以直接用颜色key作为容器的键，代码会更简洁

简化版（直接用颜色key作为键） #

const colorMaps = {};

for (const [colorKey, colorData] of Object.entries(colorMap)) {
  const colorArray = colorData.filterHelper;
  const colorName = colorArray[0];
  
  // 直接用颜色key作为容器键，一步创建并赋值Map
  colorMaps[colorKey] = new Map([[colorName, colorArray]]);
}

// 用法示例
console.log(colorMaps.black.get("Black"));

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