2301_76428778的博客

通信方向子组件 → 父组件。绑定方式直接绑定通过 ref 绑定方式适用场景特点Props父子组件通信简单直接，需父组件显式传递数据。自定义事件子父组件通信通过事件触发回调，灵活可控。全局事件总线任意组件通信依赖 Vue 实例，需手动管理事件绑定。pubsub.js任意组件通信第三方库，解耦性更强。Vuex复杂状态管理集中式状态管理，适合大型应用。

JavaScript `reduce` 方法常见使用场景详解。

JavaScript `reduce` 方法常见使用场景详解。

jQuery 学习总结

JavaScript 面试题总结

js高级ajax封装和跨域思维导图

js 高级懒加载预加载思维导图

js 高级深浅拷贝､防抖节流思维导图

js 高级线程机制与事件机制思维导图

JavaScript高级：函数与对象高级特性思维导图

js 高级——基础深入思维导图

在 JavaScript 的演进历程中，ES6（ECMAScript 2015）引入了一系列具有深远影响的新特性，显著提升了开发者的编程效率与体验。查找第一个符合条件的数组元素，参数是一个回调函数，当回调函数返回 true 时，返回该元素，否则返回 undefined。扩展运算符（...）将一个数组转为用逗号分隔的参数序列，可用于数组的合并、克隆和伪数组转换等。关键字、变量的解构赋值、模板字符串、字符串与数值的扩展，以及数组的扩展等方面。使用指定的值替换原数组内容，可以传多个参数，会改变原来的数组。

解构赋值作为一种强大的语法特性，能够使代码更加简洁、易读，在处理数组和对象时具有很高的实用价值。属性的值，并分别赋值给同名变量。这一过程类似于在对象这个 “仓库” 中，依据属性名这个 “标签” 找到对应的值，然后放入同名的变量 “容器” 中。当仅关注数组中特定位置的元素时，这一特性尤为实用，例如仅需获取数组中的最后一个元素。对于嵌套多层的对象，解构赋值可以显著简化属性的获取过程，减少代码的嵌套层级，提升代码的可读性。解构赋值提供了一种简洁的方式来交换两个变量的值，无需借助临时变量，使代码更加简洁高效。

当我们访问一个对象中的成员的时候，会优先访问自己的，如果自己没有就访问原型的，如果原型也没有就会访问原型的原型，直到原型链的终点 null. 如果还没有，此时属性就会获取 undefined，方法就会报错 xxx is not a function。在js中，会把任务分为同步和异步，这两者的执行环境不同，同步任务会进入主线程，异步任务会进入事件队列(EventQueue)，当主线程代码执行完毕后，会去事件队列中读取对应的异步任务，并推到主线程中执行，不断重复过程，称为事件循环机制(EventLoop)。

闭包的优点是可以延长变量的作用范围，使变量在函数执行结束后不会立即销毁，直到所有依赖它的函数都调用完毕才会被销毁，例如可以用于实现数据的私有性，通过闭包将数据封装在函数内部，外部无法直接访问。理论上可能导致浏览器频繁调用处理函数，增加性能开销，即便实际上可能不需要处理该事件，例如在一个包含大量子元素的列表中，每次子元素触发事件都可能导致事件代理函数被调用。（包括普通对象、数组、函数等 ），赋值时传递的是内存地址引用，值存储在堆内存中，栈中仅存储指向堆内存的引用地址，当对象比较大时，能减少栈内存占用。

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。2)页面加载完成后，判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

懒加载和预加载作为前端性能优化的重要技术，分别从延迟加载和提前加载的角度，有效提升了页面加载速度和用户体验。而懒加载技术可以确保只有用户视线即将触及的图片才会被加载，极大地减少了初始加载的资源开销，提升页面加载效率，为用户提供更流畅的浏览体验。通过预加载技术，在页面加载时提前加载关键资源，可有效避免页面长时间空白，为用户提供更流畅的浏览体验。在页面加载时，先调用加载函数加载数组中的第一张图片，之后每次切换图片时，若还有后续图片，也调用加载函数进行预加载。以点击图片切换功能为例，每次切换图片后，创建新的。

