ES6中的Iterator和for...of

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6中的Iterator和for...of相关的知识,希望对你有一定的参考价值。

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

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)

 

以上是关于ES6中的Iterator和for...of的主要内容,如果未能解决你的问题,请参考以下文章

es6笔记 Iterator 和 for...of循环

ES6—— iterator和for-of循环

ES6 - 基础学习(13): Iterator(迭代器) 和 for...of 循环

es6 语法 (iterator和for...of循环)

es6-15 Iterator 和 for of 循环

ES6学习之Iterator和For...of循环