JS学习笔记（十三）基本引用类型（Date、RegExp、原始值包装类型、单例内置对象）

JS学习笔记（十三）

本系列更多文章，可以查看专栏 JS学习笔记

---

---

一、Date【日期对象】

Date类型将日期保存为自协调世界时（UTC）时间1970年1月1日零时至今所经过的毫秒数。

1. 创建日期对象

使用 new 操作符调用 Date 构造函数，可用于创建日期对象

（1）不传入参数时

创建的对象会保存当前日期和时间

// 不同浏览器可能显示结果不同
console.log(new Date()); // Sun Sep 11 2022 19:15:21 GMT+0800 (中国标准时间)

（2）传入参数时

以下两种方法，可以作为new Date()的参数
如果省略对应的方法，会自动调用此两种方法

• （1）Date.parse() 接收一个表示日期的字符串参数，支持以下格式：
  • “月/日/年”
  • “月名 日,年”
  • “周几 月名 日 年 时:分:秒 时区”

• （2）Date.UTC() 接收年、零起点月数（0_{11）、日（1}31）、时（0~23）、分、秒和毫秒
  • 年和月是必需的

2. 继承的方法

• （1）toLocaleString()，返回与浏览器运行的本地环境一致的时间和日期
  • 包含AM或PM，但不包含是时区
• （2）toString()，返回带时区信息的日期和时间
  • 时间是24小时制（0~23）
• （3）valueOf()，不返回字符串，返回日期的毫秒表示

更多日期格式化、日期/时间组件方法可以参考《JavaScript高级程序设计》

---

二、RegExp

RegExp类型支持正则表达式
正则表达式的形式： /pattern/flags （pattern：模式，flags：标记）
匹配模式的标记类型：

1. 创建正则表达式

• （1）使用字面量：定义一个格式为"/pattern/flags"的字符串
• （2）使用构造函数：利用 new RegExp(),第一个参数为pattern，第二个参数表示flags

以下两种方式创建的正则表达式相同

let str = "catdogpigdogcadogtaccat";
// 使用字面量
let exp1 = "/cat/g";
// 使用构造函数
let exp2 = new RegExp("cat", "g");
console.log(exp1); // /cat/g
console.log(exp2); // /cat/g

注：元字符等有特殊含义，需要利用转义字符

( [ { \ ^ $ | ) ] } ? * + .

---

2. 常见特殊符号

字符	含义
\	一般作为转义字符符号，/\d/ 匹配字母d
^	匹配输入的开始；在 [] 中时，表示取反，/^123/ 匹配以123开头，/[^0-9]/ 匹配非数字
$	匹配输入的结尾，/123$/ 匹配以123结尾
*	匹配前一个表达式重复0次或多次，/bo*/ 匹配 {b,bo,boo,……}
+	匹配前一个表达式重复1次或多次，/bo+/ 匹配 {bo,boo,……}
?	匹配前一个表达式0次或1次，/e?le?/ 匹配 {l,el,le,ele}
.	默认匹配除换行符外的任何单个字符
{n}	匹配前一个字符刚好出现n次, /b{3}/ 匹配 bbb
{n,}	匹配前一个字符至少n次, /b{3,}/ 匹配 {bbb,bbbb,……}
{n,m}	匹配前一个字符至少n次，至多m次, /b{3，5}/ 匹配 {bbb,bbbb,bbbbb}
[]	匹配方括号中任意字符，包括转义序列（可使用 - 指定一个字符范围）, /[\b]/ 匹配退格，/[a-zA-Z]/匹配任意大小写英文字符

如果 ? 紧跟在 *、+、?、{} 后面，就将量词变为非贪婪（匹配尽量少的字符）

字符	含义
\b	匹配一个词的边界，/\bm/ 匹配“moon”中的“m”，/oon\b/ 匹配“moon”中的“oon”，
\B	匹配一个非单词边界，/\B../ 匹配“moon”中的“oo”
\d	匹配一个数字
\D	匹配一个非数字
\s	匹配一个空白符，包括空格、制表符、换页符和换行符。
\S	匹配一个非空白符
\w	匹配一个单字字符，即字母、数字或下划线
\W	匹配一个非单字字符

通常，\ 加上大写或小写字母匹配内容相反，\ 加上数字x引用第x个 () 包含的单词

更多关于正则表达式的用法和特殊字符，参考 MDN 正则表达式

---

3. 实例方法

注：可使用()来进行分组

（1）exec()

• 用于配合捕获组，只接受一个参数
• 找到匹配项： 返回包含第一个匹配信息的数组；
• 没找到匹配项： 返回 null

let str = "cat, bat, sat ,fat";
// 使用字面量创建正则表达式不带引号
let pattern = /.at/; // 不设置全局标记
// pattern = /.at/g; // 设置全局标记
// 正则表达式.exec(待匹配的文本)
console.log(pattern.lastIndex);

let matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

使用全局标记 g 时，正则表达式的 lastIndex 属性值会发生变化！！

