...의? 아니면 ...에? 무엇을 선택할 것인가!

일부 속성을 반복해야 하지만 어떤 문을 선택해야 할지 잘 모르시겠습니까? 내가 잡았어.

편리한 MDN에 따르면 " for...of 문은 반복 가능한 객체를 반복하는 루프를 만듭니다."반복 가능한 객체는 Array 또는 Map과 같이 반복할 때 기본 동작이 있는 객체입니다.
for...in 문은 문자열로 키가 지정되는 개체의 모든 열거 가능한 속성을 반복합니다."열거 가능한 속성은 기본적으로 true로 설정되는 속성입니다. 따라서 이 루프에서는 기호 속성이 작동하지 않습니다! 모든 속성을 반복하기 때문입니다. , 디버깅할 때 for...in를 사용하는 것이 도움이 될 수 있습니다.

아래 예를 살펴보십시오.

...의:

const superHeroes = ["Super Man", "Batman", "Hawkgirl", "Wonder Woman"]

for(const superHero of superHeroes) {
  console.log(superHero)
}
// expected output: Super Man
// expected output: Batman
// expected output: Hawkgirl
// expected output: Wonder Woman

위의 예에서 superHeroes는 객체의 배열입니다. for...of는 값을 반환합니다. 이 경우 그들은 Super Man, Batman, Hawkgirl 및 Wonder Woman이고 키는 각각의 인덱스인 0, 1, 2, 3입니다. 어떤 인덱스가 어떤 속성에 속하는지 확실하지 않은 경우 항상 indexOf를 사용할 수 있습니다. 메서드를 사용하거나 단순히 for...of를 for...in 루프로 변경하여 키를 확인합니다.

...에 대한:

const heroIdentities = {
  "Clark Kent": "Super Man",
  "Bruce Wayne": "Batman",
  "Shayera Hol": "Hawkgirl",
  "Diana": "Wonder Woman"
}
for(const identity in heroIdentities) {
  console.log(`${identity} is: ${heroIdentities[identity]}`)
}
// expected output: Clark Kent is: Super Man
// expected output: Bruce Wayne is: Batman
// expected output: Shayera Hol is: Hawkgirl
// expected output: Diana is: Wonder Woman

for...in 예제에는 키/값 쌍이 있는 heroIndentities라는 개체가 있습니다. 키는 Bruce Wayne, Clark Kent 등 슈퍼 히어로의 이름입니다. 값은 Super Man, Batman 등의 별칭입니다. for...in는 키를 반복하고 반환합니다. 내 예제 출력이 키와 값을 모두 반환하는 이유는 개체 속성에 액세스하기 위해 대괄호 표기법(heroIdentities[identity])을 사용했기 때문입니다.

경험 법칙: for...of는 일반적으로 배열 또는 유사 배열 개체에 사용되며 for...in는 일반적으로 개체에 사용됩니다.