javascript - 循环中的 ES6 解构和变量赋值

Question

我正在尝试使用 ES6 语法解构对象，然后在循环内重新分配变量。

ES5

this.playlist.forEach((item, i) => {
  item.timeoutId = setTimeout(() => {
    item.sound.play()
  }, 1000 * i)
})

ES6(不工作)

this.playlist.forEach(({sound, timeoutId}, i) => {
 timeoutId = setTimeout(() => {
   sound.play()
  }, 1000 * i)
})

知道为什么它不起作用吗？

Answer 1

它应该可以工作，但有一个警告:

timeoutId = setTimeout(() => {
    sound.play()
}, 1000 * i)

timeoutId 是 item.timeoutId 中的值，而不是它的别名。当您为 timeoutId 赋值时，它不会被赋回给 item.timeoutId。

使用 item.timeoutId 取消超时将不起作用，因为 item.timeoutId 不包含超时 ID。

在示例中，您可以看到 timeoutId 保持为 null:

const arr=[{ id: 1, timeoutId: null }, { id: 2,timeoutId: null }, { id: 3, timeoutId: null }, { id: 4, timeoutId: null }];

arr.forEach(({sound, timeoutId}, i) => {
 timeoutId = setTimeout(() => {
   //sound.play()
  }, 1000 * i)
})

console.log(arr);

@guest271314 指出的解决方案是直接分配给属性，使用 forEach(数组)的第三个参数和索引:

const arr=[{ id: 1, timeoutId: null }, { id: 2,timeoutId: null }, { id: 3, timeoutId: null }, { id: 4, timeoutId: null }];

arr.forEach(({sound}, i, arr) => {
 arr[i].timeoutId = setTimeout(() => {
   //sound.play()
  }, 1000 * i)
})

console.log(arr);