不设置全局标记 g ，结果如下图所示：

设置全局标记 g ，结果如下图所示：

使用粘附标记 y 时，会覆盖全局标记 g 。此时调用 exec() 就只会在正则表达式的 lastIndex 属性值的位置上寻找匹配值，可以通过设置 lastIndex 值，来保证 exec() 方法正常使用

let str = "cat, bat, sat ,fat";
let pattern = /.at/y;
let matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

// 如果在lastIndex匹配不到，会将lastIndex置为0
matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

// 设置laseIndex的值
pattern.lastIndex = 5;
matches = pattern.exec(str);
console.log(matches);
console.log(pattern.lastIndex);

设置粘附标记 y ，结果如下图所示：

（2）test()

• 接受一个字符串参数，用于判断输入文本和模式是否匹配
• 找到匹配项： 返回 true；
• 没找到匹配项： 返回 false

let pattern = /^\d{3}-\d{2}-\d{1}$/;
console.log(pattern.test("123-23-3")); // true
console.log(pattern.test("12-23-3")); // false
console.log(pattern.test("123-23-30")); // false

---

三、原始值包装类型

特殊引用类型 Boolean、 Number 和 String，使用 typeof 返回 object。

1. 创建方式

// (1)创建String引用类型
let s = new String("text");
console.log(typeof "text"); // string
console.log(typeof s); // object

// (2)创建Number引用类型
let n = new Number(123);
console.log(typeof 123); // number
console.log(typeof n); // object

// (3)创建Boolean引用类型
let b = new Boolean(false);
console.log(typeof false); // boolean
console.log(typeof b); // object

// (4)使用Object自动判断String、Number、Boolean
console.log(new Object("text") instanceof String); // true
console.log(new Object(123) instanceof Number); // true
console.log(new Object(false) instanceof Boolean); // true

2. Boolean

任何对象转换成 Boolean 类型都会是 true

console.log(b && true); // true
console.log(false && true); // false

3. Number

• （1）valueOf()：返回Number对象表示的原始数值
• （2）toLocalString()：返回数值字符串
• （3）toString()：返回数值字符串，可以接受一个表示基数的参数，将数值转换为对应进制的表示方式
• （4）toFixed()：接受一个参数，表示指定的小数点位数（会四舍五入）
• （5）toExponential()：返回以科学记数法表示的数值字符串
• （6）toPrecision()：**接受一本参数，表示结果中数字的总位数，会自动决定调用 toFixed() 或 toExponential() **
• （7）isInteger()：判断是否为整数，若小数点后均为零，也是整数
• （8）isSafeInteger()：判断是否为 - 2的53次方 + 1 ~ 2的53次方-1 范围的整数

let num = 10;
// 利用toString将十进制数值转换成2/8/16进制数值字符串
console.log(num.toString()); // 10
console.log(num.toString(2)); // 1010
console.log(num.toString(8)); // 12
console.log(num.toString(16)); // a
// 利用parseInt将2/8/16进制数值字符串转换成十进制数值
console.log(parseInt("10")); // 10
console.log(parseInt("1010", 2)); // 10
console.log(parseInt("12", 8)); // 10
console.log(parseInt("a", 16)); // 10

4. String

每个 String 对象都有 length 属性，表示字符串中字符的数量

• ① charAt()：返回给定索引位置的字符
• ② charCodeAt()：查看指定码元的字符编码，JS字符串使用两种Unicode编码混合的策略：UCS-2和UTF-16。
• ③ fromCharCode()：根据给定的UTF-16码元创建字符串中的字符
• ④ charPointAt()：代替 charCodeAt() 方法，可以解析出更多的字符串

（1）字符串操作方法

①concat()：用于将一个或多个字符串拼接成一个新字符串，原字符串不改变

②字符串提取子字符串方法：slice() 、substr()、substring()

	slice()	substr()	substring()
第一个参数含义	子字符串开始的位置	子字符串开始的位置	子字符串开始的位置
第二个参数含义	子字符串结束的位置	返回的子字符串数量	子字符串结束的位置
第一个参数（负数）	负参数值会转换成字符串长度加上负参数值	负参数值会转换成字符串长度加上负参数值	负参数值会转换成0
第二个参数（负数）	负参数值会转换成字符串长度加上负参数值	负参数值会转换成0	负参数值会转换成0

let str = "hello world";
console.log(str.length); // 11
let new_str = str.concat("!!!");

// concat拼接方法 / 可以直接用"+"
console.log(str); // hello world
console.log(new_str); // hello world!!!

// 第二个参数的含义不同
console.log(str.slice(3, 6)); // lo w
console.log(str.substr(3, 6)); // lo wor
console.log(str.substring(3, 6)); // lo w

// 对于负数
console.log(str.slice(-8, -5)); // 相当于str.slice(3, 6)
console.log(str.substr(-8, -5)); // 相当于str.substr(3, 0)
console.log(str.substring(-8, -5)); // 相当于str.substring(0, 0)

（2）字符串位置方法

