JS 在赋值对象,如果直接赋值会出现问题,如下:
let category = {
name: '数码',
sort: 2
};
let category2 = category;
category2.name = '家电';
console.log(category) // { name: '家电', sort: 2 }
console.log(category2) // { name: '家电', sort: 2 }
此时你改动category2,但是category也改动了
浅克隆
使用Object.assign({}, category)
let category = {
name: '数码',
sort: 2
};
let category2 = Object.assign({}, category);
category2.name = '家电';
console.log(category) // { name: '数码', sort: 2 }
console.log(category2) // { name: '家电', sort: 2 }
如果深层次的对象,却还是会出现问题
let category = {
name: '数码',
sort: 2,
product: {
name: '相机',
sort: 1,
}
};
let category2 = Object.assign({}, category);
category2.name = '家电';
category2.product.name = '电视机';
console.log(category)// { name: '数码', sort: 2, product: { name: '电视机', sort: 1 } }
console.log(category2)// { name: '家电', sort: 2, product: { name: '电视机', sort: 1 } }
可以看到,我虽然外面一层没有被影响,但是我改动里面product,两个都改动了。
深克隆
我们可以利用JSON来达到深克隆的效果,解决这个问题
let category = {
name: '数码',
sort: 2,
product: {
name: '相机',
sort: 1,
}
};
let category2 = JSON.parse(JSON.stringify(category));
category2.name = '家电';
category2.product.name = '电视机';
console.log(category) // { name: '数码', sort: 2, product: { name: '相机', sort: 1 } }
console.log(category2)// { name: '家电', sort: 2, product: { name: '电视机', sort: 1 } }