JavaScript
文章平均质量分 60
记录关于JavaScript知识
凯小默
专注前端领域开发。
展开
-
【30 天 JavaScript 挑战】学习笔记
/ 请你编写一段代码实现一个数组方法,使任何数组都可以调用 array.last() 方法,这个方法将返回数组最后一个元素。// 如果数组中没有元素,则返回 -1。// 3。原创 2024-03-06 19:46:30 · 544 阅读 · 0 评论 -
15 # 手写 throttle 节流方法
节流是限制事件触发的频率,当持续触发事件时,在一定时间内只执行一次事件,这个效果跟英雄联盟里的闪现技能释放差不多。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。滚动加载,加载更多或滚到底部监听谷歌搜索框,搜索联想功能高频点击提交,表单重复提交。原创 2023-11-11 17:28:46 · 236 阅读 · 0 评论 -
14 # 手写 debounce 防抖方法
防抖: n 秒后再去执行该事件,若在 n 秒内被重复触发,则重新计时,这个效果跟英雄联盟里的回城技能差不多。本质上是优化高频率执行代码的一种手段,目的就是降低回调执行频率、节省计算资源。搜索框搜索输入,手机号、邮箱等验证输入检测,只需用户最后一次输入完,再发送请求窗口大小 resize,只需窗口调整完成后,计算窗口大小,防止重复渲染。原创 2023-11-11 16:09:22 · 436 阅读 · 0 评论 -
13 # 手写 concat 方法
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。如果省略了所有参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。原创 2023-11-09 20:36:31 · 136 阅读 · 0 评论 -
12 # 手写 findIndex 方法
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。// fn 是 kaimoFindIndex 中传递的参数,是一个函数,this 是 arr。如果条件改成大于50,找不到就返回。原创 2023-11-09 19:37:00 · 172 阅读 · 0 评论 -
11 # 手写 reduce 方法
第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被用作初始值,迭代器将从第二个元素开始执行(即从索引为 1 而不是 0 的位置开始)。reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。数组为空数组以及没有初始值的时候,就直接报错提示。原创 2023-11-09 19:25:44 · 294 阅读 · 0 评论 -
10 # 手写 every 方法
every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。// fn 是 kaimoEvery 中传递的参数,是一个函数,this 是 arr。原创 2023-11-09 02:43:07 · 201 阅读 · 0 评论 -
09 # 手写 some 方法
some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。// fn 是 kaimoSome 中传递的参数,是一个函数,this 是 arr。原创 2023-11-09 02:42:03 · 192 阅读 · 0 评论 -
08 # 手写 filter 方法
filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。如果没有元素通过测试,则返回一个空数组。ele:表示数组中的每一个元素index:表示数据中元素的索引array:表示数组});var});});1});3});5});7});9;});var});});原创 2023-11-08 20:52:52 · 136 阅读 · 0 评论 -
07 # 手写 find 方法
/ fn 是 kaimoFind 中传递的参数,是一个函数,this 是 arr。方法返回数组中满足提供的测试函数的第一个元素的值。原创 2023-11-08 20:51:10 · 200 阅读 · 0 评论 -
06 # 手写 map 方法
/ fn 是 kaimoMap 中传递的参数,是一个函数,this 是 arr。map 自带循环功能,对数据中的元素进行加工,得到一个加工后的新数据。原创 2023-11-01 21:03:51 · 253 阅读 · 0 评论 -
05 # 手写 bind
/ 这里的 this 指向调用 kaimoBind 的 fn。// 这里的 this 指向调用 kaimoBind 的 fn。// 获取到 bind 里的剩余参数。// 拿到 bind 返回函数的参数。// 改变 fn 的 this 指向。// 获取到 bind 里的剩余参数。// 拿到 bind 返回函数的参数。// 改变 fn 的 this 指向。bind 难点在于参数的收集。// gn 继承 Mn。原创 2023-11-01 20:39:33 · 137 阅读 · 0 评论 -
04 # 手写 apply
apply 的作用跟 call 的作用是一样的,只不过传递的参数是以数组的形式。// 执行 this() 改变不了 this 指向,需要赋值给属性。// 没有东西指向 window,将 content 包装成对象。// 再删除多余的 f 参数。原创 2023-10-26 19:58:15 · 137 阅读 · 0 评论 -
03 # 手写 call
/ 执行 this() 改变不了 this 指向,需要赋值给属性。// 没有东西指向 window,将 content 包装成对象。// 再删除多余的 f 参数。原创 2023-10-26 19:56:20 · 104 阅读 · 0 评论 -
02 # 手写 instanceof 的原理
/ 由于修改了构造器 `Student.prototype`,`Student.prototype.constructor` 已经不是 Student。// 继承 Person 公有属性:使用 `Object.create()` 来解决多次调用父类构造函数问题。// 为了避免误解,手动重设 `Student.prototype.constructor` 属性。// 使用 kaimoInstanceof 模拟 instanceof 运算符。// className 的原型对象。// 往原型链上继续找。原创 2023-10-26 15:51:14 · 119 阅读 · 0 评论 -
01 # 手写 new 的原理
/ 使用 kaimoPerson 函数去模拟 new 运算符。// 2) 让对象的隐式原型指向 fn 的显式原型。// 3) 改变 this 指向;new 是一个运算符,只能通过函数的方式去模拟。// 1) 创建一个对象。// 5) 返回对象。原创 2023-10-26 12:00:27 · 232 阅读 · 0 评论 -
原生 js 实现截图粘贴预览图片功能
读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend (en-US) 事件,同时 result 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。// 读取 file 然后返回 data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。当用户在浏览器用户界面发起“粘贴”操作时,会触发 paste 事件。然后粘贴到区域里,就能预览这个图片。比如我截图我的 csdn 的信息。// 找到图片文件file。原创 2022-09-27 12:09:36 · 546 阅读 · 2 评论 -
快速了解函数式编程
例子:实现一个通用的函数装饰器:当代码库要进行大版本升级,在未来最新的版本中我们想要废弃掉某些 API,需要做一个平缓过渡,给它们增加一个提示信息,告诉调用它们的用户,这些 API 将会在下一次升级中被废弃。例子2:getId 是一个非纯函数,它的返回值除了依赖于参数 id,还和外部环境(文档的 DOM 结构)有关。例子1:add 是一个纯函数,它的返回结果只依赖于输入的参数,与调用的次数、次序、时机等等均无关。所谓高阶函数,是指输入参数是函数,或者返回值是函数的函数。,依赖外部环境或有副作用的函数叫做。原创 2022-09-13 17:40:57 · 245 阅读 · 0 评论 -
wtfjs:一个有趣和棘手的 JavaScript 示例列表
本文转载自:https://github.com/denysdovhan/wtfjs/blob/master/README-zh-cn.mdJavaScript 是一个不错的语言。它的语法简单,生态系统也很庞大,最重要的是,它拥有最伟大的社区力量。我们知道,JavaScript 是一个非常有趣的语言,但同时也充满了各种奇怪的行为。这些奇怪的行为有时会搞砸我们的日常工作,有时则会让我们忍俊不禁。WTFJS 的灵感源于 Brian Leroux。这个列表受到他 在 2012 年的 dotJS 上的演讲 “WTF转载 2022-08-29 10:11:49 · 544 阅读 · 0 评论 -
100 行代码实现 Promises/A+ 规范
在这篇文章中,我们给出了 100 行以内的代码实现 Promise/A+ 规范的案例,我们澄清了几个关于 Promises 和 JS 里的异步方案的迷思。我们重新梳理了在 JavaScript 里的异步方案演进史的表述。我们也了解到,async/await 并非异步终极解决方案,也不是异步数据处理能力最强的模式。只能说,它是当前对新手开发者友好的主流方案。关于 Promises 还有好多话题可以讨论,比如它与函数式的 Monad 的关系,比如 Promise/A+ 规范中值得商榷和可以改进的部分等。...转载 2022-08-15 17:25:52 · 422 阅读 · 0 评论 -
ES6 从入门到精通 # 23:ES6 的模块化实现(完结)
es6 模块功能主要有两个命令构成 export 和 import。我们新建一个 module 文件夹,里面新建 index.js 文件。ES6 从入门到精通系列(全23讲)学习笔记。命名使用 defalut,一个文件只能使用一次。一个模块就是一个独立的文件。在另外的文件里面引入。...原创 2022-08-15 02:40:52 · 240 阅读 · 0 评论 -
ES6 从入门到精通 # 22:类的继承
/ 这里的super(name, age) 等价于 Animal.call(this, name, age)ES6 从入门到精通系列(全23讲)学习笔记。使用关键字 extends。原创 2022-08-15 02:03:05 · 204 阅读 · 0 评论 -
ES6 从入门到精通 # 21:class 类的用法
ES6 从入门到精通系列(全23讲)学习笔记。// 实例化的时候会被立即调用。// 实例化的时候会被立即调用。一次性向类中添加多个方法。这里添加方法还可以使用。原创 2022-08-15 01:28:54 · 205 阅读 · 0 评论 -
ES6 从入门到精通 # 20:async 的用法
unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州"如果 async 函数中有多个 await 那么then 函数会等待所有的 await 指令运行完才去执行。如果 await 有多个,里面有错误跟成功的,有错误就会停止。上面这种可以采用 try catch 处理。获取广州天气的 datalist 数据。// 获取 datalist 数据。...原创 2022-08-15 00:58:18 · 220 阅读 · 0 评论 -
ES6 从入门到精通 # 19:Promise 对象的其它方法
在 promise 结束时,无论结果是 fulfilled 或者是 rejected,都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。提供了并行的执行异步操作的行为,用于等资源都加载完了才进行操作,比如一些游戏等资源加载完才进行页面初始化。下面模拟超时,f12 找到 network 选择 slow 3g,禁用缓存。给某个异步请求设置超时时间,并且在超时之后执行相应的操作。...原创 2022-08-14 18:33:40 · 198 阅读 · 0 评论 -
ES6 从入门到精通 # 18:使用 Promise 封装 ajax
unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州"封装一个方法 getData 去请求接口,请求方式如下。ES6 从入门到精通系列(全23讲)学习笔记。分开就能开到 kaimo 是个 Promise。另外下面两种是一样的:先改动一下接口,让其报错。...原创 2022-08-14 16:47:05 · 255 阅读 · 0 评论 -
ES6 从入门到精通 # 17:Promise 的基本使用
Promise 相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结果。ES6 从入门到精通系列(全23讲)学习笔记。封装一下,可以传参数。原创 2022-08-10 21:06:59 · 182 阅读 · 0 评论 -
ES6 从入门到精通 # 16:Generator 的应用
unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=北京"unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=上海"unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州"比如有个需求,需要通过接口。...原创 2022-08-10 20:48:05 · 170 阅读 · 0 评论 -
ES6 从入门到精通 # 15:生成器 Generator 的用法
可以通过 yield 关键字将函数挂起,为了改变执行流提供了可能,同时为了做异步编程提供了方案。总结:generator 函数是分段执行的,yield 语句是暂停执行,而。调用恢复当前 yield 执行传入的实参。所以这里的 x 是 20。为不具备 iterator 接口的对象提供遍历操作。ES6 从入门到精通系列(全23讲)学习笔记。表达式里的 x 不是。...原创 2022-08-09 21:19:29 · 292 阅读 · 0 评论 -
ES6 从入门到精通 # 14:迭代器 Iterator 的用法
ES6 从入门到精通系列(全23讲)学习笔记。原创 2022-08-09 20:32:59 · 433 阅读 · 0 评论 -
ES6 从入门到精通 # 13:数组的扩展方法二
includes() 返回一个布尔值,表示某个数组是否包含给定的值。ES6 从入门到精通系列(全23讲)学习笔记。返回一个遍历器,可以使用。原创 2022-08-08 20:18:39 · 220 阅读 · 0 评论 -
ES6 从入门到精通 # 12:数组的扩展方法一
ES6 从入门到精通系列(全23讲)学习笔记。from() 将伪数组转换成真正的数组例子:Arguments例子:NodeListfrom() 还可以接收第二个参数用来对每个元素进行处理of() 将任意的数据类型,转换成数组copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。 找出第一个符合条件的数组成员 找出第一个符合条件的数组成员的索引...原创 2022-08-08 20:01:29 · 191 阅读 · 0 评论 -
ES6 从入门到精通 # 11:Map 数据类型
WeakMap对象是一组键/值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的。另外也有一个跟Set类型类似的WeakMap对象。Map类型是键值对的有序列表,键和值是任意类型。ES6从入门到精通系列(全23讲)学习笔记。这里不做过多描述,请参考文档。...原创 2022-07-29 00:27:25 · 318 阅读 · 0 评论 -
ES6 从入门到精通 # 10:Set 集合数据类型
forEach的用法,这里的val是相等于key的。ES6从入门到精通系列(全23讲)学习笔记。set中对象的引用无法被释放。解决方法使用WeakSet。集合表示无重复值的有序列表。原创 2022-07-28 20:13:31 · 168 阅读 · 0 评论 -
ES6 从入门到精通 # 09:Symbol 类型
如果用Symbol定义的对象中的变量,取值时一定要用。原始数据类型Symbol,它表示是独一无二的值。ES6从入门到精通系列(全23讲)学习笔记。用Symbol定义的对象中的变量无法被。最大的用途用来定义对象的私有变量。...原创 2022-07-27 20:24:13 · 249 阅读 · 0 评论 -
ES6 从入门到精通 # 08:扩展的对象的功能
ES6从入门到精通系列(全23讲)学习笔记。原创 2022-07-27 20:07:37 · 204 阅读 · 0 评论 -
ES6 从入门到精通 # 07:解构赋值
解构赋值是对赋值运算符的一种拓展,它针对数组和对象来进行操作。ES6从入门到精通系列(全23讲)学习笔记。优点代码书写上简单易读。原创 2022-07-27 19:44:02 · 193 阅读 · 0 评论 -
ES6 从入门到精通 # 06:箭头函数 this 指向和注意事项
这里我们不能包init改成箭头函数,不然this会指向window因为箭头函数内部this值只能通过查找作用域链来确定。是我们使用new或super创建新对象时使用的东西,只有类型的函数。es5中的this指向取决于调用该函数的上下文对象。es5处理方式使用bind改变this指向。ES6从入门到精通系列(全23讲)学习笔记。因为这里的this指向了window。未标识为构造函数的内置函数对象不实现。每个函数创建的定义都归结为。...原创 2022-07-20 21:10:50 · 329 阅读 · 0 评论 -
ES6 从入门到精通 # 05:函数之扩展运算符、箭头函数
ES6从入门到精通系列(全23讲)学习笔记。es5利用apply实现数组取最大值。es6利用拓展运算符实现数组取最大值。原创 2022-07-20 20:17:10 · 237 阅读 · 0 评论 -
ES6 从入门到精通 # 04:函数之默认值、剩余参数
ES6从入门到精通系列(全23讲)学习笔记。,这个解决了arguments的问题。原创 2022-07-19 20:48:44 · 167 阅读 · 0 评论