迭代器模式
順序訪問一個(gè)集合
使用者無需知道集合內(nèi)部結(jié)構(gòu)（封裝）
jQuery 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>jquery each</p>
<p>jquery each</p>
<p>jquery each</p>
<script src="https://cdn./jquery/3.3.1/jquery.js"></script>
<script>
var arr = [1, 2, 3];
var nodeList = document.getElementsByTagName("p");
var $p = $("p");
// 要對(duì)這三個(gè)變量進(jìn)行遍歷，需要寫三個(gè)遍歷方法
// 第一
arr.forEach(function(item) {
console.log(item);
});
// 第二
var i,
length = nodeList.length;
for (i = 0; i < length; i++) {
console.log(nodeList[i]);
}
// 第三
$p.each(function(key, p) {
console.log(key, p);
});
// 如何能寫出一個(gè)方法來遍歷這三個(gè)對(duì)象呢
function each(data) {
var $data = $(data);
$data.each(function(key, p) {
console.log(key, p);
});
}
each(arr);
each(nodeList);
each($p);
</script>
</body>
</html>
傳統(tǒng) UML 類圖
javascript 中的 UML 類圖
class Iterator {
constructor(conatiner) {
this.list = conatiner.list;
this.index = 0;
}
next() {
if (this.hasNext()) {
return this.list[this.index++];
}
return null;
}
hasNext() {
if (this.index >= this.list.length) {
return false;
}
return true;
}
}
class Container {
constructor(list) {
this.list = list;
}
getIterator() {
return new Iterator(this);
}
}
// 測(cè)試代碼
let container = new Container([1, 2, 3, 4, 5]);
let iterator = container.getIterator();
while (iterator.hasNext()) {
console.log(iterator.next());
}
使用場(chǎng)景
jQuery each
上面的 jQuery 代碼就是
ES6 Iterator
ES6 Iterator 為何存在？
- es6 語法中，有序集合的數(shù)據(jù)類型已經(jīng)有很多了
- Array Map Set String TypedArray argument Nodelist
- 需要有一個(gè)統(tǒng)一的遍歷接口來遍歷所有的數(shù)據(jù)類型
- （注意，object 不是有序集合，可以用 Map 代替）
es6 Interator 是什么？
- 以上數(shù)據(jù)類型，都有[Symbol.iterator]屬性
- 屬性值是函數(shù)，執(zhí)行函數(shù)返回一個(gè)迭代器
- 這個(gè)迭代器就有 next 方法可以順序迭代子元素
- 可運(yùn)行 Array.prototype[Symbol.iterator]來測(cè)試
示例
let arr = [1, 2, 3, 4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 200)
function each(data) {
// 生成遍歷器
let iterator = data[Symbol.iterator]()
console.log(iterator.next()) // 有數(shù)據(jù)時(shí)返回 {value: 1, done: false}
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next()) // 沒有數(shù)據(jù)時(shí)返回 {value: undefined, done: true}
each(arr)
each(nodeList)
each(m)
上面代碼改進(jìn)
let arr = [1, 2, 3, 4];
let nodeList = document.getElementsByTagName("p");
let m = new Map();
m.set("a", 100);
m.set("b", 200);
function each(data) {
// 生成遍歷器
let iterator = data[Symbol.iterator]();
let item = { done: false };
while (!item.done) {
item = iterator.next();
if (!item.done) {
console.log(item.value);
}
}
}
each(arr);
each(nodeList);
each(m);
es6 很聰明提供了for of
let arr = [1, 2, 3, 4];
let nodeList = document.getElementsByTagName("p");
let m = new Map();
m.set("a", 100);
m.set("b", 200);
function each(data) {
for (let item of data) {
console.log(item);
}
}
each(arr);
each(nodeList);
each(m);
ES6 Interator 與 Generator
- Interator 的價(jià)值不限于上述幾個(gè)類型的遍歷
- 還有 Generator 函數(shù)的使用
- 即只要返回的數(shù)據(jù)符合 Interator 接口的要求
function* helloWorldGenerator() {
yield "hello";
yield "world";
return "ending";
}
var hw = helloWorldGenerator();
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
//輸出
// { value: 'hello', done: false }
// { value: 'world', done: false }
// { value: 'ending', done: true }
// { value: undefined, done: true }
function* foo() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for (let v of foo()) {
console.log(v);
}
設(shè)計(jì)原則驗(yàn)證
- 迭代器對(duì)象和目標(biāo)對(duì)象分離
- 迭代器將使用者與目標(biāo)者對(duì)象隔離開
- 符合開放封閉原則
|
