一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧

╰+哭是因爲堅強的太久メ 2023-09-30 16:55 17阅读 0赞

### 1. 判断对象的数据类型 ###

![format_png][]

使用 Object.prototype.toString 配合闭包，通过传入不同的判断类型来返回不同的判断函数，一行代码，简洁优雅灵活（注意传入 type 参数时首字母大写）

**不推荐将这个函数用来检测可能会产生包装类型的基本数据类型上,因为 call 始终会将第一个参数进行装箱操作，导致基本类型和包装类型无法区分**

### 2. 循环实现数组 map 方法 ###

![format_png 1][]

使用方法：将 selfMap 注入到 Array.prototype 上（下面数组的迭代方法同理）

![format_png 2][]

值得一提的是，map 的第二个参数为第一个参数回调中的 this 指向，如果第一个参数为箭头函数，那设置第二个 this 会因为箭头函数的词法绑定而失效

另外就是对稀疏数组的处理，通过 hasOwnProperty 来判断当前下标的元素是否存在与数组中(感谢评论区的朋友)

### 3. 使用 reduce 实现数组 map 方法 ###

![format_png 3][]

### 4. 循环实现数组 filter 方法 ###

![format_png 4][]

### 5. 使用 reduce 实现数组 filter 方法 ###

![format_png 5][]

### 6. 循环实现数组的 some 方法 ###

![format_png 6][]

执行 some 方法的数组如果是一个空数组，最终始终会返回 `false`，而另一个数组的 every 方法中的数组如果是一个空数组，会始终返回 `true`

### 7. 循环实现数组的 reduce 方法 ###

![format_png 7][]

因为可能存在稀疏数组的关系，所以 reduce 需要保证跳过稀疏元素，遍历正确的元素和下标(感谢@神三元的提供的代码)

### 8. 使用 reduce 实现数组的 flat 方法 ###

![format_png 8][]

因为 selfFlat 是依赖 this 指向的，所以在 reduce 遍历时需要指定 selfFlat 的 this 指向，否则会默认指向 window 从而发生错误

原理通过 reduce 遍历数组，遇到数组的某个元素仍是数组时，通过 ES6 的扩展运算符对其进行降维（ES5 可以使用 concat 方法），而这个数组元素可能内部还嵌套数组，所以需要递归调用 selfFlat

同时原生的 flat 方法支持一个 depth 参数表示降维的深度，默认为 1 即给数组降一层维度

![format_png 9][]

传入 Inifity 会将传入的数组变成一个一维数组

![format_png 10][]

原理是每递归一次将 depth 参数减 1，如果 depth 参数为 0 时，直接返回原数组

### 9. 实现 ES6 的 class 语法 ###

![format_png 11][]

ES6 的 class 内部是基于寄生组合式继承，它是目前最理想的继承方式，通过 Object.create 方法创造一个空对象，并将这个空对象继承 Object.create 方法的参数，再让子类（subType）的原型对象等于这个空对象，就可以实现子类实例的原型等于这个空对象，而这个空对象的原型又等于父类原型对象（superType.prototype）的继承关系

而 Object.create 支持第二个参数，即给生成的空对象定义属性和属性描述符/访问器描述符，我们可以给这个空对象定义一个 constructor 属性更加符合默认的继承行为，同时它是不可枚举的内部属性（enumerable:false）

而 ES6 的 class 允许子类继承父类的静态方法和静态属性，而普通的寄生组合式继承只能做到实例与实例之间的继承，对于类与类之间的继承需要额外定义方法，这里使用 Object.setPrototypeOf 将 superType 设置为 subType 的原型，从而能够从父类中继承静态方法和静态属性

### 10. 函数柯里化 ###

![format_png 12][]

使用方法：

![format_png 13][]

柯里化是函数式编程的一个重要技巧，将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术

函数式编程另一个重要的函数 compose，能够将函数进行组合，而组合的函数只接受一个参数，所以如果有接受多个函数的需求并且需要用到 compose 进行函数组合，就需要使用柯里化对准备组合的函数进行部分求值，让它始终只接受一个参数

借用[冴羽博客][Link 1]中的一个例子

![format_png 14][]

### 11. 函数柯里化（支持占位符） ###

![format_png 15][]

使用方法：

![format_png 16][]

![format_png 17][]

通过占位符能让柯里化更加灵活，实现思路是，每一轮传入的参数先去填充上一轮的占位符，如果当前轮参数含有占位符，则放到内部保存的数组末尾，当前轮的元素不会去填充当前轮参数的占位符，只会填充之前传入的占位符

### 12. 偏函数 ###

![format_png 18][]

使用方法：

![format_png 19][]

偏函数和柯里化概念类似，个人认为它们区别在于偏函数会固定你传入的几个参数，再一次性接受剩下的参数，而函数柯里化会根据你传入参数不停的返回函数，直到参数个数满足被柯里化前函数的参数个数

