Vanilla Javascript 在数组上使用函数，每个元素有多个值

Question

我想使用以下内容（创建一个画廊卡，其中包含通过数组提供的初始信息和一个用于添加附加信息的表单）我已经能够获得以下功能来处理通过表单添加的信息，但有无法让函数在我拥有的数组上工作。

function galleryAddItems(image, title){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = image;
    galleryElement.querySelector(".gallery__text").textContent = title;

    galleryContainer.prepend(galleryElement);

}

在我拥有的数组上

const initialCards = [
    {
        name: "The End Place",
        link: "images/cliffside__Katie-Rodriguez.jpg"
    },
    {
        name: "Turn That Leaf Over",
        link: "images/leaf__chuttersnap.jpg"
    },
    ...

];

目前有第二个功能设置为

initialCards.forEach(function(thingy){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = thingy.link;
    galleryElement.querySelector(".gallery__text").textContent = thingy.name;

    galleryContainer.append(galleryElement);

});

对于这个特定的实例，并希望避免重复代码以使其工作。

我之前在函数中包含了 galleryAddItems 的 .value ，因为它在不同的地方需要，但我补充说，当它被调用时希望它在这里工作。 我试过了

initialCards.forEach(galleryAddItems(link, name)) 并尝试了initialCards.link/.name之类的东西 initialCardsLink/initialCardsName 如果我不输入参数，我将无法使图像 URL 正常工作，并且索引将放置在我希望具有名称/标题的位置。

Answer 1

无需更改 galleryAddItems() 函数的简单方法是：

initialCards.forEach(thingy => galleryAddItems(thingy.link, thingy.name));

就个人而言，我可能会考虑将第一个函数更改为：

function galleryAddItems(image) {
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = image.link;
    galleryElement.querySelector(".gallery__text").textContent = image.name;

    galleryContainer.prepend(galleryElement);

}

这样你就可以简单地做：

initialCards.forEach(galleryAddItems);

Answer 2

您需要将一个函数传递给forEach 函数，目前，您正在传递galleryAddItems 的返回值，因为您正在调用它。

我建议重构您的代码，以便 galleryAddItems 将卡片作为参数，然后使用 forEach 为每张卡片调用它。

function galleryAddItems(card){
    const galleryElement = galleryTemplate.cloneNode(true);

    galleryElement.querySelector(".gallery__image").src = card.link;
    galleryElement.querySelector(".gallery__text").textContent = card.name;

    galleryContainer.prepend(galleryElement);

}

// Call galleryAddItems for each card
initialCards.forEach(galleryAddItems)