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}