深度clone和浅clone

最新推荐文章于 2024-03-20 10:19:14 发布

weixin_30840253

最新推荐文章于 2024-03-20 10:19:14 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/antyhouse/p/10195172.html

本文深入探讨了JavaScript中深拷贝与浅拷贝的概念，解释了基本数据类型与引用数据类型的拷贝差异，并通过实例展示了es6中Object.assign()及解构赋值的浅拷贝效果，最后详述了深拷贝的实现方式及其在框架如Vue.js中的应用。

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

首先等你有空的时候可以看这篇,要用可以看我这篇
https://www.cnblogs.com/echolun/p/7889848.html

1.有一点需要明确的是深拷贝只是针对引用数据类型来说的，基本数据类型都是浅拷贝
基本数据类型有哪些，number,string,boolean,null,undefined,symbol六类。
引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数

2.基本数据类型的浅拷贝就是一般赋值,

   var a = 'jack'
    var b
    b = a
    console.log(b) //jack
    b = '你好' 
    console.log(b)//你好
    console.log(a) //jack

a并不会因为b的改变而改变,但是这是浅拷贝,不是深拷贝
3.接下来是引用数据类型深拷贝和浅拷贝
浅拷贝的作用：
主要是赋值,并且复制后的对象改变之前的对象也会改变

a. es6的Object.assign(obj)浅拷贝

   var obj = {
       name: 'jack',
       age: 18
     }
     var data =  Object.assign(obj)
     console.log(data) //{name: 'jack',age: 18}
     data.name = '花花'
     console.log(data)//{name: "花花", age: 18}
     console.log(obj)//{name: "花花", age: 18}

b es6的解构赋值

     let obj = {
       name: 'jack',
       age: 18
     }
     let {age,name} = obj
     let data = { name,age}
     console.log(data) //{age:18}
     data.age = 20
     console.log(data) //{age:20}
     console.log(obj) //{age:18}

c 循环赋值(知识点:for和forEach用来循环数组，for in 数组对象都行）

    var obj = {  
       name: 'jack',
       age: 18
     }
     var params = {}
     for(var key in obj){
      params[key] = obj[key]
     }
     console.log(params, 22)//{name: "jack", age: 18}

或者

 var obj = {  
       name: 'jack',
       age: 18,
       hobby: {
         school: 'listen video',
         home: 'watch TV'
       }
     }
     var params = {}
     params =JSON.parse(JSON.stringify(obj))

深拷贝
为什么要用到深烤贝
下面有个?:
因为用框架是双向数据绑定的,所以赋值之后并不需要原始数据obj也跟着动,所以要深度clone来重新对数据做处理,而不要影响之前的数据

如果我用浅拷贝:

 var obj = {  
       name: 'jack',
       age: 18,
       hobby: {
         school: 'listen video',
         home: 'watch TV'
       }
     }
     var params = {}
     for(var key in obj){
      params[key] = obj[key]
     }
     console.log(params,22)

     params.hobby.school = 'read books'
     console.log(params,11)
     console.log(obj,33)

并没有达到目的

用深拷贝

 var obj = {  
       name: 'jack',
       age: 18,
       hobby: {
         school: 'listen video',
         home: 'watch TV'
       }
     }
     var params = {}
     params = this.deepClone(obj)
    function deepClone(source) {
      if (!source || typeof source !== 'object') {
        throw new Error('error arguments', 'shallowClone');
      }
      var targetObj = testArray(source) ? [] : {};
      for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = source[keys].constructor === Array ? [] : {};
            targetObj[keys] = deepClone(source[keys]);
          } else {
            targetObj[keys] = source[keys];
          }
        }
      }
      return targetObj
    }
    function testArray(obj) {
      return Object.prototype.toString.call(obj) === '[object Array]' 
    }
    params.hobby.school = 'read books'
    console.log(params,11)
    console.log(obj,33)

打印结果：

下面是vue.js里面的实际应用

   deepClone (source){
      if (!source || typeof source !== 'object') {
        throw new Error('error arguments', 'shallowClone')
      }
      var targetObj = this.testArray(source) ? [] : {}
      for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = source[keys].constructor === Array ? [] : {}
            targetObj[keys] = this.deepClone(source[keys])
          } else {
            targetObj[keys] = source[keys]
          }
        }
      }
      return targetObj
    },
    testArray(obj){
      return Object.prototype.toString.call(obj) === '[object Array]' 
    }

转载于:https://www.cnblogs.com/antyhouse/p/10195172.html