js中的浅拷贝和深拷贝

Posted 2021-03-05 诉诉飞飞

1.概念

浅拷贝：是将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此，两个对象会有同一个引用类型的引用，浅拷贝可以使用object.assign和展开运算符（将一个数组转为用逗号分隔的参数序列--(...)）来实现。

深拷贝：是将一个对象的属性值复制到另一个对象，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此，对象获得一个新的引用类型而不是嘴个元祐类型的引用。深拷贝对于一些对象可以使用json的两个函数（stringify(),parse()）来实现，但是由于json的对象格式化比js的对象格式化更加严格，所以如果属性值里边出现函数或者symbol类型的值时，会转化失败。

2.实现方式

浅拷贝：

1.Object.assign

const a = { a: 1 ,b:2};
const b = { b: 4 };
const c = { c: 3 };
const obj = Object.assign({}, a, b, c);
obj // {a:1, b:4, c:3}

2.for in 循环遍历

function easyCopy(object) {

   // 只拷贝对象
   if (!object || typeof object !== "object") return;

   // 根据 object 的类型判断是新建一个数组还是对象
   let newObject = Array.isArray(object) ? [] : {};

   // 遍历 object，并且判断是 object 的属性才拷贝
   for (let key in object) {
     if (object.hasOwnProperty(key)) {
       newObject[key] = object[key];
     }
   }

   return newObject;
 }

深拷贝：

1.json

function deepClone(obj) {
    let tojson = JSON.stringify(obj);//将对象转换为json字符串形式
    let result = JSON.parse(tojson);//将转换而来的字符串转换为原生js对象
    return result;
};

let obj1 = {
    xiao: {
        age: 20,
        name: 111
    },
    zhang: {
        age: 21,
        name: 222
    }
};

let test = deepClone(obj1);
console.log(test);

2.for in 循环遍历

 function deepCopy(object) {

   if (!object || typeof object !== "object") return;

   let newObject = Array.isArray(object) ? [] : {};

   for (let key in object) {
     if (object.hasOwnProperty(key)) {
       newObject[key] = typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
     }
   }

   return newObject;
 }