JavaScript中关于关联数组的SHIFT和POP操作

Question

使用普通数组，我可以使用 shift() 和 pop() 从数组中获取图像的 src； 我想使用关联数组做同样的事情来添加名称和 ID。

单个数组

var products = ['product1.jpg'];
$('#products').append('<img src="' + products.shift() + '">');

关联数组

var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
$('#products').append('<img id="' + products.shift() + '" name="' + products.shift() + '" src="' + products.shift() + '">');

- Tim

---

请注意，JavaScript中的“常规数组”也是关联数组。只是它们获得了一堆额外的数组方法 - 但它们仍然是关联数组。 - Šime Vidas

Answer 1

您正在使用一个包含对象的常规数组，因此shift和pop将起作用，但会返回对象。

var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
var prod = products.shift();
$('#products').append('<img id="' + prod.id + '" name="' + prod.name + '" src="' + prod.image + '">');

- James

Answer 2

这行代码：var products = [{id:'1',name:'product 1',image:'product1.jpg'}]; 声明了一个只有一个值的数组。这个单一的值是一个带有属性 id、name 和 image 的对象。当你在数组上调用 shift 方法时，返回的值将是这个对象。

- Finbarr

---

请注意，您的回答并没有回答问题。 - Šime Vidas

我认为我的答案提供了足够的信息，让OP自己意识到问题所在，并且仅仅停留在为他编写代码的边缘。我稍微编辑了一下。 - Finbarr

我试了几个，它们都能工作，我非常感谢所有人的帮助。谢谢大家！根据Finbarr的解释，我对正在进行的项目进行了轻微更改，并且从单一数组到关联数组进行了学习。但是再次强调，它们都工作正常。谢谢！ - Tim

Answer 3

var products = [{id:'1',name:'product 1',image:'product1.jpg'}];

for(var i =0; i < products.length; i++){
  var product = products[i];
  $('#products').append('<img id="' + product.id + '" name="' + product.name + '" src="' + product.image + '">');
}

- Kevin Bowersox

Answer 4

shift()会将整个对象从索引中取出，而不是像你的例子中一样逐个取出。

你需要通过名称访问对象才能得到你想要的。

var products = [{id:'1',name:'product 1',image:'product1.jpg'}, {id:'2',name:'product 2',image:'product2.jpg'}];

var currentProduct = products.shift();
$('#products').append('<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">');

循环遍历它

while(products.length>0){
    var currentProduct = products.shift();
    $('#products').append('<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">');
}

更好的性能循环是一次写入DOM。

var strOut = "";
while(products.length>0){
    var currentProduct = products.shift();
    strOut  += '<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">';
}
$('#products').append( strOut );

- epascarello

Answer 5

1. 您可以缓存shift，并使用对象的属性：

   var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
   var product  = products.shift();
   $('#products').append('<img id="' + product.id 
                        + '" name="' + product.name 
                        + '" src="'  + product.image + '">');
   

2. 您可以将值以不同方式存储，作为多维数组：

   var products = [['1','product 1','product1.jpg']];
   var product  = products.shift();
   $('#products').append('<img id="' + product.shift()
                        + '" name="' + product.shift() 
                        + '" src="'  + product.shift() + '">');
   

- vol7ron