比较一个数组和一个对象数组

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"
  },
];

我试图将 ingredientName 的字符串值与 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作为键从image Objects中转换另一个对象。

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);