wordpress通过微信投稿,酒泉网站建设优化,灯塔网站seo,建站模板招募设计师目录 系列文章目录JavaScript知识系列#xff08;1#xff09;每天10个小知识点 知识点**11. 如果 new 一个箭头函数的会怎么样****12. 箭头函数的 this 指向哪⾥#xff1f;****13. 扩展运算符**的概念、作用、原理、特性、优点、缺点、区别、使用场景**14. Proxy**的概念、… 目录 系列文章目录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, Johnthis 指向 obj
obj.arrowGreet(); // Hello, undefinedthis 指向全局对象
在上面的示例中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 6ES6引入的一个新特性它是一种用于自定义对象操作行为的机制。Proxy 可以拦截并修改对象的操作比如属性访问、赋值、函数调用等。以下是有关 Proxy 的详细信息
概念
Proxy 是一种代理机制允许您创建一个代理对象该代理对象可以拦截并自定义目标对象上的操作。
作用
Proxy 主要用于自定义对象的行为使得可以拦截和修改对象上的操作以实现更高级的操作控制和元编程。
原理
Proxy 对象包装了目标对象并通过捕获器handler来定义代理对象上的操作行为。捕获器是一个包含各种操作处理函数的对象当尝试对代理对象进行操作时捕获器中相应操作的处理函数将被调用。
特性
可以拦截目标对象的多种操作如属性读写、属性检查、函数调用、迭代等。支持自定义操作的行为可以实现属性验证、属性代理、数据响应等高级特性。
优点
可以在对象操作的不同阶段介入实现更精确的控制和逻辑。支持创建可撤销的代理允许取消代理的拦截效果。支持元编程使得可以在运行时修改对象行为实现更高级的抽象和功能。
缺点
使用 Proxy 可能会导致性能损失因为它引入了额外的拦截逻辑。Proxy 不是所有 JavaScript 运行环境都支持需要考虑兼容性。
区别
Proxy 与 Object.definePropertyProxy 提供了更广泛的拦截和自定义能力而 Object.defineProperty 主要用于拦截对象属性的读写操作。Proxy 与 Object.observeObject.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的概念、作用、原理、特性、优点、缺点、区别、使用场景
JSONJavaScript Object Notation是一种轻量级的数据交换格式用于在不同的系统之间传输和存储数据。以下是有关 JSON 的详细信息
概念
JSON 是一种文本格式用于表示结构化数据。它是基于键值对的数据表示支持嵌套和多种数据类型。
作用
JSON 主要用于数据交换和存储使不同系统之间能够轻松地共享数据。JSON 可以被解析为对象用于在编程中访问和操作数据。
原理
JSON 使用文本表示数据采用键值对的形式组织数据。基本数据类型包括字符串、数字、布尔、null以及数组和对象作为复合类型。JSON 的解析和序列化可以通过编程语言中的 JSON 解析器和序列化器来完成。
特性
轻量级JSON 使用文本格式相对较小便于传输和存储。人类可读JSON 数据格式对人类来说易于阅读和编写。平台无关JSON 是一种独立于编程语言和平台的数据表示格式。
优点
简单性JSON 的语法简单易于理解和使用。易于解析大多数编程语言都提供了 JSON 解析器使得解析 JSON 数据变得简单。跨平台和跨语言JSON 可以在不同的编程语言和平台之间轻松传递数据。
缺点
不支持注释JSON 不支持注释不适合用作配置文件。不适合二进制数据JSON 是文本格式不适合存储或传输二进制数据。不支持循环引用JSON 不支持对象之间的循环引用。
区别
JSON 与 XMLJSON 更轻量、更容易阅读和编写而 XML 更适合描述文档结构。JSON 与 YAMLYAML 也是一种轻量级数据交换格式但它更关注可读性而 JSON 更常用于机器间通信。
使用场景
数据交换JSON 通常用于 Web 服务中的数据交换包括 RESTful API。配置文件JSON 可以用作配置文件例如前端应用的配置文件。数据存储某些 NoSQL 数据库使用 JSON 作为数据存储格式。日志记录JSON 可以用于结构化日志记录。在前端和后端之间传递数据前后端通信中常使用 JSON 来传递数据例如 AJAX 请求和响应。
总之JSON 是一种简单、轻量级且通用的数据表示格式广泛用于数据交换、配置文件和数据存储等多个领域。它的主要优点是简单性和跨平台兼容性。
17. JavaScript 脚本延迟加载的方式有哪些
JavaScript 脚本延迟加载是一种优化网页性能的技术它允许将 JavaScript 文件的下载和执行推迟到页面的其他内容已经加载完毕后再进行。这有助于提高网页的加载速度和用户体验。以下是几种常见的 JavaScript 脚本延迟加载方式 async 属性 使用 script 标签并设置 async 属性可以使脚本在下载时不会阻止页面的解析和渲染而是在下载完成后立即执行。多个具有 async 属性的脚本可能会异步执行执行顺序不受保证。 script srcscript1.js async/script
script srcscript2.js async/script defer 属性 使用 script 标签并设置 defer 属性可以使脚本在页面解析过程中下载但会在文档解析完成后按照它们在文档中的顺序依次执行。这有助于确保脚本不会影响页面的渲染。 script srcscript1.js defer/script
script srcscript2.js defer/script 动态创建 script 元素 使用 JavaScript 动态创建 script 元素并设置其 src 属性然后将它添加到文档中。这样可以在需要时异步加载脚本。 var script document.createElement(script);
script.src script.js;
document.head.appendChild(script); 使用模块标签script typemodule需要 ES6 模块支持 模块脚本自动推迟加载并且支持 async 和 defer 属性。 script typemodule srcmodule.js/script 懒加载 在某些情况下可以根据用户交互或滚动位置等事件来动态加载 JavaScript 脚本以减轻初始页面加载时的负担。这通常需要使用 JavaScript 编程来实现。
这些方式都可以用来实现 JavaScript 脚本的延迟加载选择哪种方式取决于您的需求和网站的性能优化策略。通常情况下推荐使用 async 和 defer 属性因为它们是最简单和可控的方式。如果需要更精确的控制可以考虑使用动态创建 script 元素或模块标签或者实现懒加载逻辑。
18. DOM 和 BOM的概念、作用、原理、特性、优点、缺点、区别、使用场景
DOMDocument Object Model和 BOMBrowser 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 请求**
AJAXAsynchronous JavaScript and XML是一种用于创建交互式网页应用的前端技术。它通过在不重新加载整个网页的情况下异步地从服务器加载或发送数据实现了更流畅的用户体验。以下是有关 AJAX 的详细信息
概念
AJAX 是一种前端技术用于在不刷新整个网页的情况下通过异步请求与服务器进行数据交换。
作用
主要用于实现网页的动态加载、数据交互和异步更新提高用户体验。
原理
AJAX 使用 JavaScript 发起 HTTP 请求与服务器进行通信。服务器处理请求并返回数据通常以 JSON 或 XML 格式。JavaScript 处理服务器响应并在不刷新页面的情况下更新网页内容。
特性
异步通信不会阻塞页面的其他操作允许并行请求和响应。更新部分页面只更新需要改变的部分而不是整个页面。支持多种数据格式可以使用 JSON、XML 等多种格式传输数据。
优点
提高用户体验允许实时更新网页内容减少页面加载时间。减少带宽使用只传输必要的数据减少服务器和客户端之间的数据传输量。异步请求允许同时处理多个请求不会阻塞页面。
缺点
安全性问题容易受到跨站请求伪造CSRF和跨站脚本攻击XSS等安全问题的影响。兼容性问题不同浏览器可能对 AJAX 的实现有差异需要处理兼容性问题。
区别
AJAX 与传统请求AJAX 可以在不刷新整个页面的情况下请求和接收数据传统请求会导致页面刷新。AJAX 与 WebSocketAJAX 主要用于请求-响应模型WebSocket 支持双向通信用于实时应用。
使用场景
动态加载内容例如在用户滚动时加载更多内容。表单验证通过 AJAX 验证用户输入的数据是否有效而无需刷新整个表单。实时通信例如实时聊天应用程序。自动完成实现搜索框的自动完成建议。异步文件上传允许用户上传文件并在后台异步处理。数据展示从服务器加载数据并更新页面内容如新闻、社交媒体更新等。
下面是一个简单的示例演示如何使用原生 JavaScript 发起 AJAX 请求
!DOCTYPE html
html
headtitleAJAX Example/title
/head
bodybutton onclickloadData()Load Data/buttondiv idresult/divscriptfunction 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 数据并在成功响应后更新页面内容。
