JSON 为什么大受欢迎？

zlevai
1,390 阅读4分钟

引言

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

JSON是一种数据格式，不是编程语言。👉json.org 传送门

它和javaScript里的object外形看着类似，但是还是有区别的。JSON字符串必须使用双引号。

JSON中的对象要求给属性加双引号。

JSON和 js 对象字面量及 js 数组字面量形式比较，没有声明变量的概念，没有末尾的分号。

JSON 有哪些类型的值?

  • 简单值：包含 字符串、数值、布尔值、null,不支持undefined。
    • 2020_07_29_08VPc1
      2020_07_29_08VPc1
  • 对象：作为复杂数据类型，表示的是一组无序的键值对。
    • 对象
      对象
  • 数组：作为复杂数据类型，表示的是一组有序的值的列表。
    • 数组
      数组

JSON 为什么在 JavaScript 里大受欢迎？

JSON之所以在 JS 里流行，除了和 JS 类似的语法，最主要的原因是，可以把JSON数据解析为有用的JS对象。

JSON 早期的解析器基本上是通过 JS 里的eval()函数，解析返回 JS 对象和数组。

在EMACScript5对解析 JSON 的行为做了规范，定义了全局的JSON对象。

和 XML 的比较

可读性

JSON 和 XML 的可读性可谓不相上下，一边是简易的语法，一边是规范的标签形式，很难分出胜负。

可扩展性

XML 天生有很好的扩展性，JSON 当然也有，没有什么是 XML 可以扩展而 JSON 却不能扩展的。不过 JSON 在 Javascript 主场作战，可以存储 Javascript 复合对象，有着 xml 不可比拟的优势。

编码难度

XML 有丰富的编码工具，比如 Dom4j、JDom 等，JSON 也有提供的工具。无工具的情况下，相信熟练的开发人员一样能很快的写出想要的 xml 文档和 JSON 字符串，不过，xml 文档要多很多结构上的字符。

解码难度

  • XML 的解析方式有两种：

  • 一是通过文档模型解析，也就是通过父标签索引出一组标记。例如：xmlData.getElementsByTagName("tagName")，但是这样是要在预先知道文档结构的情况下使用，无法进行通用的封装。

  • 另外一种方法是遍历节点（document 以及 childNodes）。这个可以通过递归来实现，不过解析出来的数据仍旧是形式各异，往往也不能满足预先的要求。

JSON 对象的方法 (序列化，反序列化)

  • JSON.stringify()：把 JS 对象序列化为 JSON 字符串。
    • 默认情况，输出的 JSON 字符串，不包含任何空格字符或缩进。
    • 除了要序列化的对象，还可以接受两个参数，第一个是过滤器，可以使一个数组也可以是一个函数，第二个是一个选项，表示是否在 JSON 字符串中保留缩进。
  • JSON.parse() ：把 JSON 字符串解析为原生 JS 值。
var pig = {
  name:"花花",
  age:1,
  weight:undefined,
  height:null,
  say:function(){ console.log(1); }
}
var arr = [1,"a","b",null,undefined]; // undefined值为被转为null

# 对象序列化 -> 字符串
var pigStr = JSON.stringify(pig);
// pigStr: "{"name":"花花","age":1,"height":null}"

# 数组序列化 -> 字符串
var arrStr = JSON.stringify(arr);
// arrStr: "[1,"a","b",null,null]"

# 序列化过滤 -> 字符串
var book = {
  title:"前端从入门到入院",
  author:"前端大师傅",
  year:2000
}
var bookStr = JSON.stringify(book,["title","author"]);
// bookStr: "{"title":"前端从入门到入院","author":"前端大师傅"}"  year 字段被过滤

var bookStr2 = JSON.stringify(book,(key,value)=>{
  if(key === "title"){
    value = "前端从入门到放弃"
  }
  return value
});
// bookStr2: "{"title":"前端从入门到放弃","author":"前端大师傅","year":2000}"

# 序列化缩进 -> 字符串
var bookStr3 = JSON.stringify(book,null,4);
// bookStr3:
// "{
//    "title": "前端从入门到入院",
//    "author": "前端大师傅",
//    "year": 2000
// }"
var bookStr4 = JSON.stringify(book,null,"--");
// bookStr4:
// "{
// --"title": "前端从入门到入院",
// --"author": "前端大师傅",
// --"year": 2000
// }"
// 缩进字符串最长不能超过10个字符长。超过，结果中只会出现前10个字符。

# 解析 -> JS对象
var pigParse = JSON.parse(pigStr);
// pigParse:  {name: "花花", age: 1, height: null}

# 解析 -> JS数组
var arrParse = JSON.parse(arrStr);
// arrParse:   [1, "a", "b", null, null]

# 总结：
# 对JS对象和数组序列化转字符串时，对象中的undefined会被过滤掉，数组里的会被转为null。对象里的函数会被过滤。

👉Json2.js

👉Json.cn 传送门

本文使用 👉mdnice 排版

avatar
文章
阅读
粉丝