JavaScript迭代模式

时间:2022-06-28 前端若水人气:0

前言

迭代器设计模式是指提供一个方法去访问一个有序复杂数据，这些数据在内部有可能会用复杂的结构进行存储，我们可以通过方法进行访问这种数据的内部的每一个元素，使用该数据无需知道是如何拿到的，只要能够进行操作即可

迭代器设计模式在生活中的运用

在生活中我们可以用收音机来表示迭代器设计模式，用户搜索到广播电台，然后从某个广播电台开始，通过向前向后的按钮进行控制遍历收听所有的广播频道，我们也可以以音乐播放器为例子，通过音乐播放器的上一首下一首按钮进行控制播放浏览的音乐，它们也可以说是提供了一个迭代器接口，进行遍历每一个频道或歌曲

迭代器设计模式在业务上的应用

迭代器设计模式在业务中分为内部迭代器和外部迭代器

内部迭代器

内部迭代器我们常见的是数组的forEach方法，内部迭代器一般都有自己的规则，我们需要按照他们特定的要求进行使用，缺点也显而易见，由于迭代规则已经约定好了，我们必须按照他们所约定的规则进行使用，所以我们如果出现某些特性需求，内部迭代器则无法满足

let arr = [{ name: "前端" }, { name: '后端' }, { name: '运维' }];
//通过forEach方法对数据进行迭代,forEach方法接收一个回调函数，该回调函数中接收三个参数，第一个是当前的循环的每一项，第二个是当前索引，第三个是当前迭代的总数组，这就是内部迭代器的规则
        arr.forEach(function(res,index,arr){
            console.log(res.name);
        })

外部迭代器

外部迭代器必须显式的进行迭代，增加了调用的复杂度同时也相对的增加了迭代器的灵活性，可以手动的进行操控迭代过程以及迭代顺序，将迭代相关的数据暴露出来进行处理后返回

我们来手写一个外部迭代器方法，里面拥有一个标记index参数，用于获取下一次数据，拥有一个next方法，该方法会进行对index标记进行自增后然后返回一个对象，对象中拥有俩个参数value是代表着当前标记下的数据，done是当前数据是否还能继续往下调用next方法的标记，最后在返回一个全新的处理过后的数据，通过调用next方法可以看到当前的项的数据

const arr = [{name:"javaScript"}, {name:"Go"},{name:"Node.js"}];
        function Iterator(data) {
            let index = 0;
            function next(){
                index++;
                return {
                    value: data[index],
                    done: data.length == index
                }
            };
            return {
                next
            }
        }

使用外部迭代器:

      const iter = Iterator(arr);
        console.log(iter.next());
        console.log(iter.next());
        console.log(iter.next());

迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项，也可以通过迭代器进行完成一些流线式操作

加载全部内容