前言:菜鸡也有梦想,而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理,从今天开始要保持每周写博客的习惯,希望自己可以有所成长。为了培养编程思维,决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式,并且将知识点和收获记录在博客中。
此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法,感谢作者曾探大大写出这么好的一本书。如有冒犯,请联系本人:markcoder@outlook.com处理,请大家购买正版书籍。
1.迭代器模式介绍
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象 的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即 使不关心对象的内部构造,也可以按顺序访问其中的每个元素。 比如 jQuery 中的$.each 函数$.each( [1, 2, 3], function( i, n ){ console.log( '当前下标为: '+ i ); console.log( '当前值为:' + n ); });复制代码
2.代码示例
首先我们自己先实现一个迭代器let each = function (arr, callback) { for (let i = 0; i < arr.length; i++) { callback.call(arr, i, arr[i]) }}each([1, 2, 3], function (i, n) { console.log( '当前下标为: '+ i ); console.log( '当前值为:' + n ); })复制代码
3.内部迭代器和外部迭代器
迭代器可以分为内部迭代器和外部迭代器,它们有各自的适用场景。3.1内部迭代器
内部迭代器就是内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用。内部迭代器在调用的时候非常方便,外界不用关心迭代器内部的实现,跟迭代器的交互也仅仅是一次初始调用,但这也刚好是内部迭代器的缺点。由于内部迭代器的迭代规则已经被提前规定,上面的 each 函数就无法同时迭代 2 个数组了。
比如现在有个需求,要判断 2 个数组里元素的值是否完全相等, 如果不改写 each 函数本身 的代码,我们能够入手的地方似乎只剩下 each 的回调函数了,代码如下:
let compare = function (ary1, ary2) { if (ary1.length !== ary2.length) { throw new Error('两个数组不相等'); } each(ary1, function (i, n) { if (n !== ary2[i]) { throw new Error('两个数组不相等'); } }) alert('两个数组相等');}compare([1, 2, 3], [2, 3, 4]); // throw new Error ( '两个数组不相等' );复制代码
3.2外部迭代器
外部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度,但相对也增强了迭代器的灵活性,我们可以手工控制 迭代的过程或者顺序。
let Iterator = function (arr) { let current = 0; let next = function () { current += 1; } let isDone = function () { return current >= arr.length; } let getCurrentItem = function () { return arr[current]; } return { next, isDone, getCurrentItem }}let compare = function (iterator1, iterator2) { while (!iterator1.isDone() && !iterator2.isDone()) { if (iterator1.getCurrentItem() !== iterator2.getCurrentItem()) { throw new Error('两个数组不相等'); } iterator1.next(); iterator2.next(); } alert('两个数组相等');}let iterator1 = Iterator([1, 2, 3]);let iterator2 = Iterator([1, 2, 3]);compare(iterator1, iterator2);复制代码
外部迭代器虽然调用方式相对复杂,但它的适用面更广,也能满足更多变的需求。内部迭代 器和外部迭代器在实际生产中没有优劣之分,究竟使用哪个要根据需求场景而定。
4.反向迭代器
let reverseEach = function (arr, callback) { for (let i = arr.length - 1; i>=0; i--) { callback.call(arr, i, arr[i]); }}reverseEach([1, 2, 3], function (index, item) { console.log(item); // 3 2 1})复制代码
5.终止迭代器
如果回调函数的执行结果返回 false,则提前终止循环。let each = function (arr, callback) { for (let i = 0; i < arr.length; i++) { if (callback.call(arr, i, arr[i]) === false) { break; } }}each( [ 1, 2, 3, 4, 5 ], function( i, n ){ if ( n > 3 ){ // n 大于 3 的时候终止循环 return false; } console.log( n ); // 分别输出:1, 2, 3 });复制代码