ES6 - 교체 기 깊이 이해

교체 기
스 트 리밍 기 (Iterator) 는 다양한 데이터 구조 에 통 일 된 접근 체 제 를 제공 하 는 인터페이스 이다.모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 기 작업 을 완성 할 수 있 습 니 다 (즉, 이 데이터 구 조 를 순서대로 처리 하 는 모든 구성원).
(1) Iterator 의 역할

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

를 제공한다.

데이터 구조의 구성원 을 특정한 순서에 따라 배열 할 수 있 게 한다

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

(2) Iterator 의 교체 과정
모든 교체 기 대상 은 하나의 next 방법 이 있 고 호출 할 때마다 대상 을 되 돌려 줍 니 다. {done: boolean, value: any}value 현재 구성원 의 값 을 나타 내 고 done 더 많은 데이터 가 있 는 지 여 부 를 나타 낸다.교체 기 내 부 는 현재 멤버 의 위 치 를 가리 키 는 지침 을 유지 하고 호출 next 할 때마다 다음 멤버 를 가리 키 고 있 습 니 다.

// es5     
function creatIterator(arr){
    let index = 0;
    return {
      next: () =>{
        return {
          done: index > arr.length - 1,
          value: this.done ? undefined : arr[index++]
        }
      }
    }
}
const iterator = creatIterator([1, 2, 3])
console.log(a.next())  // { done: false, value: 1 }
console.log(a.next())  // { done: false, value: 2 }
console.log(a.next())  // { done: false, value: 3 }
console.log(a.next())  // { done: true, value: undefined }
//               
console.log(a.next())  // { done: true, value: undefined }

생 성기
생 성 기 는 교체 기 를 되 돌려 주 는 함수 이다.function 뒤의 * 을 통 해 그것 이 생 성기 임 을 나타 낸다.

yield 키 워드 는 es6 의 새로운 특성 으로 호출 next 방법의 반환 값 과 호출 순 서 를 지정 할 수 있 습 니 다.

문 구 를 실행 할 때마다 함수 가 실행 을 중단 하고 다시 호출 yield 방법 이 실 행 될 때 까지 계속 실 행 됩 니 다

next 키 워드 는 생 성기 내부 에서 만 사용 할 수 있 고 다른 곳 에 서 는 문법 오류

가 발생 할 수 있 습 니 다.

function * createIterator(){
   yield 1
   yield 2
}
//             
const iterator = createIterator()
console.log(iterator .next())  // { done: false, value: 1 }
console.log(iterator .next())  // { done: false, value: 2 }
console.log(iterator.next())  // { done: true, value: undefined }

함수 표현 식 사용: yield 하지만 화살표 함수 로 생 성 기 를 만 들 수 없습니다.
여기 서 생 성 기 는 교체 기 를 되 돌 릴 수 있 지만 주요 한 역할 은 절차 관리 이기 때문에 동기 화 방식 으로 비동기 코드, generator 상세 한 정 보 를 쓸 수 있 습 니 다.
교체 가능 대상
(1) const createIterator = function *(){ yield 1 } 속성
하나의 데이터 구 조 는 Symbol.iterator 속성 만 가지 면 교체 가능 하 다 고 볼 수 있다.

모든 집합 대상 Symbol.iterator 과 array、set、map 은 교체 가능 대상 으로 기본 적 인 교체 기, 즉 string 속성

이 있다.

생 성기 생 성 대상 은 교체 가능 한 것 입 니 다. 생 성 기 는 기본적으로 그들의 Symbol.iterator 속성 할당

입 니 다.

실행 Symbol.iterator 방법 으로 대상 의 교체 기

를 얻는다.
배열 에 접근 하 는 기본 교체 기:

const arr = [1, 2, 3]
//         `Symbol.iterator`      `arr`     
const arrIterator = arr[Symbol.iterator]()

console.log(arrIterator.next())  // { value: 1, done: false }
console.log(arrIterator.next())  // { value: 2, done: false }
console.log(arrIterator.next())  // { value: 3, done: false }
console.log(arrIterator.next())  // { value: undefined, done: true }

(2) Symbol.iterator for...of 중복 호출 과정 을 봉 하여 교체 기 를 자동 으로 실행 하고 교체 가능 한 대상 에 접근 하 는 구성원 을 옮 겨 다 녔 다.이 는 대상 의 for...of 방법 을 통 해 교체 기 를 얻 고 매번 순환 에서 교체 가능 한 대상 next 방법 을 호출 하여 반환 값 을 교체 기의 규칙 에 따라 중간 변 수 를 부여 하 며 Symbol.iterator 속성 next 까지 순환 합 니 다.즉시