Function.prototype.bind 函数就是一个偏函数的典型代表，它接受的第二个参数开始，为预先添加到绑定函数的参数列表中的参数，与 bind 不同的是，上面的这个函数同样支持占位符

### 13. 斐波那契数列及其优化 ###

![format_png 20][]

利用函数记忆，将之前运算过的结果保存下来，对于频繁依赖之前结果的计算能够节省大量的时间，例如斐波那契数列，缺点就是闭包中的 obj 对象会额外占用内存

另外使用动态规划比前者的空间复杂度更低，也是更推荐的解法

![format_png 21][]

### 14. 实现函数 bind 方法 ###

![format_png 22][]

实现函数的 bind 方法核心是利用 call 绑定 this 指向，同时考虑了一些其他情况，例如

*  bind 返回的函数被 new 调用作为构造函数时，绑定的值会失效并且改为 new 指定的对象
 *  定义了绑定后函数的 length 属性和 name 属性（不可枚举属性）
 *  绑定后函数的 prototype 需指向原函数的 prototype（`真实情况中绑定后的函数是没有 prototype 的，取而代之在绑定后的函数中有个 内部属性 [[TargetFunction]] 保存原函数，当将绑定后函数作为构造函数时，将创建的实例的 __proto__ 指向 [[TargetFunction]] 的 prototype，这里无法模拟内部属性，所以直接声明了一个 prototype 属性`）

### 15. 实现函数 call 方法 ###

![format_png 23][]

原理就是将函数作为传入的上下文参数（context）的属性执行，这里为了防止属性冲突使用了 ES6 的 Symbol 类型

### 16. 简易的 CO 模块 ###

![format_png 24][]

使用方法：

![format_png 25][]

run 函数接受一个生成器函数，每当 run 函数包裹的生成器函数遇到 yield 关键字就会停止，当 yield 后面的 promise 被解析成功后会自动调用 next 方法执行到下个 yield 关键字处，最终就会形成每当一个 promise 被解析成功就会解析下个 promise，当全部解析成功后打印所有解析的结果，衍变为现在用的最多的 async/await 语法

### 17. 函数防抖 ###

![format_png 26][]

leading 为是否在进入时立即执行一次，原理是利用定时器，如果在规定时间内再次触发事件会将上次的定时器清除，即不会执行函数并重新设置一个新的定时器，直到超过规定时间自动触发定时器中的函数

同时通过闭包向外暴露了一个 cancel 函数，使得外部能直接清除内部的计数器

### 18. 函数节流 ###

![format_png 27][]

和函数防抖类似，区别在于内部额外使用了时间戳作为判断，在一段时间内没有触发事件才允许下次事件触发，同时新增了 trailing 选项，表示是否在最后额外触发一次

### 19. 图片懒加载 ###

![format_png 28][]

getBoundClientRect 的实现方式，监听 scroll 事件（建议给监听事件添加节流），图片加载完会从 img 标签组成的 DOM 列表中删除，最后所有的图片加载完毕后需要解绑监听事件

![format_png 29][]

intersectionObserver 的实现方式，实例化一个 IntersectionObserver ，并使其观察所有 img 标签

当 img 标签进入可视区域时会执行实例化时的回调，同时给回调传入一个 entries 参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的 DOM 节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前 img 标签，同时解除对其的观察

### 20. new 关键字 ###

![format_png 30][]

### 21. 实现 Object.assign ###

![format_png 31][]

Object.assign 的原理可以参考我另外一篇[博客][Link 2]

### 22. instanceof ###

![format_png 32][]

原理是递归遍历 right 参数的原型链，每次和 left 参数作比较，遍历到原型链终点时则返回 false，找到则返回 true

### 23. 私有变量的实现 ###

![format_png 33][]

使用 Proxy 代理所有含有 `_` 开头的变量，使其不可被外部访问

![format_png 34][]

通过闭包的形式保存私有变量，缺点在于类的所有实例访问的都是同一个私有变量

![format_png 35][]

另一种闭包的实现，解决了上面那种闭包的缺点，每个实例都有各自的私有变量，缺点是舍弃了 class 语法的简洁性，将所有的特权方法（访问私有变量的方法）都保存在构造函数中

![format_png 36][]

通过 WeakMap 和闭包，在每次实例化时保存当前实例和所有私有变量组成的对象，外部无法访问闭包中的 WeakMap，使用 WeakMap 好处在于当没有变量引用到某个实例时，会自动释放这个实例保存的私有变量，减少内存溢出的问题

### 24. 洗牌算法 ###

