将数组与对象数组进行比较

Question

我有以下数组和一个对象数组。

const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce'];

let imageObjects = [
  {
    name: 'chicken',
    image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg"
  },
  {
    name: 'cheese',
    image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png"
  },
  {
    name: 'tomato',
    image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png"
  },
  {
    name: 'lettuce',
    image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg"
  },
];

我正在尝试将成分名称的字符串值与 imageObjects 匹配。 我的目的是检索 ImageObjects 下的图像。

const generateDishes = () => {

  for (let i = 0; i < ingredientName.length; i++) {
    for (let i = 0; i < imageObjects.length; i++) {
        if (ingredientName[i] == imageObjects[i].name) {
            const newImage = $('<img>').attr('src', imageObjects[i].image)
            $('#dishRect1').append(newImage)
        }
    }

  }
};

Answer 1

你可以这样做：

 const ingredientName = ["chicken", "cheese", "tomato", "lettuce"]; let imageObjects = [{ name: "chicken", image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg", }, { name: "cheese", image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png", }, { name: "tomato", image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png", }, { name: "lettuce", image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg", }, ]; let images = ingredientName.map((ingredient) => imageObjects.find((image) => image.name === ingredient).image ); console.log(images)

Answer 2

使用 greadientName 作为键从图像对象转换另一个 object。

 const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce']; let imageObjects = [ { name: 'chicken', image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg" }, { name: 'cheese', image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png" }, { name: 'tomato', image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png" }, { name: 'lettuce', image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg" }, ]; let imageMap = imageObjects.reduce((agg, {name, image})=>{ return {...agg, [name]: image} },{})

现在您可以迭代 O(n) 时间复杂度。

 for (let i = 0; i < ingredientName.length; i++) { const newImage = $('<img>').attr('src', imageMap[ingredientName[i]]) $('#dishRect1').append(newImage) }

Answer 3

尝试这个：

 const ingredientName = ['chicken', 'cheese', 'tomato', 'lettuce']; let imageObjects = [ { name: 'chicken', image: "https://spoonacular.com/cdn/ingredients_100x100/whole-chicken.jpg" }, { name: 'cheese', image: "https://spoonacular.com/cdn/ingredients_100x100/cheddar-cheese.png" }, { name: 'tomato', image: "https://spoonacular.com/cdn/ingredients_100x100/tomato.png" }, { name: 'lettuce', image: "https://spoonacular.com/cdn/ingredients_100x100/iceberg-lettuce.jpg" }, ]; result=imageObjects.filter(({name})=> ingredientName.includes(name)).map((elem)=> elem.image); console.log(result);