ES6 Iterator 달력 원리, 응용 장면 및 관련 상용 지식 확대 상세 설명

본 고의 실례 는 ES6 Iterator 달력 의 원리, 응용 장면 과 관련 상용 지식의 확 대 를 다 루 었 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
Iterator 를 소개 하기 전에 먼저 js 의 데이터 집합 구 조 를 나타 내 는 몇 가지 방식 을 열거 합 니 다.
es6 이전에 Array, Object, es6 에 map, set 가 추가 되 었 습 니 다. 물론 사용자 도 이 몇 가지 데이터 구 조 를 조합 하여 데 이 터 를 유연 하 게 저장 할 수 있 습 니 다.
그러나 데이터 구조 가 복잡 해 지면 안의 데 이 터 를 어떻게 찾 는 지도 상대 적 으로 복잡 하 다. 그러면 데 이 터 를 읽 는 통 일 된 인터페이스 체 제 를 가지 고 서로 다른 데이터 구 조 를 처리 해 야 한다.
스 트 리밍 기 는 바로 이러한 인터페이스 메커니즘 이다. Iterator 는 인터페이스 로 서로 다른 데이터 구조 에 통 일 된 인터페이스 체 제 를 제공한다.
해당 하 는 모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 기 작업 을 완성 할 수 있다.
Iterator 의 역할:
1. 각종 데이터 구조 에 통일 되 고 간단 한 접근 인 터 페 이 스 를 제공한다.
2. 데이터 구조의 구성원 이 특정한 순서에 따라 배열 할 수 있 도록 한다.
3. ES6 는 새로운 순환 (for... of...) 을 제공 합 니 다. Iterator 는 for... of... 순환 호출 되 었 습 니 다.
Iterator 본질:
스 트 리밍 기 는 본질 적 으로 포인터 대상 이 고 포인터 대상 에 next () 방법 이 있 으 며 몇 번 째 호출 은 몇 번 째 멤버 를 가리킨다.
Iterator 상 next () 방법 호출:
1, 현재 멤버 의 정 보 를 되 돌려 줍 니 다
2. 반복 이 끝 날 지 여 부 를 되 돌려 줍 니 다.
아 날로 그 구현 Iterator

var it = makeIterator(['a', 'b']);
 
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
 
function makeIterator(array) {
 var nextIndex = 0;
 return {
  next: function() {
   return nextIndex < array.length ?
    {value: array[nextIndex++], done: false} :
    {value: undefined, done: true};
  }
 };
}

Typescript 사용 하기

interface Iterable {
 [Symbol.iterator]() : Iterator,
}
 
interface Iterator {
 next(value?: any) : IterationResult,
}
 
interface IterationResult {
 value: any,
 done: boolean,
}

기본 Iterator 인터페이스:
ES6 에 따 르 면 기본 Iterator 인 터 페 이 스 는 데이터 구조의 Symbol.iterator 속성 에 배치 되 거나 하나의 데이터 구 조 는 Symbol.iterator 속성 만 있 으 면 '옮 겨 다 닐 수 있 는' (iterable) 이 라 고 볼 수 있다.
Symbol. iterator 의 본질:
1. Symbol. iterator 자체 가 함수 로 현재 데이터 구조의 기본 적 인 달력 생 성 함수 에 대응 합 니 다.
2. Symbol. iterator 를 실행 하면 스 트 리밍 기 를 되 돌려 줍 니 다.
실례:

const obj = {
 [Symbol.iterator] : function () {
  return {
   next: function () {
    return {
     value: 1,
     done: true
    };
   }
  };
 }
};
//          Iterator  
//    obj symbol.iterator ，       

원생 iterator 의 데이터 구 조 를 가지 고 있 습 니 다:
Array, Map, Set, String, TypedArray, 함수 의 arglement 대상, NodeList 대상 (노드 대상);
배열 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 }

대상 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)) {
 console.log(value); // 0, 1, 2
}