事件委托是一种常见的 DOM 事件处理技术，它将事件监听器添加到父元素上，而不是每个子元素。方法为 JavaScript 开发者在 DOM 操作中提供了极大的便利，无论是处理事件委托还是动态内容，都能轻松应对。在处理动态生成的内容时，传统的事件绑定方式可能会失效，因为新添加的元素没有绑定事件。如果遍历完所有元素都没有找到匹配的，该方法将返回。方法是一个非常实用的工具，它能帮助开发者高效地查找元素。方法就像是一个 “查找器”，能快速定位到符合条件的最近祖先元素。若指定的选择器在元素的祖先中不存在，

举例：比如我们在玩LOL游戏时，当需要回城时，我们触发回城按钮，进入到回城状态进会有一个等待的时间，如果在这个等待时间内有重复去执行回城按钮，这时回城状态并不会做出其他响应，而是等时间到了后才会完成回城。这也说明了，在我们回城的过程中，一直触发回城按钮都是不会响应的，他会按照自己的一个回城时间才做出响应。比如我们平时在使用搜索框时，我们一输入内容就会发送对应的网络请求，如果我们后面一直有在输入内容，那么就会一直发送网络请求。高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

以游戏中的技能释放为例，许多技能都设有冷却时间，在冷却时间内，玩家多次点击技能按钮是不会产生额外效果的，只有当冷却时间结束后，才能再次释放技能，这便是节流技术在实际应用中的典型案例。比如在玩英雄联盟（LOL）游戏时，点击回城按钮后会有一段等待时间，在这段时间内，玩家重复点击回城按钮并不会产生额外的响应，只有等待时间结束，回城操作才会完成，这就是节流技术在游戏场景中的具体应用。节流和防抖技术应运而生，它们的核心目标就是对函数的执行频次进行有效限制，以此来优化程序性能，为用户带来更流畅的交互体验。

原理：用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。深浅拷贝主要区别在复杂数据类型，对于基本数据类型，没有区别，改变拷贝的数据，都不会改变原数据。浅拷贝只拷贝引用（地址值），当拷贝的新对象发生改变时，原对象也会发生相同的改变，也就是说，：目标对象，即接收源对象属性的对象。

这类数据在栈中存储的是一个引用（指针），该引用指向堆内存中数据实体的起始地址，真正的数据存储在堆内存里。这意味着拷贝后的新对象和原对象共享同一数据实体，当新对象中引用类型的数据发生变化时，原对象中的相应数据也会改变，因为它们指向同一块内存区域。但对于引用类型元素，新数组和原数组共享这些元素的引用，修改其中一个数组中的引用类型元素，另一个数组中的相应元素也会改变。这个新数组是原数组的浅拷贝，新数组中的引用类型元素与原数组中的对应元素指向相同的内存地址。它执行的是浅拷贝，仅复制对象属性的引用，而非对象本身。

我们可以将一些大计算量的代码交给web worker运行而不冻结用户界面，但子线程完全受主线程控制，且不得操作DOM，所以，这个新标准并没有改变JS单线程的本质。* 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行。请求响应模型 ：浏览器请求数据，服务器接受请求，处理请求，返回数据，浏览器展示数据。是进程内的一个独立的执行单元， CPU的基本调度单位, 是程序执行的一个完整流程。* dom/css模块 : 负责dom/css在内存中的相关处理。

然而，创建和切换线程是有开销的，而且还可能出现死锁和状态同步问题，这就好比让多个演员同时表演，协调不好就会出乱子。单线程编程则相对简单，代码按照顺序执行，逻辑清晰，但执行效率较低，CPU 在等待时会造成资源浪费，如同一场演出只有一个演员，效率不高。线程则是进程内的独立执行单元，作为 CPU 基本调度单位，负责具体任务的执行，是程序执行的最小单位，如同舞台上各司其职的演员。当代码中有多个定时器和其他同步代码时，同步代码执行完后，定时器回调函数按设定时间先后顺序依次执行，这充分证明 js 执行是单线程的。

