js之迭代器模式
阿新 • • 發佈：2019-01-25
迭代器模式
迭代器模式是指：提供一種方法順序訪問一個聚合物件中的各個元素，而又不需要暴露該物件的內部表示。迭代器模式可以把迭代的過程從業務邏輯中分離出來，在使用迭代器模式之後，即使不關心物件的內部構造，也可以按順序訪問其中的每個元素。
實現自己的迭代器
現在我們來自己實現一個 each 函式， each 函式接受 2 個引數，第一個為被迴圈的陣列，第二個為迴圈的每一步後將被觸發的回撥函式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title 1. 內部迭代器：
我們剛剛編寫的 each 函式屬於內部迭代器， each 函式的內部已經定義好了迭代規則，它完全接手整個迭代過程，外部只需要一次初始呼叫。
內部迭代器在呼叫的時候非常方便，外界不用關心迭代器內部的實現，跟迭代器的互動也僅僅是一次初始呼叫，但這也剛好是內部迭代器的缺點。由於內部迭代器的迭代規則已經被提前規定，上面的 each 函式就無法同時迭代 2個數組了。
比如現在有個需求，要判斷 2個數組裡元素的值是否完全相等， 如果不改寫 each 函式本身的程式碼，我們能夠入手的地方似乎只剩下 each 的回撥函數了，程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var each = function( ary, callback ){
for ( var i = 0, l = ary.length; i < l; i++ ){
callback.call( ary[i], i, ary[ i ] ); // 把下標和元素當作引數傳給 callback 函式
}
};
each( [ 1, 2, 3 ], function( i, n ){
alert ( [ i, n ] );
});
var compare = function( ary1, ary2 ){
if ( ary1.length !== ary2.length ){
throw new Error ( 'ary1 和 ary2 不相等' );
}
each( ary1, function( i, n ){
if ( n !== ary2[ i ] ){
throw new Error ( 'ary1 和 ary2 不相等' );
}
});
alert ( 'ary1 和 ary2 相等' );
};
compare( [ 1, 2, 3 ], [ 1, 2, 4 ] ); // throw new Error ( 'ary1 和 ary2 不相等' );
</script>
</body>
</html>2. 外部迭代器
外部迭代器必須顯式地請求迭代下一個元素。
外部迭代器增加了一些呼叫的複雜度，但相對也增強了迭代器的靈活性，我們可以手工控制迭代的過程或者順序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var Iterator = function( obj ){
var current = 0;
var next = function(){
current += 1;
};
var isDone = function(){
return current >= obj.length;
};
var getCurrItem = function(){
return obj[ current ];
};
return {
next: next,
isDone: isDone,
getCurrItem: getCurrItem
}
};
// 再看看如何改寫 compare 函式：
var compare = function( iterator1, iterator2 ){
while( !iterator1.isDone() && !iterator2.isDone() ){
if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){
throw new Error ( 'iterator1 和 iti03.htmlerator2 不相等' );
}
iterator1.next();
iterator2.next();
}
alert ( 'iterator1 和 iterator2 相等' );
}
var iterator1 = Iterator( [ 1, 2, 3 ] );
var iterator2 = Iterator( [ 1, 2, 3 ] );
compare( iterator1, iterator2 ); // 輸出：iterator1 和 iterator2 相等
</script>
</body>
</html>迭代類陣列物件和字面量物件
通過上面的程式碼可以觀察到，無論是內部迭代器還是外部迭代器，只要被
迭代的聚合物件擁有 length 屬性而且可以用下標訪問，那它就可以被迭代。
倒序迭代器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//倒序迭代器
var reverseEach = function( ary, callback ){
for ( var l = ary.length - 1; l >= 0; l-- ){
callback( l, ary[ l ] );
}
};
reverseEach( [ 0, 1, 2 ], function( i, n ){
console.log( n ); // 分別輸出：2, 1 ,0
});
</script>
</body>
</html>中止迭代器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//中止迭代器
var each = function( ary, callback ){
for ( var i = 0, l = ary.length; i < l; i++ ){
if ( callback( i, ary[ i ] ) === false ){ // callback 的執行結果返回 false，提前終止迭代
break;
}
}
};
each( [ 1, 2, 3, 4, 5 ], function( i, n ){
if ( n > 3 ){ // n 大於 3 的時候終止迴圈
return false;
}
console.log( n ); // 分別輸出：1, 2, 3
});
</script>
</body>
</html>