比较数组和 For 循环

Question

好的，所以我一直在研究这个。我正在使用 For 循环比较两个数组的值。每次称为购物车的数组命中一个可以在产品数组中找到的数字时，它会显示产品数组的信息，每次被命中。我认为我的代码本身很好（虽然我可能是错的）但它没有显示值。所以我认为我在那里执行上述流程有问题。代码如下

function Fill(){
var txt=""
var products = new Array();
products[0] = {name: "refrigerator" , price:88.99, img:"img/refrigerator.jpg"};
products[1] = {name: "microwave oven" , price: 76.99 , img:"img/microwave.jpg"};
products[2] = {name: "dishwasher" , price:276.67 , img:"img/dishwasher.jpg"};
var carts = new Array ();   
carts[0]= 2;
carts[1]= 0;
carts[2]= 1;
carts[3]= 1;
carts[4]= 0;
carts[5]= 1;
carts[6]= 2;
carts[7]= 2;

for(var i=0; i < carts.length; i++){
    for(var j = 0; j < products.length; j++){
        if(carts[i] == j){
    txt +=products[j].name + ' ' + products[j].price +" <img src='"+ products[j].img + "'>"
    document.getElementById("answer").innerHTML += txt
                }
            }
        }
    }

Answer 1

"carts" 是一个数字数组（根据您的源代码），而 "products" 是一个对象数组。所以你的条件 "carts[i] == products[j]" 永远不会触发。

Answer 2

用 ES6 更新答案：

const products=[{name:"refrigerator",price:88.99,img:"img/refrigerator.jpg"},{name:"microwave oven",price:76.99,img:"img/microwave.jpg"},{name:"dishwasher",price:276.67,img:"img/dishwasher.jpg"}];
const carts=[2,0,1,1,0,1,2,2];

const productsInCart = [...new Set(carts)]
.reduce((a,c)=>{
  a.set(c,products[c])
  return a;
}, new Map());

const res = carts.map(c=>{
  const {name, price, img} = productsInCart.get(c)
  return `${name} ${price} <img src="${img}"/>`;
}).join("");

document.body.innerHTML = res;

您应该将 carts[i] 与 j 进行比较，否则您将找不到任何东西

var txt = ""
var products = new Array();
products[0] = {
  name: "refrigerator",
  price: 88.99,
  img: "img/refrigerator.jpg"
};
products[1] = {
  name: "microwave oven",
  price: 76.99,
  img: "img/microwave.jpg"
};
products[2] = {
  name: "dishwasher",
  price: 276.67,
  img: "img/dishwasher.jpg"
};
var carts = new Array();
carts[0] = 2;
carts[1] = 0;
carts[2] = 1;
carts[3] = 1;
carts[4] = 0;
carts[5] = 1;
carts[6] = 2;
carts[7] = 2;

for (var i = 0; i < carts.length; i++) {
  for (var j = 0; j < products.length; j++) {
    if (carts[i] == j) {
      txt = products[j].name + ' ' + products[j].price + " <img src='" + products[j].img + "'>"
      document.getElementById("answer").innerHTML += txt
    }
  }
}

<div id="answer"></div>

您的 txt 变量应修改为 = 而不是 +=

你应该优化你的代码。 document.getElementById("answer") 例如可以全局启动。

Answer 3

您的 appliance 变量的值是多少？它会导致代码出错。

也窃取 Alex 的答案： "carts" 是一个数字数组（根据您的源代码），而 "products" 是一个对象数组。所以你的条件 "carts[i] == products[j]" 永远不会触发。

也许这样更好？..

carts[7]= 2;

for(var i=0; i < carts.length; i++){
   
      
    txt +=products[carts[i]].name + ' ' + products[carts[i]].price +" <img src='"+ products[carts[i]].img + "'>"
    document.getElementById("answer").innerHTML += txt
             
        
    }

赞成 Grimbode 的回答，因为它与我的回答非常接近，但更清晰。

Answer 4

我不确定您为什么需要第二个 for 循环。你试图通过这样做来比较一个数字和一个产品对象，但它永远不会起作用。好的，假设您要实现的目标是如果 carts[0]=2 您想要 products[2] 的信息，然后尝试类似的操作：

for(i=0; i<carts.length; i++) {
    if(i<products.length) {
        currProd=products[carts[i]];
        //Process the currProd object as you will

    }    
}

比较数组和 For 循环

Comparring Arrays with For Loops

javascript

arrays

for-loop

用 ES6 更新答案：