谈谈浅拷贝和深拷贝

以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

浅拷贝

• Object.assign()实现浅拷贝，将基本数据类型的数据(数值，字符串等)进行复制一份，不包括引用数据类型的数据(数组、对象等)，引用数据类型的数据将复制其地址，互用数据，这将会导致数据污染，不能保证数据独立

var o1 = { b: 1, c: { d: 2 } };
var o2 = Object.assign({}, o1);
o1.b = 3;
o1.c.d = 3;
console.log(o1);
console.log(o2);

image.png

深拷贝

• JSON.parse(JSON.stringify())实现深拷贝，实现引用数据类型的数据进行复制，保证数据独立，但是定义的方法将会丢失

ar o1 = { b: 1, c: { d: 2 } };
var o2 = JSON.parse(JSON.stringify(o1));
o1.b = 3;
o1.c.d = 3;
console.log(o1);
console.log(o2);

image.png

image.png

• 函数库lodash。该函数库有提供 _.cloneDeep ()方法，方法将不会丢失

import _ from "lodash";
var o1 = { b: 1, c: { d: 2 }, f: function() {} };
var o2 = _.cloneDeep(o1);
o1.b = 3;
o1.c.d = 3;
console.log(o1);
console.log(o2);

image.png

• 实现深拷贝方法

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

var o1 = { b: 1, c: { d: 2 }, f: function() {} };
var o2 = deepClone1(o1);
o1.b = 3;
o1.c.d = 3;
console.log(o1);
console.log(o2);