JavaScript |创建更改数组中值的间隔答案

【问题标题】：JavaScript | Create interval that changes a value in an arrayJavaScript |创建更改数组中值的间隔
【发布时间】：2018-05-30 10:16:17
【问题描述】：

我有一个数组，简化的形式是这样的：

let array = [
  {id: 1, value: 0}, 
  {id: 2, value: 0}, 
  {id: 3, value: 0}
];

现在我想创建一个间隔，它每秒递增 id: 3 对象的值。我现在要做的是用 array[2].value。只要数组不改变，它就可以工作。

我使用的数组不断变化，这意味着元素以异步方式删除/添加。当发生这种情况时，间隔指向错误的元素。如果我在示例中删除元素 [1]，则间隔现在将指向未定义的元素 ([2])。

我正在考虑使用关联数组（id 作为索引），但在 Angular 中，当我这样做时，ngFor 不再可靠地工作。由于同样的原因，对象也无法正常工作。

如何创建一个区间来改变数组元素的属性，即使索引发生变化？或者我的问题有更好的解决方案吗？

【问题讨论】：

所以你需要定位键，而不是索引？像这样的东西？ jsfiddle.net/9jqu6dhv
这行得通。你有解释为什么吗？代码增加了创建的新数组 .filter 的值，但不知何故旧数组也发生了变化？ :o
stackoverflow.com/questions/24304383/… "它返回一个新数组，但数组的条目仍然是对相同对象的引用。"
好的，非常感谢。这确实需要记录更多 - 没有教程，甚至 mozilla 网站也没有充分解释这一点

标签： javascript arrays angular setinterval

【解决方案1】：

您应该持有对对象的引用，而不是每次都使用索引。例如：

let array = [
  {id: 1, value: 0}, 
  {id: 2, value: 0}, 
  {id: 3, value: 0}
];

function startIncrementing(elem) {
  setInterval(() => elem.value += 5, 500);
}

// Log the array every second
setInterval(() => console.log(array), 1000);

// Start the increment interval
startIncrementing(array[2]);

// Remove an elemnt after 1 second
setTimeout(() => array.splice(1, 1), 1000);

【讨论】：

【解决方案2】：

使用find方法：

function updateValue () {
   var item = array.find(item => item.id === 3)
   if (item) item.value++
}

setTimeout(updateValue, 1000)

【讨论】：

非常感谢，这很好用。终于不再纠结这个问题了！ :D
太棒了！由于数组中的项是对象，因此即使在外部引用，它们仍然会在数组中更新。