JavaScript迭代器模式与开发实践（上）

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解迭代器模式，希望能够让你对设计模式更一步的学习。

本章学习内容

• 认识迭代器模式
• 完成一个迭代器模式

迭代器模式

什么是迭代器模式？

迭代器模式是指提供一种方法顺序访问一个可迭代的对象（数组、map等），而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

听上去好像很复杂，其实就是遍历可迭代的一个对象，用其元素执行一个传入的回调函数。

在JavaScript，我们常见的迭代器模式：forEach、map以及find等等。其实，我们日常开发中都一直在使用这种技术。然而，却不知它的模样。这也是我写这篇文章的原因，希望我和正在阅读的你都能够知其然而知其所以然。

实现一个迭代器

现在我们一起来实现一个迭代器，就以我们常用的forEach为例子。先来仔细回顾下forEach的入参以及功能

forEach：

• 本身为数组的方法，其实也就是需要接收一个数组为参数

• 其次，本身接收一个回调函数。

  • 函数参数依次为数组元素，数组下标

• 最后，将数组元素进行遍历执行这个方法

code

let ForEach = function (arr,callback){
    for(let i = 0 ; i < arr.length ; i++){
        //遍历数组，依次执行回调
        callback(arr[i],i)
    }
}
​
const data = [1,2,3]
​
const testData = [1,2,3]
​
data.forEach((item,index)=>{
    data[index] = item +index
})
​
ForEach(testData,(item,index)=>{
    testData[index] = item + index
})
​
console.log(data)
​
console.log(testData)
​

控制台输出

[ 1, 3, 5 ]
[ 1, 3, 5 ]

经过以上处理，我们就已经实现了一个类似forEach的迭代器了

尾声

本章实现的属于内部迭代器，关于迭代器模式的讲解会在下一章里为你呈现。