JSON-＞JavaScript Object Notation

介绍

JSON->JavaScript Object Notation

1. 对象是无序的

var obj = {
    a:1,
    b:2,
    c:function(){
        console.log(this.a,this.b)
    }
}

2. json一定是对象，它是为了轻量的数据进行交互，不能包含方法

var jsonData = {
    a:1,
    b:2,
    c:function(){
        console.log(this.a,this.b)
    }
}

• 所有编程语言都离不开的三大数据类型

  1. scalar 标量 字符串和数字
  2. sequence 序列 数组和列表
  3. mapping 映射 键值对

• json 是映射 的数据结构

• json的写法

  1. 映射要用冒号隔开
  2. 并列数据用逗号分隔
  3. 映射的集合要用{}包裹
  4. 并列数据集合用[]包裹
  5. 键名key一定是双引号,不能是单引号（与对象的最大区别）
  6. 不能存储方法

• 以前的数据传输常用xml

  1. 数据文档很大
  2. 不易读
  3. 解析比较复杂

转换

JSON.stringify(value[, replacer [, space]])

• value 将要序列化成 一个 JSON 字符串的值。

• replacer 可选
  如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
  如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

  1. 函数应当返回JSON字符串中的value, 如下所示:
     • 如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串。
     • 如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串。
     • 如果返回一个 Boolean, “true” 或者 “false” 作为属性值被添加入 JSON 字符串。
     • 如果返回任何其他对象，该对象递归地序列化成 JSON 字符串，对每个属性调用 replacer 方法。除非该对象是一个函数，这种情况将不会被序列化成 JSON 字符串。
     • 如果返回 undefined，该属性值不会在 JSON 字符串中输出。

  function replacer(key, value) {
   if (typeof value === "string") {
    return undefined;
  }
  return value;
  }
  
  var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
  var jsonString = JSON.stringify(foo, replacer);//{"week":45,"month":7}.
  
  // 如果 replacer 是一个数组，数组的值代表将被序列化成 JSON 字符串的属性名。
  JSON.stringify(foo, ['week', 'month']);
  // '{"week":45,"month":7}', 只保留 “week” 和 “month” 属性值。
  

• space 可选
  指定缩进用的空白字符串，用于美化输出（pretty-print）；
  如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；
  如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
  如果该参数没有提供（或者为 null），将没有空格。

  JSON.stringify({ a: 2 })
  // {"a":2}
  JSON.stringify({ a: 2 }, null, " ");   // '{\n "a": 2\n}'
  // {
  //  "a": 2
  // }
  // 使用制表符（\t）来缩进：
  JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
  // '{            \
  //     "uno": 1, \
  //     "dos": 2  \
  // }'
  

• JSON.stringify()将值转换为相应的JSON格式：

  1. 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。
  2. 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
  3. 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  4. undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。
  5. 函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
  6. 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
  7. 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
  8. Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
  9. NaN 和 Infinity 格式的数值及 null 都会被当做 null。
  10. 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

  JSON.stringify({});                        // '{}'
  JSON.stringify(true);                      // 'true'
  JSON.stringify("foo");                     // '"foo"'
  JSON.stringify([1, "false", false]);       // '[1,"false",false]'
  JSON.stringify({ x: 5 });                  // '{"x":5}'
  
  JSON.stringify({x: 5, y: 6});
  // "{"x":5,"y":6}"
  JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
  // '[1,"false",false]'
  JSON.stringify({x: undefined, y: Object, z: Symbol("")});
  // '{}'
  JSON.stringify([undefined, Object, Symbol("")]);
  // '[null,null,null]'
  JSON.stringify({[Symbol("foo")]: "foo"});
  // '{}'
  JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
  // '{}'
  
  // 不可枚举的属性默认会被忽略：
  JSON.stringify(
      Object.create(
          null,
          {
              x: { value: 'x', enumerable: false },
              y: { value: 'y', enumerable: true }
          }
      )
  );
  
  // "{"y":"y"}"
  

JSON.parse(text[, reviver])

• text
  要被解析成 JavaScript 值的字符串，关于JSON的语法格式,请参考：JSON。

• reviver 可选
  转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

  JSON.parse('{"p": 5}', function (k, v) {
      console.log(k,v) //p 5
      if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
      return v * 2;              // 否则将属性值变为原来的 2 倍。
  });                            // { p: 10 }
  
  JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
      console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                      // 最后一个属性名会是个空字符串。
      return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
  });
  // {
  // 	'1': 1,
  // 	'2': 2,
  // 	'3': {
  // 		'4': 4,
  // 		'5': {
  // 			'6': 6
  // 		}
  // 	}
  // }
  // VM170:3 1
  // VM170:3 2
  // VM170:3 4
  // VM170:3 6
  // VM170:3 5
  // VM170:3 3
  

• JSON.parse() 不允许用逗号作为结尾

  // both will throw a SyntaxError
  JSON.parse("[1, 2, 3, 4, ]");
  JSON.parse('{"foo" : 1, }');
  

• DOM中使用

<!DOCTYPE html>
<html lang="en">
<body>
   <div data-info='{"name":"张三"}''></div>
</body>
<script>
var div = document.getElementsByTagName('div')[0];
var info = div.getAttribute('data-info');
console.log(info)
var jsonData = JSON.parse(info)
console.log(jsonData) //{name: '张三'}

var obj = {
    name:'李四',
    age:18
}
var str = JSON.stringify(obj)
console.log(str) //{"name":"李四","age":18}
div.setAttribute('data-info',str)
</script>
</html>