JavaScript 이터러블 객체
이터러블 객체는 반복할 수 있는 객체입니다(예: 배열).
이터러블 객체는 간단하고 효율적인 코드로 접근할 수 있습니다。
이터러블 객체는 다음과 같이 사용할 수 있습니다 for..of
루프는 반복하여 이터러션을 수행합니다。
for..of 루프
for..of
은 이터러블 객체의 요소를 순회하는 문장입니다。
문법
for (변수 of iterable) { // 실행할 코드 블록 }
반복
반복은 쉽게 이해할 수 있습니다。
이는 간단히 일련의 요소를 순회하는 것을 의미합니다。
다음은 몇 가지 간단한 예제입니다:
- 문자열을 순회합니다
- 배열을 순회합니다
문자열을 순회합니다
다음을 사용하여 for..of
문자열의 요소를 순회합니다:
예제
const name = "W3Schools"; for (const x of name) { // 실행할 코드 블록 }
배열을 순회합니다
다음을 사용하여 for..of
배열의 요소를 순회합니다:
예제 1
const letters = ["a","b","c"]; for (const x of letters) { // 실행할 코드 블록 }
예제 2
const numbers = [2,4,6,8]; for (const x of numbers) { // 실행할 코드 블록 }
Set을 순회합니다
다음을 사용하여 for..of
Set의 요소를 순회합니다:
예제
const letters = new Set(["a","b","c"]); for (const x of letters) { // 실행할 코드 블록 }
주의:Set과 Map은 후속 장에서 자세히 설명할 것입니다.
Map을 루프할 수 있습니다.
다음을 사용하여 for..of
Map의 요소를 루프로 돌립니다:
예제
const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] }); for (const x of fruits) { // 실행할 코드 블록 }
JavaScript 이터레이터
이터레이터 프로토콜은 객체에서 어떻게 값을 생성할지 정의합니다.일련의 값이터레이터
객체가 next()
되어버립니다.메서드를 호출할 때, 그것은이터레이터
next()
。
- 메서드는 두 가지 속성을 포함하는 객체를 반환해야 합니다:
- value(다음 값)
done(true 또는 false) |
value 이터레이터가 반환하는 값. |
done이 true이면 생략할 수 있습니다. |
done 이터레이터가 완료되면 true입니다. |
이터레이터가 새 값을 생성하면 false입니다.
주의:
기술적으로, 이터러블 객체는 Symbol.iterator 메서드를 구현해야 합니다.
문자열, 배열, TypedArray, Map 및 Set은 이터러블 객체입니다. 이들의 프로토타입 객체는 Symbol.iterator 메서드를 가지고 있습니다.
사용자 정의 이터러블 객체 next()
다음 예제는 자체적으로 끝나지 않는 사용자 정의 이터러블 객체를 보여줍니다. 매번 호출될 때마다
예제
모두 10, 20, 30, 40, ...을 반환합니다: // 사용자 정의 이터러블 객체 let n = 0; return { function myNumbers() { n += 10; next: function() { } }; } return { value: n, done: false }; // 이터러블 객체를 생성 const n = myNumbers(); n.next(); // 10을 반환 n.next(); // 20을 반환
n.next(); // 30을 반환
문제는 다음과 같습니다: for..of
문을 지원하지 않습니다.
사용자 정의 이터러블 객체는 JavaScript의
JavaScript 이터러블 객체는 for..of 문을 지원하는 이터러블 객체를 가지고 있습니다. Symbol.iterator 의 객체.
Symbol.iterator는 반환 next()
메서드 함수.
다음 코드를 사용하여 이터러블 객체를 이터레이션할 수 있습니다:
for (const x of iterable}) { }
예제
// 객체를 생성합니다 myNumbers = {}; // 이터러블하게 만듭니다 myNumbers[Symbol.iterator] = function() { let n = 0; done = false; return { next() { n += 10; if (n == 100) { done = true; } return { value: n, done: done }; } }; }; // 지금 for..of를 사용할 수 있습니다 for (const num of myNumbers) { // 임의 코드 }
Symbol.iterator 메서드는 for..of
자동 호출
하지만 우리는 그것을 수동으로 호출할 수도 있습니다:
예제
let iterator = myNumbers[Symbol.iterator](); while (true) { const result = iterator.next(); if (result.done) break; // 임의 코드 }