JavaScript函数式向对象内数组追加元素的写法合理性校验

假设存在如下结构的对象：

const team = {
  name: "something",
  members: [1, 2, 3],
};

希望向上述对象的members数组中追加数值4，请问如下代码写法是否合理？

const newTeam = { ...team, members: team.members.concat(userId) };

我选用concat方法的原因是它不会修改原数组，且认为该场景下无需使用map方法，请问这个思路是否正确？

你的代码写法完全合理，整体思路也基本正确。

思路校验 #

• 你选concat的理由站得住脚：Array.prototype.concat()本身就会返回拼接后的新数组，绝不会改动原members数组的内容和引用，完全符合你不想修改原数据的初衷。
• 你说这个场景用不着map的判断也没毛病：map从设计上就是用来遍历整个数组，把每个元素做对应转换生成新数组的。你现在只是想往数组末尾加一个数，既不用遍历所有老成员，也不用改任何已有成员的值，硬用map反而要多写判断逻辑，纯纯多此一举。

补充参考 #

• 你这套写法本质上是对原team对象做浅拷贝，只覆盖要改动的members字段，完全不会动原team的引用，这种写法本身就是前端做不可变状态更新的标准操作，不管是写React状态、Redux逻辑还是普通的工具函数，这么写都不会出问题。
• 你也可以用和concat效果一模一样的展开写法：members: [...team.members, userId]，俩写法性能、逻辑上没任何区别，跟着团队的编码习惯选就行。
• 千万别图省事直接写team.members.push(userId)改原数组，这种操作会直接动到原数组的引用，很容易让其他依赖原对象的逻辑出莫名其妙的bug。
• 另外要注意浅拷贝的固有特点：如果以后members里存的不是数字而是对象，新旧数组里的对象还是共享同一个引用的，只要你不直接改这些对象的内部属性、不随便改数组本身的结构，这么写就完全没问题。

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