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)
时间: 2024-07-28 13:15:45

ES6中的Iterator和for...of的相关文章

理解ES6中的Iterator

一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in.. 进行遍历一样,是不是随着Map和Set的出现也应该给这两种集合一个遍历方法呢?如果这样的话js的方法对象就太多了,既然这四种集合都是需要遍历的,那么完全可以用一个统一的访问机制.于是乎Iterator应运而生. 二.Iterator是什么 Iterator是一个访问机制,同时是一个接口,可以实

ES6 中的 iterator

[简介] 遍历器/迭代器.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作.这种数据结构是“可遍历的”(iterable). 如何判断是否可遍历? typeof target[Symbol.iterator] // function [作用] 1. 为各种数据结构,提供一个统一的.简便的访问接口: 2. 使得数据结构的成员能够按某种次序排列: 3. ES6 创造了一种新的遍历命令for...of 循环,Iterator 接口主要供for...of消费. [遍历] const co

ES6中的迭代器(Iterator)和生成器(Generator)

前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

使对象具有ES6中Iterator接口的实现方法

es6中只有具有iterator接口的数组或者类数组(arguments)都可以使用for of来循环,但是对于对象来说不行,可以利用迭代器中的原理来给对象生成一个迭代器,实现让对象可以使用for of 1 var j={ 2 name:'小红', 3 age:18 4 } 5 //给j对象添加一个iterator接口 6 j[Symbol.iterator]=function(){ 7 //使用object.keys()方法把j对象中的k值读取出来存在数组当中 8 var arr=Object

ES6中的迭代器(Iterator)和生成器(Generator)(一)

用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 一.引入 下面是一段标

ES6中的Symbol类型

前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型--Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个他人提供的对象,想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证每个属性的名字都是独一无二的,这样就从根本上防止了属性名冲突.这就是ES6引入Symbol的原因,本文将详细介绍ES6中的Symbol类型 创建 Symbol 值通过Symbol函数生成.这就是说,

ES6中的Set和Map集合

前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集合的早期实现.本文将详细介绍ES6中的set和map集合 引入 Set集合是一种无重复元素的列表,开发者们一般不会逐一读取数组中的元素,也不太可能逐一访问Set集合中的每个元素,通常的做法是检测给定的值在某个集合中是否存在 Map集合内含多组键值对,集合中每个元素分别存放着可访问的键名和它对应的值,

ES6中的类

前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类的概念,最相近的思路是创建一个自定义类型:首先创建一个构造函数,然后定义另一个方法并赋值给构造函数的原型 function PersonType(name) { this.name = name; } Person

es6 javascript的Iterator 和 for...of 循环

1 Iterator( 遍历器) 的概念 JavaScript 原有的表示" 集合" 的数据结构, 主要是数组( Array) 和对象( Object), ES6 又添加了 Map 和 Set. 这样就有了四种数据集合, 用户还可以组合使用它们, 定义自己的数据结构, 比如数组的成员是 Map, Map 的成员是对象. 这样就需要一种统一的接口机制, 来处理所有不同的数据结构. 遍历器( Iterator) 就是这样一种机制. 它是一种接口, 为各种不同的数据结构提供统一的访问机制.