JS의 for 주기

여러 가지 다른 방법으로 수조의 원소를 순환할 수 있다.가능한 경우 for, forEach, for..in, for..of 및 for를 볼 수 있습니다.이 네 개 (이곳의 위쌍관어) 는 자주 혼동되는데, 이것이 바로 우리가 해결해야 할 문제이다💪
많은 오래된 코드 라이브러리와 온라인 코드 예시에서, 교체된 그룹에 사용되는 어디에나 있는 i 순환을 볼 수 있습니다.전형적인 설정은 변수i < array.length를 0으로 초기화한다(0번째 요소부터 시작하기를 원하기 때문이다).두 번째 문장은 순환이 몇 번 실행될지 정의하는데 가장 흔히 볼 수 있는 것은 수조의 모든 요소를 교체하는 것이다i.매번 세 번째 문장은 증가한다forEach.이것은 색인을 통해 그룹의 모든 요소에 접근하고 일부 작업을 수행할 수 있도록 합니다.
여기서 우리는 단지 점수를 컨트롤러에 기록할 뿐이다.

const scores = [82, 89, 90, 94, 81];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

> 82
> 89
> 90
> 94
> 81

그러나 더욱 현대적인 코드 라이브러리에서 for..in, for..of와 for의 혼합을 볼 수 있습니다.가장 흔히 볼 수 있는 상황은, 그룹의 모든 요소를 교체하고, 이 요소를 사용해서 어떤 작업을 수행하기를 원하는 것입니다.그럼 어떤 걸로 하실래요?for..of 순환으로 제시된 더 간결한 버전부터 시작합시다.forEach를 사용하면 색인을 추적하거나 줄어드는 것을 걱정하지 않고 모든 요소에 빠르게 접근할 수 있습니다.

const scores = [82, 89, 90, 94, 81];

for (const score of scores) {
  console.log(score);
}

> 82
> 89
> 90
> 94
> 81

forEach를 사용하면 현재 요소의 인덱스, 요소 값, 그룹 자체에 접근할 수 있습니다.듣기 좋죠?네, Functional Programming 모델의 지지자들은 이런 순환 방법을 매우 좋아합니다.async/await 동기화 기능이 필요하므로 await 를 사용할 때 주의해야 합니다.너는 이런 순환body에서 사용할 수 없고forEach, 미리 퇴출for순환을 할 수 없다.break순환에서 우리는 사용할 수 있다for..in.순환 중에 발생할 수 있는 어떤 돌연변이도 반드시 주의해야 한다.

const scores = [82, 89, 90, 94, 81];

scores.forEach((score) => console.log(score));

> 82
> 89
> 90
> 94
> 81

for..in 순환은 그룹이 아니라 대상에 사용됩니다.따라서 수조와 함께 사용하면 의외의 출력을 얻을 수 있다.for가 대상enumerable properties의 교체(최종적으로 우리의 수조는 대상)이기 때문이다.

const scores = [82, 89, 90, 94, 81];

for (const score in scores) {
  console.log(score);
}

> 0
> 1
> 2
> 3
> 4

여기에는 언제 사용하는지에 대한 기본적인 개술이 있다.맞다:

현재 우리는 서로 다른 유형for의 순환에 대해 더 잘 알고 있다. 우리는 우리가 새로 발견한 지식을 테스트하기 위해 연습을 하자!
브라우저에서 개발자 도구의 콘솔 탭을 열고 콘솔에서 90점 이하의 점수를 기록하는 대신 클래식for..in 루프를 사용합니다.

const scores = [82, 89, 90, 94, 81];
// for() {} loop goes here

이제 콘솔 사용forEach 루프 레코드가 90보다 낮은 점수를 기록합니다.

const scores = [82, 89, 90, 94, 81];
// forEach loop goes here

다음은 콘솔 사용forEach 루프 레코드가 90보다 낮은 점수를 기록합니다.

const scores = [82, 89, 90, 94, 81];
// for..of loop goes here

마지막으로 콘솔에서 90점 이상의 인덱스를 기록합니다(≥ 90) 사용for..of회로.팁: second argument is the indexforEach:

const scores = [82, 89, 90, 94, 81];
// for loop goes here

수조 교체에 대한 마지막 설명

내가 너에게 apples.forEach((apple, index) => { console.log(index) })에 동기화 함수가 필요하다고 말한 것을 기억하니?우리가 하나하나 현식 교체수 그룹의 원소를 원하지 않을 때, 우리도 이 점을 이용할 수 있다.장시간 순환에 있어서 사용forEach과 접촉forEach의 장점을 보실 수 있습니다.for..of로 우리의 점수를 계산하고 순환적으로 계산합시다.만약 우리가 forEach 더 오래 실행되는 코드를 사용하는 척한다면, async/await 기다리는 코드가 없다는 것을 알 수 있을 것입니다.이것은 이용할 수 있는 유용한 도구다.

const scores = [82, 89, 90, 94, 81];
scores.forEach(async (score) => {
  await new Promise((resolve) => setTimeout(resolve, 500)); //fake long running code
  console.log(score);
});

이에 비해console.log(score) 실행 시간이 더 긴 코드가 완성될 때까지 기다린 다음 for..of:

const scores = [82, 89, 90, 94, 81];
for (let score of scores) {
  await new Promise((resolve) => setTimeout(resolve, 500)); //fake long running code
  console.log(score);
}

이것들은 순서 운행과 병행 운행의 기본 예이다.만약 당신이 순서대로 달리기를 해야 한다면, 이 상황에서 console.log(score) 을 눌러 주십시오.만약 병행 운행을 할 수 있다면 (더 긴 운행 과정을 기다릴 필요가 없다) 사용해 보세요. for..offorEach 비동기 버전에 대한 더 많은 정보는 for..of 의 이 글을 참조하십시오👀

배열을 자세히 이해하려면 내 배열 사용 과정을 보십시오.🔥