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

女爷i 2022-11-04 00:52 278阅读 0赞

##### 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"}'

转化测试案例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221023/fba377af6559477ca38a2d6440010cea.png