JavaScript知识系列（2）每天10个小知识点

系列文章目录
- JavaScript知识系列（1）每天10个小知识点
知识点
- **11. 如果 new 一个箭头函数的会怎么样**
- **12. 箭头函数的 this 指向哪⾥？**
- **13. 扩展运算符**的概念、作用、原理、特性、优点、缺点、区别、使用场景
- **14. Proxy**的概念、作用、原理、特性、优点、缺点、区别、使用场景
- **15. 常用的正则表达式有哪些？**
- **16. JSON**的概念、作用、原理、特性、优点、缺点、区别、使用场景
- **17. JavaScript 脚本延迟加载的方式有哪些？**
- **18. DOM 和 BOM**的概念、作用、原理、特性、优点、缺点、区别、使用场景
- **19. escape、encodeURI、encodeURIComponent** 的概念、作用、原理、特性、优点、缺点、区别、使用场景
- **20. AJAX** 的概念、作用、原理、特性、优点、缺点、区别、使用场景**，实现一个 AJAX 请求**

? 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

系列文章目录

JavaScript知识系列（1）每天10个小知识点

知识点

11. 如果 new 一个箭头函数的会怎么样

在 JavaScript 中，如果您尝试使用 new 关键字来实例化（创建对象）一个箭头函数，会导致运行时错误。箭头函数与普通函数（使用 function 关键字声明的函数）有很重要的区别，其中之一就是箭头函数没有自己的 this 绑定和 prototype 属性。因此，它们不适合用作构造函数。

试图使用 new 实例化箭头函数会导致 TypeError 错误。例如：

const ArrowFunction = () => {
  this.name = 'John';
};

// 尝试使用 new 关键字实例化箭头函数
const instance = new ArrowFunction(); // TypeError: ArrowFunction is not a constructor

在上述示例中，new ArrowFunction() 会引发 TypeError 错误，因为箭头函数没有构造函数的功能，不能被用作类似构造函数的方式。

要创建可以实例化的对象，您应该使用普通的函数（使用 function 关键字声明的函数），这些函数可以作为构造函数使用，并使用 new 关键字来创建新的对象实例。例如：

function RegularFunction() {
  this.name = 'John';
}

const instance = new RegularFunction();
console.log(instance.name); // "John"

总之，箭头函数不适合用作构造函数，因此不应该使用 new 关键字来实例化它们。只有使用 function 关键字声明的函数才能被安全地用于实例化对象。

12. 箭头函数的 this 指向哪⾥？

箭头函数的 this 指向的是其定义时所在的词法作用域（也称为外部作用域），而不是调用时的对象。这是箭头函数与普通函数（使用 function 关键字声明的函数）之间的主要区别之一。

具体来说，箭头函数的 this 不会根据函数的调用方式而变化，而是在定义箭头函数时所在的上下文中确定。这通常是非常有用的，因为它可以避免在回调函数等情况下出现 this 绑定问题。

例如：

const obj = {
  name: 'John',
  greet: function () {
    console.log('Hello, ' + this.name);
  },
  arrowGreet: () => {
    console.log('Hello, ' + this.name); // this 指向的是全局对象，而不是 obj
  }
};

obj.greet();        // "Hello, John"，this 指向 obj
obj.arrowGreet();   // "Hello, undefined"，this 指向全局对象

在上面的示例中，greet 方法使用普通函数声明，它的 this 指向了 obj，因此可以正确访问 obj 的属性。而 arrowGreet 方法使用箭头函数声明，它的 this 指向的是全局对象（在浏览器环境中通常是 window），因此无法正确访问 obj 的属性。

总结：箭头函数的 this 是静态的，由定义时的词法作用域决定，而普通函数的 this 是动态的，根据函数的调用方式和上下文不同而变化。因此，当需要在函数内部使用当前对象的属性时，通常使用普通函数，而不是箭头函数。

13. 扩展运算符的概念、作用、原理、特性、优点、缺点、区别、使用场景

扩展运算符（Spread Operator）是JavaScript中的一种语法，用于将一个可迭代（可遍历）对象（如数组、字符串、对象字面量等）拆分成独立的元素或属性，并将它们应用到另一个目标对象中。扩展运算符使用三个连续的点号（...）表示。

以下是有关扩展运算符的详细信息：

概念：

扩展运算符是一种展开可迭代对象的语法，允许将它们的元素或属性解构到其他数据结构中。

作用：

扩展运算符用于快速、方便地将多个元素或属性合并到一个新的数组、对象或其他可迭代对象中。

原理：

扩展运算符遍历源对象的元素或属性，并将它们逐个复制到目标对象中。

特性：

扩展运算符只复制可枚举属性。
扩展运算符不会复制原型链上的属性。
扩展运算符创建的是浅拷贝，即对象内部嵌套对象的引用仍然相同。
扩展运算符可以用于数组、对象、字符串、函数参数等多种情况。

优点：

提供了一种简洁的语法，用于合并和展开数据结构，使代码更清晰和可读。
可以用于函数参数中，简化函数的参数传递。

缺点：

创建的是浅拷贝，不适用于需要深拷贝的情况。
在处理大型对象时可能会产生性能问题，因为它会复制整个对象。

区别：

与剩余参数（Rest Parameters）不同，扩展运算符用于展开对象，而剩余参数用于接收多个参数并将它们收集到一个数组中。
与展开操作符（Spread Operator）不同，扩展运算符主要用于拆分和合并可迭代对象的元素或属性，而展开操作符用于在数组字面量或函数调用中展开元素。

使用场景：

合并数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];

复制数组或对象：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

合并对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };

传递参数给函数：

function exampleFunction(a, b, c) {
  // ...
}

const args = [1, 2, 3];
exampleFunction(...args);

扩展运算符是 JavaScript 中一个非常实用的功能，可以简化代码并提高可读性。但需要注意它的浅拷贝特性以及性能问题，确保在适当的情况下使用。

14. Proxy的概念、作用、原理、特性、优点、缺点、区别、使用场景

Proxy 是 ECMAScript 6（ES6）引入的一个新特性，它是一种用于自定义对象操作行为的机制。Proxy 可以拦截并修改对象的操作，比如属性访问、赋值、函数调用等。以下是有关 Proxy 的详细信息：

概念：

Proxy 是一种代理机制，允许您创建一个代理对象，该代理对象可以拦截并自定义目标对象上的操作。

作用：

Proxy 主要用于自定义对象的行为，使得可以拦截和修改对象上的操作，以实现更高级的操作控制和元编程。

原理：

Proxy 对象包装了目标对象，并通过捕获器（handler）来定义代理对象上的操作行为。捕获器是一个包含各种操作处理函数的对象，当尝试对代理对象进行操作时，捕获器中相应操作的处理函数将被调用。

特性：

可以拦截目标对象的多种操作，如属性读写、属性检查、函数调用、迭代等。
支持自定义操作的行为，可以实现属性验证、属性代理、数据响应等高级特性。

优点：

可以在对象操作的不同阶段介入，实现更精确的控制和逻辑。
支持创建可撤销的代理，允许取消代理的拦截效果。
支持元编程，使得可以在运行时修改对象行为，实现更高级的抽象和功能。

缺点：

使用 Proxy 可能会导致性能损失，因为它引入了额外的拦截逻辑。
Proxy 不是所有 JavaScript 运行环境都支持，需要考虑兼容性。

区别：

Proxy 与 Object.defineProperty：Proxy 提供了更广泛的拦截和自定义能力，而 Object.defineProperty 主要用于拦截对象属性的读写操作。
Proxy 与 Object.observe：Object.observe 用于监视对象的变化，而 Proxy 用于拦截和修改对象的操作行为。

使用场景：

数据验证和响应：可以使用 Proxy 来验证对象属性的值，或者实现数据响应系统（比如 Vue.js 中的响应式数据）。
属性代理：可以在访问对象属性时添加额外的逻辑，例如记录属性访问日志。
拦截函数调用：可以拦截函数调用，并添加额外的逻辑或参数处理。
数据缓存和懒加载：可以拦截属性访问，并根据需要加载或计算属性值。
元编程和代理模式：可以创建自定义的代理对象，实现元编程、代理模式或其他高级设计模式。

