循环遍历一个对象并使用javascript将结果放入数组中
Looping through an object and putting result to an array with javascript
我正在尝试遍历一个对象，将对象的一些值放入一个新数组中。但是我很难弄清楚该怎么做。
这是我的对象：
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循环。对我来说，真正的挑战是从我的对象中获得正确的价值。我看了这篇文章来尝试解决它。
我得出的解决方案看起来像这样：
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]
我在这里还有一个正在运行的小提琴
所有帮助将不胜感激。
如果你只想要vehicles.list中的那些：
var arr = Object.keys(vehicles.list);
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(", "));<!-- 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>如果您希望 vehicles 的任何属性引用对象的所有键，则：
var arr = [];
Object.keys(vehicles).forEach(function(key) {
arr.push.apply(arr, Object.keys(vehicles[key]));
});
诀窍是我们可以使用 arr.push.apply(arr, /*the other array*/) 将整个条目数组推送到arr上。
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(", "));<!-- 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>或者，如果你真的喜欢单行，你可以使用Array#reduce但我认为清晰度会受到影响：
var arr = Object.keys(vehicles).reduce(function(a, key) {
a.push.apply(a, Object.keys(vehicles[key]));
return a;
}, []);
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(", "));<!-- 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>请注意，Object.keys和Array#forEach（以及Array#reduce）都是在ES5（2009-ish）中添加的，因此它们在所有现代浏览器中都有，但在IE8和其他类似的旧浏览器中缺少。不过，这三者都可以填充。
使用 for in 循环进行迭代时，您会在每次迭代中获取密钥。此键应用于访问原始数组中的值。在您的循环中，您正在访问一个不存在的（据我所知）变量 - 车辆。将其更改为数组的名称 - 车辆：
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);
相关文章：
- 如何实现基于两个数组创建结果数组的逻辑
- 无法获取所需的结果数组
- 动态结果数组需要使用 Angular JS 与不同布局的表绑定
- 如何从谷歌地图API返回的结果数组中提取城市名称
- 如何查询具有特定 id 的 json 文件并获取结果数组
- 如何将谷歌放置 API 结果数组与淘汰赛集成
- 是否保证 document.querySelectorAll(“input[type=checkbox”） 的结果数组的
- 如何使用 Parse.promise javascript 定义一个承诺数组并获取结果数组 [parse.com]
- HTML5 语音 API - 重置结果数组
- 如何访问在 ajax 中返回的结果数组
- 输出一个结果数组，其中包含给定数组的唯一元素的分组计数
- Javascript返回基于日期的平均测试结果数组
- NodeJS ExpressJS如何打印API结果数组
- 在添加到结果数组之前，请检查值是否存在
- 为什么String.match在结果数组中返回重复项
- 如何合并两个只有唯一或不同值的复杂JSON对象，这些值只显示在结果数组中
- Javascript -根据字符拆分字符串，但将其保留在结果数组中
- Javascript, array concat将Windows Object添加到结果数组中，但它不适用于Firefo
- 如何分割正则表达式空间和标点匹配，但保留结果数组中的标点符号
- 尝试从json树状结构JavaScript递归创建一个结果数组
