- 博客(25)
- 收藏
- 关注
RSS订阅原创 异步函数的默认返回值
这是因为，JavaScript引擎在执行foo()函数时，会自动将其转换成一个Promise对象，因为async函数默认会返回一个Promise对象，该Promise对象隐式地被resolve成undefined，所以调用.then()方法时仍然可以执行后续的回调函数。如果在异步函数中没有明确地使用return语句返回一个Promise对象，则默认返回一个已经resolve(value)的Promise对象，其中value为undefined。Promise对象表示一个异步操作的最终状态和结果值。
2023-06-10 10:26:55
345
原创 CommonJS
它是 Node.js 模块化发展的基础，通过 module.exports / exports 导出模块，通过 require() 引入模块，实现了模块的复用和复杂应用的依赖管理。在上面的代码中，我们通过 require() 引入了上一步中定义的 math 模块，并使用导出的 add 和 subtract 方法计算出相应的结果。在上面的代码中，我们定义了一个 math 模块，其中包含了 add 和 subtract 两个方法，并将其通过 module.exports 导出。
2023-06-10 10:24:05
287
原创 $event对象总结
监听 input 输入框的 focus 和 blur 事件并切换类名。监听 window 的 resize 事件并实时更新元素宽度。监听 form 表单的 submit 事件并发送数据。监听 button 按钮的点击并获取鼠标点击坐标。监听 touchmove 事件并实时改变元素位置。监听 keydown 事件并判断是否按下回车键。监听 scroll 事件并实时更新滚动进度。监听 a 标签的点击并阻止默认行为。监听鼠标移动并实时改变元素位置。
2023-06-07 15:05:56
2318
原创 浅拷贝和深拷贝详解
浅拷贝是指创建一个新的对象或数组，复制原始对象或数组中的值到新对象或数组中。浅拷贝只复制对象或数组的引用，而不复制其内部的子对象或子数组。因此，原始对象和拷贝对象会共享相同的引用，对其中一个进行修改会影响到另一个。深拷贝是指创建一个新的对象或数组，并递归地复制原始对象或数组中的所有值，包括其内部的子对象和子数组。深拷贝会完全复制原始对象的所有属性和值，而且与原始对象完全独立，修改其中一个不会影响到另一个。浅拷贝适用于需要创建一个与原始对象或数组共享某些值的情况，且对共享值的修改不会影响到原始对象或数组。
2023-06-06 19:33:18
254
原创 async和await详解
使用 async 关键字来定义一个异步函数，可以使用箭头函数或函数声明来定义。// 使用箭头函数定义异步函数 const asyncFunc = async() => {// 异步操作 } // 使用函数声明的方式定义异步函数 async function asyncFunc() {// 异步操作 }在异步函数内部使用 await 关键字来等待一个 Promise 对象执行完成并返回结果。可以使用 try-catch 语句来捕获可能发生的异常。
2023-06-06 14:26:14
1902
原创 回调地狱详解
回调地狱指的是在编写异步JavaScript代码时，回调函数嵌套的现象越来越深，导致代码的可读性变差、维护性变差、复杂度增加、错误率增加等问题。在 JavaScript 中，回调函数通常用于处理异步代码，它们被用于等待某些操作的完成，例如 AJAX 请求、Promise 执行和事件绑定等，一旦操作完成，JavaScript 引擎则会调用回调函数来处理完成的结果。回调函数的问题在于，如果不小心处理不当，它们非常容易导致嵌套回调函数的问题，这些被称为回调地狱。
2023-06-05 20:37:57
1658
1
原创 promise详解
Promise 作为异步编程的重要手段，它的出现解决了回调地狱的问题，使异步编程更加直观、更加优雅。Promise 对象有 3 种状态：Pending、Fulfilled 和 Rejected，在异步操作执行成功或者失败时，通过 resolve 和 reject 函数分别将 Promise 对象状态设置为 Fulfilled 和 Rejected。Promise 的链式操作可以使代码更加流畅，它常常用于需要等待异步操作返回结果的场景，如加载图片、Ajax 请求、延时处理等。
2023-06-05 20:35:21
167
原创 简单实现vue框架中的双向数据绑定（v-model）
最近学到了proxy和reflet就想着做一个小案例，这就想到了可以用这个实现vue框架里面的v-model双向数据绑定获取所有带有cameel-bind属性的元素对于每个元素，获取它绑定的key值到代理对象(proxy)中查找这个key对应的value值将value赋给这个元素的innerText属性，更新它的内容执行render()函数，渲染页面，并且可以反复调用它来实现数据的动态更新。
2023-06-05 19:07:51
1163
原创 Logical Assignment Operators 详解
逻辑赋值运算符的作用是将逻辑运算的结果赋值给变量，可以减少写重复代码的工作量，同时增强代码的可读性。例如，在Vue和React的watcher中，我们经常需要对变量进行判断，如果满足一定条件，再将其赋值给另一个变量。例如，在Vue组件中，我们需要实现一个计算属性，如果变量a存在，则返回a的值，否则返回b的值。||=：逻辑或赋值运算符，如果左侧表达式为true，则不执行右侧表达式，结果为true；=：空值合并赋值运算符，如果左侧变量为null或undefined，则执行右侧表达式，并将结果赋值给左侧变量。
2023-06-05 17:56:49
85
原创 Proxy常用捕捉函数总结
参数：target - 被代理的目标对象，prop - 要设置的属性名，value - 属性的新值，receiver - 如果设置的是函数，receiver就是this对象。参数：target - 被代理的目标对象，prop - 要获取的属性名，receiver - 如果获取的是函数，receiver就是this对象。参数：target - 被代理的目标对象，prop - 要定义的属性名，descriptor - 新属性的描述符对象。参数：target - 被代理的目标对象，prop - 要获取的属性名。
2023-06-05 17:18:19
69
原创 typeof map[Symbol.iterator] === ‘function‘ 到底是什么？ 判断数据结构是否含有遍历器
map[Symbol.iterator]表示获取map对象的一个名为Symbol.iterator的属性（这是ES6中用于定义迭代器的一种新的方式）。typeof map[Symbol.iterator] === 'function’则表示判断map对象是否具有iterator方法，并且该方法是否为一个函数。因为在JS中函数也是一种数据类型，因此可以用typeof来判断是否为函数。这句代码的作用就是对一个对象进行判断，看看它是否具有可迭代性。如果是，那么我们就可以对这个对象进行迭代操作。
2023-06-05 16:04:58
86
原创 常用的遍历方式总结
如果不想遍历原型链上的属性，可以使用Object.hasOwnProperty()方法来判断一个属性是否为对象自身的属性，它返回一个布尔值，表示某个对象是否含有指定的自身属性。这意味着，除了遍历到对象自身定义的属性之外，它还会遍历继承自原型链上的属性。它返回一个包含对象自身所有可枚举属性的键名的数组（不包括继承自原型对象的属性）。应用场景：适用于遍历对象，不推荐用于遍历数组，虽然可以遍历数组下标，但是不稳定，有时会出现遍历顺序不一致的情况。其中 key 是对象的属性名，obj[key] 是对应的属性值。
2023-06-05 15:30:36
1685
原创 Optional Chaining 可选连语法介绍
在不使用可选链语法的情况下，我们在访问一个复杂对象时，需要对每一级属性的存在性做逐一检查，以免出现“不可读属性”的错误。而可选链语法可以帮助我们简化这个操作。
2023-06-05 15:20:42
387
原创 什么是 Coalescing Operator？
Coalescing 运算符是一种 JavaScript 表达式，用于通过提供默认值来处理可能的 null 或 undefined 值，这种运算符在逻辑上类似于 “OR” 运算符。该运算符可以用??表示，被称为 “nullish coalescing operator”。??24;// 0在上述代码中，null 和 0 都是 falsy 值，但是??运算符可以正确处理这些边界情况。
2023-06-05 15:08:05
79
原创 js数组中的map、filter、slice方法详解
在上面的例子中，我们使用 slice() 方法将原始数组的第二个到第四个元素放入了一个新数组中，第一个元素是 0，所以 1 到4 对应的是 “banana”，“grapes” 和 “mango”。这个指定的函数，会作为单独的参数进行调用：数组的值、元素的索引和数组自身。其中，function 参数接收三个参数：当前元素的值、当前元素的序号、当前的数组。执行的结果会收集到一个新的数组返回。filter() 方法可创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
2023-06-05 09:03:32
309
原创 为什么不把子类构造方法原型直接指向父类原型，而要通过一个中介指向父类原型对象呢？
这样做看似没问题，但其实存在一个非常严重的问题：子类和父类共享了同一个原型对象，那么当我们在子类的原型上添加新的属性或方法时，会影响到父类自身和其他子类的实例。我们可以通过构造一个空函数，将它的原型对象指向父类的原型对象，然后再将子类的原型对象指向这个空函数的实例，这样子类就可以通过这个空函数的中介来访问和继承父类的方法和属性了。这是因为child实例的原型和parent对象的原型指向了同一个对象，当我们在子类的原型上添加一个新的方法时，也就是对共享的原型对象进行修改，从而对父类的原型对象产生了影响。
2023-06-04 15:36:49
78
1
原创 Object常见API
Object.keys(obj)：获取对象中所有可枚举的键，并返回一个数组。适用于需要遍历对象键的场景。Object.values(obj)：获取对象中所有可枚举的值，并返回一个数组。适用于需要遍历对象值的场景。Object.entries(obj)：获取对象中所有可枚举的键值对，并返回一个数组。适用于需要遍历对象键和值的场景。Object.assign(target, …sources)：将源对象中的所有可枚举属性复制到目标对象中，并返回目标对象。适用于对象合并的场景。const obj1= {
2023-06-04 14:16:21
202
1
原创 详解js数组中的map和filter方法
因此，map()和filter()的区别在于，map()方法生成一个新的数组，其中的每个元素都是对原数组中的对应元素应用函数的结果，而filter()方法生成一个新的数组，其中的元素都是原数组中符合条件的元素。在这个例子中，filter()方法对numbers数组中的每个元素应用了一个函数，这个函数检查一个元素是否为偶数，返回符合条件（即偶数）的元素，生成了一个新的数组even。在JavaScript中，map()和filter()是数组方法，用于对数组进行遍历和过滤。
2023-06-04 12:43:36
1363
1
原创 变量提升那些事
变量提升是 JavaScript 中的一种特殊行为，指在执行代码前将变量和函数声明提升到当前作用域的顶部，因此可以在声明位置之前的代码使用这些变量或函数变量提升是 JavaScript 中的一个重要特性，可以在一定程度上减少变量的声明过程，但同时也容易造成代码中的混乱和错误。因此在开发过程中，需要格外注意变量和函数的声明和使用顺序，尽量减少因变量提升导致的错误。
2023-06-03 16:32:51
118
原创 一文彻底搞懂原型链，瞬间通透，看完我感觉又行了
噢噢噢，大家好呀😄，阿燃最近遇到原型链相关的东西，经过我不懈的努力，终于有一些理解和感悟，这就马不停蹄写博客分享见解，如果你也被原型链所困惑😢，希望这篇文章对你对有所帮助❤️。
2023-06-03 12:19:03
454
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人