JavaScript----json

目录

 一：json介绍

 二：json特点

 三：JSON 与 JS 对象的关系

 四：JSON 和 JS 对象互转

 五：具体JSON 与 JS 的转换实例

---

一：json介绍

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

 二：json特点

1.JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。

2.JSON 是存储和交换文本信息的语法，类似 XML。

3.JSON 比 XML 更小、更快，更易解析。 

三：JSON 与 JS 对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。如下

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

 四：JSON 和 JS 对象互转

 <script>
     // JSON: JavaScript Object Notation(JavaScript 对象表示法)
    // JSON 是存储和交换文本信息的语法，类似 XML。
    // JSON 比 XML 更小、更快，更易解析。
    let person = {
        nickname: "浩楠",
        age: 19,
        gender: 1,
    };
    console.log(person);
    // JSON.stringify(对象名) 返回值为该对象的json格式字符串
    let json_text = JSON.stringify(person);
    console.log(json_text);
  // JSON.parse(json格式字符串) 返回值为JavaScript对象
    let json_obj = JSON.parse(json_text);
    console.log(json_obj);
</script>

五：具体JSON 与 JS 的转换实例

 // 服务器响应的json格式字符串
    let responseResult = '{"code":0,"msg":"","count":1000,"data":[{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68}]}';
    // 将服务器响应的json格式字符串解析完JavaScript对象
    let result = JSON.parse(responseResult);
    console.log(result);
    console.log(result.code);
    console.log(result.msg);
    console.log(result.count);
    console.log(result.data);
    result.data.forEach(element => {
        // console.log(element);
        // for in 遍历对象的属性 获取的是属性的名字 
        for (const fieldName in element) {
            // 对象名[属性名]获取的是该属性的值
            console.log(fieldName + ' >>> ' + element[fieldName]);
        }
        console.log('+++++++++++++++++++++++++++++++++++++++++');
    });

如图：