什么是JSON?

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
• JSON 具有自我描述性，更易理解

JSON vs XML

• 同
  1.“自我描述”，易于理解
  2.数据具有层次结构
  3.可以被大多数语言使用
• 异
  1.JSON 不需要结束标签
  2.JSON 读写速度更快
  3.JSON 可以使用数组
  4.最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

语法

• 格式

  • 数据以 key:value 形式存储（key 必须时 字符串）
  • 数据由 , 分隔
  • {} 保存对象
  • [] 保存数组

• 存储值的类型

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

  例如: 一个存储学生信息的JSON对象

  {
    "students":[
        {"name" : "张三", age : 13},
        {"name" : "李四", age : 14},
        {"name" : "王五", age : 10}
    ]
  }
  

• 从JSON获取数据

  • 对象名.key 或 对象名[key]

    var obj = {
        "name" : "网站",
        "num" : 2,
        "sites" : [
            {"name" : "优酷", "info" : ["视频服务平台","提供视频播放","视频发布"]},
            {"name" : "Google", "info" : ["Android", "Google翻译"]}
        ]
    }
    console.log(obj.name); // 网站
    console.log(obj["name"]); // 网站
    console.log(obj.sites[0].name); // 优酷
    console.log(obj.sites[0]["name"]); // 优酷
    console.log(obj["sites"][1]["info"][0]); // Android
    

  • 键名为变量时只能用 [] 来获取相应属性值

    var obj = {"id" : "001", "name" : "Tom"};
    for(var item in obj){
        console.log(obj[item]); // 001 Tom
        console.log(obj.item); // undefined undefined
    }
    
    var x = "name";
    console.log(obj.x); // undefined
    console.log(obj[x]); // Tom
    

• 设置值/删除值

  var student = {"id" : 1, "name" : "张三", "age" : 15};
  // 设置值
  student.name = "李四";
  console.log(student.name); // 李四
  // 删除值
  //     运算符 delete 只是将该值置为 undefined
  delete student.age;
  console.log(student.age); // undefined
  

JSON字符串转JavaScript对象

• JSON.parse() 方法将 JSON字符串 转换为 JavaScript 对象

  • 语法

    JSON.parse(text[, reviver])
text: JSON字符串
    reviver（可选）: 一个转换结果的函数， 将为对象的每个成员调用此函数

    var jsonStr = ‘{"id" : 1, "name" : "张三", "age" : 15}‘;
    var obj = JSON.parse(jsonStr);
    for(var item in obj){
    console.log(obj[item]);
    }
    

  • 注意

    • JSON 不能存储 Date 对象。如果你需要存储 Date 对象，需要将其转换为字符串。之后再将字符串转换为 Date 对象。

      var jsonStr = ‘{"id" : 1, "date" : "2020-10-16"}‘;
      var obj = JSON.parse(jsonStr);
      obj.date = new Date(obj.date);
      console.log(obj.date); // Date Fri Oct 16 2020 08:00:00 GMT+0800 (中国标准时间)
      
      // 使用 JSON.parse() 的第二个参数完成
      var obj1 = JSON.parse(jsonStr, (key, value) => {
          if(key == "date"){
             return new Date(value);
          } else {
             return value;
          }
      });
      console.log(obj1.date); // Date Fri Oct 16 2020 08:00:00 GMT+0800 (中国标准时间)
      

    • JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

      var jsonStr = ‘{"id" : 1, "func" : "() => {return 1000;}"}‘;
      var obj = JSON.parse(jsonStr, (key, value) => {
      	if(key == "func"){
      		return eval("(" + value + ")");
      	} else {
      		return value;
      	}
      });
      console.log(obj.func()); // 1000
      

• eval()可计算某个字符串，并执行其中的的 JavaScript 代码，也可以将JSON字符串转为JavaScript对象

  var jsonStr = ‘{"id" : 1, "name" : "张三", "age" : 15}‘;
  var obj = eval("(" + jsonStr + ")");
  console.log(obj); // Object { id: 1, name: "张三", age: 15 }
  

  • 为什么要 eval 这里要添加 ("(" + jsonStr + ")")呢？

    原因在于：eval 本身的问题。 由于 json 是以 {} 的方式来开始以及结束的，在 js 中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

    加上圆括号的目的是迫使 eval 函数在处理 JavaScript 代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量 {}，如若不加外层的括号，那么 eval 会将大括号识别为 javascript 代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

  • eval() 函数可编译并执行任何 JavaScript 代码。 使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。 在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

将JavaScript对象转为JSON字符串

• JSON.stringify()将 JavaScript 对象转换为字符串

  var obj = { id: 1, name: "张三", age: 15 };
  var jsonStr = JSON.stringify(obj);
  console.log(jsonStr);
  

  JSON 不能存储 Date 对象。JSON.stringify() 会将所有日期转换为字符串。

  var obj = {"date" : new Date()};
  var jsonStr = JSON.stringify(obj);
  console.log(jsonStr); // {"date":"2020-10-16T11:13:21.696Z"}
  

  JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

  var obj = {"id" : 1, "func" : function(){ return 1000; }};
  var jsonStr = JSON.stringify(obj);
  console.log(jsonStr); // {"id":1}
  

  以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

  var obj = {"id" : 1, "func" : function(){ return 1000; }};
  obj.func = obj.func.toString();
  var jsonStr = JSON.stringify(obj);
  console.log(jsonStr); // {"id":1,"func":"function(){ return 1000; }"}
  

JSON教程