ES6 의 스 트 리밍 인터페이스 Iterator

개념
스 트 리밍 기 (Iterator) 는 다양한 데이터 구조 에 통 일 된 접근 체 제 를 제공 하 는 인터페이스 이다.모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 기 작업 을 완성 할 수 있 습 니 다 (즉, 이 데이터 구 조 를 순서대로 처리 하 는 모든 구성원).
Iterator 의 역할 은 세 가지 가 있 습 니 다. 하 나 는 각종 데이터 구 조 를 위해 통일 적 이 고 간편 한 방문 인 터 페 이 스 를 제공 하 는 것 입 니 다.둘째, 데이터 구조의 구성원 들 이 특정한 순서에 따라 배열 할 수 있 도록 하 는 것 이다.셋째, ES6 는 새로운 스 트 리밍 방식 이 있 습 니 다. for... of, Iterator 의 주요 역할 은 바로 이 조작 을 지원 하 는 것 입 니 다.
 
2. 스 트 리밍 기 (Iterator) 인터페이스 가 있 는 지 여부
ES6 에서 일부 데이터 구 조 는 원래 Iterator 인터페이스 (예 를 들 어 배열) 를 갖 추고 있 습 니 다. 즉, 어떠한 처리 도 하지 않 으 면 for.. of 순환 으로 옮 겨 다 닐 수 있 고 어떤 것 은 안 됩 니 다 (예 를 들 어 대상).이 데이터 구 조 는 Symbol. iterator 속성 을 원생 배치 하고 다른 데이터 구 조 는 없 기 때문이다.
Symbol. iterator 속성 을 배치 한 데이터 구 조 를 스 트 리밍 인터페이스 라 고 합 니 다.이 인 터 페 이 스 를 호출 하면 옮 겨 다 니 는 대상 을 되 돌려 줍 니 다.
ES6 에서 세 가지 데이터 구 조 는 원생 적 으로 Iterator 인 터 페 이 스 를 갖 추고 있다. 배열, 일부 유사 한 배열 의 대상, Set 와 Map 구 조 를 가진다.이 세 가 지 는 Symbol. iterator 속성 을 수 동 으로 배치 하지 않 아 도 for... of 스 트 리밍 기능 을 사용 할 수 있 습 니 다.일반 대상 이 for... of 를 사용 하면 이 인 터 페 이 스 를 배치 하지 않 았 기 때문에 오류 가 발생 합 니 다.
 
3. 배치 인터페이스
for... of 옮 겨 다 니 는 기능 이 없 는 집합 이 필요 하 다 면 수 동 으로 배치 해 야 합 니 다.ES6 에는 내 장 된 Symbol 값 이 많 습 니 다. 이것 이 바로 인터페이스 입 니 다.
다음은 교체 기의 원 리 를 이용 하여 대상 에 게 교체 기 를 생 성하 여 대상 이 for... of 를 사용 할 수 있 도록 합 니 다.
 

var person={
          name: 'zz',
           age: 18
       }
// person      iterator  
              person[Symbol.iterator] = function(){
//  object.keys()   j    k           
                  var arr = Object.keys(person);
                  var i = 0;
                  return {
                     //ES6 next（）    ，    
                     next(){
                         if(i < arr.length){
                             //  done false，    
                             return {
                                 //         ，       ，  for of        
                                 value: {
                                     k  : arr[i],
                                     val: person[arr[i++]]
                                 },
                                 done: false
                             }
                         }else{
                             //  done true，    
                             return {
                                 value: null,
                                 done : true
                             }
                         }
                     }
                 }
             }
//           ，  k ，val 
             for(var {key,val} of person){
                 console.log(key,val);
             }

 
 
우 리 는 볼 수 있다.
1. person 대상 에 Symbol. iterator 인 터 페 이 스 를 배치 함으로써 for... of 기능 을 실현 합 니 다.
2. Symbol. iterator 에서 대상 을 되 돌려 줍 니 다. 이 대상 은 next () 방법 을 포함 하여 옮 겨 다 니 는 기능 을 정의 합 니 다.
3. next 방법 중의 value 와 done, value 는 옮 겨 다 니 는 과정 에서 돌아 오 는 키 값 입 니 다. done 은 옮 겨 다 니 는 것 이 끝 났 는 지 여 부 를 나타 내 는 불 값 입 니 다.
 
보충:
1. 옮 겨 다 니 는 대상 은 next 방법 외 에 return 방법 과 throw 방법 도 있 습 니 다.옮 겨 다 니 는 대상 생 성 함 수 를 직접 쓰 면 next 방법 은 반드시 배치 해 야 합 니 다. return 방법 과 throw 방법 은 배치 여 부 를 선택 할 수 있 습 니 다.
재 구성 이 옮 겨 다 닐 때 이상 하 게 미리 종료 (예 를 들 어 break, contine 또는 오류) 할 때 return 방법 을 호출 합 니 다. 그 다음 에 return 방법 은 대상 에 게 돌아 가 야 합 니 다.
throw 방법 은 오 류 를 던 지 는 데 사 용 됩 니 다. Generator. prototype. throw 는 설명 을 하지 않 습 니 다. 관심 있 는 것 은 검색 해 보 세 요.
 
2. ES6 새로운 기능 Generator 함수 로 Symbol. iterator 인 터 페 이 스 를 실현 하 는 데 적은 노력 으로 큰 효 과 를 거 둘 수 있 습 니 다.

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};

[...yieldIterator] // [1, 2, 3]

주의 하 세 요. yield * 뒤 에는 옮 겨 다 닐 수 있 는 구조 가 있 습 니 다. 이 구조의 옮 겨 다 니 는 인터페이스 가 호출 됩 니 다.
Generator 에 대해 모 르 는 ES6 Generator 를 찍 을 수 있 는 문법 ,여 기 는 말 이 많 지 않다.
 
3. Array. from 을 배열 로 변환 할 수 있 는 클래스 배열 대상 에 대해 iterator 를 배치 하 는 것 은 간단 한 방법 이 있 습 니 다. 즉, 배열 의 [Symbol. iterator] 인 터 페 이 스 를 직접 사용 하 는 것 입 니 다.

fakeArray.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

 
4. Iterator 인 터 페 이 스 를 기본적으로 호출 하 는 장면
1. 할당 해제
2. 확장 연산 자 (...)
3. 앞에서 언급 한 yield *
4. 배열 의 스 트 리밍 은 스 트 리밍 인 터 페 이 스 를 호출 하기 때문에 배열 을 매개 변수 로 받 아들 이 는 모든 경우 기본 적 으로 호출 합 니 다. 예 를 들 어
　　for...of
　　Array.from()
　　Map(), Set(), WeakMap(), WeakSet()
　　Promise.all()
　　Promise.race()
5. 문자열 은 배열 과 유사 한 대상 이 고 원생 도 Iterator 인터페이스 가 있 습 니 다.
 
다음으로 전송:https://www.cnblogs.com/Double-Zhang/p/8920671.html