前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript设计模式四:迭代器模式

javascript设计模式四:迭代器模式

作者头像
前端_AWhile
发布2019-08-29 14:40:30
3710
发布2019-08-29 14:40:30
举报
文章被收录于专栏:前端一会前端一会

迭代器模式分为内部迭代器和外部迭代器,内部迭代器就是在函数内部定义好迭代的规则,它完全接手整个迭代的过程,外部只需一次初始调用。

内部迭代器

以下自行实现的类似jquery中$.each()的each()函数就是内部迭代器

代码语言:javascript
复制
//实现一个jq的$.each()迭代器
var arr = [1, 2, 3, 4, 5, 6, 7, 8]
var each = function(arr, callback){
    for(var i=0; i<arr.length; i++){
        callback.call(null, i, arr[i])    //把下标和元素当作参数传递给callback参数
    }
}
each(arr, function(i, n){
    console.log(i, n);
})
//类似于jquery的 $.each(arr, function(i,n){})

内部迭代器在调用时非常方便,但是有一个缺点,就是无法同时迭代两个目标值,比如上述each函数就无法同时迭代两个数组。

对两个数组做相等性判断时,如果不改迭代器内部方法实现,只能通过each的回调函数进行实现,虽然能实现,但不是很优雅。

代码语言:javascript
复制
let compare = function (ary1, ary2) {
    if(ary1.length !== ary2.length){
        throw new Error('ar1和ary2长度不相等。')
    }
    each(ary1, function (i, n) {
        if(n !== ary2[i] ){
            throw new Error('ary1和ary2不相等。')
        }
    })
    console.log('ary1和ary2相等!');
}
compare([1,2,3], [1,2, 3]) //ary1和ary2相等!

外部迭代器

外部迭代器必须显示请求迭代下一个元素,虽然这样做会增加调用的复杂度,但也会增强迭代的操作灵活性,程序可以手工控制迭代的过程和顺序。

外部迭代器示例代码1:

代码语言:javascript
复制
// 外部迭代器
let Iterator = function (obj) {
    let current = 0;
    let next = function () {
        current += 1
    }
    let isNotDone = function () {
        return current <= obj.length
    }
    let getCurrentItem = function () {
        return obj[current];
    }
    return {
        next,
        isNotDone,
        getCurrentItem
    }
}

//外部迭代器通过next方法进行手工迭代
let arr = ['a', true, false, '10', 88, 741]
let iterator1 = Iterator(arr)
console.log(iterator1.getCurrentItem()); // a
iterator1.next() 
console.log(iterator1.getCurrentItem()); // true
iterator1.next() 
console.log(iterator1.getCurrentItem()); // false
iterator1.next() 
console.log(iterator1.getCurrentItem()); // '10'

//改写compare函数
let compare = function (iterator1, iterator2) {
    while(iterator1.isNotDone() && iterator2.isNotDone()){
        if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()){
            throw new Error('iterator1和iterator2不相等。')
        }
        iterator1.next()
        iterator2.next()
    }
    console.log('iterator1和iterator2相等。');
}
let iterator1 = Iterator([1, 2, 3, 4])
let iterator2 = Iterator([1, 2, 3, 4, 5])
compare(iterator1, iterator2)   //iterator1和iterator2不相等。

外部迭代器示例代码2:

代码语言:javascript
复制
let Iterator = function (array) {
    let nextIndex = 0;
    return {
        next: function () {
            return nextIndex < array.length ?
                   {value: array[nextIndex++], done: false}:
                   {done: true};
        }
    }
}
let it = Iterator(['a', 3, 10])
console.log(it.next().value);   //a
console.log(it.next().value);   //3
console.log(it.next().value);   //10    迭代到这步已经把所有值都迭代完成
console.log(it.next().done);    //true
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-10-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端小二 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 内部迭代器
  • 外部迭代器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档