const arr = [1, 2, 3]
for(let item of arr){
    console.log(item)
}
// 1 2 3

(3) 교체 가능 대상 만 들 기
교체 불가 대상 에 게 속성 done 을 설정 하여 교체 가능 한 것 으로 만 들 수 있 습 니 다.true 교체 기 생 성 함수 여야 합 니 다. 그렇지 않 으 면 사용 Symbol.iterator 이 잘못 되 었 습 니 다.

// es5
const list = {
  items: [1,2,3],
  [Symbol.iterator](){
    let index = 0;
    return {
      next: () =>{
        return {
          done: index > this.items.length - 1,
          value: this.done ? undefined : this.items[index++]
        }
      }
    }
  }
}
for (const item of list) {
  console.log(item)
}
// 1 2 3

// es6
const list = {
  items: [1,2,3],
  *[Symbol.iterator](){
    for(item of this.items){
      yield item
    }
  }
}
for (const item of list) {
  console.log(item)
}
// 1 2 3

(3) 교체 기 내장Symbol.iterator 모두 for...of 새로 추 가 된 교체 기다.다음 표 는 각종 집합 유형의 각종 교체 기 가 entries、values、keys 순환 에서 의 중간 변수 입 니 다.
집합 형식/교체 기es6 for...of entries values keys array ✔ [[index, value]] [value] [index] ✔ map [[key, value]] [value] [key] set ✔ [[value, value]]
모든 집합 유형 에는 기본 교체 기 가 있 습 니 다. [value] 순환 에서 명시 적 지정 이 없 으 면 기본 교체 기 를 사용 합 니 다.위의 표 의✔집합 유형 별 [value] 기본 교체 기

const arr = [1,2,3]
//          ，   array      ， values   
for (const item of arr) {
  console.log(item)
}
// 1 2 3

//        entries   
for (const item of arr.entries()) {
  console.log(item)
}
// [0,1]  [1,2]  [2,3]

주의해 야 할 것 은 for... of for... of 와 혼동 하지 마 십시오.전 자 는 교체 기 를 되 돌려 주 고 entries、values、keys 순환 에 사용 합 니 다.후 자 는 원래 대상 에 따라 포맷 된 배열 로 되 돌 아 왔 다.
(4) 문자열 교체 기Object.entries、Object.values、Obejct.keys 에서 도 for...of 순환 문자열 을 사용 할 수 있 으 나 문자 가 아 닌 인 코딩 을 단원 으로 하기 때문에 쌍 바이트 문 자 를 정확하게 접근 할 수 없습니다.es5 에서 전면적으로 지원 for 하기 때문에 es6 순환 하면 문자열 의 두 바이트 문 자 를 정확하게 옮 겨 다 닐 수 있 습 니 다.

const str = '1'
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "
// "1"

//            
for (let i of text) {
  console.log(i);
}
// ""
// "1"

(5) unicode 교체 기for...of 표준 중 하나 NodeList 유형 이 있 는데 페이지 문서 요소 의 집합 을 나타 낸다.그것 은 length 속성 을 포함 합 니 다.DOM 을 통 해 요 소 를 방문 할 수 있 습 니 다. 배열 의 형식 과 조작 방법 과 유사 하지만 사실은 대상 입 니 다. 즉, 우리 가 속칭 하 는 위조 배열 입 니 다. 예 를 들 어 NodeList.[number] 중 {0: domObject, 1: domObject, 2: domObject, length:3} 유형 도 기본 교체 기 를 가지 고 있어 es6 교체 가 가능 하 다.

const nodeList = document.getElementsByClassName('abc')
for (const node of nodeList) {
    console.log(node)
}

(6) 연산 자 펼 치기
연산 자 를 펼 치면 모든 교체 가능 한 대상 을 조작 하고 기본 교체 기 에 따라 참조 할 값 을 선택 한 다음 모든 값 을 읽 을 수 있 습 니 다.

const nodeList = document.getElementsByClassName('abc')
console.log([...nodeList])   
// [node, node, node]

const map = new Map()
map.set('name','li yang')
map.set('age', 18)
console.log([...map])  //    map       entries
// [["name", "li yang"], ["age", 18]]

연산 자 를 펼 치면 임의의 교체 가능 대상 에 작용 할 수 있 기 때문에 교체 가능 대상 을 배열 로 바 꾸 는 것 이 가장 쉬 운 방법 이다.