文章详细介绍了JavaScript中的解构赋值，包括数组和对象的解构，以及解构时的默认值和剩余元素处理。接着讨论了对象的序列化，通过JSON.stringify()和JSON.parse()进行转换。还涵盖了Math对象的常用常量和方法，Date对象的创建和使用，以及包装类和正则表达式的创建、匹配规则和量词的运用。
目录
1.3、解构时没有对应的值，就用默认值，而不是undefined
2.4、解构时没有对应的值，就用默认值，而不是undefined
1、直接通过new Date()创建时间对象时，它创建的是当前的时间的对象
2、可以在Date()的构造函数中，传递一个表示时间的字符串
一、解构赋值
1、数组的解构
1.1、解构赋值
const arr = ["孙悟空", "猪八戒", "沙和尚"];
let a, b, c;
[a, b, c] = arr; // 等同于 [a, b, c] = ["孙悟空", "猪八戒", "沙和尚"]1.2、声明同时解构
let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精", "玉兔精"];
let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精"]; // g是undefined注意：括号、中括号前写分号，不会报错。或者每行代码都写上分号
1.3、解构时没有对应的值，就用默认值，而不是undefined
let [d, e, f, g] = [1, 2, 3] // g=undefined
let [d, e, f = 77, g = 10] = [1, 2, 3] // [1, 2, 3, 10] 覆盖f的默认值，g用默认值
1.4、...设置剩余元素的值
let [d, e] = [1, 2, 3, 4, 5] // [1, 2]
let [d, e, ...f] = [1, 2, 3, 4, 5] // [1, 2, 3, 4, 5]
1.5、对以数组为返回值的函数进行解构
function fn(){
return ["二郎神", "猪八戒"]
}
let [name1, name2] = fn() // [name1, name2] = ["二郎神", "猪八戒"]1.6、快速交换两个变量的值
let a1 = 10;
let a2 = 20;
[a1, a2] = [a2, a1]; // 等号左边是变量，等号右边是值
const arr2 = ["孙悟空", "猪八戒"];
[arr2[0], arr2[1]] = [arr2[1], arr2[0]];1.7、根据需求解构数组
const arr3 = [["孙悟空", 18, "男"], ["猪八戒" ,28, "男"]]
let [[name, age, gender], obj] = arr3
console.log(obj) // ["猪八戒" ,28, "男"]
console.log(name, age, gender) // 孙悟空 18 男2、对象的解构
2.1、解构赋值
注意加括号！
const obj = { name: "孙悟空", age: 18, gender: "男" };
let name, age, gender;
({ name, age, gender } = obj); // 加括号2.2、声明同时解构
const obj = { name: "孙悟空", age: 18, gender: "男" }
let { name, age, gender } = obj // 等同于 let { name：name, age：age, gender：gender } = obj2.3、当变量名与对象内属性名称不一致时
const obj = { name: "孙悟空", age: 18, gender: "男" }
let {name:a, age:b, gender:c} = obj
console.log(a, b, c)2.4、解构时没有对应的值，就用默认值，而不是undefined
const obj = { name: "孙悟空", age: 18, gender: "男" }
let {name:a, age:b, gender:c, address:d="花果山"} = obj
console.log(a, b, c, d)二、对象的序列化（JSON）
1、概念
JS中的对象使用时都是存在于计算机的内存中的（0101形式）。序列化指将对象转换为一个可以存储的格式。在JS中对象的序列化通常是将一个对象转换为字符串（JSON字符串）。
2、序列化的作用
对象转换为字符串后，可以将字符串在不同的语言之间进行传递。甚至人可以直接对字符串进行读写操作，使得JS对象可以不同的语言之间传递。
- 作为数据交换的格式
- 用来编写配置文字
3、如何进行序列化
在JS中有一个工具类 JSON （JavaScript Object Notation） JS对象表示法，可以直接使用。
JS对象序列化后会转换为一个字符串，这个字符串我们称其为JSON字符串。
4、JSON类的使用方法
4.1、JSON.stringify()
将一个对象转换为JSON字符串
const obj = {
name: "孙悟空",
age: 18,
}
const str = JSON.stringify(obj)
console.log(obj) // {"name":"孙悟空","age":18}
console.log(str) // {"name":"孙悟空","age":18}
二者打印的东西看起来一样，但是上面的字体是灰色代表一个对象，下面的字体是黑色代表JSON字符串4.2、JSON.parse()
将一个JSON格式的字符串转换为JS对象
const obj = {
name: "孙悟空",
age: 18,
}
const str = JSON.stringify(obj)
const obj2 = JSON.parse(str)
这里obj2和obj不是同一个对象，而是obj深拷贝4.3、手动的编写JSON字符串
在很多程序的配置文件就是使用JSON编写的
const obj = {
name: "孙悟空",
age: 18,
}
const str2 = '{"name":"孙悟空","age":18}'5、编写JSON的注意事项
5.1、JSON字符串有两种类型：
JSON对象 {}
JSON数组 []
const str3 = "{}"
const str4 = '[]'5.2.、JSON字符串的属性名必须使用双引号引起来
因为一些语言中字符串只能用双引号表示，为了避免转换时的麻烦，所以一定要用双引号
5.3、JSON中可以使用的属性值（元素）
也就是所有语言都共有的数据类型就可以写，JavaScript单独有的就不可以写
- 数字（Number）
- 字符串（String） 必须使用双引号
- 布尔值（Boolean）
- 空值（Null）
- 对象（Object {}）
- 数组（Array []）
const str4 = '["hello", true, []]'5.4、JSON的格式和JS对象的格式基本上一致的
注意：JSON字符串如果属性是最后一个，则不要再加逗号
6、JSON进行深复制
const obj = {
name: "孙悟空",
age: 18,
}
const obj2 = JSON.parse(JSON.stringify(obj)) 三、Math
Math是一个工具类，可以直接使用，Math中为我们提供了数学运算相关的一些常量和方法。
常量：
Math.PI 圆周率
方法：
Math.abs() 求一个数的绝对值
Math.min() 求多个值中的最小值
Math.max() 求多个值中的最大值
Math.pow() 求x的y次幂
Math.sqrt() 求一个数的平方根
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入取整
Math.trunc() 直接去除小数位
Math.random() 生成一个0-1之间的随机数
生成 0-x之间的随机数：
Math.round(Math.random() * x)
Math.floor(Math.random() * (x + 1))
生成 x-y 之间的随机数：
Math.round(Math.random() * (y-x) + x)四、Date
在JS中所有的和时间相关的数据都由Date对象来表示
1、直接通过new Date()创建时间对象时，它创建的是当前的时间的对象
let d = new Date()2、可以在Date()的构造函数中，传递一个表示时间的字符串
字符串的格式：月/日/年 时:分:秒 or 年-月-日T时:分:秒
let d = new Date()
d = new Date("2019-12-23T23:34:35")3、设置当前时间
new Date(年份, 月, 日, 时, 分, 秒, 毫秒)
let d = new Date()
d = new Date(2016, 0, 1, 13, 45, 33)4、对象的方法：
4.1、getFullYear() ：获取4位年份
4.2、getMonth() ：返当前日期的月份（0-11）
4.3、getDate() ：返回当前是几日
4.4、getDay() ：返回当前日期是周几（0-6） 0表示周日
4.5、getTime() ：返回当前日期对象的时间戳（时间戳：自1970年1月1日0时0分0秒到当前时间所经历的毫秒数。计算机底层存储时间时，使用都是时间戳）
4.6、Date.now() ：获取当前的时间戳
4.7、toLocaleString()：将一个日期转换为本地时间格式的字符串
参数：
1. 描述语言和国家信息的字符串：
- zh-CN 中文中国
- zh-HK 中文香港
- en-US 英文美国
2. 需要一个对象作为参数，在对象中可以通过对象的属性来对日期的格式进行配置：
- dateStyle 日期的风格
- timeStyle 时间的风格： full、long、medium、short
- hour12 是否采用12小时值：true、false
- weekday 星期的显示方式：long、short、narrow
- year：numeric、2-digit
const d = new Date()
let result = d.toLocaleDateString() // 将日期转换为本地的字符串
result = d.toLocaleTimeString() // 将时间转换为本地的字符串
result = d.toLocaleString("zh-CN", {
year: "numeric",
month: "long",
day: "2-digit",
weekday: "short",
})
console.log(result)五、包装类
在JS中，除了直接创建原始值外，也可以创建原始值的对象：
- 通过 new String() 可以创建String类型的对象
- 通过 new Number() 可以创建Number类型的对象
- 通过 new Boolean() 可以创建Boolean类型的对象
但是千万不要这么做，因为将原始值转换为对象之后，就失去了原有的含义：
let bool = new Boolean(true)
let bool2 = new Boolean(true)
alert(bool == bool2) // false，因为是2个不同的对象，失去了布尔值表示1或0的意义JS中一共有5个包装类：
- String --> 字符串包装为String对象
- Number --> 数值包装为Number对象
- Boolean --> 布尔值包装为Boolean对象
- BigInt --> 大整数包装为BigInt对象
- Symbol --> 符号包装为Symbol对象
通过包装类可以将一个原始值包装为一个对象，当我们对一个原始值调用方法或属性时，JS解释器会临时将原始值包装为对应的对象，然后调用这个对象的属性或方法。也就是JS会自己调用这个方法，不用我们用。
由于原始值会被临时转换为对应的对象，这就意味着对象中的方法都可以直接通过原始值来调用。
六、正则表达式
正则表达式用来定义一个规则，通过这个规则计算机可以检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象。
1、创建
new RegExp() 接收两个参数（字符串） 1.正则表达式 2.匹配模式
方式一：通过构造函数来创建一个正则表达式的对象
let reg = new RegExp("a", "i") 方式二：使用字面量来创建正则表达式：/正则/匹配模式
let reg = new RegExp()
reg = /a/i
reg = /\w/2、检查字符串是否符合规则
正则表达式实例.test(规则)
reg = new RegExp("a") // /a/ 表示，检查一个字符串中是否有a
// 通过正则表达式检查一个字符串是否符合规则
let str = "a"
let result = reg.test(str) // true
result = reg.test("b") // false
result = reg.test("abc") // true
result = reg.test("bcabc") // true3、基本使用语法
3.1、在正则表达式中大部分字符都可以直接写
3.2、| 在正则表达式中表示或
3.3、[] 表示或（字符集）
- [a-z] 任意的小写字母
- [A-Z] 任意的大写字母
- [a-zA-Z] 任意的字母
- [0-9]任意数字
3.4、[^] 表示除了
- [^x] 除了x
3.5、[.*]表示除了换行外的任意字符
3.6、在正则表达式中使用\作为转义字符
3.7、其他的字符集
- \w 任意的单词字符 [A-Za-z0-9_]
- \W 除了单词字符 [^A-Za-z0-9_]
- \d 任意数字 [0-9]
- \D 除了数字 [^0-9]
- \s 空格
- \S 除了空格
- \b 单词边界
- \B 除了单词边界
3.8、开头和结尾
- ^ 表示字符串的开头
- $ 表示字符串的结尾
let re = /abc|bcd/
re = /[a-z]/
re = /[A-Z]/
re = /[A-Za-z]/
re = /[a-z]/i // 匹配模式i表示忽略大小写
re = /[^a-z]/ // 匹配包含小写字母以外内容的字符串
re = /./
re = /\./
re = /\w/
re = /^a/ // 匹配开始位置的a
re = /a$/ // 匹配结束位置的a
re = /^a$/ // 只匹配字母a，完全匹配，要求字符串必须和正则完全一致
re = /^abc$/
let result = re.test('aa')
console.log(result)4、量词的使用
- {m} 正好m个
- {m,} 至少m个
- {m,n} m-n个
- + 一个以上，相当于{1,}
- * 任意数量的a
- ? 0-1次 {0,1}
let re = /a{3}/
re = /^a{3}$/
re = /^(ab){3}$/
re = /^[a-z]{3}$/
re = /^[a-z]{1,}$/
re = /^[a-z]{1,3}$/
re = /^ba+$/
re = /^ba*$/
re = /^ba?$/
let result = re.test("baa")
console.log(result)5、获取字符串中符合正则表达式的内容
正则表达式实例.exec()
let str = "abcaecafcacc"
// 提取出str中符合axc格式的内容
let re = /a(([a-z])c)/ig // g表示全局匹配
let result = re.exec(str)
console.log(result)
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
