根据数组元素值生成对应新数组的技术实现问题

我来帮你梳理下代码里的问题，以及给出符合你需求的解决方案～

你的代码存在几个关键问题： #

• 数组元素访问错误：你在循环里直接用val（整个数组）和数值比较，而不是当前循环的元素val[i]；另外val.value是完全错误的写法，数组元素没有这个属性。
• 数组操作错误：color是你声明的数组，但你用了+=来拼接，这会把数组变成字符串，正确的做法是用color.push()来向数组添加元素。
• 逻辑与需求不匹配：你的条件判断是基于数值和200的比较，但你的需求是把1→red、2→green、3→blue、4→black，这完全是两个不同的逻辑，自然得不到预期结果。

方案1：修正for循环实现 #

如果你想继续用for循环，可以这样修改，直接根据元素值做对应映射：

var val = [1, 2, 3, 4];
var color = [];

for (var i = 0; i < val.length; i++) {
  const currentNum = val[i];
  if (currentNum === 1) {
    color.push("red");
  } else if (currentNum === 2) {
    color.push("green");
  } else if (currentNum === 3) {
    color.push("blue");
  } else if (currentNum === 4) {
    color.push("black");
  } else {
    // 处理其他未定义的数值，默认用grey
    color.push("grey");
  }
}

console.log(color); // 输出 ["red", "green", "blue", "black"]

方案2：用对象映射+map方法（更简洁） #

对于这种固定值的映射，用对象做映射表，再结合数组的map方法会更优雅，代码可读性也更高：

var val = [1, 2, 3, 4];
// 定义数值到颜色的映射表
const valueColorMap = {
  1: "red",
  2: "green",
  3: "blue",
  4: "black"
};

// 遍历原数组，每个元素对应到映射表的颜色，没有对应值则用grey
var color = val.map(num => valueColorMap[num] || "grey");

console.log(color); // 输出 ["red", "green", "blue", "black"]

map方法会遍历数组的每个元素，返回一个新数组，每个元素是你处理后的结果，非常适合这种数组转换的场景。

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