JSON学习笔记

JSON为服务器和客户端传输最常用的数据格式

其它的传输格式：

XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输各方面都弱于JSON，所以目前已经很少在被使用了
Protobuf：另外一个在网络传输中目前已经越来越多使用的传输格式是Protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的较少（Google推出）

1 创建JSON对象

JSON （JavaScript Object Notation）是一种可以在服务器和客户端之间传输的轻量级数据格式，并不是编程语言

1.1 JSON语法

JSON文件都是被包裹在一个大括号中 {}，通过key:value的方式来表达数据。看起来同 JavaScript 的对象表达方式十分相似，但是有所不同：JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON 文件中无法使用注释，试图添加注释将会引发报错。

轻量级：体现在JSON的体积小。虽然一个小的体积可能表示的数据很多。

在现代的开发中，能够做数据交换的，包括两个：JSON和XML

JSON和XML都是非常标准的数据交换格式

XML体积大，解析难度大

JSON体积小，解析更容易

XML和JSON相对比来说，XML的语法严格，json的语法相对松散。

1.2 JSON的数据格式

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

其他任何格式都会触发报错

var emp = {
    "empno" : 7369,
    "ename" : "smith",
    "sal" : 800
}
            
// 怎么访问对象的属性？
// 第一种方式
console.log(emp.empno)
console.log(emp.ename)
console.log(emp.sal)
            
// 第二种方式
console.log(emp["empno"])
console.log(emp["ename"])
console.log(emp["sal"])
            
var person = {
    "name" : "zhangsan",
    "sex" : false,
    "aihao" : ["抽烟","喝酒","烫头"]
}
            
console.log(person.name)
            
console.log(person.sex ? "男" : "女"),
            
var aihaos = person.aihao;
for(var i = 0; i < aihaos.length; i++){
    console.log(aihaos[i])
}

2 JSON对象的属性值

JSON对象的属性值可以为JSON对象

// json对象1
/* var addr = {
   "city" : "北京",
   "street" : "大兴"
} */

// json对象2
/* var user = {
   "username" : "zhangsan",
   "password" : "123",
   "email" : "zhangsan@123.com",
   "address" : addr
} */

var user = {
   "username" : "zhangsan",
   "password" : "123",
   "email" : "zhangsan@123.com",
   "address" : {"city" : "深圳","street" : "宝安"}
}

// zhangsan住在哪个城市怎么访问？
console.log(user.username + "居住在" + user.address.city)

案例

//设计一个JSON格式的数据可以表示全班人数和每个学生信息
var students = {
   "total" : 3,
   "data" : [{"name":"陈赓", "age":20},{"name":"吴雨阳","age":21},{"name":"殷远庭", "age":23}]
};

// 理解了吗？JSON很容易解析,一顿"点"就行.
console.log(students.data[0].name)

// 访问以上的json对象,将总人数取出,将每个学生的信息取出
console.log("总人数：" + students.total)

// 访问每一个学生数据
var arr = students.data;
for(var i = 0; i < arr.length; i++){
   var s = arr[i];
   console.log("姓名：" + s.name + ",年龄：" + s.age)
}

3 JSON序列化

// 转成字符串保存
const objString = JSON.stringify(obj)
localStorage.setItem("info", objString)

// 获取字符串转回对象
const itemString = localStorage.getItem("info")
const info = JSON.parse(itemString)

3.1 stringify

stringify方法：将JavaScript类型转成对应的JSON字符串

1、replace

第二个参数replace

obj = {
    "name": "why",
    "age": 18,
    "friends": {
        "name": "kobe",
        "hobbies": ["篮球", "足球", "乒乓球"]
    }
}

const objString1 = JSON.stringify(obj)
console.log(objString1)
// {"name":"why","age":18,"friends":{"name":"kobe","hobbies":["篮球","足球","乒乓球"]}}

// replace参数是一个数组，可选择性地仅包含数组指定的属性
const objString2 = JSON.stringify(obj, ["name", "age"])
console.log(objString2)
// {"name":"why","age":18}

// replace参数是一个函数，可选择性地替换值
const objString3 = JSON.stringify(obj, (key, value) => {
    console.log(key, value)
    if (key === "name") {
        return "coderwhy"
    }
    return value
})
console.log(objString3)
// {name: 'why', age: 18, friends: {"name": 'why', "hobbies":["篮球","足球","乒乓球"]}}

