JavaScript设计模式 - 迭代器模式

迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示，迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按照顺序访问其中的每个元素

// 统一接口
let MyEach = function (arr, callback) {
	for (let i = 0; i < arr.length; i++) {
		callback(i, arr[i])
	}
}

// 外部调用
MyEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (index, value) => {
	console.log(index, value)
})

// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 5 6
// 6 7
// 7 8
// 8 9

ES6中，数组等等支持了迭代器，如果我们想让对象使用迭代器的话：

let obj = {
	0: "test_01",
	1: "test_02",
	2: "test_03",
	3: "test_04",
	4: "test_05",
	5: "test_06",
	6: "test_07",
	7: "test_08",
	8: "test_09",
	length: 9,
	[Symbol.iterator]: Array.prototype[Symbol.iterator],
}

for (let item of obj) {
	console.log(item)
}

// test_01
// test_02
// test_03
// test_04
// test_05
// test_06
// test_07
// test_08
// test_09

上面我们的对象使用的是数组的迭代器，让我们继续手写一个精巧的迭代器：

let obj = {
	list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
	[Symbol.iterator]: function () {
		let index = 0
		return {
			next: () => {
				if (index < this.list.length) {
					return { value: this.list[index++], done: false }
				} else {
					return { value: undefined, done: true }
				}
			},
		}
	},
}
let a = obj[Symbol.iterator]()
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())
console.log(a.next())

// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: 4, done: false }
// { value: 5, done: false }
// { value: 6, done: false }
// { value: 7, done: false }
// { value: 8, done: false }
// { value: 9, done: false }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }