如何通过索引数组提取对象数组指定字段生成短数组并解决报错

你遇到的报错是以下两个问题共同导致的：

• 语法错误：你编写的push代码中，构造新对象的左大括号{没有对应的右大括号}闭合，会导致代码解析异常，进而触发运行时变量访问错误。
• 字段拼写错误：原images数组中颜色字段名为复数形式colours，你代码中取值时用了单数形式quizItem.colour，虽然这个问题不会直接触发quizItem.name相关报错，但会导致生成的新对象中colour字段值为undefined。

另外如果你的randomNum数组中存在大于等于images数组总长度的索引值，会导致images[randomNum[i]]取值为undefined，此时访问quizItem.name也会触发对应报错，需要注意索引有效性。

你可以直接用更简洁的map方法实现需求，避免手动循环的语法问题：

const finalList = randomNum.map(index => {
  const quizItem = images[index];
  return {
    name: quizItem.name,
    colour: quizItem.colours, // 注意这里用原数组的colours字段取值
    price: quizItem.price
  };
});

如果需要兼容可能存在的无效索引，可以加层判空处理：

const finalList = randomNum
  .filter(index => images[index]) // 过滤掉无效索引
  .map(index => {
    const quizItem = images[index];
    return {
      name: quizItem.name,
      colour: quizItem.colours,
      price: quizItem.price
    };
  });

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