object.assign给对象加新字段

Object.assign方法可以将一个或多个源对象的可枚举属性复制到目标对象中，并返回目标对象。如果目标对象中已经存在相同的属性，则会被覆盖。如果只想给目标对象添加新的属性，可以先创建一个空对象作为目标对象，再将需要添加的属性作为一个新对象传入Object.assign方法。例如：

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

这样，target对象就会添加source对象中的a和b两个属性。如果需要在给target对象添加新属性的同时，不改变原有的source对象，可以使用ES6的展开运算符来创建一个新的对象作为参数。例如：

const target = {c: 3};
const source = {a: 1, b: 2};
const newTarget = {...target, ...source};

这样，newTarget对象就会包含原有的c属性以及从source对象中复制过来的a和b两个属性。请注意，在使用展开运算符时需要确保目标对象和源对象中不存在同名属性，否则会被覆盖。

相关问题

object.assign 数组对象中的一些字段

object.assign是一个用于合并对象的方法。在数组对象中，我们可以使用object.assign来合并多个对象，并将它们的字段复制到一个新的对象中。

假设我们有以下两个数组对象：

const arr1 = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const arr2 = [
  {id: 1, age: 25},
  {id: 2, age: 30},
];

如果我们想将这两个数组对象合并，并将id和age字段复制到一个新的对象中，我们可以使用object.assign：

const mergedArray = arr1.map((item, index) => Object.assign({}, item, arr2[index]));

这样，我们就得到了一个合并后的新数组对象mergedArray：

[
  {id: 1, name: 'Alice', age: 25},
  {id: 2, name: 'Bob', age: 30},
]

在这个例子中，我们通过map函数遍历arr1，并在每次遍历时使用object.assign合并arr1的当前元素和arr2的对应元素。每次合并时，我们都创建一个新的空对象{}，这样可以确保原始的arr1和arr2对象不受影响。

通过使用object.assign，我们可以方便地在数组对象中合并字段，并创建一个新的合并后的对象。

vue3 Object.assign

### 如何在 Vue3 中使用 `Object.assign` 方法

在 Vue 3 应用程序中，可以利用 JavaScript 的内置方法 `Object.assign` 来合并对象。此方法不会递归合并嵌套的对象；它只会浅拷贝源对象自身的可枚举属性到目标对象上。

#### 基本语法

const target = { a: 1 };
const source = { b: 2 };

// 合并两个对象并将结果赋给target
Object.assign(target, source); 

console.log(target);
// 输出: Object { a: 1, b: 2 }

当涉及到 Vue 组件内部时，在选项 API 或组合式 API 下都可以方便地调用该函数来处理数据状态管理[^1]。

对于采用 Composition API 构建的应用来说，可以在 setup 函数内直接操作响应式的 ref 和 reactive 变量：

#### 使用示例 (Composition API)

假设有一个场景是在表单提交前更新用户的个人信息，此时就可以借助于 `Object.assign()` 实现对已有 user 对象字段的安全覆盖而不影响其他部分的数据结构。

import { defineComponent } from 'vue';

export default defineComponent({
    name: "UserForm",
    setup() {
        const originalUserData = {
            id: 1,
            username: '',
            email: ''
        }

        let userData = reactive({...originalUserData});

        function updateUserInfo(newInfo){
           // 更新用户信息
           Object.assign(userData, newInfo);

           console.log('Updated User Data:', JSON.stringify(userData));
        }

        return {
          userData,
          updateUserInfo
        }
    },
});

通过上述方式不仅能够简化代码逻辑而且提高了组件间的解耦程度以及维护性[^2]。