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

防城港网站制作公众号运营平台

news 2025/11/3 2:54:11

防城港网站制作,公众号运营平台,国外地图搜房网站建设,wordpress如何实现微信支付导语： “深拷贝 VS 浅拷贝”是前端面试中绕不开的经典问题，既能考察 JavaScript 基础功，又能延伸至手写代码、递归、循环引用处理等进阶话题。本文从面试官视角解析其考察重点，并详解如何手写一个实用的深拷贝函数，助你…

导语：
“深拷贝 VS 浅拷贝”是前端面试中绕不开的经典问题，既能考察 JavaScript 基础功，又能延伸至手写代码、递归、循环引用处理等进阶话题。本文从面试官视角解析其考察重点，并详解如何手写一个实用的深拷贝函数，助你面试中脱颖而出。

一、面试主题概述

在 JavaScript 中，引用类型（如对象、数组）在赋值或传参时常常引发“浅拷贝”或“深拷贝”的问题。尤其在 React、Vue 等响应式框架下，数据变化与状态同步息息相关，若不理解这两者的本质差异，很容易引发业务 bug。

本主题常作为基础知识或代码题出现，后续还可能结合闭包、原型、递归、JSON 等深入提问，是体现候选人代码能力和思维深度的优质考点。

二、高频面试题汇总

什么是浅拷贝和深拷贝？两者有什么区别？
哪些常见方法可以实现浅拷贝？
用 JSON 方法实现深拷贝有什么局限性？
如何手写一个通用的深拷贝函数？
深拷贝中如何处理循环引用问题？

三、重点题目详解

题目一：
什么是浅拷贝和深拷贝？举例说明。

const obj1 = { name: 'Tom', info: { age: 25 } };// 浅拷贝
const shallowCopy = Object.assign({}, obj1);
shallowCopy.info.age = 30;console.log(obj1.info.age); // 输出：30（原对象被影响）

解析：

浅拷贝：只拷贝对象的第一层属性，若属性为引用类型（如对象、数组），则拷贝的是引用地址。
深拷贝：递归拷贝所有层级的数据，原对象与拷贝对象彻底隔离。

题目二：
使用 JSON.parse(JSON.stringify()) 实现深拷贝，有哪些问题？

const obj = {name: 'Tom',birthday: new Date(),func: () => {},undef: undefined,symbol: Symbol('s'),circular: null
};obj.circular = obj;const copy = JSON.parse(JSON.stringify(obj));console.log(copy); // 部分属性丢失

解析：

使用 JSON 方法虽然快捷，但存在以下缺陷：

函数、undefined、Symbol 类型会被忽略；
Date 类型会变成字符串；
不支持循环引用，会报错；
不适用于特殊对象如 Map、Set、RegExp。

面试官关注：
此题考察候选人是否对“工具函数的边界”有足够认识，避免在项目中使用时踩坑。

题目三：
如何手写一个支持循环引用的深拷贝函数？

function deepClone(obj, map = new WeakMap()) {if (obj === null || typeof obj !== 'object') return obj;if (map.has(obj)) return map.get(obj); // 处理循环引用let clone = Array.isArray(obj) ? [] : {};map.set(obj, clone); // 记录已克隆的对象for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key], map);}}return clone;
}// 测试循环引用
const a = { name: 'A' };
a.self = a;const b = deepClone(a);
console.log(b); // 无堆栈溢出，成功复制