js 对象赋值给另一个对象|极客笔记

js 对象赋值给另一个对象

在 JavaScript 中，对象是一种复杂的数据类型，它们由键值对组成。当我们需要将一个对象的值赋给另一个对象时，有几种方法可以实现。本文将详细介绍在 JavaScript 中对象赋值的相关知识，并给出相应的示例代码。

浅拷贝 vs 深拷贝

在讨论对象赋值之前，我们需要了解浅拷贝和深拷贝的概念。浅拷贝是指将对象的属性值复制到一个新的对象中，如果属性值是引用类型（例如对象、数组），则新对象中的属性仍然指向原始对象中的引用。深拷贝是指将对象的所有属性值都复制到一个新的对象中，并且所有属性值都是全新的，不存在引用关系。

在 JavaScript 中，对象赋值通常是浅拷贝的，这意味着通过简单的赋值操作只会复制对象的引用，而不会创建新的对象。

方法一：使用 Object.assign()

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象。如果目标对象已经存在相同的属性，则会覆盖原来的值。下面是一个示例：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const newObj = Object.assign({}, obj1, obj2);

console.log(newObj); // { a: 1, b: 3, c: 4 }

在上面的示例中，obj1 和 obj2 合并到了 newObj 中，如果有相同的属性，则后面的属性值会覆盖前面的值。

方法二：使用展开操作符（…）

展开操作符 ... 可以将一个对象展开成多个参数。通过使用展开操作符，我们可以快速地实现对象的浅拷贝。下面是一个示例：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const newObj = { ...obj1, ...obj2 };

console.log(newObj); // { a: 1, b: 3, c: 4 }

在上面的示例中，我们将 obj1 和 obj2 展开到一个新的对象 newObj 中，实现了对象的浅拷贝。

注意事项

在使用以上方法进行对象赋值时，需要注意以下几点：

如果对象的属性值是引用类型（例如对象、数组），浅拷贝会导致新对象中的属性值仍然指向原始对象的引用。这意味着修改新对象的属性值可能会影响到原始对象。
对于嵌套对象或深度层次较多的对象，浅拷贝可能无法完全复制所有属性值，这时就需要使用深拷贝来保证所有属性都被复制到新对象中。

深拷贝

实现深拷贝的方法有很多种，其中比较常用的是 JSON 序列化和反序列化。下面是一个使用 JSON 的深拷贝示例：

const obj = { a: 1, b: { c: 2 } };

const newObj = JSON.parse(JSON.stringify(obj));

console.log(newObj); // { a: 1, b: { c: 2 } }

需要注意的是，使用 JSON 序列化和反序列化的方式虽然可以实现深拷贝，但也存在一些局限性，比如无法拷贝函数、循环引用等特殊情况。

结论

在 JavaScript 中，对象赋值是一个常见的操作。通过浅拷贝和深拷贝，我们可以实现对象之间的赋值，并控制属性值的引用关系。在选择对象赋值的方法时，需要根据具体情况来决定使用哪种方式，以确保复制的对象符合预期。

js 对象赋值给另一个对象