js对象、数字深拷贝方式（转）

秒速五厘米 2022-06-13 07:40 155阅读 0赞

#### 知识点一：js中的对象 ####

谈到对象的拷贝，必定要说一下对象的概念。
    
    js中的数据类型分为两大类：
    
    原始类型和对象类型。
    
    （1）原始类型包括：数值、字符串、布尔值、null、undefined（后两个是特殊的原始值，这里不做详细的说明，我的上一篇博客有谈到过一些）
    
    （2）对象类型包括：对象即是属性的集合，当然这里又两个特殊的对象----函数（js中的一等对象）、数组（键值的有序集合）。
    
    好了既然对象分为这两类，这两种类型在复制克隆的时候是有很大区别的。
    原始类型存储的是对象的实际数据，而对象类型存储的是对象的引用地址（对象的实际内容单独存放，为了减少数据开销通常存放在内存中）。
    
    ps：说到这里，大家要知道，对象的原型也是引用对象，它把原型的方法和属性放在内存当中，通过原型链的方式来指向这个内存地址。

--------------------

#### 知识点二：拷贝的概念 ####

浅度拷贝：原始类型为值传递，对象类型仍为引用传递。
    
    深度拷贝：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

#### 知识点三：数组的拷贝 ####

*  数组深拷贝方式一：for循环

var arr = [1,2,3,4,5]
    var arr2 = copyArr(arr)
    function copyArr(arr) { 
        let res = []
        for (let i = 0; i < arr.length; i++) { res.push(arr[i]) }
        return res
    }

*  数组深拷贝方式二：通过数组的slice()方法

var arr = [1,2,3,4,5]
    var arr2 = arr.slice(0)
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
    
    原理：这个代码实现非常简单。原理也比较好理解，他是将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的深拷贝

*  数组深拷贝方式三：使用数组的concat()方法

var arr = [1,2,3,4,5]
    var arr2 = arr.concat()
    arr[2] = 5
    console.log(arr)
    console.log(arr2)
    
    原理：这个代码也非常简单，原理更加粗暴。它是用于连接多个数组组成一个新的数组的方法。那么，我们只要连接它自己，即可完成数组的深拷贝

*  数组深拷贝方式四：使用jQuery的$.extend()方法

var newJson = jQuery.extend(true,{}, json);

#### 知识点四：对象的拷贝 ####

*  对象深拷贝方式一：for循环

var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = copyObj(obj)
    function copyObj(obj) { 
      let res = {}
      for (var key in obj) {
        res[key] = obj[key]
      }
      return res
    }
    
    原理：就是把元对象的内容循环放进新的数组里面

*  对象深拷贝方式二：利用json对象

var obj = {
      name: 'FungLeo',
      sex: 'man',
      old: '18'
    }
    var obj2 = JSON.parse(JSON.stringify(obj))

原文链接：[http://blog.csdn.net/fungleo/article/details/54931379][http_blog.csdn.net_fungleo_article_details_54931379]

[http_blog.csdn.net_fungleo_article_details_54931379]: http://blog.csdn.net/fungleo/article/details/54931379