ES6 새 기능 Iterator 와 for. of 순환

5945 단어 JS
Iterator
  • Iterator 은 ES6 가 도입 한 새로운 스 트 리밍 체제 로 교체 기 는 두 가지 핵심 개념 이 있다.
  • 교체 기 는 통 일 된 핑계 로 각종 데이터 구 조 를 편리 하 게 방문 할 수 있 도록 하 는 역할 을 한다.교체 기 는 키 Symbol.iterator 의 방법 을 통 해 이 루어 진다.
  • 교체 기 는 데이터 구조 요 소 를 옮 겨 다 니 는 지침 (데이터베이스 에 있 는 커서 cursor 과 유사 하 다.

  • 교체 과정
  • 교체 기 가 져 오기 (현재 데이터 구조의 시작 위 치 를 가리 키 는).
  • Symbol.iterator 을 통 해 교체 기 를 만 듭 니 다.
  • 교체 가능 대상: iterable
  • 교체 기: iterable[Symbol.iterator](), (String, Array, Set, Map) 통용.
  • 교체 기 를 되 돌려 주 는 방법: iterator[Symbol.iterator]
  • 대상 의 일부 방법 을 통 해 교체 기 대상 을 되 돌려 줍 니 다.예:
  • arr.values()
  • set.keys(), set.values()
  • map.keys(), map.values(), map.entries()
  • String 대상 은 교체 기 대상 을 되 돌려 주 는 실례 적 인 방법 이 없 기 때문에 Symbol.iterator 만 사용 할 수 있다.

  • 여러 번 호출 iterator.next() 을 아래로 교체 하여 다음 위 치 를 가리킨다.
  • next() 방법 은 현재 위치의 대상 을 되 돌려 주 고 바늘 을 뒤로 옮긴다.
  • 대상 의 형식: {value: [...], done: }, 그 중
  • value: 현재 원소 의 값 의 수치 입 니 다.Map 는 [key, value] 이 고 다른 value 는 보통 길이 가 1 이다.
  • done: 옮 겨 다 니 는 것 이 끝 났 는 지 판단 합 니 다 (마지막 요소 로 이동 하 였 는 지 여부).

  • done 이 true 일 때 옮 겨 다 니 며 끝난다.


    • 다시 교체 하려 면 (첫 번 째 단계 에서 다시 시작) 이 필요 하 다.
    교체 가능 한 데이터 구조String Array Set Map DOM 원소 (개발 중...)
  • for..of 
    for (let e of obj) {
  console.log(e);
}
    그 중에서:
  • e
  • 직접 e
  • 또한 구체 적 인 각 요소 의 value 형식, 예 를 들 어 map 대형 [key, value] 일 수 있다.

  • obj
  • 대상 자체 (예 를 들 어 map
  • 대상 의 교체 기 iterator (예 를 들 어 map.keys(), map.values(), map.entries(), map[Symbol.iterator]() 일 수도 있다.



    • 코 디 에 따라 성능 차이 가 있 을 수 있 습 니 다.
  • 두 가지 방식 으로 교체 가능 한 데이터 재 구성 iterator.next() for..of
    • 반복 방문
    다음은 String, Array, Set, Map 클래스 대상 의 교체 기 접근 과 for... of 순환 접근 순 으로 나 타 났 다.
  • String 
    var str = "hello";
var iterator = str[Symbol.iterator]();
for (let i = 0; i < str.length; i++) {
  console.log(i, iterator.next().value);
  //  value[0]，    value        。
}

// for (let ch of str[Symbol.iterator]) {  
for (let ch of str) {   //     str
  console.log(ch);
}
  • Array 
    var arr = Array.from("abcd");
var iterator = arr.values();  //   Array Iterator  
for (let i = 0; i < arr.length; i++) {
  console.log(i, iterator.next().value);  //  value[0]
}

// arr arr.values() arr[Symbol.iterator]  。
for (let e of arr) {
  console.log(e);
}
  • Set 
    var set = new Set().add("a").add("b").add("c"); //     
var iterator = set[Symbol.iterator]();
for (let i = 0; i < set.size; i++) {
  console.log(i, iterator.next().value); //  value[0]
}

// set, set.keys(), set.values(), set[Symbol.iterator]  。
for (let e of set) {
  console.log(e);
}
  • Map 류 대상 은 교체 기 Map 를 사용 할 수 있 는 것 을 제외 하고 map[Symbol.iterator]() 를 얻 을 수 있다.MapIterator 클래스 대상 은 3 가지 구성원 방법 으로 (그 요소 의 위치 에 따라) 교체 기 를 얻 을 수 있 습 니 다.
  • Map
  • map.keys()
  • map.values() 또한 map.entries() 를 통 해 교체 기 map[Symbol.iterator]() mapSymbol. iterator MapIteraor。 **NOTE** map. entries () key - value '를 얻 을 수 있 습 니 다.


    • 옮 겨 다 니 는 방식 과 마찬가지 로 유일 하 게 다른 것 은 ， 돌아 오 는 교체 기 map.entries() 방법 으로 돌아 오 는 대상 이다. next() 에서 {value: [key, value], done: } 길이 가 2 인 배열 이다.
    var map = new Map().set(1, "one").set(2, "two");
var iterator = map.entries();
undefined
for (let i = 0; i < map.size; i++) {
  console.log(i, iterator.next().value)
}

//   for..of  
for (let entry of map) {
  console.log(entry);
}
for (let [key, value] of map) {
  console.log(key, value);
}

    JS 에서 Map 대상 의 생 성, 옮 겨 다 니 기 (7 가지) 와 사용 (추가 삭제 검사)
    NOTE
  • 함수 내의 암시 적 매개 변수 value 는 사실 arguments 유형 이기 때문에 교체 기 를 사용 하여 교체 하기 도 한다.
  • Array
  • for..of 중의 for (e of obj) 은 키워드 e 로 성명 할 수 있다.
  • var, let, const 교체 가 매번 새로운 저장 공간 을 만 들 지 는 않 지만 전체 적 으로 유효 하 다 var 순환 외 for..of
  • e 매번 교체 할 때마다 새로운 저장 공간 을 만 들 지만 역할 역 의 교체 내 부 를 확보 할 수 있다.또한 let, const 성명 을 사용 하면 const 값 을 수정 할 수 없습니다.

  • e 교체 할 수 없 는 데이터 구 조 는 다음 과 같다. object 교체 할 수 없 는 것 은 다음 과 같다. String, Array, Set, Map 그리고 ES6 가 새로 추 가 된 Object (정의 되 지 않 은 WeakSet, WeakMap 이다.
  • obj[Symbol.iterator]() 클래스 배열 대상 은 arrayLike 교체 가 불가능 하기 때문이다.그러나 하나의 특수 대상 이 있 는데 그 속성 명칭 중 하나 object (속성 값 은 수치 유형) 만 있 고 다른 속성 명칭 은 모두 수치 로 배열 의 색인 length 등 과 유사 하 다.이런 대상 은 0, 1, 2, 3 을 수조 대상 으로 전환 한 후 수 조 를 교체 할 수 있다.
    • var arrayLike = {length: 4, 0:"zero", 1:"one", 3:"four"}; // Object
var arr = Array.from(arrayLike);  // Array
console.log(arr);
// (4) ["zero", "one", undefined, "four"]

    그 후에 새로 얻 은 배열 arr 를 옮 겨 다 닐 수 있 습 니 다.
    Message, Message Queue, Looper, Handler 의 이해
    Git 버전 제어를 통해 Gatsby 사이트를 cPanel에 지속적으로 배포

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage