var iterableObj = { items:[100,200,300], [Symbol.iterator]:function(){ var self=this; var i = 0; return { next: function() { var done = (i >= self.items.length); var value = !done ? self.items[i++] : undefined; return { done: done, value: value }; } }; } }
//遍历它 for(var item of iterableObj){ console.log(item); //100,200,300 }
就这么简单，上面这个对象就是可迭代对象了，可以被 for of 消费了。
Iterator 原生应用场景
我们再回到最开始使用 for of 来进行遍历字符串、数组、map，我们并没有为他们部署Iterator接口，仍然可以使用 for of 遍历。
这是因为在 ES6中有些对象已经默认部署了此接口，不需要做任何处理，就可以使用 for of 来进行遍历取值。
不信？咿，你好难搞，我不要你说 - 信，我要我说 - 信。
看看能不能拿到它们的迭代器。
数组
//数组 var arr=[100,200,300];
var iteratorObj= arr[Symbol.iterator]();//得到迭代器方法，返回迭代器对象
var arr=[100,200,300]; arr[Symbol.iterator]=function(){
var self=this; var i = 0; return { next: function() { var done = (i >= self.length); var value = !done ? self[i++] : undefined; return { done: done, value: value }; } }; }
for(var o of arr){ console.log(o); }
对象为什么没有默认部署
对象可能有各种属性，不像数组的值是有序的。
所以遍历的时候根本不知道如何确定他们的先后顺序，所以需要我们根据情况手动实现。
扩展
for of 中断
我们都知道普通的 for 循环是可以随时中断的，那 for of 是否可以呢？
答案是肯定的，for of机制兼顾了for和forEach。
迭代器除了必须next 方法外，还有两个可选的方法 return和throw方法。
如果 for of 循环提前退出，则会自动调用 return 方法，需要注意的是 return 方法必须有返回值，且返回值必须是 一个object。
ps：以抛出异常的方式退出，会先执行 return 方法再抛出异常。
var iterableObj = { items:[100,200,300], [Symbol.iterator]:function(){ var self=this; var i = 0; return { next: function() { var done = (i >= self.items.length); var value = !done ? self.items[i++] : undefined; return { done: done, value: value }; }, return(){ console.log('提前退出'); return {//必须返回一个对象 done:true } } }; }
}
for(var item of iterableObj){ console.log(item); if(item===200){ break; } }
for(var item of iterableObj){ console.log(item); throw new Error(); }
ps:throw 方法这里先不说，这里不是他的用武之地，后续文章见。
不止 for of
除了 for of 执行的时候会自动调用对象的Iterator方法，那么ES6里还有没有其他的语法形式?
解构赋值
对可迭代对象进行解构赋值的时候，会默认调用Symbol.iterator方法。
//字符串 var str='12345'; var [a,b]=str; console.log(a,b); // 1 2
//map var map = new Map(); map.set('我','前端'); map.set('是','技术'); map.set('谁','江湖'); map.set('作者','zz_jesse');
var [d,e]=map; console.log(d,e); //["我", "前端"] ["是", "技术"] ....
同样如果对一个普通对象进行解构，则会报错。
因为普通对象不是可迭代对象。
var [d,e]={name:'zhang'};
从一个自定义的可迭代对象进行解构赋值。
var iterableObj = { items:['红','绿','蓝'], [Symbol.iterator]:function(){ var self=this; var i = 0; return { next: function() { var done = (i >= self.items.length); var value = !done ? self.items[i++] : undefined; return { done: done, value: value }; } }; } }
//字符串 var str='1234'; console.log([...str]);//[1,2,3,4] 转换为数组
//map 对象 var map=new Map([[1,2],[3,4]]); [...map] //[[1,2],[3,4]
//set 对象 var set=new Set([1,2,3]); [...set] //[1,2,3]
通用普通对象是不可以转为数组的。
var obj={name:'zhang'}; [..obj]//报错
作为数据源
作为一些数据的数据源，比如某些api 方法的参数是接收一个数组,都会默认的调用自身迭代器。
例如：Set、Map、Array.from 等
//为了证明，先把一个数组的默认迭代器给覆盖掉
var arr=[100,200,300];
arr[Symbol.iterator]=function(){
var self=this; var i = 0; return { next: function() { var done = (i >= self.length); var value = !done ? self[i++] : undefined; return { done: done, value: value+'前端技术江湖' //注意这里 }; } };
