js深浅拷贝

深浅拷贝解析
本文详细解释了JavaScript中深拷贝和浅拷贝的概念,包括它们的区别、产生原因及实现方式。介绍了通过循环复制、slice()、concat()、Object.assign()和展开运算符实现浅拷贝的方法,以及使用JSON.parse(JSON.stringify())和递归实现深拷贝的技巧。

1. 是什么

假设B复制了A,当修改A时,看B是否会发生变化:

如果B也跟着变了,说明这是浅拷贝。墙头草,你变我也变。

如果B没变,那就是深拷贝。

2. 产生的原因

JS存在基本类型和引用类型。

  1. 基本类型指的是简单的数据段。我们复制他的时候,会创建新值,并把它放在一个的变量的内存地址。
    基本类型:Number Boolean String undefined null
    复制:
    B复制A
  2. 引用类型指的是一个对象,并且我们对对象的操作都只是在操作它的引用而已。
    引用类型:object,array,function,error,date

复制:
引用复制

深浅拷贝是针对引用类型的

3. 实现浅拷贝

3.1 array和object通用–循环复制
var shallowCopy = function(obj) {
   // 判断obj的类型是否是object类型
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj,并且判断是obj的属性才拷贝
    for (var key in obj) {
    // 不遍历原型链上的属性,只遍历自身属性
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
var obj={
  name:'123',
  age:10,
}
var newObj=shallowCopy(obj);
obj.name='213';
console.log(newObj.name);
输出:"123”  随之改变。
3.2 数组浅拷贝–slice()和contact()!!!

数组的数据类型是引用类型,在这种情况下是浅拷贝。
数组的数据类型是基本类型,在这种情况下是深拷贝。
浅拷贝:

var arr = [{old: 'old'}, ['old']];
var newArr1 = arr.concat();
var newArr2=arr.slice();

arr[0].old = 'new';

console.log(arr) // [{old: 'new'}, ['new']]
console.log(newArr1) // [{old: 'new'}, ['new']]
console.log(newArr2) // [{old: 'new'}, ['new']]

深拷贝:

var arr = ['old', 1, true, null, undefined];
var newArr1 = arr.concat();
var newArr2=arr.slice();

arr[0] = 'new';

console.log(arr) // [{old: 'new'}, ['new']]
console.log(newArr1) // [{old: 'old}, ['new']]
console.log(newArr2) // [{old: 'old'}, ['new']]
3.3 对象的浅拷贝–Object.assign !!!

这里的Object.assign也是一个很奇怪的点,它既是深拷贝又是浅拷贝。一级属性-深拷贝,深层属性-浅拷贝

var obj = { a: 0 , b: { c: 0}}; 
var newObj = Object.assign({}, obj); 

obj.a = 1; 
obj.b.c = 3; 
console.log(obj);        // { a: 1 , b: { c: 3}}; 
console.log(newObj);	// { a: 0 , b: { c: 3}}; 
可以很清楚的发现一级深拷贝,二级浅拷贝。
3.4 对象的浅拷贝-- 展开运算符(…)!!!

这里的展开运算符(…)同样是一个很奇怪的点,它既是深拷贝又是浅拷贝。一级属性-深拷贝,深层属性-浅拷贝

var obj = { a: 0 , b: { c: 0}}; 
var newObj = {...obj}; 

obj.a = 1; 
obj.b.c = 3; 
console.log(obj);        // { a: 1 , b: { c: 3}}; 
console.log(newObj);	// { a: 0 , b: { c: 3}}; 
可以很清楚的发现一级深拷贝,二级浅拷贝。

4. 深拷贝

在浅拷贝中已经介绍而来几种深拷贝的方式。

4.1 JSON.parse(JSON.stringify())

数组和对象均可用
数组

var arr = [1, 3, {
    name: ' syl'
}];
var newArr = JSON.parse(JSON.stringify(arr));
arr[2].name = '123'; 
console.log(newArr[2]); /// 'syl ' 没有改变

对象

var obj={
	name:'syl',
}
var newObj=JSON.parse(JSON.stringify(obj));
obj.name="123";
console.log(newObj.name); //'syl'. 没有改变

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

var  arr = [1, 3, {
    name: ' syl'
},function(){}];
var newArr = JSON.parse(JSON.stringify(arr));

console.log(newArr[3]) // null ,没有输出函数。

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数

4.2 深拷贝通用–递归
function deepCopy(obj) {
  //是否是数组或对象
  if (typeof obj !== 'object') return; 
  
  var newObj = obj instanceof Array ? [] : {};
  
  for (var key in obj) {
  
    	// 不遍历原型链上的属性,只遍历自身属性
    if (obj.hasOwnProperty(key)) {
    
    	 // 如果值是对象,就递归一下
      if (obj[keys] && typeof obj[key ] === "object") {
       
        newObj[key] = obj[key] instanceof Array ?[] : {};
        // 如果是引用数据类型,会递归调用
        newObj[key] =  deepCopy(obj[key]);
      } else {
      
        // 如果不是,就直接赋值
        newObj = obj[keys];
        
      }
    }
  }
  return result;
}


补充:
浅拷贝:es6中有两种新方法
方法1:

` let [...spread]= [12, 5, 8, 130, 44];

方法2:

Array.from(array)//创建一个新数组
### JavaScript 深拷贝与浅拷贝的区别及实现方式 #### 深拷贝与浅拷贝的区别 浅拷贝仅复制对象的第一层属性,而深拷贝会递归地复制对象的所有层级。如果对象的属性本身是引用类型(如数组或对象),浅拷贝只会复制引用地址,而不会创建新的独立对象[^2]。 例如,使用浅拷贝时,修改原始对象中的嵌套对象会影响拷贝后的对象,因为它们共享相同的引用地址[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = Object.assign({}, obj1); // 浅拷贝 obj2.b.c = 3; console.log(obj1.b.c); // 输出 3 ``` 相比之下,深拷贝会为嵌套的对象创建全新的实例,确保修改拷贝后的对象不会影响原始对象[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝 obj2.b.c = 3; console.log(obj1.b.c); // 输出 2 ``` #### 实现浅拷贝的方法 1. 使用 `Object.assign()` 方法可以实现浅拷贝,它将源对象的属性复制到目标对象中[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = Object.assign({}, obj1); ``` 2. 使用扩展运算符 `...` 也可以实现浅拷贝[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = { ...obj1 }; ``` #### 实现深拷贝的方法 1. **递归实现**:通过递归遍历对象的每个属性,逐一复制。这种方法适用于复杂对象结构,但需要处理循环引用问题[^3]。 ```javascript function deepCopy(obj) { if (obj instanceof Array) { var newObj = []; } else { var newObj = {}; } for (let i in obj) { if (typeof obj[i] === "object" && obj[i] !== null) { newObj[i] = deepCopy(obj[i]); } else { newObj[i] = obj[i]; } } return newObj; } ``` 2. **通过 `JSON` 对象实现深拷贝**:将对象转换为字符串后再解析为新对象。此方法简单高效,但无法处理函数、`undefined` 和 `Date` 类型等特殊值[^2]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = JSON.parse(JSON.stringify(obj1)); ``` 3. **通过 jQuery 的 `extend` 方法实现深拷贝**:设置第一个参数为 `true` 即可启用深拷贝功能。 ```javascript let array = [1, 2, 3, 4]; let newArray = $.extend(true, [], array); ``` 4. **使用第三方库(如 Lodash)实现深拷贝**:Lodash 提供了 `_.cloneDeep` 方法,能够处理更复杂的对象结构[^1]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = _.cloneDeep(obj1); ``` 5. **改进的递归实现**:通过引入 `WeakMap` 处理循环引用问题,确保深拷贝的健壮性[^4]。 ```javascript function deepClone(obj, hash = new WeakMap()) { if (obj === null) return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (typeof obj !== "object") return obj; if (hash.has(obj)) return hash.get(obj); let cloneObj = new obj.constructor(); hash.set(obj, cloneObj); for (let key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] = deepClone(obj[key], hash); } } return cloneObj; } ``` #### 注意事项 - 浅拷贝仅适用于简单对象,对于嵌套对象可能引发意外行为。 - 深拷贝需要考虑性能问题,尤其是在处理大型或复杂对象时。 - 特殊类型(如 `Date`、`RegExp`、`Function`)在深拷贝时需要额外处理[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏,我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值