前端必刷系列之红宝书——第 4、5 章

“红宝书” 通常指的是《JavaScript 高级程序设计》，这是一本由 Nicholas C. Zakas（尼古拉斯·扎卡斯）编写的 JavaScript 书籍，是一本广受欢迎的经典之作。这本书是一部翔实的工具书，满满的都是 JavaScript 知识和实用技术。

不管你有没有刷过红宝书，如果现在还没掌握好，那就一起来刷红宝书吧，go！go！go！

系列文章：

1. 前端必刷系列之红宝书——1、2 章
2. 前端必刷系列之红宝书——第 3 章
3. 前端必刷系列之红宝书——第 4、5 章

第 4 章 变量、作用域与内存

原始值与引用值

JS 变量可以保存两种类型的值：原始值与引用值。

• 原始值大小固定，因此保存在栈内存上。
• 从一个变量到另一个变量复制原始值会创建该值的第二个副本。
• 引用值是对象，存储在堆内存上。
• 包含引用值的变量实际上只包含指向相应对象的一个指针，而不是一个对象本身。
• 从一个变量到另一个变量复制引用值只会复制指针，因此结果是两个变量都指向同一个对象。
• typeof 可以确定值的原始类型，而 instanceof 用于确保值的引用类型。

function setName(obj){
    obj.name = 'zhangsan'
    
    obj = new Object()
    obj.name = 'lisi'
}

let person = new Object()
setName(person)
person.name // 'zhangsan'

当 obj 在函数内部被重写时，它变成了一个指向本地对象的指针。而那个本地对象在函数执行结束时就被销毁了。

执行上下文与作用域

执行上下文（作用域）决定变量的生命周期，以及它们可以访问代码的哪些部分。

• 执行上下文分为全局上下文、函数上下文、块级上下文。
• 代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数。
• 函数、块的局部上下文不仅可以访问自己作用域内的变量，而且也可以访问任何包含上下文乃至全局上下文中的变量。
• 全局上下文只能访问全局变量和函数，不能直接访问局部上下文的数据。
• 变量的执行上下文用于确定什么时候释放内存。

垃圾回收

JS 是使用垃圾回收的编程语言，开发者不需要操心内存分配和回收。

• 离开作用域的值会被自动标记为可回收，然后在垃圾回收期间被删除。
• 主流的垃圾回收算法是标记清除，即先给当前不使用的值加上标记，再回来回收它们的内存。
• 引用计数是另外一种垃圾回收策略，需要记录值被引用了多少次。（被弃用）
• 引用计数在代码中存在循环引用时会出现问题。
• 解除变量的引用不仅可以消除循环引用，而且对垃圾回收也有帮助。（推荐）

第 5 章 基本引用类型

Date

Date 类型提供关于日期和时间的信息，包括当前日期、时间及相关计算。

// 获取当前日期和时间
const currentDateTime = new Date();

// 获取年、月、日、时、分、秒
const year = currentDateTime.getFullYear();
const month = currentDateTime.getMonth(); // 0-11
const day = currentDateTime.getDate();
const hours = currentDateTime.getHours();
const minutes = currentDateTime.getMinutes();
const seconds = currentDateTime.getSeconds();

// 获取毫秒数和星期几
const milliseconds = currentDateTime.getTime();
const dayOfWeek = currentDateTime.getDay(); // 0-6，0 表示星期日

// 设置年、月、日、时、分、秒
currentDateTime.setFullYear(2023);
currentDateTime.setMonth(0); // 0-11
currentDateTime.setDate(1);
currentDateTime.setHours(12);
currentDateTime.setMinutes(30);
currentDateTime.setSeconds(0);

// 使用 `toLocaleString()` 格式化日期
const formattedDate = currentDateTime.toLocaleString();

// 获取当前时间戳
const timestamp = Date.now();

RegExp

RegExp（正则表达式）是 JavaScript 中用于处理字符串匹配的对象。正则表达式是一种强大的工具，用于在文本中进行搜索、匹配和替换操作。

// 字面量表示法
const pattern = /abc/;

// 构造函数表示法
const pattern = new RegExp("abc");

正则表达式的模式语法：

1. 普通字符： 匹配文本中的普通字符。
2. 元字符： 具有特殊含义的字符，如 ^、$、.、*、+、? 等。
3. 字符类： 使用 [] 表示一组字符，如 [a-z] 表示匹配任意小写字母。
4. 转义字符： 使用 “ 对特殊字符进行转义。

正则表达式的方法：

1. test() 方法：

