js design patterns: what is the iterator pattern? Introduction to js iterator pattern

This article brings you content about js design patterns: What is the iterator pattern? The introduction of js iterator mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the iterator pattern?

Definition: Provides a method to sequentially access each element in an aggregate object without exposing the internal representation of the object.

Main solution: Different ways to traverse the entire integration object.

When to use: Traverse an aggregate object.

How to solve: Give the responsibility of walking between elements to the iterator, not the aggregate object.

Key code: Define interface: done, next.

Advantages of the iterator pattern: 1. It supports traversing an aggregate object in different ways. 2. Iterators simplify aggregate classes. 3. There can be multiple traversals on the same aggregate. 4. In the iterator mode, it is very convenient to add new aggregate classes and iterator classes without modifying the original code.

Disadvantages of the iterator pattern: Since the iterator pattern separates the responsibilities of storing data and traversing data, adding a new aggregate class requires adding a new iterator class. The number increases in pairs, which increases the complexity of the system to a certain extent.

Iterator pattern usage scenarios: 1. Access the contents of an aggregate object without exposing its internal representation. 2. It is necessary to provide multiple traversal methods for aggregate objects. 3. Provide a unified interface for traversing different aggregate structures.

Note: The iterator pattern separates the traversal behavior of the collection object and abstracts an iterator to take charge. This way, the internal structure of the collection is not exposed and the internal structure of the collection is not exposed. External code transparently accesses the data inside the collection.

Implementing an internal iterator

function each(arr, fn) {    
for (let i = 0; i < arr.length; i++) {
        fn(i, arr[i])
    }
}

each([1, 2, 3], function(i, n) {
    console.log(i) // 0 1 2
    console.log(n) // 1 2 3})

It can be seen that the internal iterator is very simple when called. The user does not need to care about the details of the internal iterator implementation, but this is also the function of the internal iterator. shortcoming. For example, if you want to compare whether two arrays are equal, you can only make a fuss in its callback function. The code is as follows:

const compare = function(arr1, arr2) {
    each(arr1, function(i, n) {        
    if (arr2[i] !== n) {
            console.log('两数组不等')            
            return
        }
    })
    console.log('两数组相等')
}

const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]
compare(arr1, arr2) // 两数组相等

Implementing an external iterator

const iterator = function(arr) {
  let current = 0
  const next = function() {
    current = current + 1
  }
  const done = function() {
    return current >= arr.length
  }
  const value = function() {
    return arr[current]
  }
  return {
    next,
    done,
    value,
  }
}

const arr1 = [1, 2 ,3]
const arr2 = [1, 2, 3]
const iterator1 = iterator(arr1)
const iterator2 = iterator(arr2)

const compare = function(iterator1, iterator2) {
  while (!iterator1.done() && !iterator2.done()) {
    if (iterator1.value() !== iterator2.value()) {
      console.log('两数组不等')
      return
    }
    iterator1.next() // 外部迭代器将遍历的权利转移到外部
    iterator2.next()
  }
  console.log('两数组相等')
}

compare(iterator1, iterator2)

Related recommendations:

js design patterns: What is the proxy pattern? Introduction to js proxy pattern

#js design pattern: What is the strategy pattern? Introduction to js strategy pattern

The above is the detailed content of js design patterns: what is the iterator pattern? Introduction to js iterator pattern. For more information, please follow other related articles on the PHP Chinese website!