代码手撕/算法与数据结构（施工中）

type

status

date

slug

summary

前端相关

实现防抖

防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的技术，但它们的实现方式和应用场景有所不同。

防抖是等待一段时间后执行最后一次触发事件的函数调用，节流是按照固定间隔执行函数调用。

防抖适用于需要等待用户停止操作后执行的情况，节流适用于需要控制函数执行频率的情况。

定时器思路：

实现节流

前文提到，防抖是等用户停下来后一段时间再执行最后一次，而节流是固定一个时间间隔才执行一次，所以

定时器思路：如果之前有定时器存在，不执行操作直接返回，否则创建定时器

时间戳思路：每次触发事件时，比较当前时间和闭包变量里的上次时间，如果差值大于 delay 才执行函数

实现深拷贝

首先看下浅拷贝，浅拷贝是拷贝一层，深层次的引用类型则共享内存地址；

在JavaScript中，存在浅拷贝的有：

Object.assign

Array.prototype.slice(), Array.prototype.concat()

使用拓展运算符实现的复制

深拷贝时，新对象有不同的地址，修改新对象里层的属性，也不会改变原来对象相同位置的属性，常用的方式有

lodash 库的 _.cloneDeep()

JSON.stringify() 转换为 JSON 字符串，再用 JSON.parse() 方法解析 JSON 字符串

手写循环递归

this 系列

this 场景输出题复习

手写 call

apply、call、bind三者的区别在于：

三者都可以改变函数的this对象指向

三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window

三者都可以传参，但是apply是数组，而call是参数列表；

bind 是返回绑定this之后的函数，可多次传入参数；apply、call 则是立即执行，只能一次性传入参数

手写 bind

实现思路：返回的是一个新函数，可以分多次传入参数

修改this指向

动态传递参数

兼容 new 关键字

在 Javascript 中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

Promise 异步加载图片

先复习一下 Promise 流程：面试官：你是怎么理解ES6中 Promise的？使用场景？ | web前端面试 - 面试官系列 (vue3js.cn)。

使用 Promise 时，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject ，前者将将Promise对象的状态从“未完成”变为“成功”，后者将Promise对象的状态从“未完成”变为“失败”

最简单地，将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化

调用以上函数，then 方法返回的也是 Promise 对象，所以可以链式地实现先加载第一张再加载第二张图片

Promise 实现红绿灯交替重复点亮

使用 Promise 实现红绿灯交替重复亮，红灯 3 秒亮一次，黄灯 2 秒亮一次，绿灯 1 秒亮一次；如何让三个灯不断交替重复亮灯？三个亮灯函数已经存在：

思路：在 Promise 中使用定时器实现延时亮一盏灯，链式执行亮灯函数，并构造一个无限递归的函数；

实现 promise.all 和 race

参考

我的面试题仓库：

首页 - 前端面试题宝典 (ecool.fun)

代码手撕/算法与数据结构 （施工中）