ES6 深克隆與淺克隆詳解：原理、實現與應用場景

一、克隆的本質與必要性

在 JavaScript 中，數據分為兩大類型：

基本類型：Number、String、Boolean、null、undefined、Symbol、BigInt
引用類型：Object、Array、Function、Date、RegExp 等

克隆的必要性：

const original = { a: 1, b: { c: 2 } };
const copy = original; // 引用復制original.a = 10;
console.log(copy.a); // 10 - 修改影響副本original.b.c = 20;
console.log(copy.b.c); // 20 - 深層修改也影響副本

二、淺克隆（Shallow Clone）

1. 概念與特點

只復制對象的第一層屬性
嵌套對象仍然是引用關系
適用于簡單對象結構

2. ES6 實現方式

2.1 擴展運算符（…）

const obj = { a: 1, b: { c: 2 } };
const shallowClone = { ...obj };obj.b.c = 3;
console.log(shallowClone.b.c); // 3（受影響）

2.2 Object.assign()

const arr = [1, 2, { d: 4 }];
const arrClone = Object.assign([], arr);arr[2].d = 5;
console.log(arrClone[2].d); // 5（受影響）

2.3 Array.slice()

const original = [1, { name: 'Alice' }];
const clone = original.slice();original[1].name = 'Bob';
console.log(clone[1].name); // 'Bob'（受影響）

3. 使用場景

組件 props 傳遞配置對象
狀態管理中的狀態快照
簡單數據結構的臨時拷貝

三、深克隆（Deep Clone）

1. 概念與特點

遞歸復制對象的所有層級
創建完全獨立的內存副本
修改原對象不影響克隆對象

2. 手動實現深克隆

基礎遞歸實現：

function deepClone(source) {// 基本類型直接返回if (source === null || typeof source !== 'object') {return source;}// 處理數組if (Array.isArray(source)) {return source.map(item => deepClone(item));}// 處理對象const clone = {};for (const key in source) {if (source.hasOwnProperty(key)) {clone[key] = deepClone(source[key]);}}return clone;
}// 測試
const obj = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(obj);obj.b.c = 3;
console.log(deepCopy.b.c); // 2（不受影響）

增強版（處理特殊對象）：

function enhancedDeepClone(source, map = new WeakMap()) {// 基本類型直接返回if (source === null || typeof source !== 'object') {return source;}// 處理循環引用if (map.has(source)) return map.get(source);// 特殊對象處理switch (source.constructor) {case Date:return new Date(source);case RegExp:return new RegExp(source);case Set:return new Set([...source].map(item => enhancedDeepClone(item, map)));case Map:return new Map([...source].map(([k, v]) => [enhancedDeepClone(k, map), enhancedDeepClone(v, map)]));case ArrayBuffer:return source.slice(0);}// 普通對象和數組const clone = Array.isArray(source) ? [] : {};map.set(source, clone);// 處理Symbol鍵const symbolKeys = Object.getOwnPropertySymbols(source);const allKeys = [...Object.keys(source), ...symbolKeys];for (const key of allKeys) {clone[key] = enhancedDeepClone(source[key], map);}return clone;
}

3. JSON 序列化法（有局限）

const obj = {date: new Date(),regex: /pattern/g,func: () => console.log('test')
};const jsonClone = JSON.parse(JSON.stringify(obj));console.log(jsonClone);
// {
//   date: "2023-08-15T12:00:00.000Z", // Date轉為字符串
//   regex: {},                        // RegExp變為空對象
//   func: null                        // 函數丟失
// }

JSON方法的缺陷：

丟失函數屬性
忽略Symbol鍵
Date對象轉為字符串
RegExp變為空對象
無法處理循環引用
忽略undefined值

4. 現代瀏覽器原生API：structuredClone()

const obj = {date: new Date(),regex: /pattern/g,array: [1, 2, 3],set: new Set([4, 5, 6])
};const clone = structuredClone(obj);console.log(clone);
// {
//   date: Date, // 保持Date對象
//   regex: /pattern/g, // 保持正則
//   array: [1,2,3],
//   set: Set(3) {4,5,6}
// }

