js克隆对象怎么更改值

使用JavaScript克隆对象并更改值的方法包括：浅拷贝、深拷贝、使用JSON序列化和反序列化、结构赋值、以及使用库（如Lodash）。 在这篇文章中，我们将详细介绍这些方法，并讨论它们的优缺点和使用场景。

一、浅拷贝

浅拷贝是指只复制对象的第一层属性，而不复制嵌套的对象。浅拷贝的方法包括Object.assign()和展开运算符（…）。

1、Object.assign()

Object.assign()方法将一个或多个源对象的所有可枚举属性复制到目标对象。

const original = {a: 1, b: {c: 2}};
const copy = Object.assign({}, original);
copy.a = 2;
copy.b.c = 3; // 修改嵌套对象的值
console.log(original); // {a: 1, b: {c: 3}}

在上述例子中，我们看到修改嵌套对象的值会影响原始对象。这是因为Object.assign()是浅拷贝。

2、展开运算符

展开运算符（…）可以用于浅拷贝对象。

const original = {a: 1, b: {c: 2}};
const copy = {...original};
copy.a = 2;
copy.b.c = 3; // 修改嵌套对象的值
console.log(original); // {a: 1, b: {c: 3}}

与Object.assign()类似，展开运算符也只能进行浅拷贝。

二、深拷贝

深拷贝是指递归地复制对象的所有嵌套对象和属性。常用的方法包括JSON.parse(JSON.stringify())和使用第三方库（如Lodash）。

1、JSON序列化和反序列化

这种方法将对象转换为JSON字符串，然后再解析为新对象。

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

这种方法的缺点是它不能复制函数、undefined、Infinity、NaN等特殊值。

2、使用Lodash库

Lodash是一个功能强大的JavaScript实用工具库，提供了深拷贝功能。

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

Lodash的_.cloneDeep()方法能够处理复杂的对象结构，包括函数和其他特殊值。

三、结构赋值

结构赋值是一种简洁的语法，用于从对象或数组中提取值并赋值给变量。结合展开运算符，可以实现克隆和修改对象。

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

结构赋值和展开运算符结合使用可以实现深拷贝，但对于非常复杂的对象结构，代码可能会变得冗长。

四、使用函数实现深拷贝

可以编写自定义函数来实现深拷贝，适用于特定场景或需要特殊处理的对象。

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key]);
    }
  }
  return copy;
}
const original = {a: 1, b: {c: 2}};
const copy = deepClone(original);
copy.a = 2;
copy.b.c = 3;
console.log(original); // {a: 1, b: {c: 2}}

这种方法的优点是可以完全自定义深拷贝逻辑，但编写和维护可能较复杂。

五、使用第三方库

除了Lodash，还有其他第三方库可以用于深拷贝，如deepmerge和ramda。

1、deepmerge

deepmerge库专注于合并和深拷贝对象。

const merge = require('deepmerge');
const original = {a: 1, b: {c: 2}};
const copy = merge({}, original);
copy.a = 2;
copy.b.c = 3;
console.log(original); // {a: 1, b: {c: 2}}

2、Ramda

ramda是一个函数式编程库，提供了深拷贝功能。

const R = require('ramda');
const original = {a: 1, b: {c: 2}};
const copy = R.clone(original);
copy.a = 2;
copy.b.c = 3;
console.log(original); // {a: 1, b: {c: 2}}

六、选择合适的克隆和修改方法

选择合适的方法取决于对象的复杂性、性能要求和具体需求。

1、简单对象和浅拷贝

对于简单对象和浅拷贝需求，Object.assign()和展开运算符是最佳选择。

2、复杂对象和深拷贝

对于复杂对象和深拷贝需求，JSON.parse(JSON.stringify())方法适用于没有特殊值的对象，而Lodash等库则提供了更强大的功能。

3、自定义需求

对于需要特殊处理的对象，可以编写自定义深拷贝函数或使用第三方库。

4、性能考虑

在性能关键的应用中，应避免使用性能较差的方法，如JSON.parse(JSON.stringify())，而应选择更高效的深拷贝方法。

七、总结

在JavaScript中克隆对象并更改值的方法多种多样，选择合适的方法取决于具体情况。浅拷贝方法如Object.assign()和展开运算符适用于简单对象，深拷贝方法如JSON.parse(JSON.stringify())和Lodash适用于复杂对象，自定义函数和第三方库提供了更多灵活性。通过了解和掌握这些方法，可以有效地处理对象克隆和修改需求，提高代码质量和性能。