ES6 - Iterator 와 for... of 순환

스 트 리밍 기 (Iterator) 는 통 일 된 인터페이스 메커니즘 으로 모든 서로 다른 데이터 구 조 를 처리 하 는 것 이다.Iterator 의 역할 은 세 가지 가 있 습 니 다. 하 나 는 각종 데이터 구 조 를 위해 통일 적 이 고 간편 한 방문 인 터 페 이 스 를 제공 하 는 것 입 니 다.둘째, 데이터 구조의 구성원 들 이 특정한 순서에 따라 배열 할 수 있 도록 하 는 것 이다.셋째, ES6 는 새로운 옮 겨 다 니 는 명령 for... of 순환 을 만 들 었 고 Iterator 인 터 페 이 스 는 주로 for... of 소 비 를 제공 합 니 다.
Iterator 의 옮 겨 다 니 는 과정 은 이 렇 습 니 다.
현재 데이터 구조의 시작 위 치 를 가리 키 는 지침 을 만 듭 니 다.즉, 스 트 리밍 기의 반환 값 은 포인터 대상 이다.포인터 대상 을 처음 호출 하 는 next 방법 은 데이터 구조의 첫 번 째 구성원 에 게 지침 을 가리 킬 수 있 습 니 다.두 번 째 포인터 대상 을 호출 하 는 next 방법 은 데이터 구조의 두 번 째 구성원 을 가리킨다.데이터 구조의 끝 위 치 를 가리 킬 때 까지 포인터 대상 의 next 방법 을 호출 합 니 다.매번 next 방법 을 호출 할 때마다 현재 구성원 의 정 보 를 되 돌려 줍 니 다. 구체 적 으로 말 하면 value 와 done 두 속성 을 포함 하 는 대상 을 되 돌려 줍 니 다.그 중에서 value 속성 은 현재 구성원 의 값 입 니 다. done 속성 은 불 값 입 니 다. 옮 겨 다 니 는 것 이 끝 났 는 지 여 부 를 표시 합 니 다.

function idMaker(){
    var index = 0;

    return {
       next: function(){
           return {value: index++, done: false};
       }
    }
}

var it = idMaker();

it.next().value // '0'
it.next().value // '1'
it.next().value // '2'

데이터 구조의 기본 Iterator 인 터 페 이 스 는 ES6 에서 데이터 구 조 를 교체 할 수 있 습 니 다 (예 를 들 어 배열). 모두 Symbol. iterator 라 는 방법 을 실현 해 야 합 니 다. 이 방법 은 이 구조 요소 의 교체 기 를 되 돌려 줍 니 다.Symbol. iterator 는 Symbol 이 고 Symbol 은 ES6 에 새로 추 가 된 원시 값 형식 입 니 다.

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

  arr     ，          ，   arr Symbol.iterator    。  ，      ，  
    。

기본 Iterator 인 터 페 이 스 를 호출 하 는 장소
배열 과 set 구 조 를 재 구성 할 때 기본적으로 iterator 인 터 페 이 스 를 호출 합 니 다.

let set = new Set().add('a').add('b').add('c');

let [x,y] = set;
console.log([x,y])
// x='a'; y='b'

let [first, ...rest] = set;
console.log(first,rest)
// first='a'; rest=['b','c'];

확장 연산 자 확장 연산 자 (...) 도 기본 iterator 인 터 페 이 스 를 호출 합 니 다.

//   
var str = 'hello';
[...str] //  ['h','e','l','l','o'] //                   

//   
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

다른 경우 아래 의 경우 에 도 기본 iterator 인 터 페 이 스 를 사용 합 니 다.

yield*
Array.from()
Map(), Set(), WeakMap(), WeakSet()
Promise.all(), Promise.race()

원생 은 Iterator 인터페이스 의 데이터 구 조 를 갖 추고 있다.

var someString = "hi";
typeof someString[Symbol.iterator]        
// "function"

 //     
var iterator = someString[Symbol.iterator]();

iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }


   Symbol.iterator         ，           next  ，          。
        Symbol.iterator  ，            。
 var str = new String("hi");

[...str] // ["h", "i"]

str[Symbol.iterator] = function() {
  return {
    next: function() {
      if (this._first) {
        this._first = false;
        return { value: "bye", done: false };
      } else {
        return { done: true };
      }
    },
    _first: true
  };
};

[...str] // ["bye"]
str // "hi"

   str Symbol.iterator      ，       （...）       bye，        hi。

Iterator 인터페이스 와 Generator 함수

ar myIterable = {};

myIterable[Symbol.iterator] = function* () {
  yield 1; //       
  yield 2;
  yield 3;
};
[...myIterable] // [1, 2, 3]

//            

let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};

for (let x of obj) {
  document.write(x);
}
// hello
// world

Symbol.iterator            ，   yield             

옮 겨 다 니 는 return (), throw () 옮 겨 다 니 는 포인터 대상 은 next 방법 외 에 return 방법 과 throw 방법 도 있 습 니 다.그 중에서 next 방법 은 반드시 배치 해 야 하 며, return 방법 과 throw 방법 은 배치 여 부 를 선택 할 수 있 습 니 다.
return 방법의 사용 장 소 는 for... of 순환 이 미리 종료 되면 return 방법 을 사용 합 니 다.대상 이 옮 겨 다 니 기 전에 자원 을 정리 하거나 방출 해 야 한다 면 return 방법 을 배치 할 수 있 습 니 다.
throw 방법 은 주로 Generator 함수 에 맞 춰 사용 되 며, 일반적인 스 트 리밍 기 는 이 방법 을 사용 할 수 없습니다.
for... of 순환 교체 기 대상 은 CLI IEnumerable 이나 자바 Iterable 처럼 교체 기 를 사용자 정의 할 수 있 습 니 다.for. in 을 사용자 정의 교체 기 기반 의 for. of 와 같은 교체 로 변환 합 니 다. 하나의 배열 을 실현 할 필요 가 없습니다. LINQ 와 같은 타성 디자인 모델 을 지원 합 니 다.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

 //    ，   ：Symbol.iterator  
for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  document.write(n);
}