iterators &generators-understanding ECMAScipt6 독서노트 8

4019 단어

전언


역시 flag을 세울 수 없어요. 지난번 글을 다 썼는데 Hexo가 작은 문제가 생겼어요. 게다가 마침 집에 돌아왔어요. 그래서 며칠 미뤄졌어요.
발견 전에 교체기와 생성기의 글자를 계속 언급해 왔다.사실 줄곧 이 방면의 이야기를 하지 않았다.iterators는 es6에서 아직도 광범위하게 응용되고 있다. set,map,array,string은 모두 이런 입구가 있다.generators는 es7에서 async의 기초이다.개인적으로는 그래도 중요하다고 생각합니다.

iterators


많은 언어들이iterators의 개념을 가지고 있다.ES6에서: for-of 사이클은 iterators 기반...(확산 조작부호)iterators 기반 심지어 비동기 프로그램도iterators에 사용

iterators가 왜 필요합니까


순환 문제


통용되는 i,len과 같은 여러 변수가 필요합니다.송이경(신지현)

iterators가 뭐예요?


iterators는next () 방법을 가진 대상입니다.next () 방법을 호출할 때마다 다음 구조로 되돌아갑니다
{
  done: false, //           
  value: //    
}

ES6에 내장된 iterators


집합 대상


ES6에는 세 가지 유형의 컬렉션 객체가 있습니다.
  • Arrays
  • Maps
  • Sets

  • 그들 은 모두 아래 의 방법 을 가지고 있다
  • entries (), [key,value]의iterators를 되돌려줍니다
  • Arrays에서 반환하는 키는 숫자 번호
  • 입니다.
  • Sets, 되돌아오는 키와value와 같은 값
  • 맵스, 반환 키는 정상 키
  • keys(), 키의iterators를 되돌려줍니다
  • entries ()에서 키를 되돌려 주는 것과 같다
  • values(), 하나의values의iterators를 되돌려줍니다
  • entries ()에서value를 되돌려주는 것과 같다

  • 교체기 방법을 지정하지 않으면Arrays와Sets는values (), Maps는entries () 를 호출합니다
    대상이 교체기인지 아닌지 판단하기typeoof Object[Symbol.iterator] === 'function'

    String 교체기


    ES5에서 string은 비효율적이고 2바이트 문자를 인식하지 못하는 경우가 있습니다.ES6에서 2바이트 문자를 인식하지 못하는 버그 해결

    NodeList 교체기


    ES5에서 DOM의 Nodelist와arrays의 차이는 사람을 곤혹스럽게 하기 쉽다. ES6가 DOM인 Nodelist도 기본 교체기를 추가했는데 같은 그룹이 같기 때문에for-of를 사용하여 순환할 수 있다.

    ...조작부호


    ...조작부호는 교체기에서 데이터를 읽고 순서대로 삽입한다

    generators


    generators 소개

  • generators는 반환값이iterators의 함수
  • 입니다
  • generators는function 키워드 뒤에 번호가 있고 내부에yield 키워드가 있습니다. 번호는function 키워드 뒤에 따라가지 않아도 됩니다
  • 생성기가 실행될 때마다 yield가 실행되지 않습니다. 주: yield 키워드는generators 내부에만 존재할 수 있습니다
  • 대상 내부에 쓰는 방법
  • let o1 = {
      createIterator:function*(){
    
      }
    }
    
    let o2 = {
      *createIterator(){
    
      }
    }
    //      
    

    generator 참조


    next () 에 참조를 보내면 지난번 yield의 반환 값을 바꿉니다.
    function *createIterator(){
      let first = yield 1;
      let second = yield first + 2;
      yield second + 3;
    }
    let iterator = createIterator();
    
    iterator.next() //{value:1,done:false}
    iterator.next(4) //{value:6,done:false}
    iterator.next(5)//{value:8,done:true}
    

    generator 버퍼링 예외


    iterator.throw()
  • 이상이 예상될 때try로...catch 포획
  • 이상이 포획되면throw()는next()가 되돌아오는 결과
  • 에 해당한다
  • generator에return이 있으면return 뒤의 코드가 실행되지 않습니다
  • generator에 generator를 중첩할 수 있음


    비동기식 작업 수행


    generator의 특성을 이용하여 여러 개의 비동기 작업을 수행하고 나중에 Promise()로 개조할 수 있다

    일반 임무


    이 작업은 이전 작업의 반환 값을 사용할 필요가 없습니다.
    function run (tasks){
      let task = tasks();
      let result = task.next();
    
      function step (){
        if(!result.done){
          result = task.next();
          step();
        }
      }
    
      step();
    }
    
    
    run(function * (){
      console.log(1);
      yield;
      console.log(2);
      yield;
      console.log(3);
    })
    

    데이터 작업


    사실 한 군데만 변동되어next () 함수 내부에 데이터를 넣었다
    function run (tasks){
      let task = tasks();
      let result = task.next();
    
      function step (){
        if(!result.done){
          result = task.next(result.value);
          step();
        }
      }
    
      step();
    }
    

    비동기 실행 작업


    만약result.value는 함수
    //     
    function readFile(filename){
      return function(cb){
        fs.readFile(filename,cb);
      };
    }
    
    function run (tasks){
      let task = tasks();
      let result = task.next();
    
      function step(){
        if(!result.done){
          if(typeof result.value === 'function'){
            result.value(function(err,data){
              if(err){
                task.throw(err);
              }else{
                task.next(data);
                step();
              }
            })
          }
    
        }
      }
    
      step();
    }
    

    위의 코드에서 볼 수 있는 단점은 다음과 같습니다.
  • 필수 함수는err 우선
  • 두 함수의 매개 변수 전달은next()
  • 에 의존한다

    좋은 웹페이지 즐겨찾기