메모: 대상 이 iterator 인터페이스 가 없 으 면 원형 체인 에 Iterator 인터페이스 가 있 고 계승 을 통 해 이 인 터 페 이 스 를 가 질 수 있 습 니 다.
사용 while 반복

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
 var x = $result.value;
 // ...
 $result = $iterator.next();
}

기본 개념 은 기본적으로 이런 것 이다. 다음은 사용 장면 을 살 펴 보 자.
Iterator 의 사용 필드:
기본 호출 필드:
for... of... 순환, 할당 해제, 확장 연산 자, yield * 키워드
ES6 는 C + +, 자바, C \ # 와 Python 언어 를 참고 하여 for...of 순환 을 도입 하여 모든 데이터 구 조 를 옮 겨 다 니 는 통 일 된 방법 으로 한다.
여기 서 는 주로 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 }

기타 필드:
배열 의 스 트 리밍 은 스 트 리밍 인 터 페 이 스 를 호출 하기 때문에 배열 을 매개 변수 로 받 아들 이 는 모든 경우 스 트 리밍 인 터 페 이 스 를 호출 합 니 다.

for...of

Array.from()

Map (), Set (), WeakMap (), WeakSet () (예 를 들 어 new Map([['a',1],['b',2]])

Promise.all()

Promise.race()

지식 확장:
옮 겨 다 니 는 대상 의 return (), throw ()
return 방법 은 순환 종료 또는 오류 보고 시 호출 합 니 다.throw 방법 은 주로 Generator 함수 와 결합 하여 사용 합 니 다 (상세 한 것 은 generator 참조)
계산 생 성 된 데이터 구조
기 존 데이터 구 조 를 바탕 으로 생 성 된 데이터 구 조 를 계산 합 니 다. 예 를 들 어 Object, Map, Set, Array 의 entries (), keys (), value () 방법 으로 생 성 된 데이터 구 조 는 기본적으로 iterator 인터페이스 가 있 습 니 다.
유사 배열 개체
흔 한 문자열, NodeList 노드 대상, 매개 변수 인수
1. 모든 유사 한 배열 의 대상 이 Iterator 인 터 페 이 스 를 가지 고 있 는 것 은 아니다.
2. 클래스 배열 대상 에 대해 서 는 Array. From () 를 통 해 클래스 배열 대상 을 배열 대상 으로 전환 할 수 있 습 니 다.
3, for - of 는 32 비트 UTF - 16 문 자 를 식별 할 수 있다.

for (let x of 'a\uD83D\uDC0A') {
 console.log(x);
}

for - of 와 다른 옮 겨 다 니 는 방법 비교:
for 순환, for Each 순환, for... in... 순환
foreach 순환 중 에 건 너 뛸 수 없 음for...in 순환 은 몇 가지 단점 이 있다 for...in 순환 은 주로 대상 을 옮 겨 다 니 기 위해 디자인 된 것 으로 배열 에 적용 되 지 않 는 다).

배열 의 키 이름 은 숫자 이지 만 for...in 순환 은 문자열 을 키 이름 으로 하 는 '0', '1', '2' 등 이다.

for...in 순환 은 디지털 키 이름 뿐만 아니 라 수 동 으로 추 가 된 다른 키 도 옮 겨 다 니 며 원형 체인 의 키 도 포함한다.

어떤 경우 for...in 순환 은 임의의 순서 로 키 이름 을 옮 겨 다 닙 니 다.

for... of...

같은 간결 한 문법 을 가지 고 있 지만 for...in 그런 단점 이 없다.

방법 과 달리 for...in, forEach, break 와 함께 사용 할 수 있다.

모든 데이터 구 조 를 옮 겨 다 니 는 통 일 된 조작 인 터 페 이 스 를 제공 했다.

참고:http://es6.ruanyifeng.com/
관심 있 는 친 구 는 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 효 과 를 테스트 합 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.