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

Answer 2

它不工作，因爲你的ES6代碼基本上是一個相當於這個代碼：

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

所以你只是重新分配一個局部變量，而不是一個item對象屬性。