es6(三)
1.迭代器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>迭代器</title> </head> <body> <script> // let xiyou = ['唐僧','孙悟空','猪八戒','沙僧']; //1. 使用 for...of 循环 // for(let v of xiyou){ // console.log(v); // } //2. 获取数组的迭代器 let iterator = xiyou[Symbol.iterator](); //调用迭代器对象的方法 console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); </script> </body> </html>
2.迭代器自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义遍历数据</title> </head> <body> <script> //声明一个对象 let team = { className: "三年二班", floor: "二楼", stus:[ {name: "xiaoming"}, {name: "xiaoning"}, {name: "xiaotian"}, {name: "knight"} ], [Symbol.iterator]: function(){ let index = 0; return { next: ()=>{ // {value: "唐僧", done: false} //遍历的数据内容 if(index < this.stus.length){ //获取当前下标对应的数组的值 let v = this.stus[index]; //下标自增 index++; //拼接最终的对象结果 return {value:v, done: false}; }else{ return {value:undefined, done:true}; } } } } }; //for...of 遍历对象 for(let v of team){ console.log(v); } </script> </body> </html>
3.生成器函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成器</title> </head> <body> <script> //生成器函数 // * 的位置只要在 function 与函数名之间即可 function * gen(){ //生成器函数内部可以直接书写正常的 JS 语句 console.log("测试"); //yield 后书写 JS 的表达式 yield "可这世间疾苦"; yield "照样没放过我"; return "妖酆"; } //生成器函数的调用 let iterator = gen(); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); </script> </body> </html>
4。生成器函数参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成器函数参数</title> </head> <body> <script> function * gen(arg){ //1. 直接调用 gen 函数不会输出， 调用第一个 next 方法的时候会输出 console.log(arg); let result1 = yield 1; console.log(result1); let result2 = yield 2; console.log(result2); let result3 = yield 3; console.log(result3); } //调用gen函数 let iterator = gen('AAA'); let res1 = iterator.next(); let res2 = iterator.next('BBB'); let res3 = iterator.next('CCC'); let res4 = iterator.next('DDD'); </script> </body> </html>
5.生成器函数实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成器函数实例</title> </head> <body> <script> // 异步编程 异步行为 I/O 文件读写, 网络请求, 数据库的交互 // 1s 后控制台输出 111 2s后输出 222 3s后输出 333 //代码状态称为回调地狱 // setTimeout(()=>{ // console.log(111); // setTimeout(()=>{ // console.log(222); // setTimeout(()=>{ // console.log(333); // }, 3000); // }, 2000) // }, 1000); function one(){ setTimeout(()=>{ console.log(111); //调用迭代器对象的 next 方法, 运行生成器函数的下一段代码 iterator.next(); }, 1000) } function two(){ setTimeout(()=>{ console.log(222); iterator.next(); }, 2000) } function three(){ setTimeout(()=>{ console.log(333); iterator.next(); }, 3000) } //声明一个生成器函数 function* gen(){ yield one(); yield two(); yield three(); } let iterator = gen(); iterator.next(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生成器函数</title> </head> <body> <script> //获取 用户数据 文章数据 商品数据 function getUsers(){ setTimeout(()=>{ let data = "用户数据"; iterator.next(data); }, 1000) } function getArticles(){ setTimeout(()=>{ let data = "文章数据"; iterator.next(data); }, 1000) } function getGoods(){ setTimeout(()=>{ let data = "商品数据"; iterator.next(data); }, 1000) } function * gen(){ // let users = yield getUsers(); let articles = yield getArticles(); let goods = yield getGoods(); console.log(users); console.log(articles); console.log(goods); } //得到迭代器对象 let iterator = gen(); iterator.next(); </script> </body> </html>
