经典手写
sleep延时函数
基于promise
点击执行，可以在控制台中查看可能的执行结果
基于Date.now()
点击执行，可以在控制台中查看可能的执行结果
函数式编程
实现下面函数
点击执行，可以在控制台中查看可能的执行结果
扁平数组转树
- 法1 简单易懂，性能能差
点击执行，可以在控制台中查看可能的执行结果
- 法2 一次遍历
点击执行，可以在控制台中查看可能的执行结果
数组扁平化
点击执行，可以在控制台中查看可能的执行结果
数组去重
两个属性相同的对象也认为是相同的
点击执行，可以在控制台中查看可能的执行结果
数组打乱顺序
点击执行，可以在控制台中查看可能的执行结果
为什么不用sort, 如
arr.sort((a, b) => Math.random() - 0.5)sort算法会导致程序不稳定，极端条件下可能不会打乱顺序
柯里化
点击执行，可以在控制台中查看可能的执行结果
深浅拷贝
浅拷贝
- 展开运算符
... Object.assign
深拷贝
- 可以通过
JSON.parse(JSON.stringify(object))来解决- 会忽略
undefined和函数 - 不能解决循环引用的对象
- 将Date对象转换为字符串
- 会忽略
- 第三方库lodash, 递归拷贝
点击执行，可以在控制台中查看可能的执行结果
- structuredClone() API 结构化克隆算法
- core-js 已经支持 structuredClone 的 polyfill
- 是浏览器提供的原生API，内部实现已经处理了许多复杂的细节和边缘情况，如循环引用、嵌套对象等，性能更好
- 可以用于跨线程或跨工作线程的数据传输
- 不支持拷贝某些复杂类型，如 Function、Dom节点、及对象上的一些特殊参数getter/setter/原型链等
点击执行，可以在控制台中查看可能的执行结果
防抖
仅执行一段时间内的最后一次操作
普通的js防抖
点击执行，可以在控制台中查看可能的执行结果
vue3中使用自定义ref实现防抖
typescript中防抖函数的写法
function debounce<T extends (...args: unknown[]) => unknown>(fn: T, wait: number = 50) {
let timer: NodeJS.Timeout | null = null;
return function(this: unknown, ...args: Parameters<T>) {
timer && clearTimeout(timer);
const context = this;
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
}
}节流
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行
点击执行，可以在控制台中查看可能的执行结果
解析URL中的参数
- 法1 浏览器API
点击执行，可以在控制台中查看可能的执行结果
- 法2
点击执行，可以在控制台中查看可能的执行结果
双向数据绑定mvvm
Object.defineProperty
proxy实现
优劣对比
Proxy 的优势如下:
- Proxy 可以直接监听对象而非属性；
- Proxy 可以直接监听数组的变化；
- Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
- Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
- Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
Object.defineProperty 的优势如下:
- 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
LRU最久未使用队列
点击执行，可以在控制台中查看可能的执行结果
memoize可记忆函数
点击执行，可以在控制台中查看可能的执行结果
大数相加
点击执行，可以在控制台中查看可能的执行结果
请求超时取消
点击执行，可以在控制台中查看可能的执行结果
任务链
点击执行，可以在控制台中查看可能的执行结果
反转字符串
点击执行，可以在控制台中查看可能的执行结果
可暂停的倒计时
点击执行，可以在控制台中查看可能的执行结果
最长递增子序列
思路：贪心算法 + 二分查找 + 反向链表 动态规划 + 贪心算法 + 二分查找 + 回溯结合 https://segmentfault.com/a/1190000039838442
点击执行，可以在控制台中查看可能的执行结果