Iterator 의 학습 노트

15070 단어
Iterator 가 뭐 예요?
그것 은 다양한 데이터 구조 에 통 일 된 접근 체 제 를 제공 하 는 인터페이스 이다.모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 기 작업 을 완성 할 수 있 습 니 다 (즉, 이 데이터 구 조 를 순서대로 처리 하 는 모든 구성원).
Iterator 의 역할
첫째, 각종 데이터 구 조 를 위해 통일 되 고 간편 한 접근 인 터 페 이 스 를 제공한다.
둘째, 데이터 구조의 구성원 들 이 특정한 순서에 따라 배열 할 수 있 도록 하 는 것 이다.
셋째, ES6 는 새로운 스 트 리밍 명령 for...of 순환 을 만 들 었 고 Iterator 인 터 페 이 스 는 주로 for...of 소 비 를 제공 했다.
Iterator 의 옮 겨 다 니 는 과정
(1) 현재 데이터 구조의 시작 위 치 를 가리 키 는 포인터 대상 을 만 듭 니 다.즉, 스 트 리밍 대상 은 본질 적 으로 지침 대상 이다.
function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

var it = makeIterator(['a', 'b']);


(2) 포인터 대상 을 처음 호출 하 는 next 방법 은 데이터 구조의 첫 번 째 구성원 에 게 지침 을 가리 킬 수 있다.
it.next() // { value: "a", done: false }

(3) 두 번 째 포인터 대상 을 호출 하 는 next 방법 은 포인터 가 데이터 구조의 두 번 째 구성원 을 가리킨다.
it.next() // { value: "b", done: false }

(4) 포인터 대상 next 방법 을 데이터 구조의 끝 위 치 를 가리 킬 때 까지 계속 호출 합 니 다.
it.next() // { value: undefined, done: true }

매번 호출 next 방법 은 데이터 구조의 현재 구성원 의 정 보 를 되 돌려 줍 니 다.구체 적 으로 말 하면 valuedone 두 속성 을 포함 하 는 대상 을 되 돌려 주 는 것 이다.그 중에서 value 속성 은 현재 구성원 의 값 이 고 done 속성 은 하나의 불 값 으로 옮 겨 다 니 는 것 이 끝 났 는 지 여 부 를 나타 낸다.
기본 Iterator 인터페이스
ES6 에 따 르 면 기본 Iterator 인 터 페 이 스 는 데이터 구조의 Symbol.iterator 속성 에 배치 되 거나 하나의 데이터 구 조 는 Symbol.iterator 속성 만 있 으 면 '옮 겨 다 닐 수 있 는' (iterable) 이 라 고 볼 수 있다.
1. Symbol.iterator 속성 자체 가 함수 이 고 현재 데이터 구조의 기본 적 인 달력 생 성 함수 입 니 다.이 함 수 를 실행 하면 달력 을 되 돌려 줍 니 다.
2. 속성 명 Symbol.iterator 은 표현 식 으로 Symbol 대상 의 iterator 속성 을 되 돌려 줍 니 다. 이것 은 미리 정 의 된 Symbol 형식의 특수 값 이 므 로 괄호 안에 넣 어야 합 니 다.
const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