• ① indexOf()：从字符串开头开始查找子字符串，返回位置
• ② lastIndexOf()：从字符串末尾开始查找子字符串，返回位置

let str = "hello world";
console.log(str.indexOf("h")); // 0
console.log(str.lastIndexOf("h")); // 0
console.log(str.indexOf("o")); // 4
console.log(str.lastIndexOf("o")); // 7

（3）字符串包含方法

判断字符串中是否包含另一个字符串，并返回一个是否包含的布尔值。

• ① startsWith()：检查开始于索引0的匹配项
• ② endsWith()：检查开始于末尾索引的匹配项
• ③ includes()：检查整个字符串

	startsWith()	endsWith()	includes()
第一个参数含义	指定查找的字符串	指定查找的字符串	指定查找的字符串
第二个参数含义	开始搜索的位置	开始搜索的位置	指定字符串末尾的位置

let str = "carbazbar";
console.log(str.startsWith("car")); // true
console.log(str.includes("car")); // true
console.log(str.endsWith("car")); // false

（4）字符串模式匹配方法

• ① match()：接收一个参数，正则表达式字符串或RegExp对象，与RegExp对象的exec()方法返回的数组一样。
• ② search()：与 match() 方法参数一致，返回模式第一个匹配的位置索引。
• ③ replace()：第一个参数为RegExp对象或字符串，第二个为字符串或函数。
  • 第一个参数为字符串，只会替换第一个子字符串；
  • 若想替换所有子字符串，第一个参数必须为正则表达式并带全局标记
• ④ split()：根据传入的分隔符，将字符串拆分成数组，并返回数组结果

let str = "at1,at2,at3";
let pattern1 = /at/;
console.log(str.match(pattern1)); // ['at', index: 0, input: 'at1,at2,at3', groups: undefined]
console.log(str.search(pattern1)); // 0
console.log(str.replace(pattern1, "oo")); // oo1,at2,at3
console.log(str.split(pattern1)); //  ['', '1,', '2,', '3']

let pattern2 = /at/g;
console.log(str.match(pattern2)); //  ['at', 'at', 'at']
console.log(str.search(pattern2)); // 0
console.log(str.replace(pattern2, "oo")); // oo1,oo2,oo3
console.log(str.split(pattern2)); // ['', '1,', '2,', '3']

（5）其它方法

• ① trim()：创建字符串的一个副本，并删除前后的所有空格符，并返回结果。
• ② repeat()：接收一个参数表示将字符串复制多少次，然后返回拼接所有副本后的结果。
• ③ padStart()：复制字符串，第一个参数指定长度，小于参数会在开头填充字符；第二个参数为可选的填充字符串，默认为空格
• ④ padEnd()：复制字符串，第一个参数指定长度，小于参数会在结尾填充字符；第二个参数为可选的填充字符串，默认为空格
• ⑤ toLowerCase()：转换为小写字符串
• ⑥ toLocaleLowerCase()：在特定地区实现，转换为小写字符串
• ⑤ toUpperCase()：转换为大写字符串
• ⑥ toLocaleUpperCase()：在特定地区实现，转换为大写字符串

---

四、单例内置对象

内置对象：任何由ECMAScript实现提供、与宿主环境无关，并在ECMAScript程序开始执行时就存在的对象。包括 Object 、Array 和 String。

1. Global

（1）URL编码方法

使用 encodeURLComponent() 方法比 encodeURL() 更频繁

• ① encodeURL()：将整个URL进行编码，不会编码属于URL组件的特殊字符，如冒号、斜杠、问号、井号。
• ② encodeURLComponent()：将整个URL进行编码，会编码它发现的所有非标准字符。

（2）eval()方法

通过 eval() 定义的任何变量和函数都不会被提升！

• 接受一个参数，即一个要执行的ECMAScript字符串。
• 通过 eval() 执行的代码属于该调用所在上下文，被执行的代码与该上下文拥有相同的作用域链。
• 严格模式下， eval() 内部创建的变量和函数无法被外部访问。

（3）Global对象属性

（4）window对象

浏览器将window对象实现为Global对象的代理，因此全局作用域中声明的变量和函数都变成了 window 的属性。

当一个函数在没有明确指定 this 值的情况下执行时，this 值等于 Global 对象。

2. Math

（1）Math对象属性

（2）方法

• ① max()：可接受多个参数，获取一组数值中最大值；
• ② min()：可接受多个参数，获取一组数值中最小值；
• ③ ceil()：向上舍入为最接近的整数
• ④ floor()：向下舍入为最接近的整数
• ⑤ round()：四舍五入为整数
• ⑥ fround()：返回数值最接近的单精度（32位）浮点值表示

console.log(Math.floor(-3.5)); // -4
console.log(Math.ceil(-3.5)); // -3
console.log(Math.round(-3.5)); // -3

---

结尾

部分内容参考《ECMAScript 6 入门》《JavaScript权威指南》《JavaScript高级程序设计》，如有错误，欢迎评论区指正。