深拷贝和浅拷贝

最新推荐文章于 2025-07-15 10:17:52 发布

weixin_33953249

最新推荐文章于 2025-07-15 10:17:52 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/z-lin/p/11131588.html

本文深入探讨了深拷贝与浅拷贝的概念，通过JavaScript实例展示了两种拷贝方式的区别，包括如何使用递归函数、JSON方法及jQuery的$.extend实现深拷贝，并分析了在对象属性为复杂数据类型时浅拷贝存在的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，对于深拷贝和浅拷贝了解一波

let obj3 = {}
let obj1={
      name:'grace',
      car:{
        brand:'小黄车',
        price: 200
      }};
//通过for in 遍历对象，拷贝了数据存到obj3中
    for(var k in obj1){
       obj3[k] = obj1[k]
    }
//obj3修改car中的price属性的值
 obj3.car.price = '1'

console.log(obj1) 
console.log(obj3)

上述代码执行后，会发现obj1和obj3中的car.price都被修改成1了，此时就涉及到了深拷贝

浅拷贝和深拷贝的理解

浅拷贝:只会拷贝一层，如果全是简单类型的属性，不会有问题，但如果存在复杂数据类型，其实际拷贝的是内存地址，这样存在问题，此时我们就需要深拷贝

实现深拷贝的方法

1.递归函数

function deepCopy(obj) {
      let newObj = {}
      for (var k in obj) {
        newObj[k] = typeof obj[k] === 'object' ? deepCopy(obj[k]) : obj[k]
      }
      return newObj
    }

let obj1 = {
      name: 'grace',
      car: {
        brand: '小黄车',
        price: 200
      }
    }

let  obj2 = deepCopy(obj1)

obj2.car.price = 10

console.log(obj1)
console.log(obj2)

2.JSON.parse和JSON.stringify方法

let obj1={
      name:'grace',
      car:{
        brand:'小黄车',
        price: 200
      }}
    let obj2 = JSON.parse(JSON.stringify(obj1))
//此时修改了obj2中的数据
    obj2.car.price = '400'

    console.log(obj1)
    console.log(obj2)

最终打印结果就会发现只有obj2中的数据发生变化

3.jquery中的$.extend方法

  //$.extend(deep,target,obj) 
     let  obj4 = {}
    let obj1={
      name:'grace',
      car:{
        brand:'小黄车',
        price: 200
      }}
$.extend(true,obj4,obj1)

obj4.car.brand = 'bike'

console.log(obj1)
console.log(obj4)

最终结果是只有obj4中的car.brand变成了bike

转载于:https://www.cnblogs.com/z-lin/p/11131588.html