JavaScript给对象部署Iterator接口实现for-of

for...of... 底层是 Symbol.iterator接口
自己获取Symbol.iterator接口的遍历器 对象, 自己来实现遍历的过程
此对象拥有Symbol.iterator, 就能用for...of遍历

let arr = [5, 9, 20, "我的"];
1. 获取遍历器对象(遍历用的指针)
let iter = arr[Symbol.iterator]();
console.log(iter)
2. 调用next() 会往下移动一个位置, 返回当前位置的元素
// 遍历器会对5这个元素, 包装成一个对象来返回
console.log(iter.next()); // {value: 5, done: false} // done是否结束
console.log(iter.next()); // {value: 9, done: false}
console.log(iter.next()); // {value: 20, done: false}
console.log(iter.next()); // {value: "我的", done: false}
console.log(iter.next()); // {value: undefined, done: true} // 遍历结束的标志

尝试给对象部署Iterator接口

let obj = {d: 'dd',b: 'dee',k: 22};
// console.log(Object.keys(obj)); // Object.keys()是专门用于提取对象所有的key, 把所有的key放在一个数组中返回

// 封装的话 把obj换成Object.prototype
obj[Symbol.iterator] = function() {// 1. 因为对象没有此属性, 所以添加一个
	let keys = Object.keys(this);//2. 提取所有的key, 为了下面进行遍历, Symbol.iterator不会被获取
	let index = 0;//数组的下标, 为了每次取出一个key
	return {//返回一个迭代器对象
		next: () => {
			if (index < keys.length) {//>= keys数组长度, 遍历结束, 返回如下对象(为了告诉for...of遍历结束)
				let key = keys[index];
				index++;
				return {
					value: {[key]: this[key]},
					done: false
				};
			} else {
				return {
					value: undefined,
					done: true
				}
			}
		}
	}
}

console.log(obj);

可以调用for of

for (let key of obj) {
    console.log(key);
}

//打印

{d: "dd", b: "dee", k: 22, Symbol(Symbol.iterator): ƒ}
dyh-02-给对象部署iterator接口.html:40 {d: "dd"}d: "dd"__proto__: Object
dyh-02-给对象部署iterator接口.html:40 {b: "dee"}
dyh-02-给对象部署iterator接口.html:40 {k: 22}