基础知识

今天学习了es6的生成器和迭代器，真的有很多感想，我是一个正在学习前端的学生，可能说的不对，可以请各大大神多多包涵，就是总结一个我学到的东西。好了现在开始

数组的扩展

再说生成器迭代器之前，要先了解一个es6的知识，就是es6新添加的数组的扩展，有三个功能是entries() , keys() , values()，这三个功能很类似，都是在干一件事情，举个例子:

for(let index of ['a','b','c','d'].keys(){
	console.log(index)  //0,1,2,3
}
for(let values of ['a','b','c'].values()){
	console.log(values)  //'a','b','c'
}
for(let [index,value] of ['a','b','c'].entries()){
	console.log([index,value])  //  [0,'a'],[1,'b'],[2,'c'];
}

entries() , keys() , values() 这三个函数，返回都会返回一个遍历器，所有它们返回的值，都具备了遍历器的功能，所有就可以使用for…of这个方法。
好了，如果这三个方法明白了，之后就可以进入生成器迭代器了。

迭代器（Iterator）

何为迭代器呢？就是一种新的遍历机制。我总结出它又两个核心，一个就是它是一个接口，能够快速的访问数据。第二个，就是用于遍历数据结构的指针。先说一个比较简单的对数组的迭代器吧。

const items = ['one','two','three'];
//创建迭代器
const ite = items(Symbol.Iterator)();
//进行获取
console.log(ite.next())   //{value:'one',done:false}
console.log(ite.next())   //{value:'two',done:false}
console.log(ite.next())   //{value:'three',done:false}
console.log(ite.next())   //{value:undefined,done:true}

ite.next()的结果是什么意思呢？就是遍历出数组的值，done代表遍历是否完成，在第四次调用ite.next()的时候，已经没有值了，所以done的值为true。

生成器（generator）

生成器是一个函数，但是它与普通的函数的区别是：声明函数的方法是：

function* func(ele){
	console.log(ele);
}

另一个区别是，只能在函数内部调用yield。解释一个yield哈，就是这个生成器通过yield关键字，将函数挂起，再解释的清晰一点，就是说，如果你声明一个函数，在内部你可以写一个yield，就可以把函数的“进程”卡在那里。生成器generator有一个方法是next(),此方法就是把yield卡住的地方，重新打开，让函数里面的内容继续走下去

function* func(){
	console.log('start');
	yield "2";
	console.log('end');
}
let fn = func();
fn.next(); // "start"  //{value:'2',done:false}

总结一小下：generator是分段执行的，yield是暂停执行，next（）是恢复执行。

使用场景

迭代器和生成器使用场景，用的最多的就有两类，今天先说一类，另外一类下次再分享。
这迭代器生成器就是，为不具有迭代器的对象，创建接口。
来个例子：

//第一步 创建一个无迭代器接口的对象
let obj = {
	name: "xiaoChen",
	age: 21
}
//第二步 写一个迭代器接口 （用到了keys（），忘了往上看看哈）
function* objectEntries(obj){
    const Keys = Object.keys(obj);
    for(let key of Keys){
        yield [key,obj[key]];
    }
}
//第三步 给obj接口
obj[Symbol.iterator] = objectEntries;
//第四步 遍历
for(let [name,age] of objectEntries(obj)){
    console.log(`${name}:${age}`); //name: "xiaoChen",age: 21
}
//成功的遍历出obj里面的属性

好了分享到这里了，另外一个使用的场景下次再分享。

原文链接:https://blog.csdn.net/iloveyu123/article/details/114442791