javascript - 关联数组上的 Javascript SHIFT 和 POP

Question

使用常规数组，我可以使用shift()and从数组中获取图像 src pop()；我想使用关联数组来添加名称和 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() + '">');

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 + '">');

Answer 2

这一行：var products = [{id:'1',name:'product 1',image:'product1.jpg'}];声明了一个内部包含单个值的数组。单个值是具有属性id、name和的对象image。当你调用shift数组时，返回的值就是这个对象。

Answer 3

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

   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() + '">');
   

Answer 4

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 + '">');
}

Answer 5

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 );