浅拷贝

对象的合并

es6专门为合并对象提供了Object.assign()方法。这个方法==接收一个目标对象和一个或多个源对象作为参数==,然后==将每个源对象中可枚举和自有属性复制到目标对象==。对每个符合条件的属性,==这个方法会使用源对象上的get方法取得属性的值,然后使用目标对象上的get方法设置属性的值。==

let dest, src, result;

/**
 * 简单复制
 */
 dest = {};
 src = { id: 'src' };

 result = Object.assign(dest, src);

 //Object.assign修改目标对象
 //也会返回修改后的目标对象
 console.log(dest === result); //true
 console.log(dest !== src);    //true
 console.log(result);          //{ id: 'src' }
 console.log(dest);            //{ id: 'src' }

Object.assign()实际上对每个源对象执行的是浅复制。 ==如果多个源对象都有相同的属性,则使用最后一个复制的值。==

浅拷贝

先了解什么是拷贝:

简单来说就是一个对象B复制另一个对象A,当改变B对象的值是A对象的值不会改变。

1.for in只循环第一层

// 只复制第一层的浅拷贝
function simpleCopy(obj1) {
  var obj2 = Array.isArray(obj1) ? [] : {};
  for (let i in obj1) {
    obj2[i] = obj1[i];
  }
  return obj2;
}
var obj1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
}
var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;

console.log(obj1.a);    // 1
console.log(obj2.a);    // 3
console.log(obj1.c.d);  // 4
console.log(obj2.c.d);  // 4

2.Object.assign()方法

let dest, src;

dest = {};
src = {
  id: 'src',
  person: {
    name: 'tom'
  }
};

Object.assign(dest, src);

dest.id = "dest";
dest.person.name = 'jack'

console.log(dest.id);           // dest
console.log(src.id);            // src

console.log(dest.person.name);  // jack
console.log(src.person.name);   // jack

3.扩展运算符:...

var a = { name: "hello" };
var b = { ...a };

b.name = "hi";

console.log(a);  // { name: 'hello' }
console.log(b);  // { name: 'hi' }

从上述例子可以看出,浅拷贝只是拷贝了基本类型的数据,对于引用的类型数据,复制后也是会发生引用,这种拷贝就叫做浅拷贝

==就是拷贝对象的引用,而不深层次的拷贝对象的值,==多个对象指向堆内存中的同一对象,,任何一个修改都会是使得所有对象的值被修改,因为它们公用一条数据。

深拷贝

==深拷贝不会拷贝引用类型的引用,拷贝的是引用类型的值,形成一个新的引用类型。==

1.用JSON对象实现

let dest, src;

dest = {};
src = {
  id: 'src',
  person: {
    name: 'tom'
  }
};

dest = JSON.parse(JSON.stringify(src));

dest.id = "dest";
dest.person.name = 'jack'

console.log(dest.id);           // dest
console.log(src.id);            // src

console.log(dest.person.name);  // jack
console.log(src.person.name);   // tom

2.使用递归的方式实现

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

3.lodash函数库实现深拷贝

lodash很热门的函数库,提供了 lodash.cloneDeep()实现深拷贝

最后修改:2021 年 08 月 25 日 11 : 34 AM
如果觉得我的文章对你有用,请随意赞赏