ES6(二) Iterator(遍历器)和for-of循环_vue 遍历器iterator-程序员宅基地

2. 遍历数组

for-of工作原理：迭代器有一个next方法，for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环。

① 在ES6之前

var arr = [1,2,3,4,5,6];
arr.name = 'a';

for (var index = 0; index < arr.length; index++) {
    console.log(arr[index]);
}
arr.forEach(function (value) { //ES5 内建的forEach方法 缺陷：无法使用break 中断 ，也不能使用return 语句返回到外层函数
    console.log(value);
});

结果都是：1,2,3,4,5,6

② 用 for-in ：作用于数组的 forfor -in 循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次

for (var index in arr) { // 千万别这样做
 console.log(arr[index]);
}

结果：1,2,3,4,5,6，a

for-in 是为普通对象设计的，赋值给index的值不是实际的数字1、2，而是字符串‘1’，‘2’

var b = 0;
for (var index in arr) { 
 b = b+ index;
 console.log(b)
}

结果：00，001，0012，00123，001234，0012345，0012345name

③ 使用 for-of：避开了for-in 的所有缺陷，可以正确响应 break、return 语句

for(var value of arr){
    console.log(value)
}

结果： 1,2,3,4,5,6

3.for-of 循环便利其他集合

① 遍历Set

var words = 'a';
var s = new Set();
s.add("a");
s.add(1);
for(var word of s){
    console.log(word);
}

结果：a，1

② 遍历Map

var map = new Map();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var [key,value] of map){
    console.log(key+':'+value);
}

结果：a：1，b：2，c：3，d：4

1. Iterator（遍历器）

① 遍历器（Iterator）是一种接口规格，任何对象只要部署这个接口，就可以完成遍历操作。它的作用有两个，一是为各种数据结构，提供一个统一的、简便的接口，二是使得对象的属性能够按某种次序排列。

② 遍历器的原理：遍历器提供了一个指针，指向当前对象的某个属性，使用next方法，就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中，value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。

//模拟遍历器原理
function makeIterator(array){
    var nextIndex = 0;
    return {
        next: function(){
            return nextIndex < array.length ?
                {value: array[nextIndex++], done: false} :
                {value: undefined, done: true};
        }
    }
}
var it = makeIterator(['a', 'b']);
console.log(it.next());//{ value: 'a', done: false }
console.log(it.next());//{ value: 'b', done: false }
console.log(it.next());//{ value: undefined, done: true }

③ Iterator接口返回的遍历器，原生具备next方法。

> 有三类数据结构原生具备Iterator接口：数组、类似数组的对象、Set和Map结构。

var map = new Map();
console.log(map[Symbol.iterator] === map.entries)//true

var arr = new Array();
console.log(arr[Symbol.iterator] === arr.values)//true

var set = new Set();
console.log(set[Symbol.iterator] === set.values)//true

> 其他数据结构（主要是对象）如果需要Iterator接口,都需要自己部署。

var students = {}

students[Symbol.iterator] = function() {
  let index = 1;
  return {
    next() {
      return {done: index>10, value: index++}
    }
  }
}

for(var i of students) {
  console.log(i);
}//

本文链接：https://blog.csdn.net/Dason_yu/article/details/62232770

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2019KDD CUP | 2019国际知识发现和数据挖掘竞赛_international knowledge discovery and data mining -程序员宅基地

文章浏览阅读7k次，点赞2次，收藏4次。国际知识发现和数据挖掘竞赛[1]（KDD-CUP）竞赛是由ACM 的数据挖掘及知识发现专委会（SIGKDD）主办的数据挖掘研究领域的国际顶级赛事。其中KDD的英文全称是Knowledge Discovery and Data Mining，即知识发现与数据挖掘。KDD Cup比赛由ACM协会的SIGKDD分会举办，从1997年开始，每年举办一次，目前是数据挖掘领域最有影响力的赛事。该比赛..._international knowledge discovery and data mining tools competition,

mysql将查询的结果导出到文件(excel、txt等)_mysql导出查询结果到文件-程序员宅基地

文章浏览阅读5.8k次。例如： SELECT * FROM (表名) INTO OUTFILE ‘C:/ProgramData/MySQL/MySQL Server 8.0/Uploads/test.txt’ CHARACTER SET gbk;5）如果sql查询出来的数据包含有很大的数值型数据，则在excel中这些数值数据可能会出问题，因此，可以先导出为.txt/.csv文件格式，再复制黏贴到excel文件中（首先设置单元格格式为文本）3）生成文件格式也可以是.txt/.xls/.csv。_mysql导出查询结果到文件

U-Boot 下使用 TFTP 刷新远程固件并设置网络环境-程序员宅基地

文章浏览阅读460次。U-Boot 下使用 TFTP 刷新远程固件并设置网络环境

SAP HANA数据库数据类型、函数用法、SQL语法-程序员宅基地

文章浏览阅读2.2k次。SAP HANA数据库数据类型、函数用法、SQL语法_hana数据库

android Checkbox更换按钮颜色_代码设置checkbox的buttontint-程序员宅基地

文章浏览阅读1.6k次。android checkbox复选框更换按钮颜色_代码设置checkbox的buttontint

spring cloud 非web请求feign调用header携带数据_requesttemplate.header-程序员宅基地

文章浏览阅读1.1k次，点赞3次，收藏5次。首先，在我之前的博文中我们介绍了feign调用携带token的解决放法，但是那仅适用于前端发起请求从controller层进入service层产生微服务之间的调用问题。实际开发场景中我们可能遇到很多非web请求，比如定时任务等在之前的基础上我们继续编程，直接上代码@Configurationpublic class FeignConfig implements RequestInterceptor { @Override public void apply(RequestTemp_requesttemplate.header