深拷贝和浅拷贝

1. 什么是深拷贝、浅拷贝
   深拷贝：修改新变量的值不会影响原有变量的值，相当于创造一个一模一样的新对象，新旧对象不共享内存

浅拷贝：修改新变量的值会影响原有的变量的值，只复制对象的引用，新旧对象共享同一块内存

对于基本数据类型，拷贝的是变量的值。

把一个对象赋值给一个变量时，赋的是该对象在栈中的地址，而不是堆中的数据。也就是说此时两个对象指向同一块存储空间，因此，修改新变量的值也会影响原有的变量值，新对象和原对象的值是联动的。

	和原数据是否指向同一对象	第一层为基本数据类型	原数据中包含子对象
赋值	是	同时改变	同时改变
浅拷贝	否	不会同时改变	同时改变
深拷贝	否	不会同时改变	不会同时改变

2. 浅拷贝实现
   （1）Object.assign({}，obj)

• 把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

let obj = {
  name: "xm",
  age: 15,
  sex: "男",
  hobby: ["piano", "swim"],
};
let shallowObj = Object.assign({}, obj);
shallowObj.age = 18;
shallowObj.hobby[1] = "run";
console.log(shallowObj, obj);
//shallowObj:{name: 'xm', age: 18, sex: '男', hobby: ['piano', 'run']}
//obj:{name: 'xm', age: 15, sex: '男', hobby: ['piano', 'run']}

（2）Array.prototype.concat() 与 Array.prototype.slice()

let arr = [1, 2, [3, 4]];
let arr1 = arr.concat(); //let arr1 = arr.slice();
arr1[1] = 22;
arr1[2][0] = 33;
console.log(arr, arr1);
//arr: [1, 2, [33, 4]] 《— 修改新对象影响了原对象
//arr1: [1, 22, [33, 4]]

（3）… 运算符

let obj = {
  name: "xm",
  age: 15,
  sex: "男",
  hobby: ["piano", "swim"],
};
let obj2 = { ...obj };
obj2.age = 18;
obj2.hobby[1] = "run";
console.log(obj, obj2);
//obj:{name: 'xm', age: 15, sex: '男', hobby: ['piano', 'run']}
//obj2:{name: 'xm', age: 18, sex: '男', hobby: ['piano', 'run']}

3. 深拷贝实现
   （1）JSON.parse( JSON.stringify() )

let obj = {
  name: "xm",
  age: 15,
  sex: "男",
  hobby: ["piano", "swim"],
};
let deepObj = JSON.parse(JSON.stringify(obj));
deepObj.age = 18;
deepObj.hobby[1] = "run";
console.log(deepObj, obj);
//deepObj:{name: 'xm', age: 18, sex: '男', hobby: ['piano', 'run']}
//obj:{name: 'xm', age: 15, sex: '男', hobby: ['piano', 'swim']}

（2）递归实现

function deepCopy(obj) {
  let newObj = null; //声明一个对象来存储拷贝之后的内容
  //判断数据类型是否是复杂数据类型，如果是则调用自己，如果不是则直接赋值即可！
  //由于null不可以循环但是他的类型又是object,所以这个需要对null进行判断
  if (typeof obj == "object" && obj !== null) {
    //声明一个变量用以存储拷贝出来的值，根据参数的具体数据类型声明不同的类型来存储
    newObj = obj instanceof Array ? [] : {};
    //循环obj的每一项，如果里面还有复杂的数据类型的话，则直接利用递归函数再次调用。
    for (let i in obj) {
      newObj[i] = deepCopy(obj[i]);
    }
  } else {
    newObj = obj;
  }
  return newObj; //函数没有返回的值的话，则位undefined
}
let deepObj = deepCopy(obj);
deepObj.age = 18;
deepObj.hobby[1] = "run";
console.log(obj, deepObj);

（3）lodash 函数库实现

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = \_.cloneDeep(objects);

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： 不想
• 本文链接： https://evacat.top/2022/02/11/深拷贝和浅拷贝/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！