weixin_47199717-CSDN博客

原创 class语法糖和其他继承的区别

Class语法糖是ES6中引入的一种新的类定义方式，通过class关键字和extends关键字来实现继承。Class语法糖使得对象原型的写法更加清晰，更符合面向对象编程的语法习惯。尽管Class语法只是语法糖，其底层实现仍然依赖于原型继承‌12。

2025-04-07 20:00:17 228

原创 promise解决了什么问题

Promise 通过解决回调地狱、提升代码可读性、增强信任问题、简化错误处理以及优化流程控制，成为现代 JavaScript 异步编程的核心工具之一。它的引入不仅改善了开发体验，还显著提高了代码的质量和可维护性。

2025-04-07 19:57:47 374

另一种流行的库是 SWR (`stale-while-revalidate`)，其核心理念是在初始渲染时提供旧的数据（如果存在），并同时发起新的请求以刷新数据。当需要对昂贵的计算结果进行缓存时，可借助 React 自带的 `useMemo` 和 `useCallback` 钩子。虽然严格意义上不属于传统意义上的“缓存”，但在某些情况下，利用事件驱动模型也可以间接达到类似的效果——即让多个不直接相关的模块间快速交换消息而无需频繁访问外部服务。它提供了内置的查询缓存功能，能够自动管理数据的有效性和更新逻辑。

2025-03-20 16:44:11 423

原创 CSS `box-sizing` 属性的定义及用法

该属性有三个主要取值：`content-box`、`border-box` 和 `inherit`。在这种情况下，由于未显式声明 `box-sizing` 或者使用了默认值 `content-box`，最终渲染后的宽度将是 `300px + (2 * 20px) + (2 * 5px)` 即 370px；此时，无论怎样修改 `padding` 或 `border` 的大小，整个 `<div>` 的外部尺寸始终固定为 300×200 像素。### CSS `box-sizing` 属性的定义及用法。

2025-03-20 16:37:45 436

原创 CSS 实现半圆

需要注意的是，当伪元素的内容超出其父容器时，应确保父容器设置了 `overflow: hidden` 属性以裁剪多余区域。另一种更灵活的方式是利用伪元素（`:before` 或 `:after`），这样可以在不改变父级元素结构的情况下完成更多复杂的形状控制。这种方法的核心在于创建一个完整的圆形，并通过调整容器的高度和宽度以及设置 `overflow: hidden` 来隐藏不需要的部分。对于简单的布局情况，可以直接定义带有特定方向圆角的矩形作为半圆的一部分。/* 高度为宽度的一半 */

2025-03-20 16:32:46 699

原创闭包、高阶函数和函数柯里化的概念和作用？

**数组迭代**：`map`, `filter`, 和 `reduce` 是常见的内置高阶函数，分别用于映射转换、过滤筛选和聚合计算。- **事件监听器**：在循环中为多个元素绑定不同的事件处理器时，闭包可以帮助维护独立的状态。- **延迟执行**：当需要在未来某个时间点访问当前的作用域时，闭包提供了必要的机制。- **回调函数**：许多异步操作依赖于传入的回调函数完成后续逻辑处理。- **组合功能**：通过嵌套高阶函数实现复杂的功能链路设计。

2025-03-20 16:29:02 293

原创 DOM 事件流？event 的 target 和 currentTarget 区别？如何取消事件默认行为？

假如 `.container` 下面还有子级按钮等可点击区域，那么当你单击这些部分的时候target就会显示对应的小部件名称而不会改变currentTarget依旧维持原样。- **捕获阶段**: 事件从最顶层的节点（通常是 `document` 或 `window`）向下传递到触发该事件的目标元素。- **目标阶段**: 当事件到达实际被触发的元素上时，即为目标阶段，在此期间会执行绑定在此元素上的事件处理程序。- **冒泡阶段**: 接着事件再由目标元素向上传播回至顶级节点的过程称为冒泡阶段。

2025-03-20 16:25:42 358

原创 HTML `script` 标签中 `defer` 与 `async` 属性的区别及用法

2025-03-20 16:22:28 270

原创 flex-direction、flex-grow 理解

