ES6 - 교체 기 (Iterator, 교체 과정, 교체 가능 한 데이터 유형, 교체 가능 한 데이터 구조, 교체 가능 한 대상 정의)

Iterator
Iterator 는 ES6 가 도입 한 새로운 스 트 리밍 체제 로 교체 기 는 두 가지 핵심 개념 이 있다.

교체 기 는 통 일 된 인터페이스 로 각종 데이터 구 조 를 편리 하 게 접근 할 수 있 도록 하 는 역할 을 한다. 이 는 하나의 키 를 Symbol. iterator 로 하 는 방법 으로 이 루어 진다.

교체 기 는 데이터 구조 요 소 를 옮 겨 다 니 는 지침 (예 를 들 어 데이터베이스 에 있 는 커서) 입 니 다.

반복 과정

Symbol. iterator 를 통 해 현재 데이터 구조의 시작 위 치 를 가리 키 는 교체 기 를 만 듭 니 다

그 다음 에 next 방법 을 통 해 다음 위 치 를 가리 키 고 next 방법 은 현재 위치의 대상 으로 돌아 갑 니 다. 대상 은 value 와 done 두 가지 속성 을 포함 합 니 다. value 는 현재 속성의 값 입 니 다. done 은 옮 겨 다 니 는 끝 여 부 를 판단 하 는 데 사 용 됩 니 다

done 이 true 일 때 옮 겨 다 니 며 끝 납 니 다

예시:

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
 
it.next();
>{value: "zero", done: false}
it.next();
>{value: "one", done: false}
it.next();
>{value: "two", done: false}
it.next();
>{value: undefined, done: true}

먼저 배열 을 만 든 다음 Symbol. iterator 방법 으로 교체 기 를 만 든 다음 에 next 방법 으로 배열 내부 항목 에 접근 합 니 다. 속성 done 이 true 일 때 접근 이 끝 납 니 다.교체 기 는 프로 토 콜 의 일부분 으로 교체 에 사용 된다.이 프로 토 콜 의 관건 적 인 특징 은 순서 입 니 다. 교체 기 는 한 번 에 값 을 되 돌려 줍 니 다.이 는 교체 가능 한 데이터 구조 가 비 선형 (예 를 들 어 나무) 이면 교체 가 선형 화 된다 는 뜻 이다.
교체 가능 한 데이터 구조

Array

String

Map

Set

Dom 원소 (진행 중)

Array
배열 (Array) 과 유형 배열 (TypedArray) 은 교체 할 수 있 습 니 다.

for (let item of ["zero", "one", "two"]) {
  console.log(item);
}
// output:
// zero
// one
// two

String
문자열 은 바 꿀 수 있 습 니 다. 그들 만 이 옮 겨 다 니 는 것 은 유 니 코드 코드 입 니 다. 코드 마다 한 개 에서 두 개의 자바 script 문 자 를 포함 할 수 있 습 니 다.

for (const c of 'z\uD83D\uDC0A') {
    console.log(c);
}
// output:
// z
// \uD83D\uDC0A

Map
Map 은 주로 그들의 entries 를 교체 합 니 다. 모든 entry 는 [key, value] 항목 으로 인 코딩 됩 니 다. entries 는 정확 한 상황 으로 교체 되 고 그 순 서 는 추 가 된 순서 와 같 습 니 다.

const map = new Map();
map.set(0, "zero");
map.set(1, "one");
 
for (let item of map) {
  console.log(item);
}
// output:
// [0, "zero"]
// [1, "one"]
//  ： WeakMaps     

arguments
arguments 는 현재 ES6 에서 사용 되 는 것 이 점점 줄 어 들 고 있 지만 옮 겨 다 닐 수 있 습 니 다.

function args() {
  for (let item of arguments) {
    console.log(item);
  }
}
args("zero", "one");
// output:
// zero
// one

일반 대상 교체 불가
일반 대상 은 object 에서 만 들 어 졌 습 니 다. 교체 할 수 없습니다.

// TypeError
for (let item of {}) { 
  console.log(item);
}

for... of circle 순환
for... of 는 ES6 가 새로 도입 한 순환 으로 for... in 과 foreach () 를 대체 하고 새로운 교체 프로 토 콜 을 지원 합 니 다.이것 은 Array, String, Map, Set 등 일반적인 데이터 형식 을 교체 하 는 데 사용 할 수 있 습 니 다.
일반적인 데이터 형식 교체
Array

const nums = ["zero", "one", "two"];
 
for (let num of nums) {
  console.log(num);
}
TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;
 
for (let item of typedArray1) {
  console.log(item);
}

String

const str = "zero";
 
for (let item of str) {
  console.log(item);
}

Map

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two");
 
//    key   value
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (let [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
 
//     key
for (let key of myMap.keys()) {
  console.log(key);
}
 
//     value
for (let value of myMap.values()) {
  console.log(value);
}

Set

let mySet = new Set();
mySet.add("zero");
mySet.add("one");
mySet.add("two");
 
//      set
for (let item of mySet) {
  console.log(item);
}
 
//     key  
for (let key of mySet.keys()) {
  console.log(key);
}
 
//     value
for (let value of mySet.values()) {
  console.log(value);
}
 
//    key   value ，     
for (let [key, value] of mySet.entries()) {
  console.log(key + " = " + value);
}

교체 가능 한 데이터 구조
of 작업 수 는 교체 가 가능 해 야 합 니 다. 이 는 일반 대상 이 라면 교체 가 불가능 하 다 는 것 을 의미 합 니 다.데이터 구조 가 배열 과 유사 하 다 면 Array. from () 방법 으로 바 꿀 수 있다.

const arrayLink = {length: 2, 0: "zero", 1: "one"}

//   TypeError   
for (let item of arrayLink) {
  console.log(item);
}
 
//     
// output:
// zero
// one
for (let item of Array.from(arrayLink)) {
  console.log(item);
}

let, const, var 는 for... of 에 사 용 됩 니 다.
let 와 const 를 사용 하면 매번 교체 할 때마다 새로운 저장 공간 을 만 들 것 입 니 다. 이것 은 역할 영역 이 교체 되 는 내부 에 있 음 을 보장 할 수 있 습 니 다.

const nums = ["zero", "one", "two"];
 
for (const num of nums) {
  console.log(num);
}
//   ReferenceError
console.log(num);

위의 예 에서 우 리 는 마지막 문장 이 이상 을 보고 하 는 것 을 보 았 다. 원인 num 의 역할 영역 은 순환 체 내부 에 만 있 고 외부 가 무효 하 며 구체 적 으로 let 와 const 장 을 찾 아 볼 수 있다.var 를 사용 하면 상기 상황 이 발생 하지 않 습 니 다. var 는 전체 국면 에 작용 하기 때문에 교체 할 때마다 새로운 저장 공간 을 만 들 지 않 습 니 다.

const nums = ["zero", "one", "two"];
 
forv (var num of nums) {
  console.log(num);
}
// output: two
console.log(num);

교체 가능 대상 정의

class Player {
    constructor(list){
        this.list = list;
    }
    [Symbol.iterator](){
        let current = 0;
        let that = this;
        return{
            next(){
                return current < that.list.length ? {value:that.list[current++], done: false} : {done:true};
            }
        };
    }
}

let player = new Player(['Tom','Jerry','Mike']);
for(let tmp of player){
    console.log(tmp);
}

//Tom
//Jerry
//Mike