js克隆对象

摘要：我们知道对象类型实际上是在赋值过程中复制地址的，所以如果一方改变了，其他的也会改变。我们应该如何克隆一个对象并避免这种现象？

我们知道对象类型实际上是在赋值过程中复制地址的，所以如果一方改变了，其他的也会改变。我们应该如何克隆一个对象并避免这种现象？

方法一：Object.assign

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

方法二：…展开运算符

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

备注：方法一,方法二是浅拷贝，也就是当对象层级大于2层时，复制到的还是地址信息。

let a = {age:1,
         jobs: {first:'FE’} 
        }
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
不能序列化函数
不能解决循环引用的对象

例子：

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  re: /.*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

方法四：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

方法五：原生js递归实现

如果没有任何内置的，你可以尝试：

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

方法六：使用第三方库

采用Underscore.js _.clone链接Underscore.js

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }

但错误的时候

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// (Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.)

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10711