修改对象实例子段的实用方法与注意事项

开发过程中，经常会遇到需要动态调整对象属性的情况。比如用户提交表单后，页面上的数据显示要立刻更新，这时候就得去改某个对象实例的具体字段，也就是常说的‘修改对象实例子段’。

什么是对象实例子段

简单说，一个对象是由多个属性组成的，比如user = { name: '张三', age: 25 }，这里的name和age就是这个实例的子段。当我们在程序里创建了这个user，它就是一个具体的实例，而修改它的任一属性值，就是在修改其实例子段。

直接修改属性

最常见的方法是通过点语法或中括号语法直接赋值：

const person = { name: '李四', status: 'active' };

// 方法一：点语法
person.status = 'inactive';

// 方法二：中括号语法
person['name'] = '王五';

这两种方式在日常开发中非常普遍，适合大多数场景。

处理嵌套对象

如果对象层级较深，比如配置项或表单数据，修改时要注意避免引用污染：

const formData = {
  userInfo: {
    profile: {
      nickname: '小明',
      level: 3
    }
  }
};

// 正确修改嵌套字段
formData.userInfo.profile.nickname = '小红';

虽然这样能改成功，但如果后续要做状态回滚或对比变化，建议使用不可变方式，比如结合展开运算符生成新对象。

结合框架使用（以 Vue 为例）

在 Vue 2 中，直接添加或修改对象的深层属性可能不会触发视图更新。例如：

data() {
  return {
    user: { name: '赵六' }
  };
},
methods: {
  updateAge() {
    // 这样写可能不会响应式更新
    this.user.age = 18;
    
    // 应该用 $set
    this.$set(this.user, 'age', 18);
  }
}

Vue 3 使用 Proxy 后这个问题有所缓解，但初始化时未声明的属性仍需注意。

批量修改的技巧

有时需要根据外部数据批量更新对象字段，可以借助Object.assign：

const defaults = { name: '', email: '', phone: '' };
const input = { name: '陈七', email: 'chen@example.com' };

Object.assign(defaults, input);
// defaults 现在已被修改

这种方式适合表单默认值填充或配置合并。

别忘了类型检查

在 TypeScript 项目中，修改对象前最好确认字段存在，避免运行时错误：

if (obj.hasOwnProperty('email')) {
  obj.email = 'new@exam.com';
}

或者使用可选链配合赋值判断：

if (obj?.settings?.theme) {
  obj.settings.theme = 'dark';
}