当前位置：首页 > news >正文

JavaScript 笔记 --- part8 --- JS进阶 (part3)

news 来源：原创 2025/5/6 9:34:19

JS 进阶(part3)

深浅拷贝

只针对引用类型

浅拷贝

浅拷贝只拷贝外面一层的属性, 如果对象里面还有对象, 那么这个对象的引用会被拷贝过去, 所以修改其中一个属性会影响到另一个对象

const obj = {name: "zhangsan",age: 18,child: {name: "xiaoming",age: 10,},
};const obj2 = { ...obj };
console.log(obj2); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}obj2.name = "lisi";
obj2.child.age = 12;
console.log(obj); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 12}}const obj3 = {};
Object.assign(obj3, obj);
console.log(obj3); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}obj3.name = "wangwu";
obj3.child.age = 15;
console.log(obj); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 15}}

深拷贝

拷贝的是对象, 即拷贝的是对象本身, 内部的属性也会被拷贝, 所以修改其中一个属性不会影响到另一个对象
常用方法:
1. 通过递归实现深拷贝: 递归遍历对象的所有属性, 如果属性是对象, 则递归调用深拷贝函数, 否则直接赋值;
2. 通过 JSON.parse(JSON.stringify())实现深拷贝: 先将对象序列化成 JSON 字符串, 再将 JSON 字符串反序列化成对象, 这样就实现了深拷贝;
3. 通过 lodash.cloneDeep()实现深拷贝: 这个方法内部也是通过 JSON.parse(JSON.stringify())实现的;

递归实现深拷贝

function deepClone(newObj, oldObj) {for (let key in oldObj) {if (oldObj[key] instanceof Array) {// 如果属性是数组, 则递归调用深拷贝函数newObj[key] = [];deepClone(newObj[key], oldObj[key]);} else if (oldObj[key] instanceof Object) {// 如果属性是对象, 则递归调用深拷贝函数newObj[key] = {};deepClone(newObj[key], oldObj[key]);} else {// 如果属性是基本类型, 则直接赋值newObj[key] = oldObj[key];}}
}// 先判断数组, 再判断对象, 最后判断基本类型

JSON.parse(JSON.stringify())实现深拷贝

const obj = {name: "zhangsan",age: 18,child: {name: "xiaoming",age: 10,},
};const obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}obj2.name = "lisi";
obj2.child.age = 12;
console.log(obj); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}

lodash.cloneDeep()实现深拷贝

const obj = {name: "zhangsan",age: 18,child: {name: "xiaoming",age: 10,},
};const obj2 = _.cloneDeep(obj);
console.log(obj2); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}obj2.name = "lisi";
obj2.child.age = 12;
console.log(obj); // {name: "zhangsan", age: 18, child: {name: "xiaoming", age: 10}}

异常处理

throw 关键字

throw 关键字用于抛出一个异常, 并将其传递到调用者, 调用者可以选择捕获这个异常并处理, 也可以继续抛出这个异常, 直到被捕获为止

function add(a, b) {if (typeof a !== "number" || typeof b !== "number") {throw new Error("参数必须是数字");}return a + b;
}

try…catch 语句

try…catch 语句用于捕获异常, 如果 try 代码块中的代码抛出了异常, 则 catch 代码块中的代码将被执行, 并将异常对象作为参数传入

try {add(1, 2);
} catch (error) {console.log(error); // Error: 参数必须是数字
} finally {console.log("finally");
} // 一定会执行的代码

自定义异常

自定义异常需要继承 Error 类, 并实现构造函数, 并将错误信息作为参数传入

class MyError extends Error {constructor(message) {super(message);this.name = "MyError";}
}try {throw new MyError("自定义异常");
} catch (error) {console.log(error); // MyError: 自定义异常
}

this 关键字

this 关键字在函数执行的时候, 绑定的是函数执行时所在的作用域, 而不是函数定义时所在的作用域, 谁调用函数, this 就指向谁
在全局作用域中, this 指向 window
在函数中, this 指向调用函数的对象
在方法中, this 指向调用方法的对象
在构造函数中, this 指向新创建的对象
在箭头函数中, this 指向定义箭头函数时所在的作用域
在事件处理函数中, this 指向绑定事件的对象
在 setTimeout、setInterval 中, this 指向全局对象 window
在 Promise 中, this 指向 undefined
在 class 中, this 指向实例对象
在模块中, this 指向模块对象
在自定义对象中, this 指向自定义对象本身

改变 this 指向

在函数中, 可以使用 apply、call、bind 方法改变 this 指向
apply、call、bind 方法的第一个参数是 this 要指向的对象, 第二个参数是函数参数数组

function add(a, b) {return a + b;
}const obj = {name: "zhangsan",age: 18,
};const result1 = add.apply(obj, [1, 2]); // this 指向 obj, 参数为 [1, 2]
const result2 = add.call(obj, 1, 2); // this 指向 obj, 参数为 1, 2
const result3 = add.bind(obj)(1, 2); // this 指向 obj, 参数为 1, 2

防抖

单位时间内, 频繁触发事件, 但是只执行(最后一次)一次, 防止函数被频繁调用

通过 _.debounce 实现防抖

const box = document.getElementById("box");
box.addEventListener("mousemove",_.debounce(() => {console.log("mousemove");}, 1000)
); // 1000 毫秒内只执行一次

通过 setTimeout 实现防抖

function debounce(func, wait) {let timeout;return function () {if (timeout) clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, arguments);}, wait);};
}const box = document.getElementById("box");
box.addEventListener("mousemove",debounce(() => {console.log("mousemove");}, 1000)
); // 1000 毫秒内只执行一次

节流

单位时间内, 频繁触发事件, 但是只执行(等待第一次实现完成)一次, 防止函数被频繁调用

通过 _.throttle 实现节流

const box = document.getElementById("box");
box.addEventListener("mousemove",_.throttle(() => {console.log("mousemove");}, 1000)
); // 1000 毫秒内只执行一次

通过 setInterval 实现节流

function throttle(func, wait) {let timeout;return function () {if (!timeout) {timeout = setTimeout(() => {timeout = null;func.apply(this, arguments);}, wait);}};
}const box = document.getElementById("box");
box.addEventListener("mousemove",throttle(() => {console.log("mousemove");}, 1000)
); // 1000 毫秒内只执行一次

记录视频播放进度

const video = document.getElementById("video");video.ontimeupdate = _.throttle(() => {localStorage.setItem("videoProgress", video.currentTime);
}, 1000);video.onloadedmetadata = () => {video.currentTime = localStorage.getItem("videoProgress") || 0;
};