type
status
date
slug
summary
tags
category
icon
password

一、JavaScript 基础

1. 手写 Object.create

思路：将传入的对象作为原型

2. 手写 instanceof 方法

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
实现步骤：
  1. 首先获取类型的原型
  1. 然后获得对象的原型
  1. 然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 null
具体实现：

3. 手写 new 操作符

在调用 new 的过程中会发生以上四件事情：
（1）首先创建了一个新的空对象
（2）设置原型，将对象的原型设置为函数的 prototype 对象。
（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）
（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

4. 手写 Promise

5. 手写 Promise.then

then 方法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，我们使用一个 callbacks 数组先把传给then的函数暂存起来，等状态改变时再调用。
那么，怎么保证后一个 **then** 里的方法在前一个 **then**（可能是异步）结束之后再执行呢？
我们可以将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的效果：
  • 承前：当前一个 promise 完成后，调用其 resolve 变更状态，在这个 resolve 里会依次调用 callbacks 里的回调，这样就执行了 then 里的方法了
  • 启后：上一步中，当 then 里的方法执行完成后，返回一个结果，如果这个结果是个简单的值，就直接调用新 promise 的 resolve，让其状态变更，这又会依次调用新 promise 的 callbacks 数组里的方法，循环往复。。如果返回的结果是个 promise，则需要等它完成之后再触发新 promise 的 resolve，所以可以在其结果的 then 里调用新 promise 的 resolve
注意：
  • 连续多个 then 里的回调方法是同步注册的，但注册到了不同的 callbacks 数组中，因为每次 then 都返回新的 promise 实例（参考上面的例子和图）
  • 注册完成后开始执行构造函数中的异步事件，异步完成之后依次调用 callbacks 数组中提前注册的回调

6. 手写 Promise.all

1) 核心思路
  1. 接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数
  1. 这个方法返回一个新的 promise 对象，
  1. 遍历传入的参数，用Promise.resolve()将参数”包一层”，使其变成一个promise对象
  1. 参数所有回调成功才是成功，返回值数组与参数顺序一致
  1. 参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。
2）实现代码
一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来，这就看当前页面的耦合程度了

7. 手写 Promise.race

该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态只能改变一次, 那么我们只需要把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可.

8. 手写防抖函数

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

9. 手写节流函数

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

10. 手写类型判断函数

11. 手写 call 函数

call 函数的实现步骤：
  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  1. 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  1. 处理传入的参数，截取第一个参数后的所有参数。
  1. 将函数作为上下文对象的一个属性。
  1. 使用上下文对象来调用这个方法，并保存返回结果。
  1. 删除刚才新增的属性。
  1. 返回结果。

12. 手写 apply 函数

apply 函数的实现步骤：
  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  1. 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  1. 将函数作为上下文对象的一个属性。
  1. 判断参数值是否传入
  1. 使用上下文对象来调用这个方法，并保存返回结果。
  1. 删除刚才新增的属性
  1. 返回结果

13. 手写 bind 函数

bind 函数的实现步骤：
  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  1. 保存当前函数的引用，获取其余传入参数值。
  1. 创建一个函数返回
  1. 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。

二、数据处理

1. 实现日期格式化函数

输入：

2. 交换a,b的值，不能用临时变量

巧妙的利用两个数的和、差：

3. 实现数组的乱序输出

主要的实现思路就是：
  • 取出数组的第一个元素，随机产生一个索引值，将该第一个元素和这个索引对应的元素进行交换。
  • 第二次取出数据数组第二个元素，随机产生一个除了索引为1的之外的索引值，并将第二个元素与该索引值对应的元素进行交换
  • 按照上面的规律执行，直到遍历完成
还有一方法就是倒序遍历：

4. 实现数组元素求和

  • arr=[1,2,3,4,5,6,7,8,9,10]，求和
  • arr=[1,2,3,[[4,5],6],7,8,9]，求和
递归实现：

5. 实现数组的扁平化

（1）递归实现
普通的递归思路很容易理解，就是通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接：
（2）reduce 函数迭代
从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么其实也可以用reduce 来实现数组的拼接，从而简化第一种方法的代码，改造后的代码如下所示：
（3）扩展运算符实现
这个方法的实现，采用了扩展运算符和 some 的方法，两者共同使用，达到数组扁平化的目的：

6

三、场景应用

1. 循环打印红黄绿

下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯不断交替重复亮灯？
三个亮灯函数：
这道题复杂的地方在于需要“交替重复”亮灯，而不是“亮完一次”就结束了。

（1）用 callback 实现

这里存在一个 bug：代码只是完成了一次流程，执行后红黄绿灯分别只亮一次。该如何让它交替重复进行呢？
上面提到过递归，可以递归亮灯的一个周期：
注意看黄灯亮的回调里又再次调用了 step 方法 以完成循环亮灯。

（2）用 promise 实现

这里将回调移除，在一次亮灯结束后，resolve 当前 promise，并依然使用递归进行。

（3）用 async/await 实现

2. 实现每隔一秒打印 1,2,3,4

3. 小孩报数问题

有30个小孩儿，编号从1-30，围成一圈依此报数，1、2、3 数到 3 的小孩儿退出这个圈， 然后下一个小孩 重新报数 1、2、3，问最后剩下的那个小孩儿的编号是多少?

4. 用Promise实现图片的异步加载

5. 实现发布-订阅模式