Startsida Utforska Hjälp
Logga in
chuck
/
es6-11study
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

迭迭代器生成器

DESKTOP-MK04A0R\chuck 3 år sedan
förälder
49775f05a2
incheckning
3f956db3df
4 ändrade filer med 202 tillägg och 0 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 65 0
      14/index.html
  2. 50 0
      15/index.html
  3. 84 0
      16/index.html
  4. 3 0
      README.md

+ 65 - 0
14/index.html
Visa fil 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 只有实现了 Iterator接口的对象才能够使用 for of 来进行遍历取值
 
+         * 每调用一次 next 方法，指针都会向后移动一个位置
 
+         */
 
+        //声明数组
 
+        const arr = [1,2,3,4,5]
 
+        //for of 遍历
 
+        for(let v of arr){
 
+            console.log(v)
 
+        }
 
+        console.log(arr)
 
+
 
+        /**
 
+         * 迭代器应用
 
+         *      自定义遍历数组
 
+         */
 
+        const bbb = {
 
+            name:'aaa',
 
+            stus:[
 
+                'zhangsan',
 
+                'lisi',
 
+                'wanger'
 
+            ],
 
+            [Symbol.iterator](){
 
+                let index = 0;
 
+                let _this = this
 
+                return {
 
+                    next:function(){
 
+                        if(index < _this.stus.length){
 
+                            const res = {
 
+                                value:_this.stus[index],
 
+                                done:false
 
+                            }
 
+                            index++
 
+                            return res
 
+                        }else{
 
+                            const res = {
 
+                                value:undefined,
 
+                                done:true
 
+                            }
 
+                            return res
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+        //使用for of 遍历bbb
 
+        for(let v of bbb){
 
+            console.log(v)
 
+        }
 
+
 
+        
+    </script>
 
+</body>
 
+</html>

+ 50 - 0
15/index.html
Visa fil 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 是一种特殊的函数
 
+         * 可以异步编程
 
+         * yield : 函数代码分隔符
 
+        */
 
+       //声明方式
 
+       function* gen(){
 
+           console.log('hhh')
 
+           yield 'hello'
 
+           console.log('111')
 
+           yield 'hi'
 
+           console.log('222')
 
+           yield 'youxi'
 
+           console.log('333')
 
+       }
 
+       let iterator = gen()
 
+       //console.log(iterator)  //输出迭代器对象
 
+       iterator.next()  // hhh
 
+       iterator.next()  // 111
 
+       iterator.next()  // 222
 
+       iterator.next()  // 333
 
+
 
+       //可以使用for of遍历
 
+       for(let v of gen()){
 
+           console.log(v)  // 每一个yield后的表达式
 
+       }
 
+
 
+       //参数传递
 
+       function* gen1(arg){
 
+           console.log(arg)
 
+           let bbb = yield 'hello'
 
+           console.log(bbb)
 
+           yield 'hi'
 
+       }
 
+       let iterator1 = gen1('testwww')
 
+       console.log(iterator1.next());
 
+       console.log(iterator1.next('bbb'));  //next传入参数，会把它当作前一个yield返回结果
 
+    </script>
 
+</body>
 
+</html>

+ 84 - 0
16/index.html
Visa fil 

@@ -0,0 +1,84 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 异步编程 文件操作 网络操作 数据库操作
 
+         * 
+         */
 
+        // 定时器模拟 -- 回调地狱
 
+        // setTimeout(()=>{
 
+        //     console.log(111)
 
+        //     setTimeout(()=>{
 
+        //         console.log(222)
 
+        //     },2000)
 
+        // },1000)
 
+
 
+        //1、 通过生成器函数
 
+        function one(){
 
+            setTimeout(()=>{
 
+                console.log(111)
 
+                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()
 
+
 
+        //2、获取用户数据 获取订单数据 获取商品数据
 
+        function getUsers(){
 
+            setTimeout(()=>{
 
+                let data = 'user data'
 
+                //调用next方法 传入数据
 
+                iterator1.next(data)
 
+            },1000)
 
+        }
 
+        function getOrders(users){
 
+            setTimeout(()=>{
 
+                let data = 'order data'
 
+                iterator1.next(data)
 
+            },1000)
 
+        }
 
+        function getGoods(orders){
 
+            setTimeout(()=>{
 
+                let data = 'good data'
 
+                iterator1.next(data)
 
+            },1000)
 
+        }
 
+        function * gen1(){
 
+            let users = yield getUsers();
 
+            console.log(users)
 
+            let orders = yield getOrders(users);
 
+            console.log(orders)
 
+            let goods = yield getGoods(orders);
 
+            console.log(goods)
 
+        }
 
+        let iterator1 = gen1()
 
+        iterator1.next()
 
+        
+    </script>
 
+</body>
 
+</html>

+ 3 - 0
README.md
Visa fil 

@@ -12,6 +12,9 @@
 
 * 11 es6扩展运算符 ...
 
 * 11 es6扩展运算符 ...
 
 * 12 扩展运算符应用
 
 * 12 扩展运算符应用
 
 * 13 symbol 新数组类型--表示第一无二的值
 
 * 13 symbol 新数组类型--表示第一无二的值
 
+* 14 迭代器
 
+* 15 生成器函数
 
+* 16 生成器函数实例
 
 
 
 ## 运行说明
 
 ## 运行说明
 
     npm i
 
     npm i