집 > 기사 > 웹 프론트엔드 > ES6 반복 가능 프로토콜 및 반복자 프로토콜에 대한 자세한 설명

ES6 반복 가능 프로토콜 및 반복자 프로토콜에 대한 자세한 설명

小云云원래의: 2018-01-15 09:10:071503검색

이 글에서는 ES6 구문의 iterable 프로토콜과 iterator 프로토콜을 위주로 자세하게 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

ECMAScript 2015에 추가된 몇 가지 기능은 새로운 내장 기능이나 구문이 아니라 프로토콜입니다. 이러한 프로토콜은 특정 규칙을 따르는 모든 객체로 구현될 수 있습니다.
반복 가능한 프로토콜과 반복자 프로토콜의 두 가지 프로토콜이 있습니다.

Iterable 프로토콜

iterable 프로토콜을 사용하면 JavaScript 객체가 for..of 구조에서 어떤 값을 반복(검색)할 수 있는지와 같은 반복 동작을 정의하거나 사용자 정의할 수 있습니다. 일부 내장 유형은 내장 반복 가능 객체이며 Array 또는 Map과 같은 기본 반복 동작을 갖고 있지만 다른 유형(예: Object)은 그렇지 않습니다.

Iterator 인터페이스의 목적은 모든 데이터 구조, 즉 for...of 루프에 대한 통합 액세스 메커니즘을 제공하는 것입니다(자세한 내용은 아래 참조). for...of 루프를 사용하여 특정 데이터 구조를 탐색할 때 루프는 자동으로 Iterator 인터페이스를 찾고, Symbol.iterator 메서드를 호출하고, 객체의 기본 반복자를 반환합니다.

ES6에서는 기본 Iterator 인터페이스가 데이터 구조의 Symbol.iterator 속성에 배포되도록 규정합니다. 즉, 데이터 구조에 Symbol.iterator 속성이 있는 한 "반복 가능"하다고 간주될 수 있습니다. Symbol.iterator 속성 자체는 현재 데이터 구조의 기본 반복자 생성 함수인 함수입니다. 이 함수를 실행하면 순회자가 반환됩니다.

반복 가능한 객체가 되려면 객체 구현(또는 해당 프로토타입 체인의 객체)에 Symbol.iterator라는 속성이 있어야 합니다.

Iterator 프로토콜

반복자 프로토콜은 생성하는 표준 방법을 정의합니다. 유한 또는 무한한 값 시퀀스.

JavaScript의 원래 "집합"을 나타내는 데이터 구조는 주로 배열(Array)과 객체(Object)입니다. ES6에는 Map과 Set이 추가되었습니다. 이러한 방식으로 4개의 데이터 컬렉션이 있으며 사용자는 이를 조합하여 자신의 데이터 구조를 정의할 수 있습니다. 예를 들어 배열의 멤버는 맵이고 맵의 멤버는 개체입니다. 이를 위해서는 다양한 데이터 구조를 모두 처리할 수 있는 통합 인터페이스 메커니즘이 필요합니다.

Iterator(Iterator)가 바로 그런 메커니즘입니다. 다양한 데이터 구조에 대한 통합 액세스 메커니즘을 제공하는 인터페이스입니다. 모든 데이터 구조가 Iterator 인터페이스를 배포하는 한 순회 작업을 완료할 수 있습니다(즉, 데이터 구조의 모든 멤버를 순서대로 처리).

Iterator에는 세 가지 기능이 있습니다. 첫째, 다양한 데이터 구조에 대한 통합되고 간단한 액세스 인터페이스를 제공합니다. 둘째, 데이터 구조의 멤버를 특정 순서로 정렬할 수 있도록 합니다. 셋째, ES6은 새로운 순회 명령을 생성합니다. ...of 루프 및 Iterator 인터페이스는 주로 for...of에서 사용하는 데 사용됩니다.

Iterator의 순회 프로세스는 다음과 같습니다.

