随笔分类 - JS/TS
摘要：解决办法 tsconfig.json { "compilerOptions": { "typeRoots": ["./node_modules/@types/", "./custom/path/to/declarations/"] }, } 示例 例如，在根目录下新建 types 目录 types/
阅读全文
摘要：不要使用 for in，参考这里 for (const [key, val] of Object.entries(obj)) { console.log(key, val) }
阅读全文
摘要：立即调用的函数表达式（Immediately Invoked Function Expression）简称 IIFE，是一个JavaScript函数，一旦JavaScript运行时对其求值，它就会立即被调用。下面是一段大致相等的代码： // IIFE (function (message) { co
阅读全文
摘要：filename/ dirname require resolve 替代方案：import.meta.url process. env 替代方案：import.meta.env
阅读全文
摘要：function fileSelected(e: Event) { const target = e.target as HTMLInputElement const file: File = (target.files as FileList)[0] // ... }
阅读全文
摘要：语法 _.template([string=''], [options={}]) 创建一个已编译的模板函数，该函数可以在 interpolate 分隔符中插入数据属性，在 escape 分隔符中插入 HTML escape interpolated 数据属性，并在 evaluate 分隔符中执行 J
阅读全文
摘要：前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中，比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中，比如你可以看见头部导航条中的博客昵称
阅读全文
摘要：泛型 基本 function add<t>(arg1: T, arg2: T): T { return arg1 + arg2 } // add<number>(1,'0') X 泛型接口 function add<T>(arg1:T,arg2:T):T { return arg1 + arg2 }
阅读全文
摘要：这里记录一些常用的 ts config。 strictNullChecks "strictNullChecks": true 严格区分 undefined 和 null let weight: number | undefined weight = undefined // ?相当于 string
阅读全文
摘要：前置 原型是 JavaScript 巧妙的设计，它非常容易理解。都 2020 年了，看完这篇希望你以后不需要再重复学习 JavaScript 原型了。如有不当之处，恳请指点一二！ 单词 下面是相关单词及其翻译,牢牢记住它们就成功一半了。 constructor 构造器 proto & prototy
阅读全文
摘要：" " 前置 正如你所见,我现在用的这个博客皮肤,在没优化之前帧率会降到个位数. 现在与之相比,是不是好很多呀? 下面将从滚动 scroll 优化这一方面展开,主要说一下思路. 只在极少情况下会降到 30fps,一般稳定在 55 60fps. 头部导航条 头部导航条会监听滚动条上下滚动的方向随之展开
阅读全文
摘要：V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。 新生代算法 新生代中的对象一般存活时间较短，使用 Scavenge GC 算法。 在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。在这两个空间中，必定有一个空间
阅读全文
摘要：Proxy Proxy 是 ES6 中新增的功能，可以用来自定义对象中的操作 let p = new Proxy(target, handler); // `target` 代表需要添加代理的对象 // `handler` 用来自定义对象中的操作 // 可以很方便的使用 Proxy 来实现一个数据绑
阅读全文
摘要：Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个
阅读全文
摘要：call, apply, bind 区别 首先说下前两者的区别。 call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。 除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组。 模拟实现 call 和 apply 可以从以下几点
阅读全文
摘要：Map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后 append 到新的数组中。 Map 有三个参数，分别是当前索引元素，索引，原数组 FlatMap 和 map 的作用几乎是相同的，但是对于多维数组来说，会将原数组降维。可以将 FlatMap 看成是 map + flatte
阅读全文
摘要：Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程 从以上代码可以发现，加上 的函数执行后拥有了 next 函数，也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现 参考资料： "前端
阅读全文
摘要：一个函数如果加上 async ，那么该函数就会返回一个 Promise 上面代码会先打印 finish 然后再打印 object 。因为 await 会等待 sleep 函数 resolve ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。 async 和 await 相比直接使用
阅读全文
摘要：元字符 |元字符 | 作用 | |: : | : | |. | 匹配任意字符除了换行符和回车符 | |[] | 匹配方括号内的任意字符。比如 [0 9] 就可以用来匹配任意数字 | |^ | ^9，这样使用代表匹配以 9 开头。[^9]，这样使用代表不匹配方括号内除了 9 的字符 | |{1, 2}
阅读全文
摘要：在 ES5 中，我们可以使用如下方式解决继承的问题 以上继承实现思路就是将子类的原型设置为父类的原型 在ES6 中，我们可以通过 class 语法轻松解决这个问题 但是 ES6 不是所有浏览器都兼容，所以我们需要使用 Babel 来编译这段代码。 如果你使用编译过得代码调用 myDate.test(
阅读全文