Make a summary every day, persistence is victory!

/** @date 2021-06-01 @description ES6 Iterator */Copy the code

One (sequence)

Today I reviewed the ES6 Getting started Iterator section to conclude.

Ii (Concept)

Iterator is an interface mechanism. Essentially, a pointer object is used to iterate over data structures. All data structures with Iterator interfaces can iterate over data structures.

Iterator is a function that returns an Iterator. The Iterator prototype has a next function. Calling next returns an object containing value and done. Value indicates the current value, and done indicates whether the traversal is complete.

For example, {value: 1, done: false} indicates that the current value is 1 and the traversal is incomplete. {value: undefined, done: true} indicates that the traversal has been completed and there is no current value and the value is undefined.

The default data structure for deploying the Iterator interface is:

  1. Array;
  2. Map;
  3. Set;
  4. String;
  5. NodeList;
  6. arguments;
  7. TypedArray;

Three (Role)

Iterator does three things:

  1. Provide a unified access interface for various data structures;
  2. Arrange the data structure members in some order;
  3. usefor... ofTraversal data structure;

Iv (Process)

Iterator traversal is as follows:

  1. To create aPointer to the object, pointing to the first item of the current data structure;
  2. Calling pointernextMethod, pointing to the second item of the data structure;
  3. Constantly callingnextMethod until a pointer points toEnd position;

Wu (Practice)

const arr = [1, 2, 3, 4];
const iterator = arr[Symbol.iterator]();

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

// 使用foo...of
for (const item of arr) {
  console.log(item); // 1 2 3 4
}
Copy the code

Sometimes you need to deploy the Iterator interface to an Object, so you need to write your own implementation. For example, if you want to iterate over an Object by the first letter of its property name:

const obj = { name: 'E1e', age: 18, hobbies: ['coding', 'game', 'study'], occupation: 'Web Developer', }; obj[Symbol.iterator] = function () { const self = this; const sortKeys = Object.keys(self).sort( (a, b) => a.charCodeAt() - b.charCodeAt() ); let index = -1; return { next: function () { index++; return index < sortKeys.length ? { value: self[sortKeys[index]], done: false } : { value: undefined, done: true }; }}; }; for (const item of obj) { console.log(item); // 18 [ 'coding', 'game', 'study' ] 'E1e' 'Web Developer' }Copy the code

The Iterator interface is easiest to implement with Generator functions:

const obj = { name: 'E1e', age: 18, hobbies: ['coding', 'game', 'study'], occupation: 'Web Developer', }; obj[Symbol.iterator] = function* () { const self = this; const sortKeys = Object.keys(self).sort( (a, b) => a.charCodeAt() - b.charCodeAt() ); for (let i = 0; i < sortKeys.length; i++) { yield this[sortKeys[i]]; }}; for (const item of obj) { console.log(item); // 18 [ 'coding', 'game', 'study' ] 'E1e' 'Web Developer' }Copy the code

Seven (Conclusion)

Iterator also has return and throw methods, which we will not summarize here.