如何用解构赋值快速更新同接口对象？ES2015-2017代码重构

Great question! Let's break down how to refactor your ES5 object update logic using ES2015-2017 features (plus TypeScript goodness since you're working with Angular).

First, let's assume your original ES5 function looks something like this—where you manually check each property to see if an update exists, then build a new object:

// 示例ES5实现
updateMyObj = function(existingObj, updates) {
  return {
    name: updates.name !== undefined ? updates.name : existingObj.name,
    id: updates.id !== undefined ? updates.id : existingObj.id,
    description: updates.description !== undefined ? updates.description : existingObj.description,
    someBool: updates.someBool !== undefined ? updates.someBool : existingObj.someBool,
    anotherBool: updates.anotherBool !== undefined ? updates.anotherBool : existingObj.anotherBool
  };
};

基础重构：解构+对象扩展运算符 #

With ES2017 (which supports object spread), we can simplify this drastically. Combine it with TypeScript's Partial utility type to enforce type safety for the updates parameter:

const updateMyObj = (existingObj: myObj, updates: Partial<myObj>): myObj => {
  // 用扩展运算符合并现有对象和更新，更新属性会覆盖原有属性
  return { ...existingObj, ...updates };
};

• Partial<myObj> makes all properties of myObj optional, so you can pass only the properties you want to update.
• The object spread operator (...) copies all properties from existingObj, then overwrites any that exist in updates—no more manual ternary checks!

进阶：限制不可修改的属性 #

If you want to prevent certain properties (like id, which is probably a unique identifier) from being updated, use destructuring to exclude them first:

const updateMyObj = (existingObj: myObj, updates: Omit<Partial<myObj>, 'id'>): myObj => {
  // 解构赋值拆分出不可修改的id和剩余属性
  const { id, ...restOfExisting } = existingObj;
  // 合并id、剩余原有属性和更新（确保id不会被覆盖）
  return { id, ...restOfExisting, ...updates };
};

• Omit<Partial<myObj>, 'id'> removes id from the allowed update properties, so TypeScript will throw an error if someone tries to pass an id in updates.
• Destructuring lets us isolate the id property, guaranteeing it stays unchanged.

精细控制：处理特殊属性逻辑 #

If you need custom logic for specific properties (e.g., replacing empty description with a default), use destructuring to extract that property from updates with a fallback:

const updateMyObj = (existingObj: myObj, updates: Partial<myObj>): myObj => {
  // 解构提取description，默认值为现有对象的description
  const { description = existingObj.description, ...otherUpdates } = updates;
  // 自定义逻辑：如果更新的description是空字符串，用默认文本
  const finalDescription = description === '' ? 'Default item description' : description;
  
  // 合并所有内容
  return { ...existingObj, ...otherUpdates, description: finalDescription };
};

• Destructuring with a default value ensures we fall back to the existing description if no update is provided.
• We can then apply custom logic to that property before merging it into the final object.

为什么这比ES5好？ #

• Cleaner code: No repetitive conditionals for each property.
• Type safety: TypeScript's utility types (Partial, Omit) ensure you can't pass invalid update properties.
• Immutable: We return a new object instead of mutating the original, which aligns with modern JavaScript/Angular best practices.

内容的提问来源于stack exchange，提问作者J. Hesters