如果某个子项的 `flex-grow` 值大于零，则它会随着父容器的空间变化而扩展其宽度或高度。例如，如果有两个子项 A 和 B，A 的 `flex-grow` 设为 2，B 的设为 1，在有剩余空间的情况下，A 将占据两倍于 B 扩展出来的区域大小。- **column-reverse**: 子项沿垂直方向从下到上排列。- **row-reverse**: 子项沿水平方向从右到左排列。- **row**: 子项沿水平方向从左到右排列，默认值。- **column**: 子项沿垂直方向从上到下排列。

2025-03-20 16:18:08 389

原创实现Promise.all

我们还定义了一个空数组results来存储每个Promise对象的解决值，并定义了一个count变量来跟踪已成功解决的Promise对象的数量。如果其中一个Promise对象被拒绝了，我们将直接调用reject函数将错误传递给新的Promise对象，使它被拒绝。Promise.all是一个静态方法，它接受一个可迭代的对象（比如数组）作为参数，并返回一个新的Promise对象。这个新的Promise对象将在可迭代对象中的所有Promise对象都成功解决后解决，并将解决值组成一个数组作为其解决值。

2025-03-20 16:12:03 410

原创 Redux 中间件

在 React 和 Redux 的应用中，中间件（middleware）是一种用于处理异步操作和其他副作用（side effects）的强大机制。Redux 中间件让你能够在 dispatch 一个 action 之后，在 action 到达 reducer 之前，插入自定义的逻辑。Redux 中间件是处理异步操作和其他副作用的强大工具。Redux Saga 功能强大，适合复杂的异步流程管理。异步 action 将返回一个函数，而不是一个普通的 action 对象。更加复杂但功能强大，适合复杂的异步操作。

2024-12-25 10:01:32 370

原创 react hooks 怎么理解？用法？

‌‌是React 16.8版本引入的一项重要特性，它允许在函数式组件中使用状态（state）和其他React特性，而不需要使用类组件。Hooks是一系列特殊的函数，可以在函数组件中“钩入”React的状态和生命周期等功能，从而使得函数组件具备类组件的一些特性‌12。

2024-12-25 09:46:31 413

原创 React 合成事件

React 使用 SyntheticEvent 对原生事件进行封装，使得所有事件在不同浏览器中都具有相同的行为。这种封装提供了一致性和性能优化，开发者可以像使用原生事件一样使用 React 合成事件。

2024-12-24 16:10:42 219

原创 js防止内存泄露

闭包：如果一个函数内部定义了另一个函数，并且这个内部函数引用了外部函数的变量（包括this），那么这个内部函数就会保留一个对这些变量的引用。如果这样的内部函数被返回到外部或者全局作用域，就可能导致内存泄露。JavaScript中的内存泄露指的是分配给程序的内存没有被正确释放，导致该内存不能被再次使用。DOM元素被遗漏：如果一个DOM元素被JavaScript变量所引用，但是页面上不再有对应的DOM元素，这可能会导致内存泄露。声明的变量会自动成为全局变量，如果这些变量引用了大量数据，可能会导致内存泄露。

2024-12-20 16:08:59 331

原创 iframe怎么通信

请注意，cookie的数据交换是同步的，并且有数据大小和跨域访问的限制。：这是一个安全的跨文档消息传递API，允许跨源通信。使用cookie进行跨子域的简单数据交换。的数据交换是同步的，并且数据大小受限。通过设置或获取iframe的。进行跨文档的简单数据交换。

2024-12-20 15:55:57 232

原创监听localstorage中某个值变化

时触发，而不是在当前页面进行更改时触发。如果你需要在当前页面更改数据时做出响应，你可能需要自行轮询检查键值的变化。来判断是不是我们关心的键，如果是，我们就可以进行相应的处理。中的数据发生变化时，就会触发这个事件，我们通过检查。事件只会在其他页面（相同域下的不同页面）更改。在JavaScript中，你可以通过监听。对象添加了一个事件监听器来处理。在这个例子中，我们为。

2024-12-20 15:50:50 330

原创前端性能优化项目中做过哪些

这些优化措施可以根据项目的具体需求和情况，灵活选择和应用。通过多方面的努力，可以显著提升前端性能，从而改善用户体验。在前端性能优化项目中，可以涉及多个方面的优化措施。

2024-12-20 10:51:54 212

