JavaScript数组引用变量不随索引更新，如何实现响应式赋值？

问题原因 #

string数组中存储的是字符串基础类型，你给part赋值时执行的是值拷贝：相当于直接把count=0时对应的数组值'h'复制了一份单独存到part变量里。后续count的变化不会触发part重新去数组读取最新值，所以两次打印结果一致。

实现响应式更新的方案 #

方案1：取值函数（最简单通用） #

把part定义为函数，每次需要取值时调用即可实时获取当前索引对应的数组值：

let string = ['h', 'e', 'l', 'l', 'o'];
let count = 0;
const part = () => string[count];

console.log(part()); // 输出 'h'
count ++;
console.log(part()); // 输出 'e'

方案2：对象getter（无需括号调用） #

如果希望part像普通变量一样不用加括号调用，可以把它挂载到对象上通过getter定义：

let string = ['h', 'e', 'l', 'l', 'o'];
let count = 0;
const wrapper = {
  get part() {
    return string[count];
  }
}

console.log(wrapper.part); // 输出 'h'
count ++;
console.log(wrapper.part); // 输出 'e'

方案3：响应式状态封装（适合复杂场景） #

如果项目中有大量这类关联更新需求，可以用前端框架内置的响应式能力（比如Vue的ref、React的useState），本质是监听count变化后自动触发重新取值，简单场景用前两种方案即可满足需求。

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