浅拷贝 与 深拷贝

 

目录

1、JavaScript 中存在两⼤数据类型： 

2、 浅拷贝方法：

2.1  Object.assign

 2.2  slice()

2.3   concat() 

 2.4  拓展运算符

 3、深拷贝方法

 3.1  _.cloneDeep()

  3.2  jQuery.extend()

  3.3  JSON.stringify()

  3.4  循环递归

4、浅拷贝和深拷贝的区别

---

1、JavaScript 中存在两⼤数据类型： 

• 基本类型

• 引⽤类型

基本类型数据保存在在栈内存中

引⽤类型数据保存在堆内存中，引⽤数据类型的变量是⼀个指向堆内存中实际对象的引⽤，存在栈中

2、 浅拷贝方法：

  在 JavaScript 中，存在浅拷⻉的现象有：

• Object.assign

• Array.prototype.slice() , Array.prototype.concat()

• 使⽤拓展运算符实现的复制

function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ // 仅检查对象自身是否包含指定属性，不追溯原型链newObj[prop] = obj[prop]; } } return newObj; 
}

2.1  Object.assign

var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } 
} 
var newObj = Object.assign({}, fxObj);

 2.2  slice()

const fxArr = ["One", "Two", "Three"] 
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

2.3   concat() 

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

 2.4  拓展运算符

const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

 3、深拷贝方法

深拷⻉开辟⼀个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改⼀个对象的属性，不 会改变另⼀个对象的属性

常⻅的深拷⻉⽅式有：

• _.cloneDeep()

• jQuery.extend()

• JSON.stringify()

• ⼿写循环递归

 3.1  _.cloneDeep()

const _ = require('lodash');
const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] 
}; 
const obj2 = _.cloneDeep(obj1); 
console.log(obj1.b.f === obj2.b.f);// false

 

  3.2  jQuery.extend()

const 
$ = require('jquery'); 
const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] 
};
const obj2 = $
.extend(true, {}, obj1); 
console.log(obj1.b.f === obj2.b.f); // false

 

  3.3  JSON.stringify()

const obj2=JSON.parse(JSON.stringify(obj1));// 但是这种⽅式存在弊端，会忽略 undefined 、 symbol 和 函数const obj = { name: 'A', name1: undefined, name3: function() {}, name4: Symbol('A') 
} 
const obj2 = JSON.parse(JSON.stringify(obj)); 
console.log(obj2); // {name: "A"}

 但有局限，无法实现对象中方法的深拷贝、值为undefined的key等。

// 无法对 对象中的方法 进行深拷贝
const obj = { fn: () => console.log('test') };
const copy = JSON.parse(JSON.stringify(obj)); // { }// undefined 和 Symbol 类型属性会消失
// NaN 和 Infinity 会被转为 null
const obj = { a: undefined, b: Symbol(), c: NaN };
const copy = JSON.parse(JSON.stringify(obj)); // { c: null }

  3.4  循环递归

思路步骤：

1. 处理基本值‌：当传入值为null或非object类型时直接返回原值。不拷贝（对基本类型直接返回，引用类型才进行拷贝操作）
2. ‌检查循环引用‌：用WeakMap缓存已拷贝对象，遇到直接返回
3. ‌特殊对象处理‌：单独拷贝日期和正则对象
4. ‌初始化容器‌：区分数组和普通对象创建空结构
5. ‌递归拷贝属性‌：遍历每个属性并递归调用自身

// 使用 WeakMap 存储已拷贝对象，遇到重复引用直接返回

// hash.has(obj) 是哈希表结构中用于检测键是否存在的核心方法

// hash.get(obj) 是哈希表结构中通过键获取对应值的核心操作

// hash.set(obj, clone) 是哈希表存储键值对的核心操作

// 仅检查对象自身是否包含指定属性，不追溯原型链

function deepClone(obj, hash = new WeakMap()) {// 基础类型直接返回if (obj === null || typeof obj !== 'object') return obj; // 当传入值为null或非object类型时直接返回原值// 用WeakMap缓存已拷贝对象，遇到直接返回if (hash.has(obj)) return hash.get(obj); // 处理循环引用// 特殊对象处理if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);// 初始化容器const clone = Array.isArray(obj) ? [] : {};hash.set(obj, clone);// 递归拷贝for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key], hash);}}return clone;
}

4、浅拷贝和深拷贝的区别

前提为拷⻉类型为引⽤类型的情况下：

• 浅拷⻉是拷⻉⼀层，属性为对象时，浅拷⻉是复制，两个对象指向同⼀个地址

• 深拷⻉是递归拷⻉深层次，属性为对象时，深拷⻉是新开栈，两个对象指向不同的地址

声明变量时：

◦ 简单类型的值存放在栈中，在栈中存放的是对应的值

◦ 引⽤类型对应的值存储在堆中，在栈中存放的是指向堆内存的地址

赋值变量时：

◦ 简单类型赋值，是⽣成相同的值，两个对象对应不同的地址

◦ 复杂类型赋值，是将保存对象的内存地址赋值给另⼀个变量。也就是两个变量指向堆内存中同⼀个对象