Node.js 是基于 Chrome V8 引擎的 JavaScript 运行时，它使得 JavaScript 可以在服务器端运行，为前端后端交互提供了强大的支持。能在浏览器和 Node.js 中发起请求、支持 Promise API、可拦截请求和响应、转换数据、取消请求以及自动转换 JSON 数据。通过浏览器控制台的 Network 选项，可以查看 HTTP 请求的详细过程，包括请求头、请求体、响应头和响应体等信息。Express 是基于 Node.js 的 Web 开发框架，可快速搭建服务器。

在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。在一个项目中，我们会有很多不同的请求，如果都用axios去请求，很容易造成冲突，所以我们可以去创建axios的实例，通过不同的实例去请求，配置。拦截器的作用，用于我们在网络请求的时候，在发起请求或者响应时对操作进行处理。

产生的问题就是ajax的下一次请求，ie浏览器，就会走本地的缓存，而不是服务器返回的最新数据，这样对时效比较强的场景，ajax请求就会影响我们的结果。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。处理办法：发送请求前，看之前有没有同样的请求，有的话，就把前面的请求去掉，发送一个新的请求。在开始的位置点开，输入cmd，点击命令提示符，在窗体里，输入node -v，出现版本信息。

在 JavaScript 中，对象创建模式多种多样，每种模式都有其独特的特点和适用场景。下面将对常见的对象创建模式进行详细解释。// 创建一个空的Object对象let person = new Object();// 动态添加属性person.name = 'John';person.age = 30;// 动态添加方法person.sayHello = function() { console.log(`Hello, my name is ${this.name}`);};let person =

套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上。* 套路: 先创建空Object对象, 再动态添加属性/方法。* 问题: 对象没有一个具体的类型, 都是Object类型。1. 在子类型构造函数中通用call()调用父类型构造函数。7. 创建子类型的对象: 可以调用父类型的方法。4. 创建父类型的实例对象赋值给子类型的原型。* 适用场景: 需要创建多个类型确定的对象。* 适用场景: 需要创建多个类型确定的对象。1. 子类型的原型为父类型的一个实例对象。

_proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。* 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 外部函数调用 就产生了闭包。一个函数(子函数)访问另一个函数(父函数)中的变量，外部函数调用，此时就有闭包产生，那么这个变。

通常，为提升代码的复用性与可维护性，方法一般定义在原型中，属性则通过构造函数定义在对象自身上，以此使代码结构更为清晰。当一个嵌套的内部函数引用了外部函数的变量或函数，并且外部函数被调用时，便会产生闭包。闭包既可以理解为这个嵌套的内部函数，它能够访问外部函数的变量；当在原型对象上添加属性或方法时，由该函数创建的所有实例对象都会自动继承这些新增内容，这一过程如同从同一模板复制出的实例，均具备模板所赋予的特性。自身产生的实例，这是 JavaScript 语言中一个独特的设计，也是理解函数与对象关系的关键要点。

AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，与服务器进行异步通信并更新部分网页的技术。在原生 JavaScript 中，主要通过。以上就是 AJAX 常用方法的介绍，你可以根据实际需求选择合适的方法和技术来实现异步通信。是实现 AJAX 的传统方式，但现代 JavaScript 更推荐使用。对象来实现 AJAX 操作，下面详细介绍其常用方法。API，它提供了更简洁、更强大的功能。// POST 请求。// POST 请求。

