遍历对象之前,先看Object.keys()方法,这个方法可以获取指定对象的全部key。
<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
<script type="text/babel">
let user = {
id: 1,
name: "黑白大彩电",
age: 21
};
//Object.keys()方法可以获取指定对象所有的key
console.log(Object.keys(user));
</script>
并且除了.之外还可以用[]来读取对象中的属性
<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
<script type="text/babel">
let user = {
id: 1,
name: "黑白大彩电",
age: 21
};
console.log(user["name"]);
</script>
那么基于这个Object.keys()方法,再加上map()方法,就可以遍历一个对象
<body>
<div id="app"></div>
<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
<script type="text/babel">
let user = {
id: 1,
name: "黑白大彩电",
age: 21
};
//Object.keys()方法+map()方法可以遍历对象
let dom = <div>
{
Object.keys(user).map((key, index) => {
return <p key={index}>{key}->{user[key]}</p>
})
}
</div>;
ReactDOM.render(dom, document.getElementById("app"));
</script>
</body>