ES6 입문 강좌 의 Iterator 와 for...of 순환 상세 설명
4722 단어 es6Iteratorfor...of circle 순환
1.Iterator(달력)
스 트 리밍 기(Iterator)는 프로 토 콜 로 모든 대상 이 이 프로 토 콜 을 배치 하면 스 트 리밍 작업 을 완성 할 수 있 습 니 다.ES6 에서 특질 for...of 순환 을 반복 합 니 다.
그것 의 작용 은 주로 두 가지 가 있다.
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
}
}
var it = makeIterator(['a', 'b']);
it.next().value; //'a'
it.next().value; //'b'
it.next().done; // true
위의 코드 세 션 에서 MakeIterator 함 수 를 정 의 했 습 니 다.매개 변수 배열 을 옮 겨 다 니 는 데 사용 되 는 스 트 리밍 대상 을 되 돌려 주 는 역할 을 합 니 다.특히 주의해 야 할 것 은 next 반환 값 의 구조 다.다음은 옮 겨 다 니 는 예제 코드 세 션 을 살 펴 보 겠 습 니 다.
function idMaker() {
var index = 0;
return {
next: function() {
return {value: index++, done: false};
}
}
}
var it = idMaker();
it.next().value; //'0'
it.next().value; //'1'
it.next().value; //'2'
순환ES6 에서 한 대상 이 next 방법 을 배치 하면 iterator 인터페이스 가 있 는 것 으로 간주 되 고 for...of 순환 으로 그 값 을 옮 겨 다 닐 수 있 습 니 다.
function idMaker() {
var index = 0;
return {
next: function() {
return {value: index++, done: false};
}
}
}
for (var n of it) {
if (n > 5) {
break;
console.log( n );
}
}
//0
//1
//2
//3
//4
//5
위의 코드 설명,for...of 는 기본적으로 0 부터 순환 합 니 다.배열 원생 은 iterator 인 터 페 이 스 를 갖 추고 있다.
const arr = [1, 5, 3, 9];
for (let v of arr) {
console.log( v );
}
//1
//5
//3
//9
비교 해 보면 Js 기 존의 for...in 순환 은 대상 의 키 이름 만 얻 을 수 있 고 키 값 을 직접 가 져 올 수 없습니다.ES6 는 키 값 을 가 져 올 수 있 도록 for...of 순환 을 제공 합 니 다.
var arr = ['a', 'b', 'c', 'd'];
for (a in arr) {
console.log( a );
}
//0
//1
//2
//3
for (a of arr) {
console.log( a );
}
//0
//1
//2
//3
위의 코드 세 션 은 for...in 순환 으로 키 이름 을 읽 고 for...of 순환 으로 키 값 을 읽 습 니 다.Set 와 Map 구조의 데 이 터 는 for...of 순환 을 직접 사용 할 수 있 습 니 다.
var name = ['S', 'D', 'J', 'Z', 'G', 'G', 'G'];
for ( var e of name) {
console.log( e );
}
//S
//D
//J
//Z
//G
var es6 = new Map();
es6.set('edition', 6);
es6.set('committee', 'TC39');
es6.set('standard', 'ECMA-262');
for(var [name, value] of es6) {
console.log(name + ": " + value);
}
// edition: 6
// commttee: TC39
// standard: ECMA-262
위의 코드 세 션 에서 Set 구조 와 Map 구 조 를 어떻게 옮 겨 다 니 는 지 보 여 주 었 습 니 다.후 자 는 같은 키 이름과 키 입 니 다.일반적인 대상 에 대해 for...of 구 조 는 직접 사용 할 수 없 으 며,그렇지 않 으 면 잘못 보고 할 수 있 습 니 다.항목 배치 iterator 인터페이스 가 있어 야 사용 할 수 있 습 니 다.그러나 이 경우 for...in 순환 은 키 이름 을 옮 겨 다 닐 수 있 습 니 다.
var es6 = {
name: "G.Dragon",
year: 22,
love: "coding"
};
for (e in es6) {
console.log( e );
}
//name
//year
//love
for( e of es6) {
console.log( e );
}
// TypeError: es6 is not iterable
마지막 으로 정리 해 보 자.for...of 순환 에서 사용 할 수 있 는 범 위 는 배열,유사 한 배열 의 대상(예 를 들 어 argument 대상,DOM NodeList 대상),set 와 Map 구조,뒤의 Generator 대상,그리고 문자열 을 포함한다.다음은 for...of 를 사용 하여 문자열 과 DOM NodeList 대상 을 반복 하 는 예 입 니 다.
//
let str = "hello";
for (let s of str) {
console.log( s );
}
//h
//e
//l
//l
//o
// DOM NodeList
let paras = document.getSelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
총결산이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.