早前的 chrome 对于元素小于 10 的数组会采用插入排序，这会导致对数组进行的乱序并不是真正的乱序，即使最新的版本 chrome 采用了原地算法使得排序变成了一个稳定的算法，对于乱序的问题仍没有解决

![format_png 37][]

![format_png 38][]

通过洗牌算法可以达到真正的乱序，洗牌算法分为原地和非原地，图一是原地的洗牌算法，不需要声明额外的数组从而更加节约内存占用率，原理是依次遍历数组的元素，将当前元素和之后的所有元素中随机选取一个，进行交换

### 25. 单例模式 ###

![format_png 39][]

通过 ES6 的 Proxy 拦截构造函数的执行方法来实现的单例模式

### 26. promisify ###

![format_png 40][]

使用方法：

![format_png 41][]

promisify 函数是将回调函数变为 promise 的辅助函数，适合 error-first 风格（nodejs）的回调函数，原理是给 error-first 风格的回调无论成功或者失败，在执行完毕后都会执行最后一个回调函数，我们需要做的就是让这个回调函数控制 promise 的状态即可

这里还用了 Proxy 代理了整个 fs 模块，拦截 get 方法，使得不需要手动给 fs 模块所有的方法都包裹一层 promisify 函数，更加的灵活

### 27. 优雅的处理 async/await ###

![format_png 42][]

使用方法：

![format_png 43][]

无需每次使用 async/await 都包裹一层 try/catch ，更加的优雅，这里提供另外一个思路，如果使用了 webpack 可以编写一个 loader，分析 AST 语法树，遇到 await 语法，自动注入 try/catch，这样连辅助函数都不需要使用

### 28. 发布订阅 EventEmitter ###

![format_png 44][]

通过 on 方法注册事件，trigger 方法触发事件，来达到事件之间的松散解耦，并且额外添加了 once 和 off 辅助函数用于注册只触发一次的事件以及注销事件

### 29. 实现 JSON.stringify（附加） ###

使用 JSON.stringify 将对象转为 JSON 字符串时，一些非法的数据类型会失真，主要表现如下

*  如果对象含有 toJSON 方法会调用 toJSON
 *  在数组中
 *  1.  存在 Undefined/Symbol/Function 数据类型时会变为 null
 *  1.  存在 Infinity/NaN 也会变成 null
 *  在对象中
 *  1.  属性值为 Undefined/Symbol/Function 数据类型时，属性和值都不会转为字符串
 *  1.  属性值为 Infinity/NaN ，属性值会变为 null
 *  日期数据类型的值会调用 toISOString
 *  非数组/对象/函数/日期的复杂数据类型会变成一个空对象
 *  循环引用会抛出错误

另外 JSON.stringify 还可以传入第二第三个可选参数，有兴趣的朋友可以深入了解

实现代码较长，这里我直接贴上对应源代码地址 [JSON.stringify][]

