Javascript SHIFT и POP на ассоциативном массиве

Question

Используя обычный массив, я могу получить изображение src из массива, используя shift() и pop();Я хотел бы сделать то же самое, используя ассоциативный массив для добавления имени и идентификатора.

Одиночный массив

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

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

Answer 5

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