2、space

第三个参数space：缩进空格

obj = {
    "name": "why",
    "age": 18,
    "friends": {
        "name": "kobe",
        "hobbies": ["篮球", "足球", "乒乓球"]
    }
}

// 缩进2个字符
const objString4 = JSON.stringify(obj, null, 2)
console.log(objString4)
// {
//   "name": "why",
//   "age": 18,
//   "friends": {
//     "name": "kobe",
//     "hobbies": [
//       "篮球",
//       "足球",
//       "乒乓球"
//     ]
//   }
// }

如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果

obj = {
    "name": "why",
    "age": 18,
    "friends": {
        "name": "kobe",
        "hobbies": ["篮球", "足球", "乒乓球"]
    },
    toJSON: function () {
        return "coderwhy"
    }
}

const objString5 = JSON.stringify(obj)
console.log(objString5)
// "coderwhy"

3.2 parse

parse方法：解析JSON字符串，转回对应的JavaScript类型，提供可选的reviver函数用以在返回之前对所得到的对象执行变换（操作）

const info2 = JSON.parse(objString, (key, value) => {
    if (key === "time") {
        return new Date(value)
    }
    return value
})
console.log(info2)

3.3 使用JSON序列化深拷贝

obj = { name: 'why', age: 18, friend: { name: 'kobe' } }
const objString = JSON.stringify(obj)
const info = JSON.parse(objString)
console.log(info)
// { name: 'why', age: 18, friend: { name: 'kobe' } }

console.log(info === obj)  // false
info.friend.name = "james"
console.log(onj.friend.name)  // kobe

4 正则表达式

1、什么是正则表达式，有什么用？
正则表达式是一门独立的学科，基本每个语言都支持。
正则表达式不是JS专属的。不过在JS中使用居多。
通常使用正则表达式进行字符串格式匹配。

正则表达式是有一堆特殊的符号组成的一个表达式。每一个特殊的符号都有特殊的代表含义。

2、对于javascript程序员来说，我们对于正则表达式掌握到什么程度呢？
第一：能够看懂正则表达式
第二：简单的正则要会写
第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）
第四：要会创建JS的正则表达式对象。
第五：要会调用JS正则表达式对象的方法。

3、常见的正则表达式符号有哪些？
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

* 重复零次或更多次 0-N次
+ 重复一次或更多次 1-N次
? 重复零次或一次 0或1次
{n} 重复n次 n次
{n,} 重复n次或更多次 n+次
{n,m} 重复n到m次 n到m次
注意：数量永远匹配的都是前面的那个字符出现的次数。

\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

| 表示或者

[a-z]{1} a到z所有的字符中的任意1个。

[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。

[1-9][0-9]{4,} qq号的正则表达式，最小的qq号是10000

[1-9] 没有指定数量的时候，默认是1个。

4、邮箱的正则表达式：
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
这个邮箱地址从网上找了之后不一定能用，你需要测试。反复测试。

5、在JS中怎么创建正则表达式对象呢？

包括两种方式，重点使用第一种

第一种方式：直接量语法
var regExp = /正则表达式/标记
第二种方式：使用内置类RegExp类。
var regExp = new RegExp("正则表达式", "标记")

标记是可选项！！！！！都有哪些值可选呢？
g：全局 global
i: 忽略大小写 ignorecase
gi: 全局扫描，并且忽略大小写。

6、正则表达式对象有一个很重要的方法：
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
var ok = emailRegExp.test("用户输入的字符串");
返回值ok是true表示，匹配成功了。

其实在JS中，字符串String也是支持正则表达式的。

<script>
	console.log("1980-11-10".replace("-", "/"))
	// g表示global全局的,所有的 - 替换成/
	console.log("1980-11-10".replace(/-/g, "/"))
        
	function checkEmail(){
		//获取邮箱地址
		var email = document.getElementById("email").value;
		// 创建正则表达式对象
		var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		// 验证
		var ok = regExp.test(email);
        if(ok){
			alert("邮箱地址合法")
		}else{
			alert("邮箱地址不合法");
        }
    }		
</script>
        
邮箱地址：<input type="text" id="email" />
<input type="button" value="验证邮箱地址" onclick="checkEmail()"/>