• 检测字符串是否匹配正则表达式，返回布尔值。

const pattern = /abc/;
const result = pattern.test("abcdef"); // true

2. exec() 方法：

• 在字符串中查找匹配正则表达式的内容，返回匹配结果的信息。

const pattern = /abc/;
const result = pattern.exec("abcdef"); // 返回匹配结果的信息

3. match() 方法：

• 在字符串中查找匹配正则表达式的内容，返回匹配结果的数组。

const pattern = /abc/;
const result = "abcdef".match(pattern); // 返回匹配结果的数组

4. search() 方法：

• 在字符串中查找匹配正则表达式的位置，返回第一个匹配的索引。

const pattern = /abc/;
const resultIndex = "abcdef".search(pattern); // 返回匹配结果的索引

5. replace() 方法：

• 替换字符串中匹配正则表达式的部分。

const pattern = /abc/;
const result = "abcdef".replace(pattern, "123"); // 返回替换后的字符串

正则表达式的修饰符：

1. i 修饰符：

• 表示匹配时不区分大小写。

const pattern = /abc/i;

2. g 修饰符：

• 表示匹配所有结果，而不仅仅是第一个。

const pattern = /abc/g;

3. m 修饰符：

• 表示多行匹配。

const pattern = /abc/m;

原始值包装类型

JavaScript 中的原始值包装类型是一种特殊的对象，用于提供对原始值的一些额外功能和方法。有 3 种原始值包装类型：Boolean、Number、String。

• 每种包装类型都映射到同名的原始类型。
• 以读模式访问原始值时，后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相应的数据。
• 涉及原始值的语句执行完毕后，包装对象就会被销毁。

Boolean：

const bool = new Boolean(true);

const valueOf = bool.valueOf(); // 获取布尔值的原始值

Number：

const num = new Number(42);

const toFixed = num.toFixed(2); 
// 将数字转换为字符串，并保留两位小数
const toExponential = num.toExponential(); 
// 将数字转换为科学计数法的字符串表示

String：

const str = new String("Hello");

const length = str.length; // 获取字符串长度
const charAt = str.charAt(0); // 获取索引为 0 的字符
const toUpperCase = str.toUpperCase(); // 将字符串转换为大写

• JS 会在原始值上调用方法时自动创建相应的包装对象，然后调用方法。这被称为“自动包装”。
• 原始值是不可变的，而包装对象是可变的。
• 原始值的比较使用 === 运算符，而包装对象的比较可能需要使用对象比较的规则。

虽然可以使用包装对象的方法，但通常更推荐直接在原始值上调用方法，而不是使用包装对象。JavaScript 引擎会在必要时自动进行包装。

单例内置对象

在 JavaScript 中，有一些内置的对象被设计成单例模式，意味着整个程序中只存在一个实例。这些对象提供了一些全局共享的功能，可以在任何地方访问。

当代码开始执行时，全局上下文中会存在两个内置对象：Global 和 Math。

Global 对象：

• 在浏览器环境中，global 对象通常被称为 window 对象。
• 在 Node.js 环境中，global 对象是一个全局作用域，用于定义全局变量或函数。
• global 对象是所有全局变量的容器。
• 如果你在代码中定义一个变量，但没有使用 var、let 或 const 关键字声明它，那么这个变量将被视为 global 对象的属性。

Math 对象：

Math 对象包含辅助完成复杂计算的属性和方法。

const pi = Math.PI;         // 获取圆周率
const sqrt = Math.sqrt(16); // 4 计算平方根
const random = Math.random(); // 生成一个随机数
const absoluteValue = Math.abs(-5); // 5
const roundedUp = Math.ceil(4.3); // 5
const roundedDown = Math.floor(4.7); // 4
const rounded = Math.round(4.5); // 5
const maxNumber = Math.max(3, 7, 1, 9, 4); // 9
const minNumber = Math.min(3, 7, 1, 9, 4); // 1

const powerResult = Math.pow(2, 3); // 8
// 或者
const powerResultAlt = 2 ** 3; // 8

const sinValue = Math.sin(Math.PI / 2); // 1

const angleInRadians = Math.PI; // 180 度转弧度
const cosValue = Math.cos(angleInRadians); // -1

const angleInRadians = Math.PI / 4; // 45 度转弧度
const tanValue = Math.tan(angleInRadians); // 1

未完待续…

参考资料

《JavaScript 高级程序设计》（第 4 版）

原文链接：https://juejin.cn/post/7325260337401217036 作者：Bigger