현재 데이터 구조의 시작 위치를 가리키는 포인터 개체를 만듭니다. 즉, traverser 객체는 본질적으로 포인터 객체입니다.
포인터 객체의 다음 메소드를 처음 호출할 때 포인터가 데이터 구조의 첫 번째 멤버를 가리킬 수 있습니다.
포인터 객체의 다음 메소드가 두 번째로 호출되면 포인터는 데이터 구조의 두 번째 멤버를 가리킵니다.
데이터 구조의 끝을 가리킬 때까지 포인터 개체의 다음 메서드를 계속 호출합니다.

다음 메소드가 호출될 때마다 데이터 구조의 현재 멤버 정보가 반환됩니다. 특히 value와 done이라는 두 가지 속성을 포함하는 객체를 반환합니다. 그 중 value 속성은 현재 멤버의 값이고, done 속성은 순회가 종료되었는지 여부를 나타내는 Boolean 값입니다.

var someString = "hi";
typeof someString[Symbol.iterator]; // "function"
var iterator = someString[Symbol.iterator]();
iterator + "";  // "[object String Iterator]"
iterator.next()    // { value: "h", done: false }
iterator.next();   // { value: "i", done: false }
iterator.next();   // { value: undefined, done: true }

Iterator 인터페이스를 사용한 기본 데이터 구조는 다음과 같습니다.

Array
Map
Set
String
TypedArray
함수 인수 객체
NodeList object

객체에는 Iterator 인터페이스 예, 객체가 for...of 루프에 의해 호출될 수 있는 Iterator 인터페이스를 갖고 싶다면 Symbol.iterator 속성에 순회 생성 메서드를 배포해야 합니다(프로토타입 체인의 객체는 다음을 가질 수도 있음). 이 방법).

Iterator 인터페이스를 호출할 때 발생하는 경우

아래에 소개된 for...of 루프 외에도 Iterator 인터페이스(예: Symbol.iterator 메서드)가 기본적으로 호출되는 경우가 있습니다. 스프레드 연산자는 기본 Iterator 인터페이스라고도 합니다.

사실 이는 Iterator 인터페이스로 배포된 모든 데이터 구조를 배열로 변환하는 간단한 메커니즘을 제공합니다. 즉, 데이터 구조가 Iterator 인터페이스를 배포하는 한 스프레드 연산자를 사용하여 이를 배열로 변환할 수 있습니다.

배열 순회는 순회자 인터페이스를 호출하므로 배열을 매개변수로 허용하는 모든 경우는 실제로 순회자 인터페이스를 호출합니다. 다음은 몇 가지 예입니다.

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()(예: new Map([['a',1 ] ,['b',2]]))
Promise.all()
Promise.race()

for...of

for...of 循环是最新添加到 JavaScript 循环系列中的循环。

它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代。

在研究 for...of 循环之前，先快速了解下其他 for 循环，看看它们有哪些不足之处。

for 循环

for 循环的最大缺点是需要跟踪计数器和退出条件。我们使用变量 i 作为计数器来跟踪循环并访问数组中的值。我们还使用 Array.length 来判断循环的退出条件。

虽然 for 循环在循环数组时的确具有优势，但是某些数据结构不是数组，因此并非始终适合使用 loop 循环。

for...in 循环

for...in 循环改善了 for 循环的不足之处，它消除了计数器逻辑和退出条件。但是依然需要使用 index 来访问数组的值.

此外，当你需要向数组中添加额外的方法（或另一个对象）时，for...in 循环会带来很大的麻烦。因为 for...in 循环循环访问所有可枚举的属性，意味着如果向数组的原型中添加任何其他属性，这些属性也会出现在循环中。这就是为何在循环访问数组时，不建议使用 for...in 循环。

注意： forEach 循环是另一种形式的 JavaScript 循环。但是，forEach() 实际上是数组方法，因此只能用在数组中。也无法停止或退出 forEach 循环。如果希望你的循环中出现这种行为，则需要使用基本的 for 循环。

for...of 循环

for...of 循环用于循环访问任何可迭代的数据类型。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 console.log(digit);
}

可以随时停止或退出 for...of 循环。

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
 if (digit % 2 === 0) {
  continue;
 }
 console.log(digit); //1,3,5,7,9
}

不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。

ES6 반복 가능 프로토콜 및 반복자 프로토콜에 대한 자세한 설명

관련 기사