总之，Proxy 是一项强大的功能，用于自定义对象的行为，可以实现高级的编程控制和抽象。但需要注意性能问题，并确保在需要高级自定义行为时使用它。

15. 常用的正则表达式有哪些？

正则表达式是一种强大的文本匹配工具，用于在文本中查找、匹配和操作字符串模式。以下是一些常用的正则表达式示例，它们可以用于不同的文本匹配需求：

匹配邮箱地址：

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

匹配 URL：

/^(https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*$/

匹配日期（yyyy-mm-dd 格式）：
```
/^\\d{4}-\\d{2}-\\d{2}$/
```
匹配手机号码：
```
/^1[3456789]\\d{9}$/
```
匹配 IP 地址：
```
/^(\\d{1,3}\\.){3}\\d{1,3}$/
```
匹配 HTML 标签（提取 HTML 标签内容）：
```
/<[^>]+>/
```
匹配数字（整数或浮点数）：
```
/^-?\\d+(\\.\\d+)?$/
```
匹配用户名（包含字母、数字、下划线，长度为 4 到 16 个字符）：
```
/^[a-zA-Z0-9_]{4,16}$/
```
匹配密码（至少包含一个大写字母、一个小写字母、一个数字，长度为 8 到 20 个字符）：
```
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,20}$/
```
匹配中文字符：
```
/[\\u4e00-\\u9fa5]/
```

这些是一些常见的正则表达式示例，用于处理常见的文本匹配任务。请注意，正则表达式可以根据具体需求进行修改和定制，以满足不同的匹配要求。要在 JavaScript 中使用正则表达式，可以使用 RegExp 构造函数或直接使用正则字面量。

16. JSON的概念、作用、原理、特性、优点、缺点、区别、使用场景

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在不同的系统之间传输和存储数据。以下是有关 JSON 的详细信息：

概念：

JSON 是一种文本格式，用于表示结构化数据。
它是基于键值对的数据表示，支持嵌套和多种数据类型。

作用：

JSON 主要用于数据交换和存储，使不同系统之间能够轻松地共享数据。
JSON 可以被解析为对象，用于在编程中访问和操作数据。

原理：

JSON 使用文本表示数据，采用键值对的形式组织数据。
基本数据类型包括字符串、数字、布尔、null，以及数组和对象作为复合类型。
JSON 的解析和序列化可以通过编程语言中的 JSON 解析器和序列化器来完成。

特性：

轻量级：JSON 使用文本格式，相对较小，便于传输和存储。
人类可读：JSON 数据格式对人类来说易于阅读和编写。
平台无关：JSON 是一种独立于编程语言和平台的数据表示格式。

优点：

简单性：JSON 的语法简单，易于理解和使用。
易于解析：大多数编程语言都提供了 JSON 解析器，使得解析 JSON 数据变得简单。
跨平台和跨语言：JSON 可以在不同的编程语言和平台之间轻松传递数据。

缺点：

不支持注释：JSON 不支持注释，不适合用作配置文件。
不适合二进制数据：JSON 是文本格式，不适合存储或传输二进制数据。
不支持循环引用：JSON 不支持对象之间的循环引用。

区别：

JSON 与 XML：JSON 更轻量、更容易阅读和编写，而 XML 更适合描述文档结构。
JSON 与 YAML：YAML 也是一种轻量级数据交换格式，但它更关注可读性，而 JSON 更常用于机器间通信。

使用场景：

数据交换：JSON 通常用于 Web 服务中的数据交换，包括 RESTful API。
配置文件：JSON 可以用作配置文件，例如前端应用的配置文件。
数据存储：某些 NoSQL 数据库使用 JSON 作为数据存储格式。
日志记录：JSON 可以用于结构化日志记录。
在前端和后端之间传递数据：前后端通信中常使用 JSON 来传递数据，例如 AJAX 请求和响应。

总之，JSON 是一种简单、轻量级且通用的数据表示格式，广泛用于数据交换、配置文件和数据存储等多个领域。它的主要优点是简单性和跨平台兼容性。

17. JavaScript 脚本延迟加载的方式有哪些？

JavaScript 脚本延迟加载是一种优化网页性能的技术，它允许将 JavaScript 文件的下载和执行推迟到页面的其他内容已经加载完毕后再进行。这有助于提高网页的加载速度和用户体验。以下是几种常见的 JavaScript 脚本延迟加载方式：

async 属性：
使用 <script> 标签并设置 async 属性可以使脚本在下载时不会阻止页面的解析和渲染，而是在下载完成后立即执行。多个具有 async 属性的脚本可能会异步执行，执行顺序不受保证。
```
<script src="script1.js" async></script>
<script src="script2.js" async></script>
```
defer 属性：
使用 <script> 标签并设置 defer 属性可以使脚本在页面解析过程中下载，但会在文档解析完成后按照它们在文档中的顺序依次执行。这有助于确保脚本不会影响页面的渲染。
```
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
```
动态创建 <script> 元素：
使用 JavaScript 动态创建 <script> 元素，并设置其 src 属性，然后将它添加到文档中。这样可以在需要时异步加载脚本。
```
var script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);
```
使用模块标签（<script type="module">）（需要 ES6 模块支持）：
模块脚本自动推迟加载，并且支持 async 和 defer 属性。
```
<script type="module" src="module.js"></script>
```
懒加载：
在某些情况下，可以根据用户交互或滚动位置等事件来动态加载 JavaScript 脚本，以减轻初始页面加载时的负担。这通常需要使用 JavaScript 编程来实现。

这些方式都可以用来实现 JavaScript 脚本的延迟加载，选择哪种方式取决于您的需求和网站的性能优化策略。通常情况下，推荐使用 async 和 defer 属性，因为它们是最简单和可控的方式。如果需要更精确的控制，可以考虑使用动态创建 <script> 元素或模块标签，或者实现懒加载逻辑。

18. DOM 和 BOM的概念、作用、原理、特性、优点、缺点、区别、使用场景

DOM（Document Object Model）和 BOM（Browser Object Model）都是与 Web 浏览器相关的概念，用于操作和管理网页内容和浏览器窗口。以下是有关 DOM 和 BOM 的详细信息：

DOM（文档对象模型）：

概念：

DOM 是一种以层次结构方式表示文档的对象模型，它将 HTML 或 XML 文档解析为一个由对象组成的树状结构，每个对象代表文档的一部分。

作用：

DOM 使 JavaScript 能够访问、操作和修改网页的内容、结构和样式。
它允许开发者与网页元素进行交互，实现动态内容更新和用户交互。

原理：

浏览器解析 HTML 或 XML 文档并创建 DOM 树，其中每个元素、属性和文本内容都表示为 DOM 中的一个对象。
JavaScript 可以访问 DOM 对象，通过修改 DOM 对象的属性和方法来改变网页内容和结构。

特性：

层次结构：DOM 表示文档内容的层次结构，包括元素、属性、文本等。
可编程性：JavaScript 可以使用 DOM 提供的 API 来操作文档对象。
动态性：DOM 可以在页面加载后动态更新，响应用户交互和服务器数据。

优点：

可以实现动态交互，改变页面内容和结构。
支持跨平台和跨浏览器开发。
提供了丰富的 API，用于处理文档内容和事件。

缺点：

操作大型 DOM 树可能会导致性能问题。
部分浏览器之间存在差异，需要处理兼容性问题。

BOM（浏览器对象模型）：

概念：

BOM 是一组用于控制浏览器窗口和提供与浏览器交互的对象的集合。

作用：

BOM 允许 JavaScript 控制浏览器窗口、处理浏览器事件和与用户交互。
它提供了一些对象，如 window、navigator、location、screen 等，用于操作浏览器的各个部分。

原理：

BOM 对象是由浏览器提供的 JavaScript 对象，可以通过 JavaScript 访问和控制。
BOM 对象允许 JavaScript 与浏览器窗口进行交互，并提供了一些功能，如导航、定时器、对话框等。

特性：

提供了许多与浏览器窗口和用户交互相关的对象和方法。
允许 JavaScript 操作浏览器的位置、尺寸、历史记录等。

优点：

提供了丰富的功能，用于处理浏览器窗口和用户交互。
允许浏览器控制和导航。

缺点：

与不同浏览器之间存在兼容性问题，需要谨慎处理。
不属于 ECMAScript 规范的一部分，因此 BOM 对象在不同浏览器中可能具有不同的行为。

区别：

DOM 主要用于操作和管理网页内容和结构，提供了访问和修改文档内容的接口。
BOM 主要用于控制浏览器窗口和处理与浏览器交互相关的任务，提供了与浏览器窗口和用户交互有关的对象和方法。

使用场景：

DOM 使用场景：用于网页内容的动态更新、表单验证、事件处理等。常见的应用包括网页

交互、单页应用程序、动态生成内容等。

BOM 使用场景：用于管理浏览器窗口、导航控制、定时器、对话框、检测用户代理等。常见的应用包括网页跳转、定时任务、浏览器历史记录控制等。

综上所述，DOM 和 BOM 是 Web 开发中重要的两个概念，用于操作文档内容和与浏览器窗口交互，它们分别提供了不同的对象和方法，用于不同的任务和场景。

19. escape、encodeURI、encodeURIComponent 的概念、作用、原理、特性、优点、缺点、区别、使用场景

这三个 JavaScript 内置函数 escape、encodeURI 和 encodeURIComponent 用于处理字符串中的特殊字符，以确保它们在不同上下文中的安全传输或存储。以下是这三个函数的详细信息：

escape 函数：

概念：

escape 函数用于对字符串进行编码，将字符串中的特殊字符转换为其对应的十六进制 ASCII 值，并在每个字符前面添加 % 符号。

作用：

主要用于编码非 ASCII 字符和一些特殊字符，以便它们可以安全地包含在 URL 中。

原理：

escape 函数会检查字符串中的每个字符，将非 ASCII 字符和某些特殊字符转换为 % 后跟其 ASCII 值的十六进制表示。

特性：

转义字符的数量较少，仅对非 ASCII 字符和特殊字符进行转义。

优点：

编码简单，易于使用。

缺点：

不对所有特殊字符进行编码，容易引发安全漏洞。
已被废弃，不推荐使用，因为不安全。

encodeURI 函数：

概念：

encodeURI 函数用于对整个 URL 进行编码，包括协议、主机、路径和查询字符串等部分。

作用：

主要用于编码整个 URL，以便它可以被安全地传递到服务器或存储在数据库中。

原理：

encodeURI 函数会编码所有特殊字符，但会保留某些字符，如 :、/、? 和 &。

特性：

用于编码整个 URL，包括协议和主机等。

优点：

可以安全地编码整个 URL，适合用于生成和处理完整的 URL。

缺点：

不会编码某些特殊字符，如 : 和 /。

encodeURIComponent 函数：

概念：

encodeURIComponent 函数用于对单个 URI 组件（如查询字符串参数或路径段）进行编码。

作用：

主要用于编码单个 URI 组件，以确保它们可以被安全地嵌入到 URL 中。

原理：

encodeURIComponent 函数会编码所有特殊字符，包括 :、/、? 和 &。

特性：

用于编码单个 URI 组件，保留了更多特殊字符。

优点：

可以安全地编码单个 URI 组件，适合用于处理 URL 的部分。

缺点：

需要逐个编码每个 URI 组件。

区别：

escape：已被废弃，不建议使用，不安全，主要用于编码非 ASCII 字符和一些特殊字符。
encodeURI：用于编码整个 URL，保留了某些特殊字符。
encodeURIComponent：用于编码单个 URI 组件，包括更多特殊字符。

使用场景：

使用 encodeURI 或 encodeURIComponent 来处理 URL 中的查询字符串参数或路径段，以确保它们被正确编码，以及与服务器或数据库的安全交互。
不建议使用 escape，因为它已被废弃且不安全。

20. AJAX 的概念、作用、原理、特性、优点、缺点、区别、使用场景，实现一个 AJAX 请求

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的前端技术。它通过在不重新加载整个网页的情况下，异步地从服务器加载或发送数据，实现了更流畅的用户体验。以下是有关 AJAX 的详细信息：

概念：

AJAX 是一种前端技术，用于在不刷新整个网页的情况下，通过异步请求与服务器进行数据交换。

作用：

主要用于实现网页的动态加载、数据交互和异步更新，提高用户体验。

原理：

AJAX 使用 JavaScript 发起 HTTP 请求，与服务器进行通信。
服务器处理请求并返回数据，通常以 JSON 或 XML 格式。
JavaScript 处理服务器响应，并在不刷新页面的情况下更新网页内容。

特性：

异步通信：不会阻塞页面的其他操作，允许并行请求和响应。
更新部分页面：只更新需要改变的部分，而不是整个页面。
支持多种数据格式：可以使用 JSON、XML 等多种格式传输数据。

优点：

提高用户体验：允许实时更新网页内容，减少页面加载时间。
减少带宽使用：只传输必要的数据，减少服务器和客户端之间的数据传输量。
异步请求：允许同时处理多个请求，不会阻塞页面。

缺点：

安全性问题：容易受到跨站请求伪造（CSRF）和跨站脚本攻击（XSS）等安全问题的影响。
兼容性问题：不同浏览器可能对 AJAX 的实现有差异，需要处理兼容性问题。

区别：

AJAX 与传统请求：AJAX 可以在不刷新整个页面的情况下请求和接收数据，传统请求会导致页面刷新。
AJAX 与 WebSocket：AJAX 主要用于请求-响应模型，WebSocket 支持双向通信，用于实时应用。

使用场景：

动态加载内容：例如，在用户滚动时加载更多内容。
表单验证：通过 AJAX 验证用户输入的数据是否有效，而无需刷新整个表单。
实时通信：例如，实时聊天应用程序。
自动完成：实现搜索框的自动完成建议。
异步文件上传：允许用户上传文件并在后台异步处理。
数据展示：从服务器加载数据并更新页面内容，如新闻、社交媒体更新等。

下面是一个简单的示例，演示如何使用原生 JavaScript 发起 AJAX 请求：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
</head>
<body>
    <button onclick="loadData()">Load Data</button>
    <div id="result"></div>

    <script>
        function loadData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };
            xhr.open('GET', 'data.json', true);
            xhr.send();
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，loadData 函数使用 XMLHttpRequest 对象发起一个 GET 请求来加载名为 data.json 的 JSON 数据，并在成功响应后更新页面内容。文章来源地址https://uudwc.com/A/206EZ

JavaScript知识系列（2）每天10个小知识点

目录

系列文章目录

JavaScript知识系列（1）每天10个小知识点

知识点

11. 如果 new 一个箭头函数的会怎么样

12. 箭头函数的 this 指向哪⾥？

13. 扩展运算符的概念、作用、原理、特性、优点、缺点、区别、使用场景

14. Proxy的概念、作用、原理、特性、优点、缺点、区别、使用场景

15. 常用的正则表达式有哪些？

16. JSON的概念、作用、原理、特性、优点、缺点、区别、使用场景

17. JavaScript 脚本延迟加载的方式有哪些？

18. DOM 和 BOM的概念、作用、原理、特性、优点、缺点、区别、使用场景

19. escape、encodeURI、encodeURIComponent 的概念、作用、原理、特性、优点、缺点、区别、使用场景

20. AJAX 的概念、作用、原理、特性、优点、缺点、区别、使用场景**，实现一个 AJAX 请求**

20. AJAX 的概念、作用、原理、特性、优点、缺点、区别、使用场景，实现一个 AJAX 请求