我有一个想要迭代的 JSON 对象。
"phone": {
"Samsung": {
"type": "S7"
},
"iPhone": {
"type": "6S"
},
"Google": {
"type": "Pixel"
}
}
我正在使用Object.key
映射这些值中的每一个,我认为这是处理对象的正确方法:
render() {
//this.props.phone contains the objects "Samsung", "iPhone", and "Google"
return (
Object.keys(this.props.phones).map((type) => {
console.log(type)
return (
<p>Type of phone: {type}</p>
)
})
)
}
但是,console.log
当我期待一个对象返回时,上面返回了这个:
为什么它返回一个值,而不是一个对象?
最佳答案
严格来说这是一个ecmascript-2017答案,但它可以很容易地融入到旧版本的 Javascript 中。
您想使用 Object.values
或Object.entries
循环遍历对象中的所有属性。其中 Object.keys
为您提供键,Object.values
为您提供属性(好吧,废话),Object.entries
为您提供一个数组对象中每个条目的[key, value]
。
您没有在当前代码中使用该键,因此这是 Object.values
选项:
Object.values(this.props.phones).map((type) => {
console.log(type)
return (
<p>Type of phone: {type}</p>
)
})
如果您想同时使用这两个选项,这里是 Object.entries
选项:
Object.entries(this.props.phones).map(([make, type]) => {
console.log(make)
console.log(type)
return (
<p>Make of phone: {make}</p>
<p>Type of phone: {type}</p>
)
})
您将看到我们使用 ES6 解构从 Object.entries
获取的数组中获取两个值。
每个函数的垫片都链接在 MDN 页面上。
关于Javascript:迭代 JSON 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42352161/