Javascript 如何将值A B C从JS-OBJ复制到HTML集合成员的innerHTML？

因此，我有以下JS：

function createObject(){
  let object = {
    product1 : "Apple",
    product2 : "Banana",
    product3 : "Cucumber",
    product4 : "Duba",
    product5 : "Emil",
    product6 : "Fidschi",
  }

  return object
}

function setMyProducts(){
   let productNameElements = document.getElementsByClassName('customProductCardName')//$('.customProductCardName')
   let newContents = createObject()
   for(var i = 0; i < productNameElements.length; i++){

     console.log(productNameElements[i].innerHTML)
     console.log(newContents[i].innerHTML)
     productNameElements[i].innerHTML = newContents[i]
   }

 }

函数createObject（）{
让对象={
产品一：“苹果”，
产品二：“香蕉”，
产品三：“黄瓜”，
产品4：“Duba”，
产品5：“爱弥儿”，
产品6：“Fidschi”，
}
回波信号
}
函数setMyProducts（）{
让productNameElements=document.GetElementsByCassName（'customProductCardName'）/$（'.customProductCardName'））
让newContents=createObject（）
对于（var i=0；i

如您所见，我有一个包含多个属性的对象，我希望将每个属性的值复制到我通过Classname获取的HTML集合的各个成员的innerHTML中。但是，使用数字索引访问JS OBJ不起作用，因此这个“普通”for循环会抛出一个错误

现在我已经读了关于for…in和for…of循环的区别，基本上我想使用for…of循环来迭代对象，然后在循环中增加一个额外的变量来访问HTML集合的相应属性

但我不太喜欢这个解决方案，我想知道是否有一个更优雅的解决方案来解决这个问题。这将导致更少的代码，理想情况下没有额外的辅助变量。你知道吗

编辑：

我引用的HTML在这里。它在我的Zurb基金会框架内重复了六次：

<div class="product-card">
  <div class="product-card-thumbnail">
    <a href="#"><img src="https://placehold.it/180x180"/></a>
  </div>
  <h2 class="product-card-title"><a href="#" class="customProductCardName">Product Name</a></h2>
  <span class="product-card-desc">Product Description</span>
  <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
  <div class="product-card-colors">
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
  </div>
</div>

产品说明
$9.99$12.99

引发的错误如下：

---

“TypeError:newContents[i]未定义”

一旦您有了要迭代的元素的索引，您就可以通过将它（加上一个）与

产品连接起来来访问对象上的相应属性：


函数setMyProducts（）{
常量对象={
产品一：“苹果”，
产品二：“香蕉”，
产品三：“黄瓜”，
产品4：“Duba”，
产品5：“爱弥儿”，
产品6：“Fidschi”，
};
document.querySelectorAll（'.customProductCardName'））
.forEach（（元素，i）=>{
element.textContent=obj['product'+（i+1）]；
});
}
setMyProducts（）
这将对您有所帮助，因为newContents不是数组，所以newconstants[i]不起作用。因此，给定具有如下动态值的键

 productNameElements[i].innerHTML = newContents["product"+(i+1)]


函数createObject（）{
让对象={
产品一：“苹果”，
产品二：“香蕉”，
产品三：“黄瓜”，
产品4：“Duba”，
产品5：“爱弥儿”，
产品6：“Fidschi”，
}
回波信号
}
函数setMyProducts（）{
让productNameElements=document.GetElementsByCassName（'customProductCardName'）/$（'.customProductCardName'））
让newContents=createObject（）
对于（var i=0；i


产品说明
$9.99$12.99
产品说明
$9.99$12.99
产品说明
$9.99$12.99
您能否发布代码的“customProductCardName”html部分引发错误-什么错误？请发布完整的错误消息。如果可能，post-HTMLYou将
newContents
视为一个数组，但它不是数组。它是一个具有六个命名属性的对象：
product1
、
product2
，等等。这可以进一步简化：
forEach（（el i）=>element.textContent=obj['product'+（i+1）]
虽然可能，但在IMO中，该代码会稍微不那么清晰，因为它返回一个赋值，这非常奇怪（尽管
forEach
忽略了返回的值）。我喜欢遵循以前从未见过的林廷规则，但我能看到它的吸引力。