我有一个要迭代通过的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提供属性(well，duh)，object.entries提供对象中每个条目的数组[key,value]。
当前代码中没有使用该键，因此下面是object.values选项：
Object.values(this.props.phones).map((type) => {
console.log(type)
return (
<p>Type of phone: {type}</p>
)
})
下面是object.entrients选项，如果您想同时使用这两个选项：
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获得的数组中获得两个值。
每个功能的shims都链接在MDN页面上。