原创 keepalive的理解和使用

keep-alive 是一个通用组件，它内部定义了一个 map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的 component 组件对应组件的 vnode，如果该组件在 map 中存在就直接返回它。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。框架中的一个内置组件，主要用于在组件切换时缓存不活动的组件实例，避免重复渲染DOM，减少性能消耗，提高用户体验。

2024-12-19 15:17:28 816

原创闭包的理解和内存管理

闭包可以被定义为：一个函数和创建这个函数的词法环境的组合。当一个函数在其外部作用域中访问变量时，这个函数就形成了闭包1。// 输出 'I am outside!在这个例子中，是一个闭包，它可以访问中的。

2024-12-19 14:53:10 237

原创 js中的微任务和宏任务

需要注意的是，不同的 JavaScript 引擎可能会存在一些差异，有些任务可能既可以作为微任务，也可以作为宏任务，比如在一些浏览器中，使用 MutationObserver 监听 DOM 变化时，它会被视为一个微任务，但是在一些 Node.js 版本中，它会被视为一个宏任务。需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕。而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任务。

2023-09-25 21:42:53 173 1

原创 WeakMap 和 Map的区别

5. WeakMap 对象的主要应用场景是需要与另外一个对象关联，并且不想影响到这个对象的垃圾回收机制，以避免内存泄漏。例如，将对象存储在 WeakMap 中，可以确保这个对象只在其他地方仍然被引用时才被保留，否则会自动被删除，从而避免内存泄漏。3. Map 中的键值对是强引用关系，即只要 Map 中的键或值存在，Map 对象就会一直保留这个键值对，不会被垃圾回收。而 WeakMap 中的键值对是弱引用关系，如果 WeakMap 的键不再被引用，那么这个键值对就会被自动删除。

2023-09-25 17:23:40 1315 1

原创 new关键字的作用

在上述代码中，我们定义了一个Person构造函数，它接受name和age两个参数，并将它们赋值给新创建的对象的属性。然后，我们使用new关键字分别实例化了person1和person2两个Person对象。通过使用new关键字，我们可以实例化一个类或构造函数，然后使用这个实例来访问类或构造函数中定义的属性和方法。原文链接：https://blog.csdn.net/weixin_45724850/article/details/131730365。执行构造函数中的代码，初始化对象的属性和方法。

2023-09-25 17:20:57 194 1

原创在JS中如何判断两个对象是否相等

在上面的例子中， Object.is(obj1, obj2) 返回 false ，因为 obj1 和 obj2 是两个不同的对象，而 Object.is(obj1, obj3) 返回 true ，因为 obj1 和 obj3 引用了同一个对象。在上面的例子中， obj1 和 obj2 的属性值相同，但它们是不同的对象，因此它们的 === 比较返回 false。如果你只是需要比较两个对象的属性是否相等（不比较引用地址），你可以使用循环或 Object.keys 方法来获取对象属性的列表，并比较它们的值。

2023-09-25 16:55:55 2754 1

原创 JavaScript 判断数据类型的方法

在 JavaScript 里使用 typeof 来判断数据类型，只能区分这些类型，即 “ number ” ， “ string ” ， “ undefined ” ， “ boolean ” ， “ object ”， “function”。从上述结果可以看出：只有引用数据类型（Array，Function，Object）被精准判断，其他（数值Number，布尔值Boolean，字符串String）字面值不能被instanceof精准判断。// 可以是call，也可以是apply，这里以call。

2023-09-25 16:48:27 59 1

原创【无标题】

总结：1 、第一种和第二种函数的定义的方式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建一个函数，只是前两种为我们进行了封装，我们看不见了而已，js 中任意函数都是Function 的实例。这种定义方式，会将函数声明提升到该函数所在作用域的最开头，也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数，在这个作用域内，你都可以调用这个函数为你所用。首先弄明白何为函数呢，按照犀牛书的说法，函数简单的说就是重复执行的代码块。

2023-09-25 16:43:24 72 1

原创前端大屏的几种适配方案

打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。将这个值设置为html字体大小，既1rem = 80px；tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；安装cssrem插件，根节点的字体大小设置为80px。这个是px单位转rem的参考值。大屏是适配是前端开发必不可少的技能，适配各种大屏也是为了给用户更好的体验。这样的话放我们在书写px的适合，这个插件就会自动帮我们转化成rem。我们是1920*1080的设计稿。

