ES6中的Iterator和for...of

Posted 2020-09-17

先说说数组遍历的几种方法吧；

1,for循环；　　缺点：写法麻烦
2,内置forEach方法;　　缺点:不能跳出循环;break和return都不能;
3,for...in;    缺点:数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。某些情况下，for...in循环会以任意顺序遍历键名。总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

4,for...of循环（反正就是各种好)
   有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同用于forEach方法，它可以与break、continue和return配合使用。
   提供了遍历所有数据结构的统一操作接口。

 

但对象不能被遍历吧，因为没有一种叫Iterator接口（遍历器）的东西；而，数组啊，字符串有啊；；问题来了；我的对象咋办？

重点：对象不能遍历怎么办；解决办法；

 let me= {
              name: ‘liyi‘,
              age: "18",　　
              sex: "I am girl"
            };
//            es6[Symbol.iterator] = 
            for (let e in me) {
              console.log(e);  //for...in可以遍历对象的键名
            }
            // name
            // age
            // sex
            
//            for (let e of me) {
//              console.log(e);        // TypeError: meis not iterable;报错了，解决方式有两种
//            }
            //第一种；使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组。
           for (var key of Object.keys(me)) {
              console.log(key + ‘: ‘ + me[key]);
            }
            
            //第二种；    Generator 函数将对象重新包装一下。
            function* entries(obj) {
              for (let key of Object.keys(obj)) {
                yield [key, obj[key]];
              }
            }
            
            for (let [key, value] of entries(me)) {
              console.log(key, ‘->‘, value);
            }

对已有的默认的数组重新定义遍历接口所遇见的坑；

 　　　　　　　　var str = new String(‘liyi‘);
//            var str = ‘liyi‘;        
　　　　　　　　　　//坑？不能写成这样子，会在重新定义函数的时候报错，0505-Iterator.html:99 Uncaught TypeError: Cannot create property ‘Symbol(Symbol.iterator)‘ on string ‘liyi‘
           　　 //为啥，可能是因为symbol.iterator本身是构造函数的属性，所以数据也必须是构造出来的，而不是声明的；
//            //还有种可能是，es6在语法上参考了C++和java，在Java中，数组是new String创建数组对象；
            //所以可以这样理解，当要重新定义Symbol.iterator时，会将字符串当作对象，而对象只能被new创建出来，所以当要重新定义遍历器接口时，就需要用new创建的数组，否则会出错；            console.log([...str]);            str[Symbol.iterator] = function(){                return {                    next:function(){                        if(this._first){                            this._first = false;                            return {                                value:‘bye‘,                                done:true                            }                        }else{                            return {                                done:true                            }                        }                    },                    _first:true                }            }            console.log([...str])            console.log(str)