阅读 148

You Don't Know JSON

JSON介绍

什么是JSON

1.JSON介绍

  • JSON,全称是 JavaScript Object Notation,即 JavaScript 对象标记法。

  • JSON 是一种轻量级(Light-Weight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。

  • JSON 的名称中虽然带有 JavaScript,但这是指其语法规则是参考 JavaScript 对象的,而不是指只能用于 JavaScript 语言。

JSON 无论对于人,还是对于机器来说,都是十分便于阅读和书写的,而且相比 XML (另一种常见的数据交换格式),文件更小,因此迅速成为网络上十分流行的交换格式。 近年来 JavaScript 已经成为浏览器上事实上的标准语言,JavaScript 的风靡,与 JSON 的流行也有密切的关系。因为 JSON 本身就是参考 JavaScript 对象的规则定义的,其语法与 JavaScript 定义对象的语法几乎完全相同。

2.JSON 的语法规则

  • 数组(Array)用方括号 [] 表示。
  • 对象(Object)用大括号 {} 表示。
  • “名称/值”对(name/value)之间用冒号 : 隔开。
  • 名称(name)置于双引号中,值(value)有字符串、数值、布尔值、null、对象和数组。
  • 数据与数据之间用逗号 , 分隔
{
  "name": "acoderbeauty",
  "age": 18
}
复制代码

3.JSON 和 XML

二者都是数据交互格式,相比 XML,JSON 的优势如下:

  • 没有结束标签,长度更短,读写更快
  • 能够直接被 JavaScript 解释器解析
  • 可以使用数组

JSON

{
  "name": "acoderbeauty",
  "age": 18,
  "hobbies": ["eating", "sleeping", "money"]
}
复制代码

XML

<root>
  <name>acoderbeauty</name>
  <age>18</age>
  <hobbies>eating</hobbies>
  <hobbies>sleeping</hobbies>
  <hobbies>money</hobbies>
</root>
复制代码

相关阅读JSON与XML的区别比较

4.JSON 解析和生成

  • 在 JavaScript 中,提供了两个方法: JSON.parseJSON.stringify
  • JSON实际上就是一段存储数据的字符串,使用 typeof 检查JSON时,返回string
let str = '{"name": "acoderbeauty", "age": "18"}';
console.log(typeof str); //string

//1.将json字符串转换成js对象
let obj = JSON.parse(str);
console.log(obj);
复制代码

//2.将obj对象转换为json字符串
let jsonStr = JSON.stringify(obj);
console.log(jsonStr);
复制代码

JSON格式规定

1.对象

  • 对象用大括号 {} 括起来,大括号里是一系列的“名称/值”对。

  • 两个并列的数据之间用逗号 , 隔开,注意两点:

    • 使用英文的逗号 ,
    • 最后一个“键/值对“后面不要加逗号
  • 常见错误写法

    • name或者value不可以不加引号
    • value不可以使用单引号
    • 最后一个“名称/值”对 不可以加逗号

2.数组

  • 数组表示一系列有序的值,用方括号(“[]”)包围起来,并列的值之间用逗号分隔。
  • 数组中支持不同类型的数据
    (注意:数组里面存undefined要加引号,否则就会报错,下文有说为啥)
  • 数组里面可以嵌套数组,也可以有对象

3.名称/值对(name/value)

  • 名称(name)是一个字符串,要用双引号括起来,不能用单引号,也不能没有引号,这一点与 JavaScript 不同。
  • 值的类型只有七种:字符串(string)、数值(number)、对象(object)、数组(array)、true、false、null。不能有这之外的类型,例如 undefined、函数等。

字符串规则

  • 英文双引号括起来,不能用单引号,也不能没有引号。
  • 字符串中不能单独出现双引号 和右斜杠 \
  • 如果要打双引号或右斜杠,需要使用 右斜杠+字符 的形式,例如 \”\\,其它的转义字符也是如此。

数值规则

  • 使用负数时,在数字前面加负号。
  • 可以使用科学计数法。
  • 不可以使用十六进制和八进制数。

JSON转换

JSON字符串转换为js对象

解析:将符合 JSON 语法规则的字符串转换成对象的过程。

JavaScript 中的解析方法

  • 使用 eval()
  • 使用 JSON.parse()
  • 使用第三方库,某些库提供了直接转换json为js对象的方法。

1.eval()方法

  • 作用
    eval() 函数的参数是一个字符串,其作用是直接执行其中的 JavaScript 代码,并将执行结果返回。eval() 能够解析 json 字符串。
let  str = "alert('hello acoderbeauty')";
eval(str); //直接执行js代码
复制代码
  • 注意
    • eval() 是一个相对危险的函数,因为字符串中可能含有未知因素。有安全隐患。
    • eval is evil
    • 如果使用 eval() 执行字符串中含有{},它会将{}当做是代码块,如果不希望将其当成代码块解析,则需在字符串前后各加一个()变成表达式,即eval("("+str+")");
  • eg:
let str = '{"name": "acoderbeauty", "age": "18"}';
// eval(str); //报错,Uncaught SyntaxError: Unexpected token ':'
let obj = eval("("+str+")");
console.log(obj); //将json转换成了js对象
复制代码

2.JSON.parse()

1.现在绝大多数浏览器都支持 JSON.parse(),是推荐使用的方式。如果输入了不符合规范的字符串,会报错。

let str = '{"name": "acoderbeauty", "age": "18"}';
console.log(typeof str); //string

//1.转换成js对象
let obj = JSON.parse(str);
console.log(obj);
复制代码

2.JSON.parse() 的参数

JSON.parse(text[, reviver])

  • 第一个参数是要被解析成 JavaScript 值的字符串,
  • 可以有第二个参数,是一个函数。此函数有两个参数:name 和 value,分别代表名称和值。
    • 当传入一个 json 字符串后,JSON 的每一组名称/值对都要调用此函数。
    • 该函数有返回值,返回值将赋值给当前的名称(name)。
    • 利用第二个参数,可以在解析 json 字符串的同时对数据进行一些处理。
JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
复制代码

js对象转换为JSON字符串

序列化:指将 JavaScript 值转化为 json 字符串的过程。

1.JSON.stringify()方法

JSON.stringify() 能够将 JavaScript 值转换成 json 字符串。JSON.stringify() 生成的字符串可以用 JSON.parse() 再还原成 JavaScript 值。

如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。

let obj = {
  name: "acoderbeauty",
  age: 18
};
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); //{"name":"acoderbeauty","age":18}
复制代码

