标签：typeof eof 描述 prototype 四种 代码 实现 无法 包含
我们知道，在ES6中新增了很多的特性，包括Map，Set等新的数据结构，算上数组和对象已经有四种数据集合了，就像数组可以使用forEach，对象可以使用for...in.. 进行遍历一样，是不是随着Map和Set的出现也应该给这两种集合一个遍历方法呢？如果这样的话js的方法对象就太多了，既然这四种集合都是需要遍历的，那么完全可以用一个统一的访问机制。于是乎Iterator应运而生。
Iterator是一个访问机制，同时是一个接口，可以实现在不同的数据集合中，完成它的功能。
Iterator本质是一个指针对象，其中包含一个next方法，这个方法可以改变指针的指向，并且返回一个包含value和done的对象，value为当前所指向的成员的值，done表示是否遍历完成。通过这些描述，我们大致可以手写一个Iterator，用于遍历数组：
// 定义遍历器对象 let Iterator = function (arr) { let index = 0; // 当前指针 return { next() { return index < arr.length ? {value: arr[index++],done: false} : {value: undefined, done: true}; } } }; let arr = [1, 2, 3]; let it = Iterator(arr); console.log(it.next()); // { value: 1, done: false } console.log(it.next()); // { value: 2, done: false } console.log(it.next()); // { value: 3, done: false } console.log(it.next()); // { value: undefined, done: true }
我们知道Iterator的接口就是提供了一个统一的访问机制，如果我们像上面那样，不断的调用next()才能遍历完成，如果Iterator像java那样提供一个hasNext()方法的话，那么我们可以通过while进行遍历，事实上js中是没有的。之所以没有是因为ES6使用for...of...实现了对具有Symbol.iterator（可遍历）的数据结构的遍历，也就是说只要是包含Symbol.iterator属性的结构都可以使用for...of...进行遍历。接下来我们看看我们直接输出上面四种结构的Symbol.iterator属性是什么样子。
let a = [1,2,3]; let it_arr = a[Symbol.iterator](); it_arr.next(); // { value: 1, done: false } it_arr.next(); // { value: 2, done: false } it_arr.next(); // { value: 3, done: false } it_arr.next(); // { value: undefined, done: true } let b = new Set(["a","b","c"]); let it_set = b[Symbol.iterator](); it_set.next(); // { value: 1, done: false } it_set.next(); // { value: 2, done: false } it_set.next(); // { value: 3, done: false } it_set.next(); // { value: undefined, done: true } let c = new Map([["a","1"]]); let it_map =c[Symbol.iterator](); it_map.next(); // { value: [ ‘a‘, ‘1‘ ], done: false } it_map.next(); // { value: undefined, done: true } let d = new Object(); d.name = "Jyy"; console.log(d[Symbol.iterator]()); // TypeError: d[Symbol.iterator] is not a function
上面是ES6中在四种数据集合中的Iterator的实现。可以看到ES6并没有在对象中原生部署Symbol.iterator属性，因此我们需要手动在对象中设置遍历器属性。下面就是一个简单的在一个对象中设置Symbol.iterator属性的例子。
function Demo(list){ this.list = list; this[Symbol.iterator] = function(){ let index = 0; return { next: function(){ return index < list.length ? {value: list[index++], done: false} : {value: undefined, done: true}; } } } } let demo = new Demo([1,2,3,4]); for(let i of demo){ console.log(i); // 1 2 3 4 }
上面的代码就是手动在Demo对象中添加了一个遍历器对象，在next中实现遍历的逻辑，然后就可以使用for...of...进行遍历。当然我们也可以将遍历器对象部署在Demo的原型对象，for...of...依然会自动调用。
另外，对于类数组的对象（key值为数字索引，包含lenth属性），我们可以直接将数组的遍历器对象赋值给对象，代码如下：
let obj = { 0 : "a", 1 : "b", 2 : "c", length :3, } obj[Symbol.iterator] = Array.prototype[Symbol.iterator]; for(let i of obj){ console.log(i); // a b c }
除此之外，String，函数的arguments对象都原生部署了遍历器接口
// 字符串可用for...of...进行遍历 let str = "123"; for(let s of str){ console.log(s); // 1 2 3 } // 函数中的arguments对象可以使用for...of...进行遍历 function demo(){ for(let i of arguments){ console.log(i); // 1,2,3 } } demo(1,2,3)
除了for...of...，es6中还有哪些语法用到了iterator接口呢？
function Demo(list){ this.list = list; this[Symbol.iterator] = function(){ let index = 0; return { next: function(){ index++; return index < list.length ? {value: list[index++], done: false} : {value: undefined, done: true}; } } } } [a,...b] = new Demo([1,2,3,4]); console.log(b); // [2,3，4]
如上代码中每次返回的value都是1，我们在中括号（注意不是花括号）中使用结构赋值，发现b的值为[2,3,4]
与解构赋值相反的扩展运算符，也使用了遍历器。
function Demo(list){ this.list = list; this[Symbol.iterator] = function(){ let index = 0; return { next: function(){ return index < list.length ? {value: list[index++], done: false} : {value: undefined, done: true}; } } } } let demo = new Demo([1,2,3,4]); console.log([0, ...demo, 5]); //[ 0, 1, 2, 3, 4, 5 ]
在js中的遍历语法有：for循环，for...in...， forEach
1. for循环的缺点我们都知道，就是书写起来太麻烦，如果有快捷键的方式的话还好，如果没有，就要写很多的代码，而且看起来也不爽。
2. forEach书写起来比较简单，但是它的问题是无法中途跳出循环，break、return、continue等都不能起作用
3. for...in...是专门为遍历对象而设计的，如果使用这种方法遍历数组，key则会变为字符串，如下：
let arr = [1,2,3]; for(let a in arr){ console.log(typeof a); // string }
另外我们可能在开发中遇到的问题就是，使用for...in...的话，那么会遍历原型链上的键
let person = { age :25 } person.prototype={ name : "jyy" } for(let i in Person){ console.log(i); // age prototype }
标签：typeof eof 描述 prototype 四种 代码 实现 无法 包含
原文地址：https://www.cnblogs.com/jyybeam/p/12019788.html
