JavaScript克隆一个对象

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

注意: 这个clone方法参考自structured clone algorithm 以及支持 arrays、array buffers、 booleans、 date objects、maps、 numbers， Object 对象, regexes, sets, strings, symbols, 以及 typed arrays。 arguments对象的可枚举属性会拷贝为普通对象。 一些不可拷贝的对象，例如error objects、functions, DOM nodes, 以及 WeakMaps 会返回空对象。