[format_png]: https://img-blog.csdnimg.cn/img_convert/e78a51b25b4e2f6133c8aed7e25cd199.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/8084bdfa7626f36f850592481c7056ee.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/13a559000e023ed8380c2564d44db9f5.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/0d646352128aa3c209597e71be2d658d.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/4cb3b8cb457b9b7813fc13b491a13216.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/8fb3256874dc886befc982485043b789.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/00d71b2c4178c5fde08d2f45d9583919.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/d0d21136aaf3bb83cabcf8da01736a01.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/25a9ec7921080d81027094ea8dcb4e7a.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/58b9472e73754b709fd1d9f24eaa5f06.webp?x-oss-process=image/format,png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/4516ec3ad38f06cabff851337fefd646.webp?x-oss-process=image/format,png
[format_png 11]: https://img-blog.csdnimg.cn/img_convert/0c8ffbeab0092284c3f58ae5d911084a.webp?x-oss-process=image/format,png
[format_png 12]: https://img-blog.csdnimg.cn/img_convert/283900d759c2f823790294ffe36f769a.webp?x-oss-process=image/format,png
[format_png 13]: https://img-blog.csdnimg.cn/img_convert/4d53466e545fff133643f32468dd4967.webp?x-oss-process=image/format,png
[Link 1]: https://juejin.im/post/6844903493740789774
[format_png 14]: https://img-blog.csdnimg.cn/img_convert/2d4bf86ec264a6d4319a63be6322cc0d.webp?x-oss-process=image/format,png
[format_png 15]: https://img-blog.csdnimg.cn/img_convert/4959c3125486b712584cb62180ed19c9.webp?x-oss-process=image/format,png
[format_png 16]: https://img-blog.csdnimg.cn/img_convert/e28d04008e250d4ea2e0c7d92464b88c.webp?x-oss-process=image/format,png
[format_png 17]: https://img-blog.csdnimg.cn/img_convert/5ab5d5309c25591488430a71c6ba482d.webp?x-oss-process=image/format,png
[format_png 18]: https://img-blog.csdnimg.cn/img_convert/14b0d7f121ab46bb2f349ba9c2bd3b10.webp?x-oss-process=image/format,png
[format_png 19]: https://img-blog.csdnimg.cn/img_convert/10f044947189f2182210cc07fdd029f6.webp?x-oss-process=image/format,png
[format_png 20]: https://img-blog.csdnimg.cn/img_convert/f3f3d69f44e9a2b6021a2797e6a4c7bf.webp?x-oss-process=image/format,png
[format_png 21]: https://img-blog.csdnimg.cn/img_convert/7f73d8588c20172d427f045f7ca7b9e2.webp?x-oss-process=image/format,png
[format_png 22]: https://img-blog.csdnimg.cn/img_convert/b85752753e0a2aae5cae19d4d9228970.webp?x-oss-process=image/format,png
[format_png 23]: https://img-blog.csdnimg.cn/img_convert/9d4fbe12c4291524afceb42d2fa5f3c0.webp?x-oss-process=image/format,png
[format_png 24]: https://img-blog.csdnimg.cn/img_convert/4e2de8b654eb8fcc8b7e5f17346524fb.webp?x-oss-process=image/format,png
[format_png 25]: https://img-blog.csdnimg.cn/img_convert/f9546487cc11f48774cf22d7f9688d26.webp?x-oss-process=image/format,png
[format_png 26]: https://img-blog.csdnimg.cn/img_convert/f25c81575c7cb5a71c0ba094b157546f.webp?x-oss-process=image/format,png
[format_png 27]: https://img-blog.csdnimg.cn/img_convert/5c7f3ebbed90fe7800f9606960334dfa.webp?x-oss-process=image/format,png
[format_png 28]: https://img-blog.csdnimg.cn/img_convert/5829b67a14de04c2f5de71ec213b7b5d.webp?x-oss-process=image/format,png
[format_png 29]: https://img-blog.csdnimg.cn/img_convert/c9e47f18e7f9a7e54545fe44a1ec1327.webp?x-oss-process=image/format,png
[format_png 30]: https://img-blog.csdnimg.cn/img_convert/8e7026088f65246e0f2e49ee688302a2.webp?x-oss-process=image/format,png
[format_png 31]: https://img-blog.csdnimg.cn/img_convert/b1a2c9c97e2e167c895eeccc2e85ece7.webp?x-oss-process=image/format,png
[Link 2]: https://juejin.im/post/6844903775329583112#heading-34
[format_png 32]: https://img-blog.csdnimg.cn/img_convert/4a166fbe0654ee36d77e4826b32694a9.webp?x-oss-process=image/format,png
[format_png 33]: https://img-blog.csdnimg.cn/img_convert/40a9e5aaad4c69cf7f010ae1128c00e2.webp?x-oss-process=image/format,png
[format_png 34]: https://img-blog.csdnimg.cn/img_convert/9efe3f1c7b85957ac0bd5607838bbb72.webp?x-oss-process=image/format,png
[format_png 35]: https://img-blog.csdnimg.cn/img_convert/1f68cd083248b6b75033635f5f90615d.webp?x-oss-process=image/format,png
[format_png 36]: https://img-blog.csdnimg.cn/img_convert/10bae7b9ca69b16967c526f6a3fef52e.webp?x-oss-process=image/format,png
[format_png 37]: https://img-blog.csdnimg.cn/img_convert/d1a41a076b6162172e053e4cec19ca2c.webp?x-oss-process=image/format,png
[format_png 38]: https://img-blog.csdnimg.cn/img_convert/59cc4e5a661c0cfb26db07c78cf498a1.webp?x-oss-process=image/format,png
[format_png 39]: https://img-blog.csdnimg.cn/img_convert/ae524b344288377518fcf53bfb07c758.webp?x-oss-process=image/format,png
[format_png 40]: https://img-blog.csdnimg.cn/img_convert/c511f98a518cf6ced5de0997cb980aff.webp?x-oss-process=image/format,png
[format_png 41]: https://img-blog.csdnimg.cn/img_convert/c347e298f1eb41e828005fa5e6635789.webp?x-oss-process=image/format,png
[format_png 42]: https://img-blog.csdnimg.cn/img_convert/75f8e5b598371226345486e2a101c5d6.webp?x-oss-process=image/format,png
[format_png 43]: https://img-blog.csdnimg.cn/img_convert/2b44803a7ba4e06719c5ba4fb6c4abfd.webp?x-oss-process=image/format,png
[format_png 44]: https://img-blog.csdnimg.cn/img_convert/949ed33b2bda8df6201c0cb6fa3efa88.webp?x-oss-process=image/format,png
[JSON.stringify]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyeyan1996%2FJavaScript%2Fblob%2Fmaster%2Fjson.js