Object.assign深浅拷贝

浅(引用)拷贝:共用同一内存地址,你改值我也变,比如:

let object = {a:1,b:2}
let b = object 

深拷贝:深拷贝即创建新的内存地址保存值(互不影响)

const deepCopy = obj => {
  JSON.parse(JSON.stringify(obj))
}
  • 优点:能正确处理的对象只有Number、String、Array等能够被json表示的数据结构
  • 缺点: 比如函数这种不能被json表示的类型将不能被正确处理

object.assign(对象深、浅拷贝)

乍一看貌似深浅拷贝的特征都符合

// 深拷贝

let srcObj = {
  'name': 'lilei',
  'age': '20'
};
 
let copyObj2 = Object.assign({}, srcObj, {
  'age': '21'
});
 
copyObj2.age = '23';
 
console.log('srcObj', srcObj); //{ name: 'lilei', age: '20' }

// 浅拷贝

srcObj = {
  'name': '明',
  grade: {
    'chi': '50',
    'eng': '50'
  }
};
copyObj2 = Object.assign({}, srcObj);
copyObj2.name = '红';
copyObj2.grade.chi = '60';
console.log('新 objec srcObj', srcObj); // { name: '明', grade: { chi: '60', eng: '50' } }

从例子中可以看出,改变复制对象的name 和 grade.chi ,源对象的name没有变化,但是grade.chi却被改变了。因此我们可以看出Object.assign拷贝对象属性,如果对象属性是一个值,那拷贝的只是属性值,如果源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。

也就是说,对于Object.assign()而言, 如果对象的属性值为简单类型(string, number),通过Object.assign({},srcObj);得到的新对象为‘深拷贝’;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的。这是Object.assign()特别值得注意的地方

Object.assign目标对象中的属性将被源对象中的属性覆盖

参考链接:https://www.cnblogs.com/cisum/p/10184844.html

你可能感兴趣的:(vue,javascript)