基于另一个元素较少的数组创建一个数组

Question

我有以下包含数百个对象的数组

const images = [
  {
    "name" : "sky",
    "width" : "90",
    "height" : "150",
    "colours" : ["pink", "yellow", "red"],
    "price": "64"
  },
  {
    "name" : "old car",
    "width" : "90",
    "height" : "150",
    "colours" : ["dark purple", "sand", "light green"],
    "price": "35"
  },
  {
    "name" : "landscape",
    "width" : "90",
    "height" : "150",
    "colours" : ["dark blue", "violet"],
    "price": "85"
  },
  {
    "name" : "kitchen",
    "width" : "90",
    "height" : "150",
    "colours" : ["red", "green"],
    "price": "38"
  },
...
]

我想创建一个只有 10 个对象和一些键/值对（名称、颜色、价格）的新数组。可以使用另一个数字数组作为索引来提取这 10 个对象。

这是一个包含索引的数组示例：

randomNum = [4,24,39,82,92,27,123,22,84,65]

新数组 - 预期结果 - 应该类似于此

data = [
  {
      name: "landscape",
      colour: ["dark blue", "violet"],
      price: "85"
  },
  {
      name: "kitchen",
      colour: ["red", "green"],
      price: "38"
  },
  ...
]

我正在尝试迭代

const finalList = []; //new array
let quizItem;

for (let i = 0; i < 10; i++) { 
   quizItem= images[randomNum[i]];
   finalList.push({name: quizItem.name, colour: quizItem.colour, price: quizItem.price);  
}

我收到一条错误消息...undefined is not an object (evaluating 'quizItem.name')

如果我只是使用quizList.push(quizItem);，它可以正常工作并创建一个新数组，其中只有 10 条记录，但所有对象的项（键/值对）与原始数组相同。

Answer 1

您在这里面临的问题是当您访问randomNum[i] 时，您使用randomNum[i] 获得的值可能超出了images 列表的范围。因此，您试图访问不存在的东西或只是undefined。作为一种解决方案，您可以安全地生成如下所示的随机列表，然后使用它来打印您的项目。

    const images = [
    {
        "name": "sky",
        "width": "90",
        "height": "150",
        "colours": ["pink", "yellow", "red"],
        "price": "64"
    },
    {
        "name": "old car",
        "width": "90",
        "height": "150",
        "colours": ["dark purple", "sand", "light green"],
        "price": "35"
    },
    {
        "name": "landscape",
        "width": "90",
        "height": "150",
        "colours": ["dark blue", "violet"],
        "price": "85"
    },
    {
        "name": "kitchen",
        "width": "90",
        "height": "150",
        "colours": ["red", "green"],
        "price": "38"
    }
];

    generateRandomNumbersList = (size, maxValue) => {
    let randomNums = [];
    let currentNum;

    while (randomNums.length < size) {
        currentNum = Math.floor(Math.random() * maxValue);
        if (currentNum < maxValue) {
            randomNums.push(currentNum);
        }
    }
    return randomNums;
}

    let randomNums = generateRandomNumbersList(10, images.length);

    const finalList = []; //new array
    let quizItem;

    for (let count = 0; count < 10; count++) {
    quizItem = images[randomNums[count]];
    finalList.push({ name: quizItem.name, colour: quizItem.colours, price: quizItem.price });
}

    console.log(finalList);

Answer 2

您的代码应该可以正常使用 cmets 中指出的更正。 另外，您在对象中没有colour 属性；但你有colours；也更正它。您也可以使用.map()，如下所示：

const finalList = randomNum.map(n => images[n])
.map(({name, colours, price}) => ({name, colours, price});