如何 read/access name:values 个对象存储在数组中？

Question

如何访问存储在 randomImage.images 数组中的每个对象的 name:values？

我尝试使用 for in 循环（参见 randomImage.imagePicker 方法以供参考）但我得到的输出是：

0[object Object]
1[object Object]
2[object Object]
3[object Object]

(function() {

var randomImage = {

        images : [
                { 'image 1' : 'http://placehold.it/100x100'},
                { 'image 2' : 'http://placehold.it/200x200'},
                { 'image 3' : 'http://placehold.it/300x300'},
                { 'image 4' : 'http://placehold.it/400x400'}
                ],//images Array
        imagePicker : function () {
                        for (var k in this.images ) {
                            console.log(k+this.images[k]);
                        }
                }//imagePicker Method

}//randomImage Object

randomImage.imagePicker()

})()

Answer 1

不要使用 for...in 循环来迭代数组。

您可以通过Object.keys获取对象的可枚举自身属性。

randomImage.images.forEach(function(obj) {
  var prop = Object.keys(obj)[0],
      value = obj[prop];
  console.log(prop, value);
});

Answer 2

使用console.log(k,this.images[k]); （逗号而不是加号）

你将得到如下输出：

0 Object {image 1: "http://placehold.it/100x100"}
1 Object {image 2: "http://placehold.it/200x200"}
2 Object {image 3: "http://placehold.it/300x300"}
3 Object {image 4: "http://placehold.it/400x400"}

Answer 3

一个解决方案是这样的：

(function() {

var randomImage = {

        images : [
                { 'image 1' : 'http://placehold.it/100x100'},
                { 'image 2' : 'http://placehold.it/200x200'},
                { 'image 3' : 'http://placehold.it/300x300'},
                { 'image 4' : 'http://placehold.it/400x400'}
                ],//images Array
        imagePicker : function () {
                        for (var k in this.images ) {
                            
                            var curImg = this.images[k];
                            var key = Object.keys(curImg)[0];
                            
                          console.log(k+this.images[k]);

                          msg = k + ' : ' + key + ' => ' + curImg[key];
                          document.getElementById('el').innerHTML+='<div>'+msg+'<div>';
                        }
                }//imagePicker Method

}//randomImage Object

randomImage.imagePicker()

})()

<div id ='el'><div>

Answer 4

您可以使用 forEach 循环访问这些值。

this.images.forEach(function(image){
    for(var key in image) {
        console.log('key', key);
        console.log('value', image[key]);
    }
});

Answer 5

多一个选择。对于您现在拥有的结构，您需要两个循环。一个循环遍历图像数组，另一个循环访问键。

imagePicker : function () {

    for ( var i=0, len=this.images.length; i<len; i++ ) {

        var imgObj = this.images[ i ];

        for ( var key in imgObj ) {
            console.log( key + imgObj[ key ] );
        }

    }
}

虽然我想知道您是否可以只使用数组来存储图像 URL。

images: [
    'http://placehold.it/100x100',
    'http://placehold.it/200x200',
    'http://placehold.it/300x300',
    'http://placehold.it/400x400'
    ]

Answer 6

function() {
  var i = 0;
  var len = this.images.length;
  //loop through the images
  for (i; i < len; i++) {
    // access the Image object
    var oImage = this.images[i];
    // get the keys of the Image object
    var aKeys = Object.keys(oImage);
    // log the url of the image by accessing the first key
    console.log(oImage[aKeys[0]]);
  }
}

更好的解决方案是设计更好的数据模型，例如：

var images = [
 {
   name: 'image 1',
   url: '//placehold.it/100x100'
 }
 ...
]

并访问图像名称和 url 如：

function() {
  var i = 0;
  var len = this.images.length;

  for (i; i < len; i++) {
    var oImage = this.images[i];
    console.log(oImage.url, oImage.name);
  }
}

如何 read/access name:values 个对象存储在数组中？

How do I read/access name:values of Objects stored within an Array?

javascript

arrays

javascript-objects