如何设置getter返回数组中对象的属性？赋值失效问题求解

嘿，这个问题的核心在于你使用的getter函数每次都会返回全新的数组及对象实例，导致你做的修改根本没被保留下来！

为什么原代码不生效？ #

你定义的get names()每次被访问时，都会重新创建一个包含三个新对象的数组。当你执行data.names[1].name = "Yossi"时，你修改的只是这次getter调用返回的临时对象；等你下次访问data.names，getter又会生成一套全新的对象，之前的修改自然就“消失”了。

哪怕你给单个对象手动加setter也没用——因为这个带setter的对象也是每次getter调用时重新创建的，修改的依然是临时实例。

解决方案 #

根据你的需求，有两种常用的处理方式：

1. 直接存储数组（不需要getter）

如果不需要动态生成names数组，直接把数组作为data的属性即可，这样每次访问data.names都是同一个数组实例：

var data = { 
  names: [ 
    { name: "name1" }, 
    { name: "name2" }, 
    { name: "name3" }, 
  ] 
} 
data.names[1].name = "Yossi"; 
console.log(data.names[1]); // 输出 { name: "Yossi" }

2. 缓存数组实例（保留getter的同时复用数组）

如果必须使用getter（比如需要在某些时机动态更新数组，但平时要复用实例），可以把数组存在私有属性中，让getter返回这个固定的实例：

var data = {
  // 用下划线标记私有属性（约定俗成）
  _names: [ 
    { name: "name1" }, 
    { name: "name2" }, 
    { name: "name3" }, 
  ],
  get names() {
    return this._names; // 每次都返回同一个数组实例
  }
}
data.names[1].name = "Yossi";
console.log(data.names[1]); // 正确输出修改后的对象

如果你的场景确实需要每次getter都生成新数组，但要保留修改，那可能需要额外的逻辑同步修改到源数据（比如使用Proxy代理数组对象），不过这种情况比较少见，上面两种方案基本能覆盖大多数场景啦！

内容的提问来源于stack exchange，提问作者Yuval A.