动态设置对象属性与键时，如何通过解构满足Linter要求？

嘿，我完全懂你现在的痛点——用动态键给对象赋值时，myobj[key] = val这种写法老是被Linter盯上，想要用解构相关的写法让它满意对吧？其实核心思路是用对象展开运算符结合动态属性语法来实现，既符合Linter的规范（尤其是偏好不可变编程的规则），又能达到你要的效果。

下面分两种场景给你具体示例：

场景1：创建新对象（推荐，符合不可变编程规范） #

如果你的项目Linter倾向于避免直接修改原对象，那最好的方式是基于原对象创建一个新对象，用展开运算符复制原有属性，再用动态键覆盖目标值：

const myobj = { foo: 'bar' };
const key = 'foo';
const val = 'baz';

// 用展开运算符+动态属性创建更新后的新对象
const updatedObj = {
  ...myobj, // 复制原对象的所有属性
  [key]: val // 用动态键覆盖指定属性的值
};

这种写法不仅能让Linter满意，还能保持原对象的不可变性，避免意外的副作用，很多现代前端项目的编码规范都推荐这种方式。

场景2：一定要修改原对象 #

如果你确实需要修改原对象本身（而不是创建新对象），那可以先解构出原对象中除了目标键之外的所有属性，再重新组合并赋值给原对象（注意原对象得用let声明，因为const变量不能被重新赋值）：

let myobj = { foo: 'bar' }; // 这里用let而不是const
const key = 'foo';
const val = 'baz';

// 解构出目标键和剩余属性
const { [key]: _, ...rest } = myobj;
// 重新组合对象并赋值给原变量
myobj = { ...rest, [key]: val };

本质上这和场景1的逻辑一致，只是把新对象重新赋值给了原变量，模拟了“修改原对象”的效果。

额外小技巧：批量更新属性 #

如果要同时更新多个动态属性，可以把所有更新项放到一个对象里，再和原对象合并：

const myobj = { foo: 'bar', test: 'oldVal' };
const updates = { foo: 'baz', test: 'newVal' };

const updatedObj = { ...myobj, ...updates };

这种写法简洁高效，Linter绝对会喜欢。

内容的提问来源于stack exchange，提问作者Coder1