js 对象变量赋值

在JavaScript中，对象变量的赋值是一个常见的操作，但也有一些需要注意的地方，特别是涉及到引用类型时的行为。

基础概念

在JavaScript中，对象是引用类型。当你创建一个对象并将其赋值给一个变量时，实际上是将对象的引用（内存地址）赋值给了变量，而不是对象本身。

示例代码

let obj1 = { name: 'Alice', age: 25 };
let obj2 = obj1;

console.log(obj2); // { name: 'Alice', age: 25 }

obj2.name = 'Bob';

console.log(obj1); // { name: 'Bob', age: 25 }
console.log(obj2); // { name: 'Bob', age: 25 }

在这个例子中，obj2 被赋值为 obj1 的引用，因此它们实际上指向同一个对象。修改 obj2 的属性也会影响到 obj1。

深拷贝与浅拷贝

为了避免这种引用行为带来的问题，可以使用深拷贝或浅拷贝。

浅拷贝

浅拷贝只复制对象的顶层属性，如果属性值是引用类型，则复制的是引用。

let obj1 = { name: 'Alice', age: 25, address: { city: 'New York' } };
let obj2 = { ...obj1 };

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';

console.log(obj1); // { name: 'Alice', age: 25, address: { city: 'Los Angeles' } }
console.log(obj2); // { name: 'Bob', age: 25, address: { city: 'Los Angeles' } }

深拷贝

深拷贝会递归地复制对象的所有属性及其嵌套对象，确保新对象与原对象完全独立。

let obj1 = { name: 'Alice', age: 25, address: { city: 'New York' } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';

console.log(obj1); // { name: 'Alice', age: 25, address: { city: 'New York' } }
console.log(obj2); // { name: 'Bob', age: 25, address: { city: 'Los Angeles' } }

应用场景

数据共享：当你需要多个变量共享同一个对象时，可以直接赋值。
数据独立：当你需要创建一个对象的独立副本，避免修改副本影响原对象时，可以使用深拷贝。

常见问题及解决方法

问题：修改副本对象的属性会影响原对象

原因：因为对象是引用类型，赋值操作复制的是引用，而不是对象本身。

解决方法：使用深拷贝来创建对象的独立副本。

let obj1 = { name: 'Alice', age: 25 };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.name = 'Bob';

console.log(obj1); // { name: 'Alice', age: 25 }
console.log(obj2); // { name: 'Bob', age: 25 }

问题：深拷贝的性能问题

原因：深拷贝需要递归地复制对象的所有属性及其嵌套对象，可能会消耗较多的时间和内存。

解决方法：对于大型对象或性能敏感的场景，可以考虑使用更高效的深拷贝方法，如使用第三方库（例如 lodash 的 _.cloneDeep 方法）。

const _ = require('lodash');

let obj1 = { name: 'Alice', age: 25, address: { city: 'New York' } };
let obj2 = _.cloneDeep(obj1);

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';

console.log(obj1); // { name: 'Alice', age: 25, address: { city: 'New York' } }
console.log(obj2); // { name: 'Bob', age: 25, address: { city: 'Los Angeles' } }

通过理解这些基础概念和方法，你可以更好地处理JavaScript中对象变量的赋值问题。