前端筆記（關于js深淺拷貝的了解）

要說深淺拷貝，首先要看下js的資料類型。

大家都知道js包含基本類型和引用類型。

基本類型：String、Number、Boolean、undefined、null、symbol。

引用類型：Object（Function、Array、Date、RegExp(正規表達式)）

基本類型放在棧中，引用類型放在堆中，但是引用類型的位址放在棧中。

基本類型的拷貝：直接b=a指派就行，本身就互不影響。

引用類型的拷貝：就要區分深淺拷貝了，b=a不是拷貝，隻是拷貝了新的位址，他們的指向堆中的對象是同一個，會互相影響的

什麼是淺拷貝：

淺拷貝就是隻拷貝對象的第一層内容

什麼是深拷貝：

深拷貝就是完全拷貝，改變b對象後不會影響到a對象

假設一個對象

let obj1={
    a:1,
    b:{b:2},
    c:[1,2,3],
    d:function(){}
}      

幾種淺拷貝方式：

1.es6剩餘參數方式...

//淺拷貝
var obj5={...obj1}
console.log(obj1,obj5)      

2.es6的Object.assign

var obj6=Object.assign({},obj1)
console.log(obj1,obj6)      

3.自寫方法（新空對象，for...in周遊複制）

function simpleClone(obj){
    let newobj={}
    for(let i in obj){
        newobj[i]=obj[i]
    }
    return newobj
}      

說下for..in，這是可以周遊對象和數組的key的函數（對象是周遊key，數組是周遊下标）

實作深拷貝的幾種方式：

1.使用jquery的$.extend

let obj2=$.extend(true,{},obj1)      

2.使用JSON.parse和JSON.stringify 屬于半深拷貝（注意這種方式是不能拷貝對象内的方法的）

var obj4=JSON.parse(JSON.stringify(obj1))      

3.深拷貝數組 使用slice（傳遞下标，從0開始複制，傳回新數組）

let arr3=arr.slice(0)      

4.深拷貝節點 使用cloneNode，在于是否傳參

let p=document.getElementById("d")
let cp1=p.cloneNode()//拷貝目前層
let cp2=p.cloneNode(true)//拷貝目前層及子元素      

5.遞歸實作深拷貝對象（重寫了Object的原型方法）

Object.prototype.clone=function(){
    var copy = (this instanceof Array) ? [] : {};
    for (attr in this){
        if (!this.hasOwnProperty(attr)) continue;//取是否存在目前key
        copy[attr] = (typeof this[attr] == "object")?this[attr].clone():this[attr];//是否遞歸調用
    }
    return copy;
}
var obj3=obj1.clone()
console.log(obj1,obj3)      

部落格園作者：herry菌，原文連結：

https://www.cnblogs.com/wuhairui/p/12800622.html

朋友，看到這裡，關注作者的公衆号吧，不漏掉更新哦