1. The iteration

    Iteration, or traversal, is one of the scenarios we often encounter in daily development, when we encounter data structures such as arrays or objects

  2. Iterator pattern concept

    The main idea of the iterator pattern is to iterate through all the elements of a collection without exposing the underlying representation of the collection (lists, stacks, trees, etc.).

  1. The characteristics of

    The iterative approach decouples the data source

  1. case

    • ForEach is a sequential iteration

      const array = [1.2.3];
array.forEach(item= > {console.log(item)}) / / 1, 2, 3
Copy the code

    • Implementation of concrete iterations

      / / in order
Array.prototype.forEach = function(fn) {
    for(var i=0; i < this.length; i++){
        fn(this[i])
    }
}
// reverse traversal
Array.prototype.forEach_reverse = function(fn) {
    for(var i= this.length - 1; i >= 0; i--){
        fn(this[i])
    }
}
array.forEach_reverse(item= > {console.log(item)}) / / 3, 2, 1


// map,filter,some,every.....
Copy the code

    • ES6 Iterator (for of)

      In ES6, Iterator serves as an interface to provide a unified access mechanism for various data structures. Any data structure that deploys the Iterator interface can be iterated.

      The default Iterator interface for ES6 is deployed on the symbol. Iterator property of the data structure, which is itself a function that represents the default traverser generator function for the current data structure. Executing the function [symbol.iterator]() returns an iterator object. A data structure is “traversable” as long as it has the symbol. iterator attribute.

      function getIterator(list) { 
    var i = 0; 
        return { 
            next: function() { 
                var done = (i >= list.length); 
                varvalue = ! done ? list[i++] :undefined; 
                return { done: done, value: value }; }}; }let arr = ['a'.'b'.'c'];
let iterator = arr[Symbol.iterator]();

iterator.next();  // { value: 'a', done: false }
iterator.next();  // { value: 'b', done: false }
iterator.next();  // { value: 'c', done: false }
iterator.next();  // { value: undefined, done: true }
Copy the code

    • The Map iterator

      const citys = new Map([['Beijing'.1], ['Shanghai'.2], ['hangzhou'.3]])
const run = citys.entries()

run.next() // {value: [' Beijing ', 1], done: false}
run.next() // {value: [' Shanghai ', 2], done: false}
run.next() // {value: [' dodoid ', 3], done: false}
run.next() // {value: undefined, done: true}
Copy the code

  1. conclusion

    The iterator pattern separates the process of iterating from the business logic. After using the iterator pattern, each element of an object can be accessed in a specific way, even if the internal structure of the object is not concerned.

Reference links:

  • Cloud.tencent.com/developer/a…
  • Fanerge. Making. IO / 2017 / js E8% %…
  • Segmentfault.com/a/119000001…
  • Refactoringguru. Cn/design – patt…
  • Segmentfault.com/a/119000003…