Json与JavaScript对象遍历

Json与JavaScript对象遍历教程

Json 字符串的遍历和 JavaScript对象 的遍历都是使用 for 循环来遍历。

Json遍历

我们创建一个 haicoder.html 的文件，并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json遍历</title>
    <script type="text/javascript">
        console.log("嗨客网(www.haicoder.net)");
        var str = {"name":"haicoder", "url":"www.haicoder.net"};
        for (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </script>
</head>
<body>
</body>
</html>

用浏览器打开该文件，浏览器输出如下图所示：

11 JSON遍历.png

首先，我们定义了一个 Json 字符串 str。接着，我们使用 for 循环，遍历该 Json 字符串，k 为 Json字符串中的 key，str[k] 为 Json字符串 key 对应的 value。

JavaScript对象遍历

我们创建一个 haicoder.html 的文件，并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript对象遍历</title>
    <script type="text/javascript">
        console.log("嗨客网(www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        for (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </script>
</head>
<body>
</body>
</html>

用浏览器打开该文件，浏览器输出如下图所示：

12 JS遍历.png

首先，我们定义了一个 JavaScript 对象 obj。接着，我们使用 for 循环，遍历该 JavaScript 对象，k 为 JavaScript 对象的 key，obj[k] 为 JavaScript 对象 key 对应的 value。

Json数组遍历

for 循环遍历 Json 数组

var Json_Result = [
  {
    "name":"Json", 
    "password":"123"
  },
  {
    "name":"JavaScript", 
    "password":"456"
  }
];
for(var i in Json_Result){          //i为索引
    console.log(Json_Result[i].name + " " + Json_Result[i].password);
}
//结果输出为
Json 123
JavaScript 456

将 Json 保存到数组 Json_Result 使用 for 循环遍历 Json_Result, i 为数组角标，通过 Json_Result[i].name 和 Json_Result[i].password 获取 name 和 password 对应的值。

JavaScript对象数组遍历

for 循环遍历 JavaScript 对象

var Js_Result = [
  {
    name: "haicoder",
    url: "www.haicoder.net",
    age: 20
  },
  {
    name: "JavaScript",
    url: "www.JavaScript.net",
    age: 30
  }
]
for (var i in Js_Result ){             //  i为数组角标  
 console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//结果输出为
0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

将 JavaScript 对象保存到数组 Js_Result 使用 for 循环遍历 Json_Result,，i 为数组角标，通过 Js_Result[i].firstName 的方式获取对应的值。

Json与JavaScript对象教程总结

Json 字符串的遍历和 JavaScript 对象的遍历都是使用 for 循环来遍历。