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

JavaScript面试题之深浅拷贝

web 2025/7/28 5:15:38

JavaScript深拷贝与浅拷贝深度解析

一、内存存储基础原理

1. 栈内存与堆内存

栈内存：存储基本类型值（Number、String、Boolean、Null、Undefined、Symbol、BigInt）
堆内存：存储引用类型值（Object、Array、Function、Date等）

let a = 10;        // 栈内存存储
let b = { x: 20 }; // 堆内存存储，栈存引用地址

2. 赋值操作本质

let obj1 = { a: 1 };
let obj2 = obj1;    // 复制引用地址
obj2.a = 2;
console.log(obj1.a); // 输出2（原始对象被修改）

二、浅拷贝（Shallow Copy）

1. 核心特征

创建新对象
复制原始对象的属性值
对引用类型属性复制指针（共享内存地址）

2. 常见实现方式

方法1：Object.assign()

const source = { a: 1,b: { c: 2 }
};
const shallowCopy = Object.assign({}, source);shallowCopy.b.c = 3;
console.log(source.b.c); // 输出3（原始对象被修改）

方法2：展开运算符

const arr = [1, [2, 3], { x: 4 }];
const arrCopy = [...arr];arrCopy[1][0] = 99;
console.log(arr[1][0]); // 输出99（原始数组被修改）

方法3：数组方法

const original = [{x:1}, 2, 3];
const sliceCopy = original.slice();
const mapCopy = original.map(item => item);

3. 应用场景

简单对象结构拷贝
需要保留对象引用关系时
性能敏感场景（数据量较大时）

三、深拷贝（Deep Copy）

1. 核心特征

创建完全独立的新对象
递归复制所有嵌套属性
完全脱离原始对象内存空间

2. 实现方式对比

方法1：JSON序列化（最简单方案）

const obj = { date: new Date(),fn: function() {},regexp: /pattern/ 
};const jsonCopy = JSON.parse(JSON.stringify(obj));
// 丢失信息：date转为字符串，函数被过滤，正则表达式变为空对象

局限性：

无法处理函数、undefined、Symbol
忽略原型链
循环引用报错
特殊对象（Date/RegExp等）类型丢失

方法2：递归实现（基础版）

function deepClone(target) {if (typeof target !== 'object' || target === null) {return target;}const clone = Array.isArray(target) ? [] : {};for (const key in target) {if (target.hasOwnProperty(key)) {clone[key] = deepClone(target[key]);}}return clone;
}

方法3：结构化克隆算法（现代方案）

// 浏览器环境
const structuredCopy = structuredClone(obj);// Node.js环境
const { structuredClone } = require('util');

支持类型：

原始类型
Array/ArrayBuffer
Map/Set
Date/RegExp
Error类型
Blob/File/FileList
ImageData
循环引用

不支持类型：

函数
DOM节点
属性描述符/getter/setter
对象原型链

3. 高级实现方案

完整深拷贝函数实现

function deepClone(target, map = new WeakMap()) {// 处理原始类型if (typeof target !== 'object' || target === null) {return target;}// 处理循环引用if (map.has(target)) {return map.get(target);}// 处理特殊对象const constructor = target.constructor;switch (constructor) {case RegExp:return new RegExp(target);case Date:return new Date(target);case Map:return new Map(Array.from(target, ([k, v]) => [k, deepClone(v, map)]));case Set:return new Set(Array.from(target, v => deepClone(v, map)));// 可扩展其他类型}// 初始化克隆对象const clone = new constructor();map.set(target, clone);// 处理Symbol属性const symbols = Object.getOwnPropertySymbols(target);const allKeys = [...Object.keys(target), ...symbols];// 递归拷贝for (const key of allKeys) {clone[key] = deepClone(target[key], map);}// 保留原型链Object.setPrototypeOf(clone, Object.getPrototypeOf(target));return clone;
}

4. 特殊场景处理

循环引用处理

const obj = { a: 1 };
obj.self = obj;const cloned = deepClone(obj); // 正确处理循环引用
console.log(cloned.self === cloned); // true

函数拷贝处理

function cloneFunction(fn) {return new Function('return ' + fn.toString())();
}const originalFunc = () => console.log('Hello');
const clonedFunc = cloneFunction(originalFunc);

四、性能优化策略

1. 数据规模影响

方法	10^3属性	10^5属性	嵌套层级10
JSON方法	1.2ms	120ms	失败
递归深拷贝	2.5ms	300ms	栈溢出
lodash.cloneDeep	1.8ms	150ms	正常

2. 优化技巧

使用迭代代替递归（避免栈溢出）
对象缓存池复用
使用位运算判断类型
并行化处理（Web Worker）

五、应用场景分析

1. 必须使用深拷贝

状态管理（Redux/Vuex）
配置对象复用
历史记录功能
数据快照保存

2. 推荐使用浅拷贝

不可变数据更新
组件props传递
函数参数传递
临时对象处理

六、三方库实现对比

1. lodash.cloneDeep

import cloneDeep from 'lodash/cloneDeep';const cloned = cloneDeep(original);

特点：

支持超过50种类型
处理循环引用
保留类型信息
性能优化好

2. Immutable.js

import { fromJS } from 'immutable';const original = { a: 1, b: { c: 2 } };
const immutableCopy = fromJS(original).toJS();

优势：

结构共享优化内存
高效的不可变数据操作
内置类型支持

七、最佳实践指南

数据冻结检测

function deepFreeze(obj) {Object.freeze(obj);Object.keys(obj).forEach(key => {if (typeof obj[key] === 'object' && !Object.isFrozen(obj[key])) {deepFreeze(obj[key]);}});return obj;
}

拷贝验证方法

function isDeepEqual(a, b) {if (a === b) return true;if (typeof a !== typeof b) return false;if (typeof a !== 'object') return a === b;const keysA = Object.keys(a);const keysB = Object.keys(b);if (keysA.length !== keysB.length) return false;return keysA.every(key => isDeepEqual(a[key], b[key]));
}

生产环境建议

优先使用结构化克隆API
复杂场景选择lodash.cloneDeep
大数据量考虑Immutable.js
避免在循环中执行深拷贝

八、常见误区解析

1. 深拷贝与不可变对象

深拷贝创建新对象
不可变对象禁止修改
两者可结合使用

2. 原型链处理

class MyClass {}
const original = new MyClass();
const cloned = Object.assign(Object.create(Object.getPrototypeOf(original)), original
);

3. 特殊属性处理

const obj = {get computed() { return this.x * 2 },set computed(val) { this.x = val / 2 }
};// 解决方案
const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj)
);