모두를 위한 JavaScript: 반복자 — Smashing Magazine

안녕하세요, 저는 Mat입니다. 하지만 “Wilto”도 작동합니다. 저는 여러분에게 JavaScript를 가르치기 위해 왔습니다. 글쎄요 여기-여기; 기술적으로는 Piccalil.li에 있어요 모두를 위한 자바스크립트 JavaScript를 가르치는 과정입니다. 다음은 에서 발췌한 내용입니다. 반복 가능 및 반복자 모듈: Iterator에 대한 강의입니다.

반복자는 JavaScript의 언어적으로 더 혼란스러운 주제 중 하나입니다. 쉽게 이미 꽤 높은 기준에 도달한 것입니다. 있다 반복 가능 — 배열, 세트, 맵 및 문자열 — 모두 다음을 따릅니다. 반복 가능한 프로토콜. 해당 프로토콜을 따르려면 객체가 다음을 구현해야 합니다. 반복 가능한 인터페이스. 실제로 이는 객체에 다음을 포함해야 함을 의미합니다. [Symbol.iterator]() 프로토타입 체인 어딘가에 메서드를 추가합니다. 반복 가능한 프로토콜은 둘 중 하나입니다. 반복 프로토콜. 다른 반복 프로토콜은 반복자 프로토콜.

이것이 언어적으로 문제가 있다는 것이 무슨 뜻인지 알겠습니까? Iterable은 반복 가능한 반복 인터페이스를 구현하고, 반복자는 반복 인터페이스를 구현합니다! 5배 빠르다고 말할 수 있다면 그 내용을 거의 이해한 것입니다. 쉽지요, 그렇죠?

아니요, 들어보세요. 이 수업이 끝날 때쯤에는 들리는 것보다 절반도 혼란스럽지 않을 것이라고 약속합니다. 특히 이전 수업의 맥락을 고려하면 더욱 그렇습니다.

안 반복 가능한 객체는 반복 가능한 프로토콜을 따릅니다. 이는 객체가 반복자를 만드는 일반적인 방법을 가지고 있음을 의미합니다. 포함된 요소는 다음을 사용하여 반복될 수 있습니다. for…of.

안 반복자 객체는 반복자 프로토콜을 따르며, 객체에 포함된 요소에 액세스할 수 있습니다. 순차적으로한 번에 하나씩.

에게 반복하다 — 나는 나 자신을 용서하지 않고 당신도 나를 용서할 것이라고 기대하지 않는 말장난 — 반복자 객체는 반복자 프로토콜을 따르며, 객체에 포함된 요소에 액세스할 수 있습니다. 순차적으로한 번에 하나씩. Iterator 프로토콜은 일련의 값을 생성하는 표준 방법을 정의하며 선택적으로 return 가능한 모든 값이 생성되면 값이 생성됩니다.

반복자 프로토콜을 따르기 위해 객체는 – 짐작하셨겠지만 – 다음을 구현해야 합니다. 반복자 인터페이스. 실제로 이는 다시 한 번 개체의 프로토타입 체인 어딘가에서 특정 메서드를 사용할 수 있어야 함을 의미합니다. 이 경우에는 next() 포함된 요소를 한 번에 하나씩 진행하고 해당 메서드가 호출될 때마다 객체를 반환하는 메서드입니다.

반복자 인터페이스 기준을 충족하려면 반환된 객체에 특정 키가 있는 두 개의 속성이 포함되어야 합니다. value현재 요소의 값과 키가 있는 요소의 값을 나타냅니다. done반복자가 데이터 구조의 마지막 요소를 넘어 진행되었는지 여부를 알려주는 부울 값입니다. 그것은 편집팀이 간과한 어색한 표현이 아닙니다: 그것의 가치 done 재산은 true 전화를 받을 때만 next() 요소에 액세스하려고 시도합니다. 그 너머에 반복기의 마지막 요소에 액세스할 때가 아니라 반복기의 마지막 요소입니다. 다시 말하지만, 인쇄된 내용이 많지만 실제로 보면 더 이해하기 쉬울 것입니다.

비록 간략하기는 하지만 이전에 내장 반복자의 예를 본 적이 있습니다:

const theMap = new Map([ [ "aKey", "A value." ] ]);

console.log( theMap.keys() );
// Result: Map Iterator { constructor: Iterator() }

맞습니다. Map 객체 자체는 반복 가능하지만 Map의 내장 메소드는 keys(), values()그리고 entries() 모두 Iterator 객체를 반환합니다. 또한 내가 다음을 사용하여 반복한 것을 기억할 것입니다. forEach (비교적 최근에 언어에 추가됨) 그런 식으로 사용하면 반복자는 반복 가능 항목과 구별할 수 없습니다.