2023-09-25 16:38:12 532 1

原创 js中获取对象属性的两种方法和区别

而对象的键名则是一个比较随意，可以自定义的。console.log(person.myName) // undefined，使用.访问，不会取出myName的值，会在person对象上查找键名为"myName"的属性值，因为没有所以肯定也找不到了。对象的存储时键值对形式的存储，一般情况下[]适用于任何形式的取值，但是.并不一定适用于所有的情况，下边介绍两种情况的区别。// 这里定义一个myName,值为对象属性中的一个键名，在这里是直接定义的，但是在开发环境中可能是接手的其他的可变化的值。

2023-09-25 16:34:35 1229 1

原创浅拷贝与深拷贝的几种方式

该方法第一个参数是新对象，第二个参数是旧对象，旧对象中的属性值如果也是对象，那么新对象只是拷贝了内存地址。四、for循环遍历对象，将旧对象的属性值依次赋值给新对象，如果旧对象中属性值是一个对象，也只是浅拷贝。将旧对象的变量名直接赋值给新的对象变量，那么旧对象的属性值一改变，新对象也会改，因为只拷贝了内存地址。运用扩展运算符将旧对象在一个新的空对象中展开，如果旧对象中的属性值是对象，那么新对象也是浅拷贝而已。//通过js的内置对象JSON来进行数组对象的深拷贝。一、通过递归的方式实现深拷贝。

2023-09-25 16:33:45 60 1

原创深拷贝与浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。对象是保存在堆内存中的, 每创建一个新对象,就会在堆内存中开辟一个新的空间, 变量保存的是对象的内存地址(对象的引用)- 3 ,基本数据类型的数据,变量是直接保存他的值,变量与变量之间是相互独立的,修改一个变量不会影响其他的变量,深拷贝: 她在栈内存中仅仅是存了一个引用的地址,而真正的数据存在堆内存中 ,完全是拷贝了一个新的对象,

2023-09-25 16:29:37 71 1

原创 js中堆和栈的区别和浏览器的垃圾回收机制

当这个引⽤次数变为0时，说明这个变量已经没有价值，因此，在在机回收期下次再运⾏时，这个变量所占有的内存空间就会被释放出来。⽽局部变量声明在函数中，它的⽣命周期从函数执⾏开始，直到函数执⾏结束，在这个过程中，局部变量会在堆或栈中存储它们的值，当函数执⾏结束后，这些局部变量不再被使⽤，它们所占有的空间就会被释放。当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址指针，然后，在通过地址指针找到堆中的所需要的数据（保存在堆内存中,包含引用类型的变量实际上保存的不是变量本身，而是指向该对象的指针）。

2023-09-25 16:25:14 208 1

原创 ES6新特性

在 ES6 中，添加了Object.is()、Object.assign()、Object.keys()、Object.values()、Object.entries()等方法。------难理解看实例。includes()方法------是查看数组中是否存在这个元素，存在就返回true,不存在就返回false。padStart()/padEnd()，用参数字符串按给定长度从前面或后面补全字符串，返回新字符串。every()方法------数组所有值都符合条件才会返回true,有一个不符合返回false。

2023-09-25 16:20:24 83 1

原创 export default 和 export 区别：

其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。3.在一个文件或模块中，export、import可以有多个，export default仅有一个。4.通过export方式导出，在导入时要加{ }，export default则不需要。

2023-09-25 16:10:54 91 1

原创 Vue中import和export导入导出有时需要用花括号的情况

我上面的Index里面正是使用export default的方法，而message则是用的export const message。使用Vue时发现程序中的import导入时有的用了花括号，有的未用。于是自己使用时就没有带上花括号，最后运行不起来，调试发现是缺少花括号的问题。3. 将整个模块当作单一对象进行导入，使用*号不用花括号，该模块的所有导出都会作为对象的属性和方法存在。1. 导入部分引入的是default不用花括号，非default时，要使用花括号。全部导入时不用花括号，导入部分时使用花括号。

2023-09-25 16:09:02 628 1

weixin_47199717的博客