lodash手写源码-cloneDeep,debounce,throttle
目录
lodash手写源码-cloneDeep,debounce,throttle
一、源码地址
- GitHub 地址 :
- 官方文档地址 :
二、函数介绍
_.cloneDeep
- 深拷贝对象
用于创建一个对象或数组的深拷贝，即递归地复制对象及其所有嵌套的属性， 新对象与原对象在内存中是完全独立的。
浅拷贝
浅拷贝创建一个新对象，新对象的属性会 直接复制原对象的属性 。但对于引用类型的属性，浅拷贝仅仅复制其 引用 ，而不是复制实际的对象。这意味着新对象和原对象中的引用类型属性会指向 同一个内存地址 ， 修改其中一个对象的引用类型属性会影响到另一个对象 。
- 使用
Object.assign()：用于将一个或多个源对象的所有可枚举属性复制到目标对象。
const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
// 修改浅拷贝对象的引用类型属性
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出: 3，说明原对象也被修改了
- 使用扩展运算符 ：是一种更简洁的对象复制方式。
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出: 3
深拷贝
深拷贝同样创建一个新对象，并且会 递归 地复制原对象的所有属性，包括嵌套的引用类型属性。这会在内存中创建一个完全独立的对象，新对象和原对象在内存中没有共享的部分，修 改新对象不会影响原对象 。
- 使用
JSON.parse(JSON.stringify())：这种方法简单直接，但有局限性，比如不能处理函数、正则表达式等特殊对象。
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 输出: 2，原对象未被修改
- 手写递归函数 ：可以处理各种类型的对象，但实现相对复杂。
_.debounce
- 防抖函数
防抖函数用于限制一个函数 在一定时间内只能被调用一次 。当持续触发事件时，在规定时间内没有再次触发事件，函数才会执行；如果在规定时间内 再次触发事件，则重新计时 。
_.throttle
- 节流函数
节流函数用于限制一个函数在一定时间内只能被调用一次。当持续触发事件时， 在规定时间内，函数只会执行一次 ，之后在这个时间间隔内 再次触发事件，函数不会执行 。
三、手写代码
_.cloneDeep
function cloneDeep(obj) {
if (typeof obj!== 'object' || obj === null) {
return obj;
}
let clone = Array.isArray(obj)? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = cloneDeep(obj[key]);
}
}
return clone;
}
// 测试
const original = { a: 1, b: { c: 2 } };
const cloned = cloneDeep(original);
console.log(cloned);
_.debounce
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// 测试
function myFunction() {
console.log('Function called');
}
const debouncedFunction = debounce(myFunction, 1000);
debouncedFunction();
debouncedFunction();
_.throttle
function throttle(func, delay) {
// 记录上一次执行函数的时间，初始值为 0
let lastTime = 0;
// 返回一个新的函数，这个新函数就是节流后的函数
return function() {
// 获取当前的时间戳
const now = Date.now();
// 如果当前时间与上一次执行时间的差值大于等于设定的延迟时间
if (now - lastTime >= delay) {
// 调用传入的原始函数，并使用 apply 方法绑定正确的 this 值和参数
func.apply(this, arguments);
// 更新上一次执行函数的时间为当前时间
lastTime = now;
}
};
}
// 示例使用
function sayHello() {
console.log('Hello!');
}
// 创建一个节流后的函数，每 2000 毫秒（2 秒）执行一次
const throttledSayHello = throttle(sayHello, 2000);
// 模拟频繁调用
setInterval(throttledSayHello, 200);