js實現深拷貝和淺拷貝

晴天~ ☀發表於2019-01-17
JS

淺拷貝：有拷貝的功能，但是隻能拷貝一層，是淺拷貝。

一、使用展開運算子（也叫剩餘運算子）...

let obj = {name:'gjf',age:{age:18}};
let newObj = {...obj};
obj.age.age = 25; //修改第二層的obj.age.age,newObj.age.age也會跟著變化
console.log(newObj) // {name:'gjf',age:{age:25}}複製程式碼

注意：資料的slice和concat方法也是淺拷貝，只能拷貝一層

深拷貝：你給我什麼，我就返給你一個，返還的這個和你以前的那個是兩個東西。

一、使用JSON.stringify()和JSON.parse()

原理：把一個物件轉化成一個字串，再把這個字串轉化成一個物件；

let obj = {name:'gjf',age:{age:18}};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18}} //並不影響newObj複製程式碼

使用這種方法有一些問題例如：

let obj = {name:'gjf',age:{age:18},a:/\d/,b:function(){},c:undefined};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18},a:{}} 會丟失值複製程式碼

注意：這種方式轉不了正則、函式、時間和undefined，會丟失值；

二、實現深拷貝

實現深拷貝之前來點面試小知識

//null == undefined true     null === undefined  false
//[] == '' true              [] === ''   false
//雙等是要先進行型別轉化再比較所以是true，三等不進行型別轉化直接比較所以是false複製程式碼

深拷貝方法：

// 數字 字串 function是不需要拷貝的
function deepClone(value) {  
    if (value == null) return value;  
    if (typeof value !== 'object') return value;
    if (value instanceof RegExp) return new RegExp(value);  
    if (value instanceof Date) return new Date(value);  
    // 我要判斷 value 是物件還是陣列 如果是物件 就產生物件 是陣列就產生陣列  
    let obj = new value.constructor;  
    for(let key in value){    
        obj[key] = deepClone(value[key]); // 看一看當前的值是不是一個物件  
    }  
    return obj;
}複製程式碼

好了，我們的深拷貝方法就這樣完成了，絕對好用！！！


相關文章