> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 'for...in' 루프와 'for...of' 루프의 주요 차이점은 무엇입니까?

JavaScript의 'for...in' 루프와 'for...of' 루프의 주요 차이점은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-14 09:53:11
원래의
863명이 탐색했습니다.

What's the Key Difference Between JavaScript's `for...in` and `for...of` Loops?

for...in과 for...of 문의 구별 이해

JavaScript 루핑 영역에서 for.. .in 및 for...of 문은 종종 혼란을 야기합니다. for...in은 속성 반복을 위한 초석이었지만, for...of는 특정 값을 목표로 하기 위해 ES6에서 등장했습니다. 이 기사에서는 이 두 구문 간의 주요 차이점을 자세히 살펴봅니다.

for...in: 속성 이름 탐색

For...in 루프는 열거 가능한 속성을 반복합니다. 개체의 이름. 예시에서 보듯이 배열의 인덱스 키와 배열 객체의 "foo" 키를 나타내는 "0", "1", "2", "foo"를 성공적으로 기록합니다.

for...of: 속성값 추출

반대로, for...of는 객체별 특성을 사용합니다. 반복자를 사용하여 해당 반복자가 생성한 값을 순회합니다. 예제에서 배열 반복자는 배열 내의 값, 즉 "3", "5" 및 "7"만 생성합니다. 이 동작은 반복자가 값에만 집중하도록 설계되었다는 사실에서 비롯됩니다.

비색인 속성의 비반복

특히 for...of는 인덱스가 아닌 속성을 반복하지 않습니다. 이 예에서는 "hello" 값이 포함된 "foo" 속성이 기록되지 않습니다. 이는 배열 반복자가 배열의 인덱스와 연관된 값만 생성하기 때문입니다.

예: 값 중심 반복

설명하기 위해 다음 루프는 배열 값을 기록해야 합니다. "foo" 속성 값도 포함하지만 배열만 기록합니다. 값:

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
}
로그인 후 복사

이 동작은 for...of가 인덱스가 아닌 속성을 제외하고 값을 반복하기 위해 특별히 제작되었다는 이해를 강화합니다.

위 내용은 JavaScript의 'for...in' 루프와 'for...of' 루프의 주요 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