004 遍历JSON对象

遍历对象之前,先看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>


版权声明:本文为test253506088原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。