JS:为什么在setInterval()处理程序的调用中保留对象键值

Question

我对setInterval((函数调用中复制/克隆的对象数组及其值的行为感到困惑。

假设我有一个»state«，这是一个对象数组，每个对象都有一个持有数值的键…

const state = [
{
id: 'a',
valueToIncrement: 0
},
...
]

当我在setInterval()调用的处理程序函数中复制原始状态数组时(使用排列运算符(，然后增加这个新状态数组中任何对象的值…

const interval = setInterval(() => {
///////////////////
// Copy state... //
///////////////////

const newState = [...state];

////////////////////////
// ...increment value //
////////////////////////

newState[0].valueToIncrement = newState[0].valueToIncrement + 1;
console.log(newState)
}, 1000);

…我希望这个对象的新值始终是原始值+1，因为在处理程序函数开始时，初始状态被复制。

然而，事实并非如此。递增的值似乎在处理程序函数的调用中得到了保留。在每次处理程序调用结束时记录复制的状态时，我可以看到修改后的对象的值在增加。为什么？值总是从原始值复制的，难道不应该重置吗？

(演示片段(

const state = [{
id: 'a',
valueToIncrement: 0
}]
const interval = setInterval(() => {
///////////////////
// Copy state... //
///////////////////
const newState = [...state];
////////////////////////
// ...increment value //
////////////////////////
newState[0].valueToIncrement = newState[0].valueToIncrement + 1;
console.log(newState)
}, 1000);

Answer 1

您可以使用structuredClone((代替

const interval = setInterval(() => {
///////////////////
// Copy state... //
///////////////////

const newState = structuredClone(state);

////////////////////////
// ...increment value //
////////////////////////

newState[0].valueToIncrement++;
console.log(newState)
}, 1000);