js怎么复制属性

在JavaScript中，复制属性的方法有多种，包括使用Object.assign()、扩展运算符、循环遍历等。 其中最常用的方法是Object.assign()和扩展运算符。Object.assign()方法用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象，它返回目标对象。扩展运算符（spread operator）也可以用于复制对象属性，语法简洁，容易理解。接下来，我们将详细讨论这两种方法及其应用。

一、使用Object.assign()方法

Object.assign()方法是JavaScript中最常用的一种复制对象属性的方法。它可以将一个或多个源对象的属性复制到目标对象，并返回该目标对象。

1.1 基本用法

const target = {};
const source = { a: 1, b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

在上述代码中，我们将source对象的所有属性复制到了target对象中。

1.2 多个源对象

Object.assign()方法还可以接受多个源对象，依次将这些源对象的属性复制到目标对象中。如果源对象中有相同的属性名，后面的会覆盖前面的。

const target = {};
const source1 = { a: 1, b: 2 };
const source2 = { b: 3, c: 4 };
Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 3, c: 4 }

二、使用扩展运算符（Spread Operator）

扩展运算符（spread operator）是ES6中引入的一种语法，用于复制对象属性，语法简洁，易于理解。

2.1 基本用法

const source = { a: 1, b: 2 };
const target = { ...source };
console.log(target); // { a: 1, b: 2 }

在上述代码中，我们使用扩展运算符将source对象的所有属性复制到了target对象中。

2.2 多个源对象

扩展运算符也可以用于合并多个对象，如果存在相同的属性名，后面的会覆盖前面的。

const source1 = { a: 1, b: 2 };
const source2 = { b: 3, c: 4 };
const target = { ...source1, ...source2 };
console.log(target); // { a: 1, b: 3, c: 4 }

三、循环遍历属性

除了上述两种方法，还可以使用循环遍历的方法复制对象的属性。

3.1 for…in 语句

for…in 语句用于遍历对象的可枚举属性。

const source = { a: 1, b: 2 };
const target = {};
for (let key in source) {
  if (source.hasOwnProperty(key)) {
    target[key] = source[key];
  }
}
console.log(target); // { a: 1, b: 2 }

3.2 Object.keys()方法

Object.keys()方法返回一个由对象的所有可枚举属性名组成的数组。可以使用该数组遍历并复制属性。

const source = { a: 1, b: 2 };
const target = {};
Object.keys(source).forEach(key => {
  target[key] = source[key];
});
console.log(target); // { a: 1, b: 2 }

四、深拷贝与浅拷贝

需要注意的是，上述方法实现的都是浅拷贝。如果源对象的属性是引用类型（如对象、数组），目标对象中的属性仍然引用源对象中的属性。

4.1 浅拷贝示例

const source = { a: 1, b: { c: 2 } };
const target = { ...source };
source.b.c = 3;
console.log(target.b.c); // 3

在上述代码中，修改source对象中的嵌套对象属性也会影响target对象中的属性。

4.2 深拷贝示例

要实现深拷贝，可以使用JSON.parse()和JSON.stringify()方法，或者使用第三方库如Lodash。

const source = { a: 1, b: { c: 2 } };
const target = JSON.parse(JSON.stringify(source));
source.b.c = 3;
console.log(target.b.c); // 2

五、使用第三方库

除了上述方法，还可以使用第三方库来实现对象属性的复制。Lodash是一个常用的JavaScript工具库，它提供了_.clone()和_.cloneDeep()方法来实现浅拷贝和深拷贝。

5.1 Lodash的_.clone()方法

const _ = require('lodash');
const source = { a: 1, b: 2 };
const target = _.clone(source);
console.log(target); // { a: 1, b: 2 }

5.2 Lodash的_.cloneDeep()方法

const _ = require('lodash');
const source = { a: 1, b: { c: 2 } };
const target = _.cloneDeep(source);
source.b.c = 3;
console.log(target.b.c); // 2

六、总结

在JavaScript中，复制属性的方法有多种，包括Object.assign()、扩展运算符、循环遍历等。Object.assign()方法和扩展运算符是最常用的方法，语法简洁，易于理解。需要注意的是，这些方法实现的都是浅拷贝，如果属性是引用类型，目标对象中的属性仍然引用源对象中的属性。要实现深拷贝，可以使用JSON.parse()和JSON.stringify()方法，或者使用第三方库如Lodash。选择合适的方法取决于具体的应用场景和需求。