JSON的概念

最新推荐文章于 2024-08-18 15:09:09 发布

仙鹤__

最新推荐文章于 2024-08-18 15:09:09 发布

阅读量466

点赞数

文章标签： json javascript 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130477947

版权

JSON是一种轻量级的数据交换格式，基于ECMAScript规范，用于不同编程语言之间的数据传输。它以易于读写的文本形式存储和表示数据，支持数字、字符串、逻辑值、数组、对象等多种数据类型。文章详细介绍了JSON的语法、如何访问和操作JSON对象以及数组，包括嵌套对象和数组的操作。

摘要由CSDN通过智能技术生成

javascript中JSON对象

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON是一个序列化的对象或数组（数组对象）。JSON 可以将JavaScript对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式。

JSON英文官网JSON中文官网JSON

JSON: JavaScript Object Notation（JavaScript 对象标记法）。

JSON 是一种存储和交换数据的语法。

JSON 是通过 JavaScript 对象标记法书写的文本。

为什么使用 JSON？(面试题)

因为JSON 是一种轻量级的数据交换格式， JSON 格式是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式交换。

1. JSON 语法规则

1.1 JSON 语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

JSON 名称/值对

JSON 数据的书写格式是：

key : value

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "小王"

JSON 键名：必须写在字符串中。

JSON 值可以是以下类型的数据：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
null
对象（在大括号中）

<script>
        //创建json格式的数据
        //JSON值，可以是以下类型

       var j1= {"age":18}
       console.log(j1);

       var j2={"name":"小马过河"}
       console.log(j2);

       var j3={"open":true}
       console.log(j3);


       var j4={"site":['网易','腾讯']}
       console.log(j4);

       var j5={"site": [
        {"name":'网易',"url":"https://www.163.com"},
        {"name":'优酷',"url":"https://www.youku.com"},
        {"name":'爱奇艺',"url":"https://www.aqy.com"}
    ]}
        console.log(j5);
       
        var j6={"flag":null};
        console.log(j6);

        //对象
        var j7={
            "data":{
                "id":1,
                "title":'小余',
                "content":'123'
            }
        }
        console.log(j7);

        var j8={
            "data":{
                "data":[
                {
                    "id":1,
                    "title":'小余',
                    "content":'123'
                },
                {
                    "id":2,
                    "title":'小余',
                    "content":'123'
                }
                ]
            }
        }
        console.log(j8.data.data[1]);
    </script>

预览：

1.2 JSON 对象

1.2.1 访问json对象中值

你可以使用点号（.）来访问对象的值；你也可以使用中括号（[]）来访问对象的值。注意：myjson1["name"] 这里的键名必须写在双引号或单引号中。

 <div id="demo"></div>
    <script>
        {
        //访问json对象
        //使用点
        var j1 = {
        "name":"tom", //值 可以是 字符串
        "age":19, //值 可以是 数字
        "hobby":['登山','旅游','看书','打球'], //值 可以是 数组
        "sex": true, //值 可以是 布尔值
        "info":null //值 可以是 null
    }
    console.log(j1.name);

    console.log(j1.hobby);

    //可以使用[]访问对象值
    //注在[]中要写单引号，或双引号
    console.log(j1["age"]);
    document.write(j1.hobby+'<br>')
    j1.hobby.forEach((item,index)=>{
        document.write(item)
    })

}
    </script>

预览：

1.2.2 循环json对象

你可以使用 for-in 来循环对象的属性：

{
        //循环对象
        //for in
        var j1={ "name":"tom", "age":10000, "city":"上海" };
        for(x in j1){
            //注意：j1[x]以数组的形式取每个属性上对应值
            document.querySelector('#demo').innerHTML+=x+"<br>"

        }

    }

输出的是：

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

