随笔分类 - 前端技术栈 / JavaScript
摘要：const shuffle = arr => { let len = arr.length let rand = 0 while (len) { rand = Math.floor(Math.random() * len--) ;[arr[len], arr[rand]] = [arr[rand],
阅读全文
摘要：js实现日期转换函数 用yyyy,MM,dd固定字符串做替换 const dateFormat = (date, formatter) => { const fDate = new Date(date) const day = fDate.getDate() const month = fDate.
阅读全文
摘要：bind返回一个函数 闭包保存this, 执行的时候用apply或call绑定this js中new的优先级高于bind Function.prototype._bind = function (context) { if (typeof this !== "function") throw "ty
阅读全文
摘要：比较麻烦的是this指向的问题，但是可以通过"对象的函数调用指向对象自身"来处理 如果没有传入context， 那么this默认指向window Function.prototype._call = function (context) { const type = typeof this if (
阅读全文
摘要：js 手写类型判断函数 判断引用类型 调用Object.prototype.toString截取字符串 判断基本类型 返回typeof function getType(target) { if (target null) { return "null" } // 引用类型 if (typeof t
阅读全文
摘要：手写防抖 如果存在之前的计时器，取消重新计时。 即多次点击只执行最后一次 注意this指向和回调形参列表 <button onclick="clickMe(1)">click me</button> <script> const clickMe = debounce((a) => { console
阅读全文
摘要：入参必须实现iterator接口，一般为一个非空数组 返回一个promise, 结果为数组中第一个改变为成功/失败状态的那个promise元素 Promise._race = function (promises) { if (!promises instanceof Array || !promi
阅读全文
摘要：入参必须实现iterator接口，一般为数组 全部成功才算成功，有一个失败就失败, 如果成功，结果顺序和入参顺序保持一致 返回一个新的promise, Promise._all = function (promises) { if (!promises instanceof Array) throw
阅读全文
摘要：Promise状态枚举 收集状态更改的回调函数到数组里 实现resolve,reject, 注意校验状态为pending 执行Promise形参函数，传入resolve，reject const statusMap = { PENDING: 'PENDING', RESOLVED: 'RESOLVE
阅读全文
摘要：创建一个新对象base，将base的原型链设置为构造函数的原型 new构造函数，构造函数的this指向新对象，可以为新对象添加实例属性 执行构造函数，如果构造函数自己有引用类型的返回值ret，就用ret, 否则用base const isValidRet = v => v !== null && (
阅读全文
摘要：o instanceof Ctor 判断对象o是不是构造函数Ctor生产的实例，原理是判断构造函数的原型是不是位于实例原型链或父级原型链上 const _instanceof = (o,Ctor)=>{ if(o null) return false let proto = Object.getPr
阅读全文
摘要：Object.create, 即生成一个新对象，同时将参数作为新对象的原型链 通过new将构造函数的原型设置到实例对象的原型链上，完成create的功能 基于new方法的方式有个问题，new作用的构造函数必须返回一个引用类型，而我们通常用Object.create(null)来创建一个原型链为空的对
阅读全文
摘要：h5离线缓存 离线缓存： 用户没有联网时，可以正常访问网站站点和应用 用户联网时，更新用户机器上的缓存文件 原理 通过一个.appcache文件的缓存机制(不是存储技术), 通过这个文件上的解析清单解析清单离线存储资源 这些资源会像cookie一样存储下来，当网络处于离线状态下时，通过离线缓存的数据
阅读全文
摘要：beforeunload 事件触发于 window、document 和它们的资源即将卸载时。 当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。
阅读全文
摘要：const getTag = (roots, map = {}) => { if (!roots?.length) return [] Array.from(roots).forEach(node => { map[node.tagName] = ''; getTag(node.children,
阅读全文
摘要：如何实现一个Promise (目录) 1 实现Promise构造函数 Promise自身包含一个状态属性PromiseStaus，一个异步结果属性PromiseResult 状态只在pending、fulfilled、rejected之间枚举，改变状态的两个函数resolve、reject由Prom
阅读全文
摘要：ES6 Iterator迭代器 与 Generator生成器 1.1 为什么要有 Iterator 在ES6语法中，有序数据结构已有许多 如Array、Set、Map、String、类数组(如arguments)等 当我们不确定数据是何种类型但又要对它进行遍历时，我们只能去做针对性的判断处理 因此，
阅读全文
摘要：冒泡排序与优化 冒泡排序是一种简单经典的排序,通过比较相邻位置,在第n趟比较结束之后即可确定第n大/小的值,比较结束后全部元素按照顺序排列 时间复杂度 平均时间复杂度为O(n²),最优为O(n),属于性能比较差的排序方式 空间复杂度 由于只在数组里面进行元素位置的交换,属于原地排序,不分配额外内存空
阅读全文
摘要：leetcode 1 两数之和 O(n)时间复杂度实现 描述： 输入：nums = [2,7,11,15], target = 9 输出：[0,1] 解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1]。 /** 思路： map实现 一个数为a,另一个数即为diff = s
阅读全文
摘要：正则判断多个数字之间只能用逗号分隔 /^[0-9]+(,[0-9]+){0,}$/.test(val)
阅读全文
