1.浅拷贝 创建一个新对象，这个对象有原始对象属性值的一份精确拷贝，如果是基本数据类型，拷贝的就是基本类型的值，如果是引用数据类型，拷贝的就是内存地址
2.深拷贝和浅拷贝最大的区别是：拷贝引用数据类型时，拷贝的不是内存地址而是要从堆内存中开辟一个新的区域存放新对象，彼此完全独立
3.防抖（等用户高频事件完了再进行事件操作）
设计思路
function debounce(delay, callback) {
let timer;
// timer 变量需要一直保存在内存当中 闭包
return (value)=> {
clearTimeout(timer); //清除之前触发的定时器
timer = setTimeout(() => {
callback(value);
}, delay);
};
}
function fn(value) {
console.log('value', value);
}
const debounceFunc = debounce(1000, fn);
const input = document.getElementById('input');
input?.addEventListener('keyup', (e) => {
debounceFunc(e.target?.value);
});
- 应用场景
（1）search搜索联想，用户在不断输入值时，用防抖来节约请求资源
（2）window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
4.节流
防抖存在一个问题，事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发布出去。这里正确的思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。
节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率
总结：某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。
function throttle(func, wait) {
let timeOut;
return () => {
if (!timeOut) {
// 如果timeOut有值就不执行
timeOut = setTimeout(() => {
func();
timeOut = null;
}, wait);
}
};
}
function handle() {
console.log(Math.random());
}
document.getElementById('button')!.onclick = throttle(handle, 2000);
- 应用场景
（1）鼠标不断点击触发，mousedown(单位时间内只触发一次)
（2）监听滚动事件，比如是否滑到底部自动加载更多
总结
-
防抖和节流相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。 -
防抖和节流区别：
防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。
网友评论