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 jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/python"}
        ]
        for (var k in jsonArr) {
            console.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </script>
</head>
<body>
</body>
</html>

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

13 Json数组遍历.png

首先，我们定义了一个 Json 数组，该数组里面每一个元素都是一个对象。接着，我们使用 for 循环遍历该 Json 数组，k 为 Json 数组的下标，jsonArr[k] 为 Json数组下标 key 对应的 value。

Json 数组中的每一个对象的值我们使用 . 来获取。

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 jsObj = [
            {mod:"json", url:"www.haicoder.net/json"},
            {mod:"vue", url:"www.haicoder.net/vue"},
            {mod:"python", url:"www.haicoder.net/python"}
        ]
        for (var k in jsObj) {
            console.log(k + " -> " + jsObj[k].mod + " -> " + jsObj[k].url);
        }
    </script>
</head>
<body>
</body>
</html>

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

14 Js数组遍历.png

首先，我们定义了一个 Js 对象数组，该数组里面每一个元素都是一个对象。接着，我们使用 for 循环遍历该 Js 对象数组，k 为 Js 对象数组的下标，jsObj[k] 为 Js 对象数组下标 key 对应的 value。

Js 对象中的每一个对象的值我们使用 . 来获取。

Json与JavaScript数组遍历总结

Json 数组的遍历和 JavaScript 数组的遍历都是使用 for 循环来遍历。