ES6 노트 - 교체 기 & 생 성기

교체 기
Iterator 는 ES6 가 도입 한 새로운 스 트 리밍 체제 로 교체 기 는 두 가지 핵심 개념 이 있다. 1 교체 기 는 하나의 통 일 된 인터페이스 로 각종 데이터 구 조 를 편리 하 게 접근 할 수 있 도록 하 는 역할 을 한다. 이것 은 하나의 키 를 통 해 Symbol. iterator 의 방법 으로 이 루어 진다.2 교체 기 는 데이터 구조 요 소 를 옮 겨 다 니 는 지침 (예 를 들 어 데이터베이스 에 있 는 커서) 입 니 다.
교체 과정 이 교체 되 는 과정 은 다음 과 같다. Symbol. iterator 를 통 해 하나의 교체 기 를 만 들 고 현재 데이터 구조의 시작 위 치 를 가리 키 며 next 방법 을 통 해 다음 위 치 를 가리 키 고 next 방법 은 현재 위치의 대상 으로 돌아 갈 것 이다. 대상 은 value 와 done 두 가지 속성 을 포함 하고 value 는 현재 속성의 값 이다.done 은 옮 겨 다 니 는 것 이 끝 났 는 지 판단 하 는 데 사 용 됩 니 다. done 이 true 일 때 옮 겨 다 니 는 것 이 끝 납 니 다.

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
it.next();
>{value: "zero", done: false}
it.next();
>{value: "one", done: false}
it.next();
>{value: "two", done: false}
it.next();
>{value: undefined, done: true}

      먼저 배열 을 만 든 다음 Symbol. iterator 방법 으로 교체 기 를 만 든 다음 에 next 방법 으로 배열 내부 항목 에 접근 합 니 다. 속성 done 이 true 일 때 접근 이 끝 납 니 다.
       교체 기 는 프로 토 콜 의 일부분 으로 교체 에 사용 된다.이 프로 토 콜 의 관건 적 인 특징 은 순서 입 니 다. 교체 기 는 한 번 에 값 을 되 돌려 줍 니 다.이 는 교체 가능 한 데이터 구조 가 비 선형 (예 를 들 어 나무) 이면 교체 가 선형 화 된다 는 뜻 이다.
       교체 가능 한 대상 을 만 듭 니 다. ES6 에 서 는 배열, Set, Map, 문자열 이 모두 교체 가능 한 대상 입 니 다. 기본 적 인 상황 에서 정 의 된 대상 (object) 은 교체 할 수 없 지만 Symbol. iterator 를 통 해 교체 기 를 만 들 수 있 습 니 다.

javascript
    const obj = {
      items: []
    }
    obj.items.push(1);//              ，  obj    
    for (let x of obj) {
      console.log(x) // _iterator[Symbol.iterator] is not a function
    }

    //    obj       ， obj           。
    const obj = {
      items: [],
      *[Symbol.iterator]() {
        for (let item of this.items) {
          yield item;
        }
      }
    }
    obj.items.push(1)
    //      for of  obj 。
    for (let x of obj) {
      console.log(x)
    }

내부 에 교체 기 배열, Set, Map 은 모두 교체 가능 한 대상 이다. 즉, 내부 에 교체 기 를 실현 하고 3 가지 교체 기 함수 호출 을 제공 했다. 1, entries () 반환 교체 기 * *: 반환 키 쌍

javascript
    //  
    const arr = ['a', 'b', 'c'];
    for(let v of arr.entries()) {
      console.log(v)
    }
    // [0, 'a'] [1, 'b'] [2, 'c']
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a'] ['b', 'b'] ['c', 'c']

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a'] ['b', 'b']

2, values () 반환 교체 기 * *: 반환 키 값 이 맞 는 value

javascript
    //  
    const arr = ['a', 'b', 'c'];
    for(let v of arr.values()) {
      console.log(v)
    }
    //'a' 'b' 'c'

    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a' 'b' 'c'

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a' 'b'	

3. keys () 리 턴 교체 기 * *: 키 값 이 맞 는 key 를 되 돌려 줍 니 다.

javascript
    //  
    const arr = ['a', 'b', 'c'];
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 0 1 2
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b' 'c'

    //Map
    const arr = new Map();
    arr.set('a', 'a');
    arr.set('b', 'b');
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b'	

 생 성기
  그것 은 함수 입 니 다. 교체 기 를 되 돌려 주 는 데 사 용 됩 니 다.두 가지 관건 은 하 나 는 함수 이 고 하 나 는 리 턴 교체 기 이다.ES6 에서 특유 한 것 으로 * (별표) 가 있 는 함수 이 며, 동시에 yield 에 도 사용 해 야 합 니 다.

javascript
    //     ，ES6          ，        yield     。
    function *createIterator() {
      yield 1;
      yield 2;
      yield 3;
    }
    const a = createIterator();
    console.log(a.next()); //{value: 1, done: false}
    console.log(a.next()); //{value: 2, done: false}
    console.log(a.next()); //{value: 3, done: false}
    console.log(a.next()); //{value: undefined, done: true}

생 성기 의 yield 키 워드 는 next () 를 한 번 실행 하면 하나의 yield 뒤의 내용 만 실행 하고 문 구 는 실행 을 중지 하 는 것 입 니 다.
yield 사용 제한: yield 는 생 성기 함수 내부 에서 만 사용 할 수 있 으 며, 비 생 성기 함수 내부 에서 사용 하면 오류 가 발생 할 수 있 습 니 다.

javascript
    function *createIterator(items) {
        //        yield
      items.map((value, key) => {
        yield value //    ， map          yield
      })
    }
    const a = createIterator([1, 2, 3]);
    console.log(a.next()); //   

생 성기 함수 식

javascript
    const createIterator = function *() {
        yield 1;
        yield 2;
    }
    const a = createIterator();
    console.log(a.next());

대상 에 생 성기 함수 추가

javascript
    const obj = {
      a: 1,
      *createIterator() {
        yield this.a
      }
    }
    const a = obj.createIterator();
    console.log(a.next());  //{value: 1, done: false}