const theMap = new Map([ [ "key", "value " ] ]);

theMap.keys().forEach( thing => {
  console.log( thing );
});
// Result: key

모든 반복자는 반복 가능합니다. 그들은 모두 반복 가능한 인터페이스를 구현합니다.

const theMap = new Map([ [ "key", "value " ] ]);

theMap.keys()[ Symbol.iterator ];
// Result: function Symbol.iterator()

그리고 반복자와 반복 가능 항목 사이의 경계가 점점 더 모호해지는 것에 대해 화가 난 경우에는 이 “톱 10 애니메이션 배신” 비디오 후보를 로드할 때까지 기다리십시오. 저는 배열을 사용하여 반복자와 상호 작용하는 방법을 보여 드리겠습니다.

“BOO” 당신은 가장 오래되고 가장 많이 색인이 생성된 친구 중 한 명에게 배신당했기 때문에 분명히 울었습니다. “배열은 반복이다블레이테라가 아니고토르!” 당신은 일반적으로 나에게 소리를 지르는 것이 옳고 구체적으로 배열에 대해서는 옳습니다. 배열 ~이다 반복자가 아니라 반복 가능합니다. 실제로 모든 반복자는 반복 가능하지만 내장된 반복 가능 항목 중 어느 것도 반복자가 아닙니다.

그런데 그렇게 전화하면 [ Symbol.iterator ]() 메소드(객체를 반복 가능으로 정의하는 메소드)는 반복 가능 데이터 구조에서 생성된 반복자 객체를 반환합니다.

const theIterable = [ true, false ];
const theIterator = theIterable[ Symbol.iterator ]();

theIterable;
// Result: Array [ true, false ]

theIterator;
// Result: Array Iterator { constructor: Iterator() }

Set, Map 및 심지어 문자열에도 마찬가지입니다.

const theIterable = "A string."
const theIterator = theIterable[ Symbol.iterator ]();

theIterator;
// Result: String Iterator { constructor: Iterator() }

여기서 수동으로 수행하는 작업 — 다음을 사용하여 iterable에서 반복자를 생성합니다. %Symbol.iterator% — 정확히 반복 가능한 객체가 내부적으로 작동하는 방식과 구현해야 하는 이유입니다. %Symbol.iterator% ~하기 위해 BE 반복 가능합니다. 배열을 반복할 때마다 실제로 해당 배열에서 생성된 반복기를 반복하는 것입니다. 모든 내장 반복자 ~이다 반복 가능. 모든 내장 반복 가능 항목은 다음과 같이 사용할 수 있습니다. 만들다 반복자.

또는 — 즐겨심지어, 당신이 풀을 뜯을 필요가 없기 때문에 %Symbol.iterator% 직접 — 내장된 Iterator.from() 모든 iterable에서 반복자 객체를 생성하는 메서드:

const theIterator = Iterator.from([ true, false ]);

theIterator;
// Result: Array Iterator { constructor: Iterator() }

내가 반복자가 다음을 제공해야 한다고 언급한 것을 기억하시나요? next() 메소드(매우 구체적인 객체를 반환하는)? 그렇게 부르면 next() 메서드는 반복자가 포함하는 요소를 한 번에 하나씩 단계별로 진행하며, 각 호출은 해당 객체의 인스턴스를 반환합니다.

const theIterator = Iterator.from([ 1, 2, 3 ]);

theIterator.next();
// Result: Object { value: 1, done: false }

theIterator.next();
// Result: Object { value: 2, done: false }

theIterator.next();
// Result: Object { value: 3, done: false }

theIterator.next();
// Result: Object { value: undefined, done: true }

이것을 전통적인 “감고 진행하는 것을 지켜보는 것”보다 더 통제된 형태의 순회라고 생각할 수 있습니다. for 아마도 익숙할 루프 — 필요에 따라 한 번에 한 단계씩 요소에 액세스하는 방법입니다. 물론, 당신은 그렇지 않습니다 가지다 이 방법으로 반복자를 단계별로 실행하려면 Iterator.forEach 여러분이 기대하는 것과 정확하게 작동하는 방법은 다음과 같습니다.

const theIterator = Iterator.from([ true, false ]);

theIterator.forEach( element => console.log( element ) );
/* Result:
true
false
*/

