JSON 和 JS 对象（通俗易懂）

落日映苍穹つ 2022-05-21 11:57 235阅读 0赞

## 区别 ##

JSON（JavaScript Object Notation）仅仅是一种数据格式（或者叫数据形式）。数据格式其实就是一种规范，按照这种规范来存诸和交换数据。就好像 XML 格式一样。

<table style="border-spacing:0px;background-color:rgb(255,255,255);width:697.273px;color:rgb(51,51,51);font-family:'-apple-system', BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;font-size:15px;"> 
 <thead> 
  <tr> 
   <th align="left" style="border-color:rgb(230,230,230);background:rgb(243,243,243);">区别</th> 
   <th align="left" style="border-color:rgb(230,230,230);background:rgb(243,243,243);">Json</th> 
   <th align="left" style="border-color:rgb(230,230,230);background:rgb(243,243,243);">Javascript对象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left" style="border-color:rgb(230,230,230);">含义</td> 
   <td align="left" style="border-color:rgb(230,230,230);">仅仅是一种数据格式</td> 
   <td align="left" style="border-color:rgb(230,230,230);">对象的实例</td> 
  </tr> 
  <tr> 
   <td align="left" style="border-color:rgb(230,230,230);">传输</td> 
   <td align="left" style="border-color:rgb(230,230,230);">可以跨平台数据传输，速度快</td> 
   <td align="left" style="border-color:rgb(230,230,230);">不能传输</td> 
  </tr> 
  <tr> 
   <td align="left" style="border-color:rgb(230,230,230);">表现</td> 
   <td align="left" style="border-color:rgb(230,230,230);">1. 键值对<br>2. 键必须加双引号<br>3. 值不能为方法函数/undefined/NaN</td> 
   <td align="left" style="border-color:rgb(230,230,230);">1.键值对<br>2.值可以是函数、对象、字符串、数字、boolean 等</td> 
  </tr> 
  <tr> 
   <td align="left" style="border-color:rgb(230,230,230);">相互转换</td> 
   <td align="left" style="border-color:rgb(230,230,230);">Json → JS 对象：<br>1.&nbsp;<code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;font-size:.93em;">var obj = JSON.parse(jsonstring);</code><br>2.&nbsp;<code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;font-size:.93em;">var obj = eval("("+jsonstring+")");</code></td> 
   <td align="left" style="border-color:rgb(230,230,230);">JS 对象 → Json：<br><code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;font-size:.93em;">JSON.stringify(obj);</code></td> 
  </tr> 
 </tbody> 
</table>

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同，但本质是不同的。我们不能把以下的对象叫 JSON，比如：

但 JSON 和 JavaScript 确实存在渊源，JSON 本身的意思就是 JavaScript 对象表示法（JavaScript Object Notation），可以说这种数据格式是从 JavaScript 对象中演变出来的。**JSON 语法是 JavaScript 对象表示法语法的子集**。

JSON 格式的数据，主要是为了跨平台交流数据用的。JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。

## 语法 ##

1、JSON 语法规则：

*  数据在名称/值对中
 *  数据由逗号分隔
 *  花括号保存对象
 *  方括号保存数组

2、JSON 数据值：

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

JSON 数据结构有两种，这两种结构就是对象和数组，通过这两种结构可以表示各种复杂的结构。  
JSON 使用严格的 JavaScript 对象表示法来表示结构化的数据，因此 **JSON 的属性名必须有双引号**。

{
        "company": "Apple",
        "age": 18,
        "IPO", true,
        "employees": [
            { "firstName":"John" , "lastName":"Doe" }, 
            { "firstName":"Anna" , "lastName":"Smith" }, 
            { "firstName":"Peter" , "lastName":"Jones" }
        ]
    }

## 数据转换 ##

### JSON 数据转换为 JS 对象 ###

1、JS 解析器：eval() 函数

// 创建包含 JSON 语法的 JavaScript 字符串
    var txt = '{ "employees" : [' +  
    '{ "firstName":"John" , "lastName":"Doe" },' +  
    '{ "firstName":"Anna" , "lastName":"Smith" },' +  
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
    
    //使用 JS 解析器，解析 JSON 文本并生成 JS 对象
    var obj = eval("(" + txt + ")");

使用 eval() 函数时，必须为传入的 JSON 数据参数添加括号'()'，否则会报语法错误。

2、 解析器：parse()函数

但 eval() 的问题在于，除了可以解析 JSON 数据，也可以用于执行 JavaScript 脚本片段，这就会带来潜在的安全问题。JSON 提供了专门的 JSON Parser 来实现只用于解析 JSON 数据，不会执行 JavaScript 脚本，而且速度更快。如下：

var obj = JSON.parse(txt);

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

### JS 数据转换为 JSON 文本 ###

使用 JSON.strigify() 函数，将 Javascript 对象转换为 JSON 文本数据。

var obj = {
       a:1,b:2}
    var txt = JSON.stringify(obj);
    console.log(txt);
    结果：

`"{"a":1,"b":2}"`