ES6 의 일부 데이터 구 조 는 원래 Iterator 인터페이스 (예 를 들 어 배열) 를 갖 추고 있 는데, 즉 어떠한 처리 도 하지 않 아 도 for...of 순환 되 어 옮 겨 다 닐 수 있다.
  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 함수 의 arguments 대상
  • NodeList 대상
  • 아래 의 예 는 배열 의 Symbol.iterator 속성 이다.
    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 는 하나의 배열 로 원생 은 스 트 리밍 인터페이스 가 있 고 arrSymbol.iterator 속성 에 배치 되 어 있다.그래서 이 속성 을 호출 하면 옮 겨 다 니 는 대상 을 얻 을 수 있 습 니 다.
    한 대상 이 for...of 순환 호출 이 가능 한 Iterator 인 터 페 이 스 를 갖 추 려 면 Symbol.iterator 의 속성 에 스 트 리밍 기 생 성 방법 (원형 체인 의 대상 이 이 방법 을 가지 고 있어 도 된다) 을 배치 해 야 한다.
    class RangeIterator {
      constructor(start, stop) {
        this.value = start;
        this.stop = stop;
      }
    
      [Symbol.iterator]() { return this; }    
    
      next() {
        var value = this.value;
        if (value < this.stop) {
          this.value++;
          return {done: false, value: value};
        }
        return {done: true, value: undefined};
      }
    }
    
    function range(start, stop) {
      return new RangeIterator(start, stop);
    }
    
    for (var value of range(0, 3)) {         //range          
      console.log(value); // 0, 1, 2
    }
    

    다음은 스 트 리밍 기 를 통 해 포인터 구 조 를 실현 하 는 예 다.
    function Obj(value) {
      this.value = value;
      this.next = null;
    }
    
    Obj.prototype[Symbol.iterator] = function() {
      var iterator = { next: next };
    
      var current = this;
    
      function next() {
        if (current) {
          var value = current.value;
          current = current.next;
          return { done: false, value: value };
        } else {
          return { done: true };
        }
      }
      return iterator;
    }
    
    var one = new Obj(1);
    var two = new Obj(2);
    var three = new Obj(3);
    
    one.next = two;
    two.next = three;
    
    for (var i of one){
      console.log(i); // 1, 2, 3
    }
    

    다음은 대상 에 Iterator 인 터 페 이 스 를 추가 하 는 또 다른 예 입 니 다.
    let obj = {
      data: [ 'hello', 'world' ],
      [Symbol.iterator]() {
        const self = this;
        let index = 0;
        return {
          next() {
            if (index < self.data.length) {
              return {
                value: self.data[index++],
                done: false
              };
            } else {
              return { value: undefined, done: true };
            }
          }
        };
      }
    };
    

    둘 중 하 나 는 원형 체인 에 인 터 페 이 스 를 추가 하 는 것 이 고 다른 하 나 는 대상 에 추가 하 는 것 이 며 실현 방법 은 비교 하여 참고 할 수 있다.Symbol.iterator 방법 에 대응 하 는 것 이 스 트 리밍 기 생 성 함수 (즉, 스 트 리밍 대상 을 되 돌려 줍 니 다) 가 아니라면 엔진 이 잘못 보고 할 것 입 니 다.
    var obj = {};
    
    obj[Symbol.iterator] = () => 1;
    
    [...obj] // TypeError: [] is not a function
    

    위의 코드 에서 변수 objSymbol.iterator 방법 은 스 트 리밍 기 생 성 함수 가 아니 기 때문에 오 류 를 보고 합 니 다.
    Iterator 인터페이스 호출 장소
    (1) 할당 해제
    배열 과 Set 구 조 를 재 구성 할 때 기본 호출 Symbol.iterator 방법 을 사용 합 니 다.
    let set = new Set().add('a').add('b').add('c');
    
    let [x,y] = set;
    // x='a'; y='b'
    
    let [first, ...rest] = set;
    // first='a'; rest=['b','c'];
    

    (2) 확장 연산 자
    확장 연산 자 (...) 도 기본 Iterator 인 터 페 이 스 를 호출 합 니 다.
    //   
    var str = 'hello';
    [...str] //  ['h','e','l','l','o']
    
    //   
    let arr = ['b', 'c'];
    ['a', ...arr, 'd']
    // ['a', 'b', 'c', 'd']
    

    실제로 이 는 Iterator 인터페이스 가 배 치 된 모든 데이터 구 조 를 배열 로 바 꿀 수 있 는 간편 한 메커니즘 을 제공 했다.한 데이터 구조 가 Iterator 인 터 페 이 스 를 배치 하면 확장 연산 자 를 사용 해 배열 로 전환 할 수 있다 는 것 이다.
    let arr = [...iterable];
    

    (3)yield* yield* 뒤에 있 는 것 은 옮 겨 다 닐 수 있 는 구조 로 이 구조의 옮 겨 다 니 는 인 터 페 이 스 를 호출 합 니 다.
    let generator = function* () {
      yield 1;
      yield* [2,3,4];
      yield 5;
    };
    
    var iterator = generator();
    
    iterator.next() // { value: 1, done: false }
    iterator.next() // { value: 2, done: false }
    iterator.next() // { value: 3, done: false }
    iterator.next() // { value: 4, done: false }
    iterator.next() // { value: 5, done: false }
    iterator.next() // { value: undefined, done: true }
    

    문자열 의 Iterator 인터페이스
    문자열 은 배열 과 유사 한 대상 이 며, 원생 으로 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 }
    

    Iterator 인터페이스 와 Generator 함수
    let 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) {
      console.log(x);
    }
    // "hello"
    // "world"
    

    옮 겨 다 니 는 대상 의 return (), throw ()return 방법의 사용 장 소 는 for...of 순환 이 앞 당 겨 탈퇴 (보통 오류 가 있 거나 break 문구 가 있 으 면 호출 return 방법 이다.대상 이 옮 겨 다 니 기 전에 자원 을 정리 하거나 방출 해 야 한다 면 return 방법 을 배치 할 수 있다.
    주의 하 세 요. return 방법 은 반드시 대상 을 되 돌려 야 합 니 다. 이것 은 Generator 규격 에 의 해 결 정 된 것 입 니 다.
    function readLinesSync(file) {
      return {
        [Symbol.iterator]() {
          return {
            next() {
              return { done: false };
            },
            return() {
              file.close();
              return { done: true };
            }
          };
        },
      };
    }
    
    throw 방법 은 주로 Generator 함수 에 맞 춰 사용 되 는데 일반적인 스 트 리밍 대상 은 이 방법 을 사용 하지 못 합 니 다.
    for... of circle 순환
    1. 배열
    배열 의 원생 은 iterator 인터페이스 (즉, 기본 배치 Symbol.iterator 속성 을 가지 고 있 습 니 다. for...of 순환 은 본질 적 으로 이 인터페이스 에서 발생 하 는 스 트 리밍 기 를 호출 하 는 것 입 니 다. 아래 코드 로 증명 할 수 있 습 니 다.
    const arr = ['red', 'green', 'blue'];
    
    for(let v of arr) {
      console.log(v); // red green blue
    }
    
    const obj = {};
    obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
    
    for(let v of obj) {
      console.log(v); // red green blue
    }
    
    for...of 순환 은 배열 의 인 스 턴 스 forEach 방법 을 대체 할 수 있다.
    const arr = ['red', 'green', 'blue'];
    
    arr.forEach(function (element, index) {
      console.log(element); // red green blue
      console.log(index);   // 0 1 2
    });
    

    JavaScript 기 존의 for...in 순환 은 대상 의 키 만 얻 을 수 있 고 키 값 을 직접 가 져 올 수 없습니다.ES6 는 키 값 을 얻 을 수 있 도록 순환 for...of 을 제공 합 니 다.
    var arr = ['a', 'b', 'c', 'd'];
    
    for (let a in arr) {
      console.log(a); // 0 1 2 3
    }
    
    for (let a of arr) {
      console.log(a); // a b c d
    }
    
    for...of 순환 호출 스 트 리밍 인터페이스, 배열 의 스 트 리밍 인 터 페 이 스 는 디지털 색인 이 있 는 속성 만 되 돌려 줍 니 다.이 점 은 for...in 순환 과도 다르다.
    let arr = [3, 5, 7];
    arr.foo = 'hello';
    
    for (let i in arr) {
      console.log(i); // "0", "1", "2", "foo"
    }
    
    for (let i of arr) {
      console.log(i); //  "3", "5", "7"
    }
    

    2. Set 와 Map 구조
    Set 와 Map 구조 도 원생 으로 Iterator 인터페이스 가 있어 직접 사용 for...of 순환 이 가능 하 다.
    var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
      console.log(e);
    }
    // Gecko
    // Trident
    // Webkit
    
    var es6 = new Map();
    es6.set("edition", 6);
    es6.set("committee", "TC39");
    es6.set("standard", "ECMA-262");
    for (var [name, value] of es6) {
      console.log(name + ": " + value);
    }
    // edition: 6
    // committee: TC39
    // standard: ECMA-262
    

    위의 코드 는 Set 구조 와 Map 구 조 를 어떻게 옮 겨 다 니 는 지 보 여 주 었 다.주의해 야 할 점 은 두 가지 가 있다. 우선, 옮 겨 다 니 는 순 서 는 각 구성원 이 데이터 구조 에 추 가 된 순서 다.그 다음 에 Set 구 조 는 시간 이 지나 면 하나의 값 을 되 돌려 주 고 Map 구 조 는 시간 이 지나 면 하나의 배열 을 되 돌려 줍 니 다. 이 배열 의 두 구성원 은 현재 Map 구성원 의 키 이름과 키 입 니 다.
    계산 생 성 된 데이터 구조
    일부 데이터 구 조 는 기 존의 데이터 구 조 를 바탕 으로 계산 하여 생 성 된 것 이다.예 를 들 어 ES6 의 배열, Set, Map 은 모두 다음 과 같은 세 가지 방법 을 배 치 했 고 호출 된 후에 모두 옮 겨 다 니 는 대상 으로 돌아 갔다.
  • entries() 옮 겨 다 니 는 대상 [ , ] 으로 구 성 된 배열 을 되 돌려 줍 니 다.배열 에 있어 서 키 이름 은 색인 값 입 니 다.Set 에 대해 서 는 키 이름과 키 가 같 습 니 다.Map 구조의 Iterator 인 터 페 이 스 는 기본적으로 호출 entries 방법 입 니 다.
  • keys() 모든 키 를 옮 겨 다 니 는 대상 을 되 돌려 줍 니 다.
  • values() 모든 키 를 옮 겨 다 니 는 대상 을 되 돌려 줍 니 다.

  • 이 세 가지 방법 을 호출 한 후 생 성 된 스 트 리밍 대상 은 모두 생 성 된 데이터 구 조 를 계산 하 는 것 이다.
    let arr = ['a', 'b', 'c'];
    for (let pair of arr.entries()) {
      console.log(pair);
    }
    // [0, 'a']
    // [1, 'b']
    // [2, 'c']
    

    3. 배열 과 유사 한 대상
    유사 한 배열 의 대상 은 여러 가지 유형 을 포함한다.다음은 문자열, DOM NodeList 대상, for...of 대상 을 순환 하 는 예 입 니 다.
    //    
    let str = "hello";
    
    for (let s of str) {
      console.log(s); // h e l l o
    }
    
    // DOM NodeList  
    let paras = document.querySelectorAll("p");
    
    for (let p of paras) {
      p.classList.add("test");
    }
    
    // arguments  
    function printArgs() {
      for (let x of arguments) {
        console.log(x);
      }
    }
    printArgs('a', 'b');
    // 'a'
    // 'b'
    

    문자열 에 있어 서 arguments 순환 은 32 비트 UTF - 16 문 자 를 정확하게 식별 하 는 특징 도 있다.
    for (let x of 'a\uD83D\uDC0A') {
      console.log(x);
    }
    // 'a'
    // '\uD83D\uDC0A'
    

    모든 유사 한 배열 의 대상 이 Iterator 인 터 페 이 스 를 가지 고 있 는 것 은 아니 며, 간단 한 해결 방법 은 for...of 방법 으로 배열 로 바 꾸 는 것 이다.
    let arrayLike = { length: 2, 0: 'a', 1: 'b' };
    
    //   
    for (let x of arrayLike) {
      console.log(x);
    }
    
    //   
    for (let x of Array.from(arrayLike)) {
      console.log(x);
    }
    

    4. 일반 대상
    let es6 = {
      edition: 6,
      committee: "TC39",
      standard: "ECMA-262"
    };
    
    for (let e in es6) {
      console.log(e);
    }
    // edition
    // committee
    // standard
    
    for (let e of es6) {
      console.log(e);
    }
    // TypeError: es6[Symbol.iterator] is not a function
    

    하나의 해결 방법 은 대상 의 키 이름 을 배열 로 만 든 다음 이 배열 을 옮 겨 다 니 는 것 이다.
    for (var key of Object.keys(someObject)) {
      console.log(key + ': ' + someObject[key]);
    }
    

    또 다른 방법 은 Generator 함 수 를 사용 하여 대상 을 다시 포장 하 는 것 이다.
    function* entries(obj) {
      for (let key of Object.keys(obj)) {
        yield [key, obj[key]];
      }
    }
    
    for (let [key, value] of entries(obj)) {
      console.log(key, '->', value);
    }
    // a -> 1
    // b -> 2
    // c -> 3
    

    좋은 웹페이지 즐겨찾기