#100DaysOfCode의 47일차: ES6 생성기 및 반복자 검토

소개



생성기는 내부 상태(일시 중지 및 다시 시작)를 유지하는 데 도움이 되는 ES6의 새로운 기능입니다.

반복자 프로토콜


  • 반복자 프로토콜은 개체가 반복되는 방법을 정의하는 프로세스를 의미합니다. 이것은 .next() 메서드를 구현하여 수행됩니다.

  • const list = [0, 1, 2, 3, 4, 5];
    const arrayIterator = list[Symbol.iterator]();
    
    console.log(arrayIterator.next());
    console.log(arrayIterator.next());
    console.log(arrayIterator.next());
    /*
    will print:
    Object {value: 0, done: false}
    Object {value: 1, done: false}
    Object {value: 2, done: false}
    */
    


  • 값: 시퀀스의 다음 값을 나타냅니다
  • .
  • done: 반복자가 시퀀스
  • 를 통해 완료되었는지 여부를 나타냅니다.

    일시정지 가능한 기능


  • 생성기가 호출되면 실제로 함수 내부의 코드를 실행하지 않습니다. 대신 반복자를 만들고 반환합니다.
  • function 키워드 뒤에 별표를 넣으면 함수가 일시 중지 가능한 함수로 변환됩니다.

  • yield는 생성기를 일시 중지시키는 키워드입니다
  • .
  • 상태 머신(제너레이터)이 상태를 변환합니다. 초기 상태 -> 재개 -> 일시 중지(상태 1) -> 재개 -> 일시 중지(상태 2) -> 재개 -> .... -> 종료(상태) 엔)



  • 제너레이터 안팎으로 데이터 보내기



  • 생성기 외부로 데이터를 보내는 데 yield가 사용됨
  • .next() 메서드는 생성기 내에서 데이터를 보내는 데 사용됩니다.

  • function* gen3() {
        for (let i = 0; i< 10; i++) {
            let value = yield i
            console.log(`sending data into generator: ${value}`)
        }
    }
    
    
    var g = gen3()
    console.log(`sending data out of generator: ${g.next().value}`)
    console.log(`sending data out of generator: ${g.next(10).value}`)
    console.log(`sending data out of generator: ${g.next(20).value}`)
    /*
    will print:
    sending data out of generator: 0
    sending data into generator: 10
    sending data out of generator: 1
    sending data into generator: 20
    sending data out of generator: 2
    */
    


    조항



    내 기사와 출시된 프로젝트 중 일부가 있습니다. 마음에 드시면 체크해주세요!
  • My blog-posts for software developing
  • Facebook page
  • My web resume

  • Side project - Daily Learning

  • 참조


  • JavaScript ES6 Generators 生成器
  • 你懂 JavaScript 嗎?#25 產生器(Generator)
  • Udacity ES6 class
  • 좋은 웹페이지 즐겨찾기