ES6 迭代器 详解

迭代器X问

1.什么是迭代

从一个数据集合中按照一定的顺序，不断的取出数据的过程

2.迭代和遍历有什么区别

迭代强调的是依次取出，不能确定取出的有多少，也不能保证把数据全部取完

3.什么是迭代器

对迭代过程的封装，通常为对象，不同的语言，表现出来的迭代形式不一样

4.迭代模式

一中设计模式，用于同一迭代的过程，并且规范迭代器的规格。

js迭代器

首先js的规定，如果一个对象有next方法，并且返回一个对象，就认为这个对象为迭代器
符合的过程

const obj = {
			next(){   用于得到下一个数据
				return {
					value : xxx  //数据
					done : xxx   //判断是否有后续数据，一般为boolean
				}
			}
		}

数组的遍历与迭代对比

//遍历一个普通数组
const arr = [1,2,3,4,5];
		for(let i = 0;i< arr.length;i++){
			console.log(arr[i])
		}

//迭代一个数组
const iterator = { //用于迭代数组的对象
			i : 0,
			next(){
				var result = {
					// value : ?
					// done : ?
					value : arr[this.i],
					done : this.i >= arr.length
				}
				this.i ++;
				return result;
			}
		}
		console.log(iterator)   //这个对象就为迭代器
		//附加的功能
		//让迭代器自己取数据，知道没有数据为止
		let data = iterator.next();
		while(!data.done){
			console.log(data.value)
			data = iterator.next();
		}
		console.log("迭代完成")
		//

斐波拉契迭代器

function createFeiboIterator(){
			let prev1 = 1;
			let prev2 = 1;  //定义前两位
			let n = 1;  //当前第几位
			return {
				next(){
					let value;
					if(n <= 2){
						value = 1;
					}else{
						value = prev1 + prev2
					}
					const result = {
						value,
						done : false   //迭代器不关心有多少，只关心是否拿得到下一个数据
					}
					prev2 = prev1;
					prev1 = result.value;
					n ++;
					return result
				}
			}
		}
		const iterator = createFeiboIterator()

		// 数组存储的数据是有限的 ，迭代器只关心next

ES6中如果对象具有知名符号的属性 Symbol.iterator,则表示对象可以迭代

const arr = [545,874854,15485,54854,6];
console.log(arr);
const iterator = arr[Symbol.iterator]();

类数组对象迭代

<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	    // 类数组对象
		const divs = document.getElementsByTagName("div");
		// console.log(divs);
		const diviterator = divs[Symbol.iterator]();
	

for of 循环

// for of 循环就是专门遍历可迭代的对象的,不是可迭代的对象不能使用for of遍历
		for(const item of arr){
			console.log(item)
		}

自定义迭代对象

const obj = {
			a : 1,
			b : 2,
			[Symbol.iterator](){   //for of循环肯定是会走到这个函数中的
				const keys = Object.keys(this);
				// console.log(keys)   //
				let i = 0;
				return {
					next:() => {
						const propName = keys[i];
						const propValue = this[propName];
						const result = {
							value : {
								propName,
								propValue,
								name : "alskdfj"
							},
							done : i >= keys.length
						}
						i ++;
						return result;
					}
				}
			}
		}

// 拓展点
		// 展开运算符可以用作于可迭代对象，迭代对象的内容直接添加到数组
		// const arr = [...obj];
		// console.log(arr)

		function test(a,b){
			console.log(a,b)
		}
		test(...obj)