Object.assign（）

Object.assign 是一个 JavaScript 的方法，用于将所有可枚举的属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

用法

Object.assign(target, ...sources)

• target: 目标对象，将接收来自源对象的属性。
• ...sources: 一个或多个源对象，这些对象的属性将会被复制到目标对象上。

const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; // 合并对象 const result = Object.assign(target, source1, source2); console.log(result); // 输出: { a: 1, b: 2, c: 3 }

在 Vue 和 TypeScript 中的使用

注意事项

• 如果目标对象和源对象有相同的属性，则源对象的属性会覆盖目标对象的属性。
• Object.assign 只能复制对象的自身属性和可枚举属性。
• 对于深层属性的合并，Object.assign 无法处理，需要使用其他方法如 lodash 的 _.merge。

在 Vue 和 TypeScript 中的使用

在 Vue 和 TypeScript 环境下，Object.assign 可以用来动态地更新组件的状态或者合并类型定义。

<template>
  <div>{{ mergedData }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      baseData: { message: 'Hello' },
      newData: { count: 42 }
    };
  },
  computed: {
    mergedData() {
      return Object.assign({}, this.baseData, this.newData);
    }
  }
});
</script>

TypeScript 示例
typescript
interface Target {
  a: number;
}

const target: Target = { a: 1 };
const source: Partial<Target> = { a: 2, b: 'extra' as any }; // 使用 Partial 来允许部分属性存在

const result = Object.assign(target, source);
console.log(result); // 输出: { a: 2 }, 注意 b 属性不会出现在结果中