하지만 아직 다루지 않은 iterable과 iterator 사이에는 또 다른 큰 차이점이 있습니다. 제 돈으로는 실제로 만드는 데 큰 도움이 됩니다. 언어적인 둘의 감각. 하지만 여기서는 잠시 유머를 좀 해줘야 할 것 같습니다.

반복 가능한 객체는 반복 가능한 객체입니다. 아니요, 들어보세요. 계속해서 Array를 반복할 수 있으며, 작업이 끝난 후에도 여전히 해당 Array를 반복할 수 있습니다. 정의에 따르면 이는 반복될 수 있는 객체입니다. 반복 가능하다는 것이 반복 가능의 본질적인 특성입니다.

const theIterable = [ 1, 2 ];

theIterable.forEach( el => {
  console.log( el );
});
/* Result:
1
2
*/

theIterable.forEach( el => {
  console.log( el );
});
/* Result:
1
2
*/

어떤 면에서 반복자 객체는 단수형을 나타냅니다. 행동 반복의. iterable 내부에서는 반복이 수행될 때마다 iterable을 반복하는 메커니즘입니다. 독립형 반복자 객체로서 — next 메서드를 사용하거나 해당 요소를 반복합니다. forEach — 일단 반복되면 해당 반복자는 과거형; 그것은 반복. 내부 상태를 유지하기 때문에 반복자의 본질적인 특성은 단수로 반복되어야 한다는 것입니다.

const theIterator = Iterator.from([ 1, 2 ]);

theIterator.next();
// Result: Object { value: 1, done: false }

theIterator.next();
// Result: Object { value: 2, done: false }

theIterator.next();
// Result: Object { value: undefined, done: true }

theIterator.forEach( el => console.log( el ) );
// Result: undefined

이는 Iterator 생성자의 내장 메소드를 사용하여 Iterator 객체의 일부를 필터링하거나 추출할 때 깔끔한 작업을 가능하게 합니다.

const theIterator = Iterator.from([ "First", "Second", "Third" ]);

// Take the first two values from `theIterator`:
theIterator.take( 2 ).forEach( el => {
  console.log( el );
});
/* Result:
"First"
"Second"
*/

// theIterator now only contains anything left over after the above operation is complete:
theIterator.next();
// Result: Object { value: "Third", done: false }

반복자의 끝에 도달하면 반복 작업이 완료됩니다. 반복되었습니다. 과거형.

그리고 이번 수업 시간에도 마찬가지입니다. 듣고 나면 안심이 될 것입니다. 이것이 다소 힘든 과정이라는 것을 알고 있지만 좋은 소식은 이 과정이 반복자가 아니라 반복 가능하다는 것입니다. 반복 과정의 이 단계(이 강의)는 끝났을 수도 있지만, 이 과정의 본질적인 특성은 다시 반복할 수 있다는 것입니다. 지금 당장 이 모든 내용을 기억해 두는 것에 대해 걱정하지 마세요. 언제든지 돌아와서 이 강의를 다시 살펴볼 수 있습니다.

결론

나는 거기에 쓴 내용을 지지합니다. 아마도 놀랄 일이 아닐 것입니다. 이 수업은 까다로운 수업이지만 들어보세요. 당신은 이것을 얻었다. 모두를 위한 JavaScript는 여러분을 JavaScript의 머리 속으로 데려가도록 설계되었습니다. 일단 기어가 어떻게 맞물리는지 보기 시작했다면(언어를 만든 사람들이 남긴 지문과 그에 따른 좋은 결정, 나쁜 결정, 때로는 당혹스러운 결정을 본 것)은 아닙니다. 원인-~이든 -ble 또는 -토르 당신의 길을 가로막을 수 있을 것입니다.

모두를 위한 자바스크립트 강좌 공지 — 이제 모두를 위한 JavaScript를 사용할 수 있으며 출시 가격은 10월 28일 자정까지 진행됩니다. 정가 £249에서 £60 할인을 받고 £189에 구매하세요! (큰 미리보기)

내 목표는 당신에게 깊은 마법 — 어떻게 그리고 왜 일상 업무에서 가장 많이 접할 수 있는 구문을 자신의 속도와 조건에 맞춰 사용합니다. 언어를 처음 사용하는 경우 수백 시간의 시행착오를 겪으면서 JavaScript에 대한 기초적인 이해를 갖고 이 과정을 마치게 됩니다. 주니어 개발자라면 어떤 선배 개발자와도 맞먹을 수 있는 깊이 있는 지식을 갖고 이 과정을 마치게 될 것입니다.

거기서 뵙기를 바랍니다.