在互联网的世界里，当我们在浏览器中输入网址并按下回车键，或是点击页面上的链接、提交表单时，背后都有一个关键的协议在默默工作，它就是 HTTP（HyperText Transfer Protocol），即超文本传输协议。HTTP 是浏览器与服务器之间进行通信的基础协议，它规定了浏览器如何向服务器发送请求，以及服务器如何向浏览器返回响应。无论是前端页面的数据获取与交互，还是后端服务器的搭建与响应处理，都离不开对 HTTP 协议的深入理解和熟练运用。console.log('请求失败');在请求头中，参数则以。

综上所述，Express 在 Node.js 中运行时主要负责创建和配置服务器、处理 HTTP 请求、使用中间件、提供静态文件服务以及错误处理等任务，帮助开发者更高效地构建 Web 应用和 API。在实际项目开发中，开发者可以根据具体需求，灵活运用 Express 的各项功能，打造出健壮、高性能的 Web 应用和 API 服务。中间件是 Express 中非常重要的概念，它可以在请求和响应处理过程中执行各种任务，如日志记录、身份验证、解析请求体等，极大地增强了 Express 应用的功能和灵活性。

/ 输出: [1, 2, 3, 2] console.log(lastIndex);// 输出: [1, 2, 3] console.log(sortedArr);// 输出: [1, 2, 3, 4] console.log(newArr);// 输出: [1, 2, 3] console.log(newLength);// 输出: [1, 2, 3] console.log(newArr);// 输出: [1, 2, 3, 4] console.log(newArr);

当多个实例对象需要共享同一个方法或属性时，将其定义在原型上可有效节省内存空间，因为多个实例对象可以共享原型上的方法和属性，无需每个实例都拥有独立的副本。在构造函数内部定义的属性和方法，会直接成为实例对象自身的属性和方法，即这些属性和方法直接挂载在实例对象上，而非通过原型链访问。在构造函数外部定义的属性和方法，通常会成为类的原型属性和方法，它们并不直接存在于实例对象自身，而是位于实例对象的原型链上。中，属性和方法定义在构造函数内外，实例化时实例对象自身拥有的情况存在显著差异，下面将详细阐述。

因为在javaScript中，不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object。js运行机制，即事件循环机制。在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析Html标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。在js中，会把任务分为同步和异步，这两者的执行环境不同，同步任务会进入主线程，异步任务会进入事件队列(EventQueue)，当主线程代码。

事件类型：事件触发的方式，如鼠标事件（click、mouseover等）、键盘事件（keydown、keyup等）、表单事件（submit、change等）new Set()方法：利用Set数据结构的唯一性去重，可通过解构或Array.from转换为数组，简洁高效。微任务如Promise.then，微任务优先执行。e.stopPropagation()：阻止事件冒泡，不影响默认事件，用于防止事件向上层元素传播。e.preventDefault()：阻止默认事件，不影响事件冒泡，如阻止链接跳转、表单提交。

本原型链图展示了 JavaScript 中实例、构造函数、原型对象之间的复杂关系，以及整个原型链的结构。通过文字解释，能更深入地理解 JavaScript 面向对象编程的核心机制。这种复杂的原型链结构是 JavaScript 实现继承和属性查找机制的核心，理解它对于掌握 JavaScript 的面向对象编程至关重要。这是创建原型链的基础，使得实例对象可以通过。属性访问到原型对象上的属性和方法。，这形成了一个完整的原型链。的连线，体现了原型对象的。的连线，展示了实例对象的。的连线，代表构造函数的。

这种语法糖不仅提高了代码的可读性和可维护性，还使得 JavaScript 在面向对象编程方面更加得心应手，为开发者提供了更高效、更强大的编程体验。关键字用于调用父类的构造函数或方法，它在子类的构造函数中起着至关重要的作用，确保父类的属性和方法能够正确地被继承和初始化。子类的实例不仅可以访问父类的属性和方法，还可以拥有自己独特的属性和方法，从而实现了代码的复用和扩展。私有属性和方法只能在类的内部访问，外部无法直接访问，这为类的封装提供了更强大的支持。这意味着，当我们创建一个类的实例时，实例的。