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을 사용하면 시간 제한을 취소해도 작동하지 않습니다. @ guest271314에서 언급 한 바와 같이

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

솔루션하여 3 매개 변수를 사용하여 직접 속성에 할당하는 것입니다 : 예에서

, 당신은 timeoutId이 null이 남아 있음을 알 수 forEach (배열) 및 인덱스 :

,210

Answer 2

당신의 ES6 코드이 코드에 해당하는 기본적이기 때문에 작동하지 않습니다

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

그래서 당신은 단지 item 개체 속성 대신 로컬 변수를 재 할당하는가.