JavaScript JSON

柔光的暖阳◎ 2021-10-14 05:02 345阅读 0赞

# JSON #

## （一）JSON概念 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 1]

JSON 实例
    {"sites":[     {"name":"Runoob", "url":"www.runoob.com"},      {"name":"Google", "url":"www.google.com"},     {"name":"Taobao", "url":"www.taobao.com"} ]}

# （二）JSON 语法规则 #

JSON 格式化后为 JavaScript 对象
    JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
    
    由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 2]

#### JSON 数据 - 一个名称对应一个值 ####

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
    
    键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
    
    "name":"Runoob"

#### JSON 对象 ####

JSON 对象保存在大括号内。
    
    就像在 JavaScript 中, 对象可以保存多个 键/值 对：
    
    {"name":"Runoob", "url":"www.runoob.com"}

#### JSON 数组 ####

JSON 数组保存在中括号内。
    
    就像在 JavaScript 中, 数组可以包含对象：
    
    "sites":[     {"name":"Runoob", "url":"www.runoob.com"},      {"name":"Google", "url":"www.google.com"},     {"name":"Taobao", "url":"www.taobao.com"} ]
    
    在以上实例中，对象 "sites" 是一个数组，包含了三个对象。
    
    每个对象为站点的信息（网站名和网站地址）。

#### JSON 字符串转换为 JavaScript 对象 ####

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
    
    简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 [JSON 教程](https://www.runoob.com/json/json-tutorial.html)):
    
    首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
    
    var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
    然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
    
    var obj = JSON.parse(text);
    
    最后，在你的页面中使用新的 JavaScript 对象：
    
      var text = '{ "sites" : [' +     '{ "name":"Runoob" , "url":"www.runoob.com" },' +     '{ "name":"Google" , "url":"www.google.com" },' +     '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';      obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

# （三）相关函数 #

![在这里插入图片描述][20190818164533905.png]

# （四）关于JSON要注意的坑 #

我们使用JSON.parse() 解析json字符串时
    
    注意：1.json字符是紧凑格式，不要有空格和换行，否则解析失败。 美化的格式，是我们自己来看嵌套的结构的。
    
     2.在JS里面 我们手写 json字符串，用单引号引起来 字符串里面的json 键值是字符串类型的 要用双引号引起来
    例如：  var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com","data":100,"arr":[100,200],"obj":{"aa":"bb"}}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70]: /images/20211013/73b2ff6c8aab4d5da798d5fcd4abc6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 1]: /images/20211013/215cce04173241d5908d740b9e8d8079.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 2]: /images/20211013/b3bc8109a6f143d6b860fb054f2bbcfe.png
[20190818164533905.png]: /images/20211013/db0b39361d2748b0bed06b97a446ad47.png