JavaScript学习 — 初识json

前言

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

JSON 与 JS 对象的关系

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

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

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

常用类型

        任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。
        对象：对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。在面向对象的语言中，key 为对象的属性，value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。
        数组：数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，值的类型可以是任意类型。

JSON 与 JS 的转换

<script>
    // JSON: JavaScript Object Notation(JavaScript 对象表示法)
    // JSON 是存储和交换文本信息的语法，类似 XML。
    // JSON 比 XML 更小、更快，更易解析。
    let person = {
        nickname: '路飞',
        gender: 1,
        age: 20
    }
    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 的转换实例

<script>
// 服务器响应的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 filename in element) {
            // 对象名[属性名]获取的是该属性的值
            console.log(filename + '>>>' + element[filename]);
        }
    });
</script>