web前端热门面试题一

JavaScript中的数据类型有哪些？并谈谈它们在存储上的差别。

JavaScript中的数据类型及存储差别

数据类型

JavaScript中的数据类型主要可以分为两大类：基本数据类型（也称为原始数据类型）和引用数据类型。具体分类如下：

基本数据类型

1. Number：数字类型，包括整数和浮点数。JavaScript内部将所有的数值表示为浮点值，因此整数和浮点值在JavaScript中没有区别。同时，JavaScript还支持十六进制、八进制表示法，以及科学计数法。此外，还有特殊的数值，如NaN（不是一个数字）、正无穷大和负无穷大等。
2. String：字符串类型，用于表示文本数据。字符串可以是由单引号或双引号括起来的任意文本，JavaScript中的字符串是不可变的，即一旦创建，就不能改变其内容。
3. Boolean：布尔类型，只有两个值：true和false。布尔值通常用于表示逻辑条件的结果。
4. Null：空类型，表示一个空值或不存在的事物。在JavaScript中，null是一个字面量，它不是一个对象。使用typeof操作符检测null时，会返回“object”，但这是一个历史遗留问题，实际上null不是对象。
5. Undefined：未定义类型，表示一个变量未被赋值时的状态。如果一个变量被声明了但没有被初始化，那么它的值就是undefined。
6. Symbol（ES6新增）：唯一标识符类型，用于创建唯一的值。Symbol类型的值可以作为对象的属性名，从而避免属性名冲突。
7. BigInt（ES2020新增）：大整数类型，用于表示超出Number类型能表示的范围的整数。

引用数据类型

1. Object：对象类型，是JavaScript中最重要的数据类型之一。对象是一种复合数据类型，可以包含多个属性和方法。属性是对象的特征，而方法是对象的行为。对象可以使用字面量表示法或构造函数来创建。
2. Array：数组类型，是对象类型的一个子集。数组用于在单个变量中存储多个值。数组中的每个元素都可以通过索引来访问，索引从0开始。
3. Function：函数类型，是JavaScript中的一等公民。函数可以被赋值给变量、作为参数传递给其他函数、从其他函数返回等。函数用于封装可重复使用的代码块，以实现特定的功能。
4. 特殊对象：除了上述的Object、Array和Function之外，JavaScript还提供了一些特殊的对象类型，如Date（日期对象）、RegExp（正则表达式对象）等。这些对象类型提供了特定的功能和属性，以便在JavaScript中更方便地处理日期、字符串匹配等任务。

存储差别

基本数据类型和引用数据类型在存储上的主要差别在于它们存储在内存中的位置不同：

1. 基本数据类型：存储在栈（Stack）内存中。栈内存是一种先进后出（FILO）的数据结构，用于存储基本数据类型的值。由于基本数据类型的值直接存储在栈内存中，因此它们的访问速度非常快。但是，栈内存的空间有限，只能存储较小的数据量。
2. 引用数据类型：存储在堆（Heap）内存中。堆内存是一种动态分配的内存区域，用于存储引用数据类型的值。与栈内存不同，堆内存的空间相对较大，可以存储大量的数据。但是，由于引用数据类型的值存储在堆内存中，而变量中存储的是指向堆内存中数据的引用（即地址），因此访问引用数据类型的值需要额外的步骤，即先通过变量找到堆内存中的地址，然后再通过地址找到具体的值。因此，相对于基本数据类型来说，引用数据类型的访问速度会稍慢一些。

总的来说，JavaScript中的数据类型丰富多样，既有基本数据类型也有引用数据类型。它们在存储上的差别主要体现在存储位置和访问速度上。了解这些差别有助于我们更好地理解和使用JavaScript中的数据类型。

解释一下JavaScript中的事件冒泡和事件捕获，并举例说明应用场景。

JavaScript中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing）

在JavaScript中，事件流描述了从页面中接收事件的顺序。事件流有两种模型：事件冒泡和事件捕获。这两种模型定义了事件如何在DOM（文档对象模型）树中传播。

事件冒泡（Event Bubbling）

事件冒泡是指事件从最深的节点（即事件的目标节点）开始，然后逐级向上传播到较为不具体的节点（文档）。在冒泡阶段，事件会依次通过目标节点的父节点、祖父节点，一直到达document对象（在浏览器环境中）或window对象（在某些情况下）。

应用场景：

• 当你想在多个层级中监听同一个事件，但在特定层级上做出响应时，可以使用事件冒泡。比如，在一个按钮点击事件中，你可能想在该按钮所在的表单、容器或整个页面上做一些通用的处理（如关闭弹出层、禁用滚动等），而具体的按钮点击逻辑只在按钮层级处理。
• 当你使用第三方库或框架时，这些库或框架可能已经在某些元素上绑定了事件监听器。你可以通过冒泡在更高层级的元素上添加自定义的事件处理逻辑，而无需修改第三方代码。

事件捕获（Event Capturing）

与事件冒泡相反，事件捕获是指事件从不太具体的节点（即文档的根节点）开始，然后逐级向下传播到最具体的节点（即事件的目标节点）。在捕获阶段，事件会依次通过document对象、目标节点的父节点、祖父节点，直到到达目标节点本身。

应用场景：

• 当你需要在事件到达目标节点之前进行某些预处理或拦截时，可以使用事件捕获。比如，你可能想阻止某个表单的提交事件，以便在提交前进行验证。通过在表单的父元素或更高层级的元素上使用事件捕获，你可以在事件到达表单之前阻止它。
• 当你需要在第三方库或框架绑定的事件监听器之前执行自己的逻辑时，事件捕获也很有用。这允许你“抢先”处理事件，可能会阻止或修改事件的默认行为。

举例说明

假设我们有以下HTML结构：

<div id="container">
  <button id="myButton">Click me</button>
</div>

并且我们想要在用户点击按钮时做一些处理。

• 使用事件冒泡：

  我们可以在#container或更高层级的元素上监听点击事件，因为点击事件会冒泡到这些元素上。

  document.getElementById('container').addEventListener('click', function(event) {
    console.log('Button clicked (via bubbling)');
    // 注意：这里不会阻止事件进一步冒泡到更外层元素
  });
  

• 使用事件捕获：

  我们可以在#container或更高层级的元素上使用addEventListener的第三个参数（useCapture）来指定在捕获阶段监听事件。

  document.getElementById('container').addEventListener('click', function(event) {
    console.log('Button clicked (via capturing)');
    // 如果需要，可以在这里阻止事件进一步传播到目标节点
    // event.stopPropagation();
  }, true); // 注意这里的true，它表示在捕获阶段监听事件
  

在实际应用中，你可以根据需要选择使用事件冒泡或事件捕获，或者两者结合使用以实现更复杂的事件处理逻辑。