ES6新特性——7.迭代器，生成器
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
迭代器
1.1创建迭代器
是一种新的遍历机制， 两个核心，
1.迭代器是一个接口， 能快捷访问数据， 通过Symbol.iterator来创建迭代器
2.迭代器是用于遍历数据结构的指针
const items = ['one', 'two', 'thr']
const ite = items[Symbol.iterator()]
console.log(ite.next()) //{value:'one', done:false}done如果为false, 遍历继续，
如果为true,表示遍历完成生成器
2.1创建生成器
Generator 区分于普通函数的部分：
- 一是在
function后面，函数名之前有个*； - 函数内部有
yield表达式。
function* func(){
console.log("one");
yield '1';
console.log("two");
yield '2';
console.log("three");
return '3';
}调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。
输出：
f.next();
// one
// {value: "1", done: false}
f.next();
// two
// {value: "2", done: false}
f.next();
// three
// {value: "3", done: true}
f.next();
// {value: undefined, done: true}- 第一次调用
next方法时，从Generator函数的头部开始执行，先是打印了one,执行到yield就停下来，并将yield后边表达式的值 ‘1’，作为返回对象的value属性值，此时函数还没有执行完， 返回对象的done属性值是false。 - 第二次调用
next方法时，同上步 。 - 第三次调用
next方法时，先是打印了three，然后执行了函数的返回操作，并将return后面的表达式的值，作为返回对象的value属性值，此时函数已经结束，多以done属性值为true。 - 第四次调用
next方法时， 此时函数已经执行完了，所以返回value属性值是undefined，done属性值是true。如果执行第三步时，没有return语句的话，就直接返回{value: undefined, done: true}。
2.2next方法
一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined。当 next传入参数的时候，该参数会作为上一步yield的返回值。
function* sendParameter(){
console.log("start");
var x = yield '2';
console.log("one:" + x);
var y = yield '3';
console.log("two:" + y);
console.log("total:" + (x + y));
}2.2.1next不传参
除了使用next，还可以使用for... of循环遍历 Generator函数生产的Iterator 对象。
var sendp1 = sendParameter();
sendp1.next();
// start
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}
next传参
var sendp2 = sendParameter();
sendp2.next(10);
// start
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}2.2.2return方法
return 方法返回给定值，并结束遍历 Generator 函数。
return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。
function* foo(){
yield 1;
yield 2;
yield 3;
}
var f = foo();
f.next();
// {value: 1, done: false}
f.return("foo");
// {value: "foo", done: true}
f.next();
// {value: undefined, done: true}
throw 方法
throw 方法可以再 Generator 函数体外面抛出异常，再函数体内部捕获。
var g = function* () {
try {
yield;
} catch (e) {
console.log('catch inner', e);
}
};
var i = g();
i.next();
try {
i.throw('a');
i.throw('b');
} catch (e) {
console.log('catch outside', e);
}
// catch inner a
// catch outside b遍历器对象抛出了两个错误，第一个被Generator 函数内部捕获，第二个因为函数体内部的catch 函数已经执行过了，不会再捕获这个错误，所以这个错误就抛出 Generator函数体，被函数体外的catch捕获。
2.2.3yield* 表达式
yield*表达式表示 yield返回一个遍历器对象，用于在 Generator函数内部，调用另一个 Generator函数。
function* callee() {
console.log('callee: ' + (yield));
}
function* caller() {
while (true) {
yield* callee();
}
}
const callerObj = caller();
callerObj.next();
// {value: undefined, done: false}
callerObj.next("a");
// callee: a
// {value: undefined, done: false}
callerObj.next("b");
// callee: b
// {value: undefined, done: false}
// 等同于
function* caller() {
while (true) {
for (var value of callee) {
yield value;
}
}
}2.3使用场景
实现Iterator
- 为不具备
Iterator接口的对象提供遍历方法。 - 为异步编程提供了方案
Reflect.ownKeys() 返回对象所有的属性，不管属性是否可枚举，包括 Symbol。
function* objectEntries(obj) {
const propKeys = Reflect.ownKeys(obj);
//Reflect.ownKeys() 返回对象所有的属性，不管属性是否可枚举，包括 Symbol。
for (const propKey of propKeys) {
yield [propKey, obj[propKey]];
}
}
const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe2.3.1.1异步代码同步化：
function* main(){
console.log('main')
let res = yield request(url)
console.log('数据请求完成，')
-----
------
}
const ite = main();
ite.next();
function request(url){
alert(url);
$.ajax({
url,
method: 'get',
success(res){
ite.next(res);
}
})
}2.3.1.2加载ui
function* load(){
loadui();
yield showData();
hideUi();
}
let itLoad();
itload.next();
function loadUi(){
console.log('加载loading******')
}
function showData(){
//模拟异步操作
setTimeout(()=>{
console.log('数据加载完成')
itload.next()
})
}
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |