js克隆一個物件

物件型別在賦值的過程中其實是複製了地址，所以如果改變了一方，其他都會被改變。那麼如何克隆一個物件呢？

一、Object.assign

function copy(obj) {
    return Object.assign({}, obj)
}

二、… 運算子

function copy(obj) {
    return { …obj }
}

方法一, 方法二 是淺拷貝，也就是當物件層級大於2層時，複製到的還是地址資訊

let a = { age:1,
         jobs: { first: 'tom' } 
        }

let b = copy(a) 
a.jobs.first ='native'

console.log(b.jobs.first) // native
 

三、JSON

function copy(obj) {
    return JSON.parse(JSON.stringify( obj ));
}

• 會忽略undefined, fn
• 不能序列化函式
• 不能解決迴圈引用的物件

四、MessageChannel

function structuralClone() {
    return new Promise(resolve =>{
        const {port1,port2} = new MessageChannel()
        port2.onmessage = ev => resolve(ev.data)
        port1.postMessage(obj)
    })
}
obj2  = await structuralClone(obj1);
 

• 如果物件中有函式，會報錯
• 可以解決迴圈引用的物件
• 非同步 await

五、lodash

// 深拷貝
import { cloneDeep, clone } from 'lodash'

var objects = [{ 'a': 1 }, { 'b': 2 }]
 
var deep = cloneDeep(objects)
console.log(deep[0] === objects[0])
// => false

// 淺拷貝
var shallow = clone(objects)
console.log(shallow[0] === objects[0])
// => true

注意