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对象属性。