JavaScript 루프와 범위(코드 첨부) 간의 관계 분석

우리는 업무에서 JavaScript를 자주 사용하는데, 이는 업무와 밀접한 관련이 있습니다. 그런데 개발자들에게 골칫거리가 될 수 있는 자바스크립트의 특징이 있는데, 다음에는 루프와 스코프의 관계에 대해 이야기해 보겠습니다.

예:

const operations = []
for (var i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

기본적으로 5번 반복하고 작업 배열에 함수를 추가합니다. 이 함수는 루프 변수 인덱스 값 i를 인쇄할 수 있습니다.
이 함수를 실행한 후 예상되는 결과는 다음과 같습니다.
0 1 2 3 4

그러나 실제로 일어나는 일은 다음과 같습니다.

5 5 5 5

이 상황은 무엇입니까? ? var가 사용되었기 때문에 var 변수가 승격되므로 위 코드는

var i;
const operations = []
for (i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

와 동일합니다. 따라서 for-of 루프에서 i는 여전히 표시되며 5와 같으며 매번 함수에 포함됩니다. i 에는 이 값이 사용됩니다.
원하는 대로 만들려면 어떻게 해야 할까요?
가장 간단한 해결책은 let 선언을 사용하는 것입니다. ES2015에 도입된 이 선언은 큰 도움이 되며 var 선언 사용과 관련된 몇 가지 이상한 문제를 피할 수 있습니다.
변수를 반복할 때 var를 let으로 변경하면 매우 잘 실행될 수 있습니다.

const operations = []
for (let i = 0; i < 5; i++) {
  operations.push(() => {
    console.log(i)
  })
}
for (const operation of operations) {
  operation()
}

출력 결과는 다음과 같습니다.

0 1 2 3 4

각 루프가 반복되기 때문에 이것이 어떻게 달성됩니까? 동시에 각 함수가 작업 배열을 추가하면 자체 i를 얻을 수 있습니다.
이 경우 const를 사용할 수 없다는 점을 기억하세요. 두 번째 루프에서 새 값을 할당하려고 할 때 for가 오류를 보고하게 되기 때문입니다.
이 문제에 대한 또 다른 매우 일반적인 해결책은 ES6 이전 코드를 사용하는 것인데, 이를 즉시 호출 함수 표현식(IIFE)이라고 합니다.
이 경우 전체 함수를 래핑하고 위에 i를 바인딩할 수 있습니다. 이런 방식으로 즉시 실행될 수 있는 함수를 만들고 그 함수에서 새 함수를 반환합니다. 그러면 나중에 실행할 수 있습니다.

rreee

위 내용은 JavaScript 루프와 범위(코드 첨부) 간의 관계 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!