JavaScript 复制属性

在 JavaScript 中,复制属性是一项常见的操作。它允许我们将一个对象的属性值复制到另一个对象中,或者从一个对象中复制某个属性到另一个属性。

复制对象属性的方法

JavaScript 提供了几种不同的方法来复制对象属性。让我们一一介绍它们。

1. 使用扩展运算符

扩展运算符(Spread Operator)是 JavaScript ES6 中引入的一种语法,可以用来复制对象属性。

const obj1 = { name: 'Alice', age: 25 };
const obj2 = { ...obj1 };
console.log(obj2); // 输出 { name: 'Alice', age: 25 }

上述代码中,我们使用扩展运算符将 obj1 的属性复制到 obj2 中。这样,obj2 就拥有了与 obj1 相同的属性。

2. 使用 Object.assign 方法

Object.assign() 是 JavaScript 提供的另一种复制对象属性的方法。它将一个或多个源对象的属性复制到目标对象中。

const obj1 = { name: 'Alice', age: 25 };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // 输出 { name: 'Alice', age: 25 }

在上述代码中,我们创建了一个空对象作为目标对象,然后使用 Object.assign() 方法将 obj1 的属性复制到 obj2 中。

3. 使用 for...in 循环

使用 for...in 循环可以遍历对象的属性,并将它们复制到另一个对象中。

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

for (let key in obj1) {
  obj2[key] = obj1[key];
}

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

上述代码中,我们使用 for...in 循环遍历 obj1 的属性,并逐一复制到 obj2 中。

复制属性的注意事项

在复制属性时,需要注意以下几点:

1. 原始数据类型的复制

当复制的属性值是原始数据类型(如字符串、数字、布尔值等)时,它们是通过值进行复制的。

let a = 5;
let b = a;
a = 10;

console.log(b); // 输出 5

在上述代码中,将 a 的值复制给 b 后,修改 a 的值不会影响到 b

2. 引用数据类型的复制

当复制的属性值是引用数据类型(如对象、数组等)时,它们是通过引用进行复制的。

const obj1 = { name: 'Alice', age: 25 };
const obj2 = obj1;
obj1.name = 'Bob';

console.log(obj2.name); // 输出 'Bob'

在上述代码中,将 obj1 赋值给 obj2 后,修改 obj1 的属性值也会同时修改 obj2 的属性值。

3. 深拷贝和浅拷贝

在复制属性时,有时我们希望创建一个新对象并复制所有属性,而不是只复制引用。这就涉及到深拷贝和浅拷贝的问题。

浅拷贝只复制对象的一层属性,而深拷贝会递归地复制所有嵌套对象的属性。

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

console.log(obj2.address.city); // 输出 'New York'

obj1.address.city = 'San Francisco';

console.log(obj2.address.city); // 输出 'San Francisco'

上述代码中,obj1 的属性 address 是一个对象。通过扩展运算符进行浅拷贝后,修改 obj1address 的属性值也会影响到 obj2

要实现深拷贝,我们可以使用 JSON.stringify() 和 JSON.parse() 方法,将对象转换为 JSON 字符串再解析回对象。

const obj1 = { name: 'Alice', age: 25, address: { city: '