JavaScript JSON基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qiu_1231/article/details/79565857

本文主要介绍了JavaScript中的JSON基础，包括数字、字符串、逻辑值的表示方法，以及如何创建包含多个对象的数组。同时提到了JSON文件的扩展名是.json。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介:
json :javascript object notation(JavaScript对象表示法) 是轻量级的文本数据交换格式

json是JavaScript语法的子集
数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组
"name":"小明" --->js中name="小明"

JSON 值可以是：

数字（整数或浮点数） { "age":30 }

字符串（在双引号中） { "name":"菜鸟教程" , "url":"www.runoob.com" }

逻辑值（true 或 false）{ "flag":true }

数组,可包含多个对象（在中括号中）

{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
{
"sites": [
{ "name":"搞事队" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
对象,可包含多个数组（在大括号中）

{ "name":"菜鸟教程" , "url":"www.runoob.com" }
null { "runoob":null }

创建一个数组:
var sites = [
{ "name":"搞事队" , "url":"www.runoob.com", "slogan":"搞事!搞事!!搞事!!!" },
{ "name":"google" , "url":"www.google.com" },
];

sites[0].name; 访问第一项返回的内容为搞事队,使用点号（.）来访问对象的值：
sites["name"]; 使用中括号（[]）来访问对象的值
使用 for-in 来循环对象的属性

sites[0].name="搞事队2" ; 修改数据

json文件类型:.json

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Json简介</title>
</head>
<body>
<!--对象-->
<h2>JavaScript创建json对象</h2>
<p>
    队伍名称:<span id="jname"></span><br>
    队伍主页:<span id="jurl"></span><br>
    队伍口号:<span id="jslogan"></span><br>
    小分队:<span id="jsites"></span>
</p>
<p id="demo"></p>
<script>
    var  JsonObject={
        "name":"搞事队",
        "url":"https://www.baidu.com/",
        "slogan":"搞事!搞事!!搞事!!!",
        //JSON 对象中可以包含(嵌套)另外一个 JSON 对象：
        "sites": {
            "site1":"https://www.baidu.com/",
            "site2":"http://music.163.com/",
            "site3":"http://fanyi.youdao.com/"
        }

    }
    ////删除属性site3
    //delete JsonObject.sites.site3;
    delete  JsonObject.sites["site3"];
    for(x in JsonObject.sites){
        //返回属性
        document.getElementById("demo").innerHTML+=x+"<br>";
        ////返回值
       // document.getElementById("demo").innerHTML+=JsonObject.sites[x]+"<br>";

    }

    document.getElementById("jname").innerHTML=JsonObject.name                   //队伍名称:搞事队
    document.getElementById("jurl").innerHTML=JsonObject.url                     //队伍主页:https://www.baidu.com/
    document.getElementById("jslogan").innerHTML=JsonObject.slogan               //队伍口号:搞事!搞事!!搞事!!!
    //document.getElementById("jsites").innerHTML=JsonObject.sites.site1+"<br>"
    document.getElementById("jsites").innerHTML=JsonObject.sites["site1"]         //"https://www.baidu.com/

    //使用 for-in 来循环对象的属性 返回:
   // name
   // url
   // slogan
    for(x in JsonObject){
        document.getElementById("demo").innerHTML+=x+"<br>";
    }

    //在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：返回:
    //搞事队
    //https://www.baidu.com/
    //搞事!搞事!!搞事!!!

    for(x in  JsonObject){
        document.getElementById("demo").innerHTML+=JsonObject[x]+"<br>";
    }

</script>
<!--对象-->


<!--数组,使用方法和对象类似,JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：-->
<!--访问,修改数据都和以上类似-->
<p>循环内嵌数组：</p>

<p id="demo2"></p>

<script>

    var myObj, i, j, x = "";
    myObj = {
        "name":"搞事队",
        "num":3,
        "sites": [
            { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
            { "name":"qzone", "info":[ "留言板", "主页", "个人档" ] },
            { "name":"Taobao", "info":[ "淘宝", "天猫" ] }
        ]
    }

    for (i in myObj.sites) {
        x += "<h1>" + myObj.sites[i].name + "</h1>";
        for (j in myObj.sites[i].info) {
            x += myObj.sites[i].info[j] + "<br>";
        }
    }

    document.getElementById("demo2").innerHTML = x;

</script>
<!--数组-->
</body>
</html>

js 之二 JSON基础