前端必备——JSON语法规则及使用

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成，有效的提升了网络传输效率。

1：简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
2：JavaScript对象表示法--JavaScript Object Notation
3：JSON是存储和交换文本信息的语法，类似于XML
4：JSON比XML更小、更快、更容易解析！
5：一句话概括：JSON将基本数据类型储存为文本！

在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。

JSON大致分为三种结构：
	1：JSON对象
	2：JSON数组
	3：JSON对象和数组嵌套使用

JSON格式的语法规则非常简单，几十个字就可以说清楚！

	1：对象表示为键/值对
	2：并列数据用逗号（,）隔开，最后一个不用逗号
	3：花括号保存对象 {}
	4：方括号保存数组 []
	5：映射关系用冒号表示 (:)

比如下面这句话:

1：JSON 键值对：是用来保存 JavaScript 对象的一种方式，和 JavaScript 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔。

	"我的名字是阿佳，我今年研二，身高185cm，体重80公斤，就读于北京邮电大学！"
	//写成JSON格式就是这样
	{
		"姓名"："阿佳"，
		"年级"："研二"，
		"身高"："185"
		"体重"："80"
		"学校"："北京邮电大学"
	//很容易理解：等价于JavaScript语句：
		姓名="阿佳"，
		身高="185"，
		...
	}

2：JSON数组在方括号中书写，数组中可以包含多个对象，下面的例子中，对象“employees”是包含三个对象的数组，每个对象代表一条关于某人姓名的记录。

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

3：JSON使用JavaScript语法，通过js可以创建一个对象数组，并进行这样的赋值

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
//此时可以访问JS中对象数组的第一项：
employees[0].lastName;//返回Gates

4：很多人搞不清楚JSON和JS对象的关系，其实本质是：

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

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

5：JSON文本转换为JavaScript对象
JSON最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
（1）使用 JSON.parse() 方法，实现从JSON字符串转换为JavaScript对象。

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
console.log(obj);
// {a: 'Hello', b: 'World'}

（2）使用 JSON.stringify() 方法，实现从JavaScript 对象转换为JSON字符串。

var json = JSON.stringify({a: 'Hello', b: 'World'});
console.log(json);
//结果是 '{"a": "Hello", "b": "World"}'

转化测试案例：

  <script>
    // 新建一个js对象
    let test = {
      name: "阿佳",
      age: 18,
      school: "BUPT",
      height: 185
    }
    console.log(test);
    // 将js对象转换为JSON字符串
    let str = JSON.stringify(test);
    console.log(str);
    // 将JSON字符串转化为JS对象
    let obj = JSON.parse(str);
    console.log(obj);
  </script>

总结：前后端分离时代，数据交互变得异常重要，JSON就是王者！