JavaScript基础：键值对对象、json对象、键值对数组、json对象数组

BestKagome

已于 2023-05-30 17:59:41 修改

阅读量870

点赞数

分类专栏： JavaScript 文章标签： javascript json html

于 2022-07-06 09:37:37 首次发布

本文链接：https://blog.csdn.net/Alley_Olive/article/details/125633017

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：键值对对象、json对象、键值对数组、json对象数组</title>
    <!--
        定义对象数组：
        [{属性: 值, 属性: 值, 属性: 值...}, {属性: 值, 属性: 值, 属性: 值...}, {属性: 值, 属性: 值, 属性: 值...}]
        语法：
        var keyValues = [
            {"key1": "value1", "key2": "value2", "key3": "value3"},
            {"key1": "value1", "key2": "value2", "key3": "value3"},
            {"key1": "value1", "key2": "value2", "key3": "value3"},
            {"key1": "value1", "key2": "value2", "key3": "value3"},
        ];
    -->
    <script>
        
        // 声明有数据的键值对，键没有添加引号，代表它是js对象
        var keyValues1 = {a: "A", b: "B", c: "C", d: "D"};  

        console.log("键值对keyValues1，键没有添加引号，它是js对象：");
        console.log(keyValues1);


        // 声明有数据的键值对，键添加引号，代表它是json格式的对象
        var keyValues2 = {"aa": "AA", "bb": "BB", "cc": "CC", "dd": "DD"};  

        console.log("键值对keyValues2，键添加引号，它是json格式的对象：");
        console.log(keyValues2);


        // 声明有数据的键值对，值可以是基础类型（如string），也可以是键值对
        var keyValues3 = {
            "aa": "AA", 
            "bb": "BB", 
            "cc": "CC", 
            "dd": {
                "dd1": "DD1",
                "dd2": "DD2",
                "dd3": "DD3"
            }
        }; 

        console.log("键值对keyValues3，值不是基础类型string，仍然是键值对：");
        console.log(keyValues3);


        // For-In 循环（For-In Loop）
        // 如果是遍历键值对集合，则通过key获取相应的value值
        var index = 1;
        for (const key in keyValues3) {
            if (Object.hasOwnProperty.call(keyValues3, key)) {
                const element = keyValues3[key];
                console.log("For-In循环，键值对keyValues3，当前是第 " + (index ++) + 
                " 次循环，目前它的key值是：" + key + "，它的value值是：");
                console.log(element);
            }
        }


        // json格式对象的数组1
        var keyValueArray1 = [
            {"aa": "AA", "bb": "BB"},
            {"cc": "CC", "dd": "DD"},
            {"ee": "EE", "ff": "FF"},
            {"gg": "GG", "hh": "HH"}
        ]; 

        console.log("json格式对象的数组keyValueArray1：");
        console.log(keyValueArray1);  


        // json格式对象的数组2
        var keyValueArray2 = [
            {
                "aa": "AA", 
                "bb": {
                    "bb1": "BB1",
                    "bb2": "BB2",
                    "bb3": "BB3"
                }
            },
            {
                "cc": "CC", 
                "dd": {
                    "dd1": "DD1",
                    "dd2": "DD2",
                    "dd3": "DD3"
                }
            },
            {
                "ee": "EE", 
                "ff": {
                    "ff1": "FF1",
                    "ff2": "FF2",
                    "ff3": "FF3"
                }
            }
        ];

        console.log("json格式对象的数组keyValueArray2：");
        console.log(keyValueArray2);


        // 普通for循环（For Loop）
        // 通过索引获取数组对象
        for (let index = 0; index < keyValueArray2.length; index++) {
            const element = keyValueArray2[index];
            console.log("普通for循环，json格式对象的数组keyValueArray2，当前是第 " + (index + 1) + " 次循环，目前它的json对象是：");
            console.log(element);
        }


        // For-Of 循环（For-Of Loop）
        // 直接在循环中依次得到数组中的对象（数组每个对象已被封装好）
        var index1 = 1;
        for (const iterator of keyValueArray2) {
            console.log("For-Of循环，json格式对象的数组keyValueArray2，当前是第 " + (index1 ++) + " 次循环，目前它的json对象是：");
            console.log(iterator);
        }


        // For-In 循环（For-In Loop）
        // 如果是遍历数组，那么key值就相当于数组索引，value值相当于数组索引对应的值
        var index2 = 1;
        for (const key in keyValueArray2) {
            if (Object.hasOwnProperty.call(keyValueArray2, key)) {
                const element = keyValueArray2[key];
                console.log("For-In循环，json格式对象的数组keyValueArray2，当前是第 " + (index2 ++) + 
                " 次循环，目前它的key值（数组索引）是：" + key + "，它的value值（json对象）是：");
                console.log(element);
            }
        }

        // For-Of 循环（For-Of Loop） 和 For-In 循环（For-In Loop） 组合使用
        // 得到每组json对象的key值和value值
        var index3 = 1;
        for (const keyValues of keyValueArray2) {
            for (const key in keyValues) {
                if (Object.hasOwnProperty.call(keyValues, key)) {
                    const element = keyValues[key];
                    console.log("For-Of循环和For-In循环组合，json格式对象的数组keyValueArray2，当前是第 " + (index3 ++) +
                    " 次循环，目前它的key值是：" + key + "，它的value值（json对象）是：");
                    console.log(element);
                }
            }
        }
    </script>
</head>
<body>
    <h3>JavaScript基础：键值对对象、json对象、键值对数组、json对象数组</h3>
</body>
</html>

控制台输出以下信息：