ES6 입문 Iterator 인터페이스 와 for. of

기본 개념
ES6 에 Set 과 Map 두 가지 데이터 구 조 를 새로 추 가 했 고 JS 기 존의 배열 과 대상 을 더 하면 네 가지 데이터 집합 이 생 겼 다. 평소에 이들 을 조합 해서 사용 하고 자신의 데이터 구 조 를 정의 할 수 있다. 예 를 들 어 배열 의 구성원 은 Map 이 고 Map 의 구성원 은 대상 등 이다.이렇게 하려 면 모든 서로 다른 데이터 구 조 를 처리 하기 위해 통 일 된 인터페이스 메커니즘 이 필요 하 다.바로 이런 메커니즘 이다.그것 은 다양한 데이터 구조 에 통 일 된 접근 체 제 를 제공 하 는 인터페이스 이다.모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 는 작업 을 완성 할 수 있 으 며, 이러한 옮 겨 다 니 는 작업 은 이 데이터 구 조 를 순서대로 처리 하 는 모든 구성원 이다.
Iterator 달력 의 사용:

각종 데이터 구 조 를 위해 통일 되 고 간편 한 액세스 인 터 페 이 스 를 제공한다.

데이터 구조의 구성원 들 이 특정한 순서에 따라 배열 할 수 있 도록 한다.

ES6 는 반복 명령 for... of 순환, Iterator 인 터 페 이 스 는 주로 for.. of 소 비 를 제공 합 니 다.

Iterator 인터페이스 손 으로 쓰기

const arr = [1, 2, 3];
function iterator(arr){
   let index = 0;
   return {
     next: function (){
       return index < arr.length ? 
       {value: arr[index++], done: false} :
       {value: undefined, done: true};
     }
   }
 } 
 const it = iterator(arr);   
 console.log(it.next());
 console.log(it.next());
 console.log(it.next());
 console.log(it.next());
//     
Object {value: 1, done: false}
Object {value: 2, done: false}
Object {value: 3, done: false}
Object {value: undefined, done: true}

Iterator 의 옮 겨 다 니 는 과정:

포인터 대상 을 만 들 고 현재 데이터 구조의 시작 위 치 를 가리킨다.즉, 스 트 리밍 대상 은 본질 적 으로 지침 대상 이다.

포인터 대상 을 처음 호출 하 는 next 방법 은 데이터 구조의 첫 번 째 구성원 에 게 지침 을 가리 킬 수 있다.

두 번 째 포인터 대상 을 호출 하 는 next 방법 은 포인터 가 데이터 구조의 두 번 째 구성원 을 가리킨다.

데이터 구조의 끝 위 치 를 가리 킬 때 까지 포인터 대상 의 next 방법 을 계속 호출 합 니 다.매번 next 방법 을 호출 할 때마다 데이터 구조의 현재 구성원 의 정 보 를 되 돌려 줍 니 다.구체 적 으로 말 하면 value 와 done 두 속성 을 포함 하 는 대상 을 되 돌려 주 는 것 이다.그 중에서 value 속성 은 현재 구성원 의 값 입 니 다. done 속성 은 불 값 입 니 다. 옮 겨 다 니 는 것 이 끝 났 는 지 여 부 를 표시 합 니 다.

2 Symbol. iterator 속성 을 가 진 데이터 구 조 는 모두 Iterator 인터페이스 가 있다.

const arr = [1, 2, 3];
const set = new Set(['a', 'b', 'c']);
const map = new Map([['a', 1]]);
const itArr = arr[Symbol.iterator]();
const itSet = set[Symbol.iterator]();
const itMap = map[Symbol.iterator]();
console.log(itArr); // Array Iterator {}
console.log(itSet); //SetIterator {"a", "b", "c"}
console.log(itMap); //MapIterator {"a" => 1}

주의 대상 은 ymbol. iterator 속성 이 없습니다.그래서 대상 은 Iterator 인터페이스 const obj = {}; console.log(obj[Symbol.iterator]);//undefind 가 없습니다.
3. for... 순환

const ofArr = [1, 2, 3, 4];
for(let i of ofArr){
  console.log(i); //     1 2 3 4
}

const m = new Map();
m.set('a', 1).set('b', 2).set('c', 3);
for(let data of m){
  console.log(data);
}
//    (2) ["a", 1]    (2) ["b", 2]    (2) ["c", 3]
for(let [key, value] of m){
  console.log(key, value);
}
//    
a 1
b 2
c 3

for.. of 순환 은 iterator 인터페이스 가 있 는 모든 데 이 터 를 옮 겨 다 닐 수 있 습 니 다.원생 Iterator 인 터 페 이 스 를 갖 춘 데이터 구 조 는 다음 과 같다.

Array

Map

Set

String

TypedArray

함수 의 arguments 대상

iterator 인터페이스 가 없 는 대상 에 게 iterator 인 터 페 이 스 를 배치 하 는 방법 첫 번 째 상황 은 유사 한 배열 의 대상 (수치 키 이름과 length 속성 이 존재 함) 에 대해 Iterator 인 터 페 이 스 를 배치 하 는 간단 한 방법 이 있 습 니 다. 바로 Symbol. iterator 방법 은 배열 의 Iterator 인 터 페 이 스 를 직접 참조 하 는 것 입 니 다.NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
다음은 배열 과 유사 한 대상 이 배열 의 Symbol. iterator 방법 을 호출 하 는 예 입 니 다.

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

일반 대상 에 배열 을 배치 하 는 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)) {
  console.log(value); // 0, 1, 2
}

이상 은 모두 개인 적 인 이해 입 니 다. 잘못된 점 이 있 으 면 바로 말씀 해 주 십시오!