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將不包含超時ID，因此無法使用item.timeoutId取消超時。

在示例中，您可以看到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 （數組）的第3個參數和索引直接將屬性分配給該屬性：

 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); 

Answer 2

它不起作用，因為您的ES6代碼基本上等效於以下代碼：

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

因此，您只是在重新分配局部變量，而不是item對象屬性。