2.转换注意点

  • 上文提到过,json字符串的值类型不能是函数或者undefined,但是js对象的value可以是函数或者undefined
  • 所以一个包含函数或者undefined的对象,转换为json字符串时,该值会被忽略。
  • 同理,在解析的时候,如果存在不符合JSON语法规则的值,就会报错。
let obj = {
  name: "acoderbeauty",
  age: 18,
  action: function () {
    console.log("greetings");
  },
  temp: undefined
};
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); //{"name":"acoderbeauty","age":18}
复制代码

  • 如果js对象里面有一个数组,数组的元素是一个函数,此时转换结果为null。也就是该数组会保留,值为null。
let obj = {
  name: "acoderbeauty",
  age: 18,
  arr: [function () {
    console.log("test");
  }]
};
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); //{"name":"acoderbeauty","age":18,"arr":[null]}
复制代码

3.参数的含义

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

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

  • replacer | 可选 | 有两种选择:函数或数组。

    • 如果是函数,则每一组名称/值对都会调用此函数,该函数返回一个值,作为名称的值变换到结果字符串中,如果返回 undefined,则该成员被忽略。
    • 如果是数组,则只有数组中存在名称才能够被转换,且转换后顺序与数组中的值保持一致。
    // replacer是函数的时候
    let obj = {
      name: "acoderbeauty",
      age: 18,
    };
    let jsonStr = JSON.stringify(obj,function (name, value) {
      if (name === "name"){ //如果存在一个名称为name的键值对
        value = "beauty"; //则把value改成"beauty"
      }
      return value;
    });
    console.log(jsonStr); //{"name":"beauty","age":18}
    
    // replacer是数组的时候
    let obj = {
      a: 1,
      b: 2,
      c: 3,
      d: 4
    };
    let jsonStr = JSON.stringify(obj,["a","b","c"]);
    console.log(jsonStr); //{"a":1,"b":2,"c":3}
    
    let jsonStr2 = JSON.stringify(obj,["b","c","a"]);
    console.log(jsonStr2); //{"b":2,"c":3,"a":1},顺序与数组中的值保持一致。
    复制代码
  • space | 可选 | 为了排版、方便阅读而存在的。
    可以在 JSON 字符串中添加空白或制表符等。(这个参数用法真是太狗了!!气死我了)

    let obj = {
      a: 1,
      b: 2,
      c: 3,
      d: 4
    };
    let jsonStr = JSON.stringify(obj,["a","b","c"],"***");
    console.log(jsonStr);
    
    let jsonStr2 = JSON.stringify(obj,["a","b","c"],"acoder");
    console.log(jsonStr2);
    
    let jsonStr3 = JSON.stringify(obj,["a","b","c"],"\t");
    console.log(jsonStr3);
    复制代码

JSON和XML的互相转换

1.JSON转XML(了解内容)

详情链接

2.XML转JSON(了解内容)

详情链接


很久之前的一篇笔记,最近刚好想起来JSON.stringify()的一点东西,顺便拿出来发了。 测试的图片来自在线转换工具 Json.cn

`