循环遍历一个对象并使用javascript将结果放入数组

时间：2014-11-20 16:27:40

标签： javascript arrays object for-loop for-in-loop

我正在尝试遍历一个对象，将一些来自该对象的值放入一个新数组中。但是我很难搞清楚如何去做。

这是我的目标：

var vehicles = {
    list:{
        "transport":{ //<-- This is the values I want to put to an array
            name:"transport",
            pixelWidth:31,
            pixelHeight:30,
            pixelOffsetX:15,
            pixelOffsetY:15,
            radius:15,
            speed:15,
            sight:3,
            cost:400,
            hitPoints:100,
            turnSpeed:2,
            spriteImages:[
                {name:"stand",count:1,directions:8}         
            ],
        },
        "harvester":{ //<-- This is the values I want to put to an array
            name:"harvester",
            pixelWidth:21,
            pixelHeight:20,
            pixelOffsetX:10,
            pixelOffsetY:10,
            radius:10,
            speed:10,
            sight:3,
            cost:1600,
            hitPoints:50,
            turnSpeed:2,
            spriteImages:[
                {name:"stand",count:1,directions:8}         
            ],
        },
        "scout-tank":{ //<-- This is the values I want to put to an array
            name:"scout-tank",
            canAttack:true,
            canAttackLand:true,
            canAttackAir:false,
            weaponType:"bullet",
            pixelWidth:21,
            pixelHeight:21,
            pixelOffsetX:10,
            pixelOffsetY:10,
            radius:11,
            speed:20,
            sight:3,
            cost:500,
            hitPoints:50,
            turnSpeed:4,
            spriteImages:[
                {name:"stand",count:1,directions:8}         
            ],
        },
        "heavy-tank":{ //<-- This is the values I want to put to an array
            name:"heavy-tank",
            canAttack:true,
            canAttackLand:true,
            canAttackAir:false,
            weaponType:"cannon-ball",
            pixelWidth:30,
            pixelHeight:30,
            pixelOffsetX:15,
            pixelOffsetY:15,
            radius:13,
            speed:15,
            sight:4,
            cost:1200,
            hitPoints:50,
            turnSpeed:4,
            spriteImages:[
                {name:"stand",count:1,directions:8}         
            ],
        }                       
    }

阅读其他帖子，我觉得我应该使用for-in循环。对我来说真正的挑战是从我的对象中获得正确的价值。我看过这个post试图解决它。

我找到了一个类似这样的解决方案：

var arr = [];

for (var key in vehicles)
    {
        var obj = vehicle[key];
        for (var prop in obj)
            {
                if(obj.hasOwnProperty(prop))
                {
                    arr.push(prop);
                }
            }
    }

console.log(arr);

但我只是从控制台收到此消息：

Array[0]length: 0__proto__: Array[0]

我还有一个小小的here

非常感谢所有帮助。

2 个答案:

答案 0 :(得分：1)

当使用for in循环进行迭代时，您将在每次迭代中获得密钥。此键应用于访问原始数组中的值。在你的循环中，你正在访问一个不存在的（据我所见）变量 - vehicle。将其更改为阵列的名称 - 车辆：

var arr = [];

for (var key in vehicles)
    {
        var obj = vehicles[key];
        for (var prop in obj)
            {
                if(obj.hasOwnProperty(prop))
                {
                    arr.push(prop);
                }
            }
    }

console.log(arr);

答案 1 :(得分：1)

如果你只想要vehicles.list中的那些：

var arr = Object.keys(vehicles.list);

＆＃13;
＆＃13; 
var vehicles = {
  list:{
    "transport":{ //<-- This is the values I want to put to an array
      name:"transport",
      pixelWidth:31,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:15,
      speed:15,
      sight:3,
      cost:400,
      hitPoints:100,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "harvester":{ //<-- This is the values I want to put to an array
      name:"harvester",
      pixelWidth:21,
      pixelHeight:20,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:10,
      speed:10,
      sight:3,
      cost:1600,
      hitPoints:50,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "scout-tank":{ //<-- This is the values I want to put to an array
      name:"scout-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"bullet",
      pixelWidth:21,
      pixelHeight:21,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:11,
      speed:20,
      sight:3,
      cost:500,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "heavy-tank":{ //<-- This is the values I want to put to an array
      name:"heavy-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"cannon-ball",
      pixelWidth:30,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:13,
      speed:15,
      sight:4,
      cost:1200,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    }    
  }
};
var arr = Object.keys(vehicles.list);
snippet.log(arr.join(", "));
＆＃13; 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
＆＃13;
＆＃13;
＆＃13;

如果您想要{em>任何属性vehicles引用的对象的所有键，那么：

var arr = [];
Object.keys(vehicles).forEach(function(key) {
  arr.push.apply(arr, Object.keys(vehicles[key]));
});

我们可以使用arr将整个条目数组推送到arr.push.apply(arr, /*the other array*/)。

＆＃13;
＆＃13; 
var vehicles = {
  list:{
    "transport":{ //<-- This is the values I want to put to an array
      name:"transport",
      pixelWidth:31,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:15,
      speed:15,
      sight:3,
      cost:400,
      hitPoints:100,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "harvester":{ //<-- This is the values I want to put to an array
      name:"harvester",
      pixelWidth:21,
      pixelHeight:20,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:10,
      speed:10,
      sight:3,
      cost:1600,
      hitPoints:50,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "scout-tank":{ //<-- This is the values I want to put to an array
      name:"scout-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"bullet",
      pixelWidth:21,
      pixelHeight:21,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:11,
      speed:20,
      sight:3,
      cost:500,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "heavy-tank":{ //<-- This is the values I want to put to an array
      name:"heavy-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"cannon-ball",
      pixelWidth:30,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:13,
      speed:15,
      sight:4,
      cost:1200,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    }    
  },
  list2: {
    "new-key-for-list2":{
      }
  }
};
var arr = [];
Object.keys(vehicles).forEach(function(key) {
  arr.push.apply(arr, Object.keys(vehicles[key]));
});
snippet.log(arr.join(", "));
＆＃13; 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
＆＃13;
＆＃13;
＆＃13;

或者如果你真的喜欢单行，你可以使用Array#reduce，但我认为清晰度会受到影响：

var arr = Object.keys(vehicles).reduce(function(a, key) {
  a.push.apply(a, Object.keys(vehicles[key]));
  return a;
}, []);

＆＃13;
＆＃13; 
var vehicles = {
  list:{
    "transport":{ //<-- This is the values I want to put to an array
      name:"transport",
      pixelWidth:31,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:15,
      speed:15,
      sight:3,
      cost:400,
      hitPoints:100,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "harvester":{ //<-- This is the values I want to put to an array
      name:"harvester",
      pixelWidth:21,
      pixelHeight:20,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:10,
      speed:10,
      sight:3,
      cost:1600,
      hitPoints:50,
      turnSpeed:2,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "scout-tank":{ //<-- This is the values I want to put to an array
      name:"scout-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"bullet",
      pixelWidth:21,
      pixelHeight:21,
      pixelOffsetX:10,
      pixelOffsetY:10,
      radius:11,
      speed:20,
      sight:3,
      cost:500,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    },
    "heavy-tank":{ //<-- This is the values I want to put to an array
      name:"heavy-tank",
      canAttack:true,
      canAttackLand:true,
      canAttackAir:false,
      weaponType:"cannon-ball",
      pixelWidth:30,
      pixelHeight:30,
      pixelOffsetX:15,
      pixelOffsetY:15,
      radius:13,
      speed:15,
      sight:4,
      cost:1200,
      hitPoints:50,
      turnSpeed:4,
      spriteImages:[
        {name:"stand",count:1,directions:8}         
      ],
    }    
  },
  list2: {
    "new-key-for-list2":{
      }
  }
};
var arr = Object.keys(vehicles).reduce(function(a, key) {
  a.push.apply(a, Object.keys(vehicles[key]));
  return a;
}, []);
snippet.log(arr.join(", "));
＆＃13; 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
＆＃13;
＆＃13;
＆＃13;

请注意，Object.keys和Array#forEach（以及Array#reduce）都已添加到ES5（2009-ish）中，因此它们适用于所有现代浏览器，但在IE8中丢失和其他类似的旧浏览器。但是，这三种都可以是polyfilled。

相关问题
最新问题