支持的數據類型：

原始值
Array/ArrayBuffer
Map/Set
Date/RegExp
Blob/File/FileList
ImageData/ImageBitmap
錯誤類型（Error, EvalError等）
對象字面量（僅包含以上類型）

不支持的類型：

Function
DOM節點
對象方法
屬性描述符/getter/setter
原型鏈

四、深克隆性能優化

1. 循環引用處理

function deepClone(source, map = new WeakMap()) {// ... 其他代碼if (map.has(source)) {return map.get(source);}const target = new constructor();map.set(source, target);// ... 克隆邏輯
}

2. 非遞歸實現（棧代替遞歸）

function deepCloneStack(source) {const stack = [];const map = new WeakMap();const target = new source.constructor();stack.push([source, target]);map.set(source, target);while (stack.length) {const [current, parent] = stack.pop();for (const key in current) {if (current.hasOwnProperty(key)) {const value = current[key];// 基本類型直接賦值if (value === null || typeof value !== 'object') {parent[key] = value;continue;}// 處理循環引用if (map.has(value)) {parent[key] = map.get(value);continue;}// 創建新對象const child = new value.constructor();parent[key] = child;map.set(value, child);stack.push([value, child]);}}}return target;
}

五、應用場景與最佳實踐

1. 淺克隆適用場景

組件 props 傳遞配置對象
Redux reducer 中的狀態更新
函數參數中的對象擴展
無嵌套結構的簡單數據對象

// Vue 組件 props 解構
export default {props: ['config'],setup(props) {const localConfig = { ...props.config }; // 淺克隆}
}

2. 深克隆必要場景

狀態管理中的初始狀態快照
需要完全隔離的緩存數據
撤銷/重做功能實現
復雜配置對象的版本管理
Web Worker 數據傳輸

// 在 Web Worker 中處理數據
worker.postMessage(structuredClone(largeDataSet));

3. 現代框架中的克隆實踐

Vue 狀態管理：

// 使用深克隆創建初始狀態
const initialState = deepClone(fetchedData);// 在組件中使用
export default {data() {return {localState: deepClone(this.initialState)}}
}

React 狀態更新：

function reducer(state, action) {switch (action.type) {case 'UPDATE_USER':// 深合并示例return {...state,user: {...state.user,...action.payload}};case 'ADD_ITEM':// 數組深克隆return {...state,items: [...state.items, action.item]};}
}

六、克隆方案選擇指南

場景特征	推薦方案	原因說明
簡單對象無嵌套	淺克隆	性能最優
需要保留特殊對象類型	structuredClone()	原生支持多種類型
包含函數/循環引用	lodash.cloneDeep	完整處理復雜情況
現代瀏覽器環境	structuredClone()	原生性能最好
需要處理DOM節點	自定義實現	需特殊處理DOM API
超大對象（>10MB）	分塊克隆	避免阻塞主線程
高頻克隆操作（>1000次/秒）	淺克隆+immutable	性能敏感場景優化

七、總結與最佳實踐

理解數據本質：區分基本類型和引用類型
明確克隆需求：深克隆還是淺克隆
選擇合適方案：
- 優先使用瀏覽器原生API：structuredClone()
- 復雜場景使用成熟庫：lodash的_.cloneDeep()
- 特殊需求自定義實現
處理邊界情況：
- 循環引用使用WeakMap
- 特殊對象類型單獨處理
- Symbol屬性不能忽略
性能考量：
- 避免在循環中深度克隆大對象
- 考慮使用不可變數據結構
- 超大對象使用分塊處理

// 最佳實踐示例
import { cloneDeep } from 'lodash-es';// 需要完全隔離的數據
const configBackup = cloneDeep(runtimeConfig);// 瀏覽器環境簡單克隆
const stateSnapshot = structuredClone(appState);// 淺克隆配置對象
const currentSettings = { ...defaultSettings, ...userSettings };

掌握深淺克隆的區別和實現方式，是寫出健壯JavaScript應用的關鍵技能。根據具體場景選擇合適的克隆策略，可以有效避免數據污染和意外行為。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/83054.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/83054.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/83054.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！