{
        //循环对象
        //for in
        var j1={ "name":"tom", "age":10000, "city":"上海" };
        for(x in j1){
            //注意：j1[x]以数组的形式取每个属性上对应值
            document.querySelector('#demo').innerHTML+=j1[x]+"<br>"

        }

    }

输出的是：

1.2.3 嵌套 json对象

什么是嵌套json对象？ ---- JSON 对象中可以包含另外一个 JSON 对象

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

{
        //嵌套json对象
        var j1={
            "name":'小马过河',
            "keywords":['前端开发','H5游戏开发','VUE项目开发'],
            "site":{
                "site1":'https://www.163.com',
                "site2":'https://ent.163.com/movie/',
                "site3":'https://ent.163.com/music/',
            }
        }
        //访问嵌套json对象
        var x=j1.site.site1
        console.log(x);
    }

1.3 JSON 对象中的数组

---JSON的使用-数组常见操作

对象属性的值可以是一维数组

 {
        var j1= {
            "name":"网站",
            "num":3,
            "sites":[ "网易", "优酷", "搜狐" ]
        }
        console.log(j1.sites[1]);
    }

我们可以使用索引值来访问数组中的内容

x = j1.sites[0];

1.3.1 循环数组

你可以使用 for-in 来访问数组：

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

你也可以使用 for 循环：

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

1.3.2 嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

var  myObj = {
            "name":"网站",
            "num":3,
            "sites": [
                { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
                { "name":"网易", "info":[ "网易", "邮箱", "游戏","新闻","体育" ] },
                { "name":"Taobao", "info":[ "淘宝", "网购" ] }
            ]
        }

我们可以使用 for-in 来循环访问每个数组

//双重for-in
        //外层forin 遍历 sites数组中的name值
        //内层forin 遍历 sites数组中的info数组的每一项
        var x=''//存储遍历值
        var y=''
        for(i in myObj.sites){
          console.log(myObj.sites[i].name)
          x+=`<h1>${myObj.sites[i].name}</h1><ul>`

        //   x+=`<ul>`
          console.log(myObj.sites[i].info);
          for(j in myObj.sites[i].info){
            x+= `<li>${myObj.sites[i].info[j]}</li>`
          }
          x+=`</ul>`
        }
        document.querySelector('#demo').innerHTML=x
        console.log(x);

预览：

1.3.2 修改数组值

你可以使用索引值来修改数组值：

{
      var  myObj = {
            "name":"网站",
            "num":3,
            "sites": [
                { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
                { "name":"网易", "info":[ "网易", "邮箱", "游戏","新闻","体育" ] },
                { "name":"Taobao", "info":[ "淘宝", "网购" ] }
            ]
        }
        //双重for-in
        //外层forin 遍历 sites数组中的name值
        //内层forin 遍历 sites数组中的info数组的每一项
        var x=''//存储遍历值
        var y=''
        for(i in myObj.sites){
          //在遍历过程中，去找符合条件的数据，对其重新赋值
          if(myObj.sites[i].name=='网易'){
            myObj.sites[i].name="github"
          }
          console.log(myObj.sites[i].name)
          x+=`<h1>${myObj.sites[i].name}</h1><ul>`

        //   x+=`<ul>`
          console.log(myObj.sites[i].info);
          for(j in myObj.sites[i].info){
            x+= `<li>${myObj.sites[i].info[j]}</li>`
          }
          x+=`</ul>`
        }
        document.querySelector('#demo').innerHTML=x
        console.log(x);
       
    }

预览：

1.3.3 删除数组元素

我们可以使用 delete 关键字来删除数组元素：

 {
      var  myObj = {
            "name":"网站",
            "num":3,
            "sites": [
                { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
                { "name":"网易", "info":[ "网易", "邮箱", "游戏","新闻","体育" ] },
                { "name":"Taobao", "info":[ "淘宝", "网购" ] }
            ]
        }
     
      console.log(myObj.sites);
      delete myObj.sites[0]
      console.log(myObj.sites);
    }

预览：