一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

前端必刷系列之红宝书——第 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
  1. exec() 方法:
  • 在字符串中查找匹配正则表达式的内容,返回匹配结果的信息。
const pattern = /abc/;
const result = pattern.exec("abcdef"); // 返回匹配结果的信息
  1. match() 方法:
  • 在字符串中查找匹配正则表达式的内容,返回匹配结果的数组。
const pattern = /abc/;
const result = "abcdef".match(pattern); // 返回匹配结果的数组
  1. search() 方法:
  • 在字符串中查找匹配正则表达式的位置,返回第一个匹配的索引。
const pattern = /abc/;
const resultIndex = "abcdef".search(pattern); // 返回匹配结果的索引
  1. replace() 方法:
  • 替换字符串中匹配正则表达式的部分。
const pattern = /abc/;
const result = "abcdef".replace(pattern, "123"); // 返回替换后的字符串

正则表达式的修饰符:

  1. i 修饰符:
  • 表示匹配时不区分大小写。
const pattern = /abc/i;
  1. g 修饰符:
  • 表示匹配所有结果,而不仅仅是第一个。
const pattern = /abc/g;
  1. 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 对象是所有全局变量的容器。
  • 如果你在代码中定义一个变量,但没有使用 varlet 或 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

(0)
上一篇 2024年1月19日 上午10:42
下一篇 2024年1月19日 上午10:52

相关推荐

发表评论

登录后才能评论