javascript - 比较两个对象数组

Question

我有一个包含汽车列表和图像 URL 的数组。

在页面上，我有很多汽车的 list 。我想遍历页面上的所有汽车，如果它在汽车阵列中，那么我想将它的图像换成新图像。

解决此问题的最佳方法是什么？

<!-- example of on page list of cars -->

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

--

const cars = [
    {
        "id": "car1"
        "newImage": "imageaddress1"
    },
    {
        "id": "car2"
        "newImage": "imageaddress2"
    },
    {
        "id": "car3"
        "newImage": "imageaddress3"
    },
]

const allCarsNodeList = document.querySelectorAll('.car');
const allCars = Array.from(allProductsNodeList);

首先想到的是使用过滤器将页面上的汽车减少到只有特色汽车，但我不知道如何进行比较，因为数组或页面数据属性都不直接存在。

我基本上很困惑!任何正确方向的观点都将不胜感激。

Answer 1

你可以试试看

• 首先从 cars 数组创建一个对象，以 id 为键，图像 url 为值
• 现在，遍历数组并查看元素的 ID 是否存在于上面创建的对象中。如果存在，则更新对应img
的src

const cars = [{"id": "car1","newImage": "imageaddress1"},{"id": "car2","newImage": "imageaddress2"},{"id": "car3","newImage": "imageaddress3"}];
// Create a map of id and newImage
const obj = cars.reduce((a,c) => Object.assign(a, {[c.id] : c.newImage}), {});
// Get all cars 
const allCars = Array.from(document.querySelectorAll('.car'));
// Iterate over cars
allCars.forEach(c => {
  //if entry exists in the object, update corresponding image
  if(obj[c.dataset.id]) c.querySelector("img").src = obj[c.dataset.id];
});

<li class="car" data-id="car1">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car12">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car2">
    <img src="https://imageurl.com/currentImage" alt="">
</li>

<li class="car" data-id="car7">
    <img src="https://imageurl.com/currentImage" alt="">
</li>