跳到主要内容

基础巩固

Good to know

在一些 C 端项目中，尤其是电商类项目，对 JS 基础知识的要求很高。

数据类型​

JS 数据类型分为两大类：

  • 基本数据类型：String, Number, Boolean, Null, Undefined, Symbol
  • 引用数据类型：Object, Array, Function, RegExp, Date, Error

基本数据类型​

基本数据类型是按值访问的，这意味着在将一个基本类型的值赋给另一个变量时，会创建一个新的值副本。

引用数据类型​

而引用类型存储的是对象的引用，当把一个引用类型的值赋给另一个变量时，实际上是复制了这个引用，两个变量最终指向内存中的同一个对象。

当比较两个引用类型的值时，比较的是它们的引用（内存地址），而不是它们的内容。例如：

const a = { name: "Rene" };
const b = { name: "Rene" };
console.log(a === b); // false

事件委托​

事件代理（也叫事件委托）是 JavaScript 中一种利用事件冒泡机制的技术。简单来说，就是把本来要添加到多个子元素的事件监听器，添加到它们的父元素上。当子元素的事件被触发时，事件会冒泡到父元素，父元素上的事件监听器就可以捕获这个事件并做出相应的处理。

例如，有一个无序列表 ul，里面有很多 li 元素。如果要给每个 li 元素添加一个点击事件监听器，正常情况下需要遍历所有 li 元素并逐个添加。而使用事件代理，只需要给 ul 添加一个点击事件监听器就可以处理所有 li 元素的点击事件。

// 给 ul 添加点击事件监听器
ul.addEventListener("click", function (event) {
	// 获取点击的 li 元素
	const li = event.target.closest("li");
	// 处理点击事件
	console.log(li);
});

事件冒泡​

比如，当你点击一个 li 元素时，首先会触发 li 元素本身的点击事件，然后这个事件会冒泡到 ul 元素，接着会继续冒泡到更高层的元素。在事件代理中，我们在 ul 元素上设置的事件监听器就可以在事件冒泡到 ul 时捕获这个事件。

正则​

/^[a-zA-Z0-9]@[]+\.[a-zA-Z]{2,}$/

/^1[0-9]\d{9}$/

/^https?:\/\/example\.com\/\/

RegExp 是 JS 中的引用类型，因此在使用时需要注意与基本数据类型的区别。关于引用数据类型，可以阅读 引用数据类型 章节。

了解更多​

你可以继续阅读 手写函数 章节检测自己的 JS 基础知识。