ES6 학습 노트 -- Iterator 와 for... of
스 트 리밍 기 (Iterator) 는 다양한 데이터 구조 에 통 일 된 접근 체 제 를 제공 하 는 인터페이스 이다.모든 데이터 구 조 는 Iterator 인 터 페 이 스 를 배치 하면 옮 겨 다 니 기 작업 을 완성 할 수 있 습 니 다 (즉, 이 데이터 구 조 를 순서대로 처리 하 는 모든 구성원).
Iterator 의 역할 은 세 가지 가 있 습 니 다. 하 나 는 각종 데이터 구 조 를 위해 통일 적 이 고 간편 한 방문 인 터 페 이 스 를 제공 하 는 것 입 니 다.둘째, 데이터 구조의 구성원 들 이 특정한 순서에 따라 배열 할 수 있 도록 하 는 것 이다.셋째, ES6 는 새로운 옮 겨 다 니 는 명령 for... of 순환 을 만 들 었 고 Iterator 인 터 페 이 스 는 주로 for... of 소 비 를 제공 합 니 다.
아 날로 그 Iterator 의 예
function mockIterator (arr) {
var nextIndex = 0;
return {
next: function () {
return nextIndex < arr.length ? {value: arr[nextIndex++], done: false} : {value: undefined, done: true}
}
}
}
var it = mockIterator([1,2,3]);
it.next(); // {value:1, done: false}
it.next(); // {value:2, done: false}
it.next(); // {value:3, done: false}
it.next(); // {value:undefined, done: true}
ES6 에 따 르 면 기본 Iterator 인 터 페 이 스 는 데이터 구조의 Symbol. iterator 속성 에 배치 되 거나 하나의 데이터 구 조 는 Symbol. iterator 속성 만 있 으 면 '옮 겨 다 닐 수 있 는' (iterable) 이 라 고 볼 수 있다.Symbol. iterator 속성 자체 가 함수 입 니 다. 현재 데이터 구조의 기본 적 인 달력 생 성 함수 입 니 다.이 함 수 를 실행 하면 달력 을 되 돌려 줍 니 다.속성 명 Symbol. iterator 는 표현 식 으로 Symbol 대상 의 iterator 속성 을 되 돌려 줍 니 다. 이것 은 미리 정 의 된 Symbol 형식의 특수 값 이 므 로 괄호 안에 넣 어야 합 니 다.
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
var it = obj[Symbol.iterator]();
it.next(); //{value: 1, done: true}
원생 은 Iterator 인터페이스 의 데이터 구 조 를 갖 추고 있다.
ES6 에서 세 가지 데이터 구 조 는 원생 적 으로 Iterator 인 터 페 이 스 를 갖 추고 있다. 배열, 일부 유사 한 배열 의 대상, Set 와 Map 구 조 를 가진다.이 세 가지 데이터 구조 에 대해 서 는 자체 적 으로 스 트 리밍 기 생 성 함 수 를 쓰 지 않 아 도 됩 니 다. for.. of 순환 은 자동 으로 스 트 리밍 됩 니 다.
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 }
대상 (Object) 이 Iterator 인 터 페 이 스 를 기본 으로 배치 하지 않 은 이 유 는 대상 의 어떤 속성 이 먼저 옮 겨 다 니 고 어떤 속성 이 옮 겨 다 니 는 지 확실 하지 않 기 때문에 개발 자가 수 동 으로 지정 해 야 합 니 다.본질 적 으로 스 트 리밍 기 는 일종 의 선형 처리 로 그 어떠한 비 선형 데이터 구조 에 대해 스 트 리밍 기 인 터 페 이 스 를 배치 하 는 것 은 일종 의 선형 전환 을 배치 하 는 것 과 같다.그러나 엄 밀 히 말 하면 대상 이 스 트 리밍 인 터 페 이 스 를 배치 하 는 것 은 필요 하지 않다. 이때 대상 이 실제로 맵 구조 로 사용 되 고 ES5 는 맵 구조 가 없 으 며 ES6 원생 이 제공 하기 때문이다.
대상 이 for... of 순환 호출 이 가능 한 Iterator 인터페이스 가 있 으 려 면 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);
}
let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};
유사 한 배열 의 대상 (수치 키 이름과 length 속성 이 존재 함) 에 대해 Iterator 인 터 페 이 스 를 배치 하 는 간단 한 방법 은 Symbol. iterator 방법 으로 배열 의 Iterator 인 터 페 이 스 를 직접 참조 하 는 것 입 니 다.
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
//
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
[...document.querySelectorAll('div')] //
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 방법 은 효과 가 없습니다.
let iterable = {
a: 'a',
b: 'b',
c: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
console.log(item); // undefined, undefined, undefined
}
유사 한 배열 의 대상 은 여러 가지 유형 을 포함한다.다음은 for... of 순환 문자열, DOM NodeList 대상, arguments 대상 에 사용 되 는 예 입 니 다.
//
let str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// DOM NodeList
let paras = document.querySelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
// arguments
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');
// 'a'
// 'b'
모든 유사 한 배열 의 대상 이 Iterator 인 터 페 이 스 를 가지 고 있 는 것 은 아 닙 니 다. 간단 한 해결 방법 은 Array. from 방법 으로 배열 로 바 꾸 는 것 입 니 다.
let arrayLike = { length: 2, 0: 'a', 1: 'b' };
//
for (let x of arrayLike) {
console.log(x);
}
//
for (let x of Array.from(arrayLike)) {
console.log(x);
}
원생 의 Symbol. iterator 방법 을 덮어 쓰 고 옮 겨 다 니 는 행 위 를 수정 하 는 목적 을 달성 할 수 있 습 니 다.
var str = new String("hi");
[...str] // ["h", "i"]
str[Symbol.iterator] = function() {
return {
next: function() {
if (this._first) {
this._first = false;
return { value: "bye", done: false };
} else {
return { done: true };
}
},
_first: true
};
};
[...str] // ["bye"]
str // "hi"
Iterator 인터페이스 호출 장소
1) 할당 해제
배열 과 set 구 조 를 재 구성 할 때 Symbol. iterator 방법 을 기본적으로 호출 합 니 다.
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];
(2) 확장 연산 자
확장 연산 자 (...) 도 기본 iterator 인 터 페 이 스 를 호출 합 니 다.
//
var str = 'hello';
[...str] // ['h','e','l','l','o']
//
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']
위 코드 의 확장 연산 자 내 부 는 Iterator 인 터 페 이 스 를 호출 합 니 다.
실제로 이 는 Iterator 인터페이스 가 배 치 된 모든 데이터 구 조 를 배열 로 바 꿀 수 있 는 간편 한 메커니즘 을 제공 했다.한 데이터 구조 가 Iterator 인 터 페 이 스 를 배치 하면 확장 연산 자 를 사용 해 배열 로 전환 할 수 있다 는 것 이다.
let arr = [...iterable];
(3)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 }
4) 기타 장소
배열 의 스 트 리밍 은 스 트 리밍 인 터 페 이 스 를 호출 하기 때문에 배열 을 매개 변수 로 받 아들 이 는 모든 경우 스 트 리밍 인 터 페 이 스 를 호출 합 니 다.다음은 몇 가지 예 이다.
다음으로 전송:https://www.cnblogs.com/azerothmemoir/p/6644843.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.