「中高级前端」2021常用JavaScript技巧自查

前言

• 之前没事，写一些比较常用或面试考察的手写方法，最近花了 2 天时间进行了反复修改完善并整理，金三银四，希望能帮到大家，offer 拿到手软，BAT 不再是梦！
• 文中代码对应的详细注释和具体使用方法都放在我的 GitHub 上，欢迎 Star。
• 贴代码工具：carbon

1. 判断数据类型

1.1 typeof

• typeof 返回基本数据类型（null 除外，由于设计失误 typeof null 返回 object）和引用类型（function）。
• null、undefined、number、string、boolean、symbol、bigint、function。

1.2 instanceof

• instanceof 用于判断一个变量是否某个对象的实例，返回 true / false 。

1.3 使用 Object 对象上的 toString 方法

• 通过 call 方法调用，返回的是一个固定格式的字符串“[object Number]”，我们去掉前面固定的 “[object ”和后面的 “]”，剩下的就是我们要的结果，返回的是和内置名称一致的字符串（例如：Date、RegExp、Math、JSON、BigInt...）；

NaN

• NaN 是 Number，所以要判断是否是 NaN，可以使用内置的isNaN 方法，该方法返回 true / false 。

2. 实现 instaceof

• instanceof 用于判断一个变量是否某个对象的实例。

3. 实现 new 操作符

• new 做了什么：
  1. 创建了一个全新的对象；
  2. 会被执行 [[Prototype]]（也就是 __proto__ ）链接；
  3. this 指向新创建的对象；
  4. 通过 new 创建的每个对象将最终被 [[Prototype]] 链接到这个函数的prototype对象上；
  5. 如果函数没有返回对象类型 Object(包含 Functoin , Array , Date , RegExg, Error)，那么 new 表达式中的函数调用将返回该对象引用。

3.1 普通写法

3.2 箭头函数写法

3.3 测试结果

4. 类 JAVA sleep 函数

• sleep 函数可以让当前线程进行休眠指定时间。

4.1 使用循环

• 使用 time 打印执行时间会有一定误差。

4.2 Promise

• 使用 Promise 实现的，我更倾向理解为延迟，它不会中断当前执行代码，只是微任务，在延迟之后执行！

• then 方法调用

- async/await 方式

4.3 Generator

• 使用 Generator 实现的与 Promise 类似。

5. Promise

• 请点击跳转链接 -> ES6 Promise最全手写实现

6. 绑定 this

• 相同点：
  • call、bind、 apply 都是用来改变 this 指向的。
  • call、bind、 apply 这三个函数的第一个参数都是 this 的指向对象。
• 不同点：
  • call 参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔。
  • apply 的所有参数都必须放在一个数组里面。
  • bind 除了返回是函数以外，它的参数和 call 一样。

6.1 call

• 不传入参数，默认指向为 window；
• 将函数设为对象的属性；
• 传入给定参数给执行函数并执行、删除这个函数。

6.2 apply

• 与 call 类似，第二参数为数组。

6.3 bind

• 与 call 类似，返回的是一个函数。

6.4 测试结果

7. 防抖

• 防抖：在限制的时间范围内连续触发相同事件，函数不会执行，直到间隔大于限制事件才执行。

8. 节流

• 节流：连续触发相同事件每隔指定时间调用一次。

8.1 时间戳版节流

8.2 定时器版节流

9. 柯里化

• 将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

9.1 普通版

9.2 ES6版

• 参考地址

10. Iterator

• 作用：
  1. 为各种数据结构，提供一个统一的、简便的访问接口；
  2. 使得数据结构的成员能够按某种次序排列；
  3. ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供for...of 消费。
• 遍历过程：
  1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
  2. 第一次调用指针对象的 next 方法，可以将指针指向数据结构的第一个成员。
  3. 第二次调用指针对象的 next 方法，指针就指向数据结构的第二个成员。
  4. 不断调用指针对象的 next 方法，直到它指向数据结构的结束位置。
• 原生具备 Iterator 接口的数据结构：Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象。

10.1 判断是否有 Iterator 接口

10.2 手动添加 Iterator 接口

• 例：对象

• 测试

11. 封装浏览器本地存储 localStorage、sessionStorage

• 通过 new 操作符创建一个localStorage / sessionStorage的实例，在需要用的地方引入该实例，使用方法和之前类似，setItem 额外提供第三个参数设置过期时间。
• 额外提供两个方法 getAll（获取当前存储类型的所有存储内容的键值对象）、forEach（遍历所有存储内容，接收一个处理函数，函数接收两个参数：存储键名、对应的值）。

12. 数组 flat

• flat 方法是把多维数组进行指定维度的扁平化。
  • 不传参数，维度降一。
  • 传入 Number，大于最大维度，降为一维；小于 1 返回原始数组。
  • 传入 Infinity 降为一维;
  • 传入其他能转为 Number，转为 Number 再根据上面的规则判断，否则返回原始数组。

12.1 任意维度降一维（数据类型不变）

12.2 任意维度降一维（数据类型变字符串）

12.3 指定维度 - ES6 数组方法

12.4 指定维度 - js 递归

13. 发布/订阅模式

• JS和多端应用通信
• 通过 new 操作符创建一个EventEmitter的实例，在需要用的地方引入该实例
  • add：注册事件；
  • once：注册只执行一次的事件，执行后销毁；
  • remove：移除事件支持全部移除、指定回调方法/下标（第几次绑定的事件）；
  • removeByIndex：支持全部移除/指定下标（第几次绑定的事件）；
  • removeByCallback：支持全部移除/指定回调方法；
  • dispatch：触发指定事件；
  • clear：清除全部注册事件；
  • getAll：获取全部注册事件；
  • forEach：遍历所有注册事件，并接受回调函数，回调函数接收两个参数：事件名称、事件注册的回调函数数组。

14. 对象数组过滤/去重

• 在开发中，我们拿到一个数组，数组的每个索引值是一个对象，由于对象可能存在很多的属性，我们需要只获取某个条件下对应对象指定的几个属性（过滤）；或存在我们只需要某个相同属性值第一次出现的对象（去重）。

14.1 过滤

14.2 去重

14.3 测试

15. 深拷贝

16. 判断浏览器、浏览器内核、PC/Mobile、手机类型、操作系统

• 手机类型：iPhone, Pixel, Moto, iPad, iPod
• 浏览器类型：Opera, Firefox, Chrome, Safari,WeChat, QQ
• 内核类型：Trident, Presto, WebKit, Gecko
• 操作系统类型：Mac, iOS, Android, Linux, Unix, Win, Win7, Win2000, Win2003, WinXP, WinVista
• 电脑/手机：PC、Mobile

17. 常用简短代码

17.1 生成指定位数随机验证码

17.2 快速生成有规律自定义数组

17.3 数字千分位

17.4 驼峰转指定符号格式字符串

17.5 密码组合正则至少包含 2 种

后言

• 之前写的 Promise 不满足 PromiseA+ 的规范，后续会持续完善，并更新到 GitHub 仓库 。

往期精彩

• JavaScript设计模式之行为型模式（下）
• JavaScript设计模式之行为型模式（上）
• JavaScript设计模式之结构型模式
• JavaScript设计模式之简介及创建型模式
• 公众号打开小程序最佳解决方案（Vue）
• Axios你可能不知道使用方式

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️，创作不易，鼓励笔者创作更好的文章，谢谢?大家。