一. 什么是遍历器

1. 遍历器对象(Iterator)

遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个

含有value和done属性的对象{value: val/undefined, done: false/true}。

const iterator = {
next() {
return {value: val/undefined, done: false/true}
}
}

另外遍历器对象可以简单的通过Generator函数(遍历器生成函数)生成。

const gen = function* testGen(){ yield ....}

2. iterator接口

也可以叫做遍历器生成函数。一些数据称之为可遍历数据,本质上是因为数据结构

本身带有iterator接口,即具有属性[Symbol.iterator],该属性对应一个遍历器生成函数。

iterator接口对应的遍历工具主要是for...of循环。其余工具还有: ...(扩展运算符)、Array.from()等。

使用这些工具的时候,会默认调用[Symbol.iterator]方法,遍历方法返回的遍历器。

所以,一个数据是否可遍历,取决于是否具有[Symbol.iterator]属性。

而可以通过给数据添加该属性,使本身不可遍历的数据变成可遍历数据。

原生具有iterator接口的数据类型有:

Array
String
Map
Set
TypedArray
Arguments对象
NodeList对象

除了上面的数据类型,其他数据类型想要可遍历,都必须添加[Symbol.iterator]属性。

其中类数组的对象,可以直接使用数组的[Symbol.iterator]属性。其他对象不可以!

let iterable = { //属性值是数值和length
0: 'a',
1: 'b',
2: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator] //不添加该属性之前,不可遍历,类数组只有NodeList,Arguments,String可遍历
};
for (let item of iterable) {
console.log(item); // 'a', 'b', 'c'
}

如果自定义的话,可以使用Generator函数赋值。

也可以自定义一个函数,按照遍历机制生成一个遍历器对象。不符合会导致崩溃。

3. iterator接口使用场合

以下场景自动调用iterator的构造函数。

1.解构赋值

数组/Set/Map的解构赋值

let [a,...b] = [1,2,3,4];
a;//
b;// [2,3,4]

对象的解构赋值

let { foo, ...bar} = {foo: 1, a:1, b:2,c:3}
foo; //
bar; // {a:1,b:2,c:3}

2. 扩展运算符

3.yield*

后面是一个遍历器,即可遍历对象。相当于自动调用for...of循环

let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
// 相当于
let generator = function* () {
yield 1;
for(let i of [2,3,4]) {
yield i;
}
yield 5;
};

4.使用数组传参的方法

数组只会遍历键是数字的值。非数字的键名不遍历。

for...of
Array.from()
Set()
Map()
WeakMap
WeakSet
Promise.all()
Promise.race()

4. 遍历器的return方法和throw方法

详见

return方法非正常触发的条件是:

1)for...of循环遇到break

2) for...of循环中抛出异常

其中如果遇到抛出异常,会先调用return方法,然后再抛出异常

5. 遍历方法返回遍历器的数据结构

数组
Set
Map
URLSearchParams

上面数据结构调用keys(),values(),entries()返回一个遍历器对象

let arr = [12];
arr.r = 2;
// 返回一个遍历器对象
let it = arr.keys(); //Array Iterator
it.next(); //{value: 0, done: false}
it.next();// {value:undefined, done:true}
// 由此可知,数组遍历的时候只遍历键名是数值的成员

6. for...of循环优点

1. 比for循环书写简单

2.forEach不能中断,for...of可以中断

3.for...in主要用于遍历对象,用于数组时,会遍历非数值的键名。

详情查询

遍历器Iterator--指针对象的更多相关文章

  1. C++泛型编程(1)--自己实现C++迭代器/遍历器 iterator

    1.原理 迭代器又称为遍历器,用于访问容器中的数据,迭代器旨在算法和容器之间搭建访问的桥梁,从而使算法和数据分离,不用关心数据具体的存储细节.具体的原理描述请参考以下两个博客: [1].C++迭代器 ...

  2. Iterator、for..of,for...in和自定义遍历器**

    Iterator.for..of,for...in和自定义遍历器 Iterator: var arr = [1,2,3,4,5]; var ite = arr[Symbol.iterator](); ...

  3. Iterator(遍历器) 和 for...of 循环

    是generator的前置知识 generator :https://www.cnblogs.com/wangtong111/p/11322961.html 遍历器(Iterator)就是这样一种机制 ...

  4. 疑问:Iterator 遍历器和数据集合各种遍历方法的区别

    https://es6.ruanyifeng.com/#docs/iterator Iterator(遍历器)的概念 Iterator 接口主要供for...of消费 Iterator 的遍历过程是: ...

  5. ES6的 Iterator 遍历器到底是什么?

    这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...

  6. Iterator遍历器 调用Symbol.Iterator属性,遍历器对象。

    Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调 ...

  7. ES6的Iterator遍历器

    JS表示集合的对象主要有Array.Set.Object.Map,在以前,遍历它们需要使用2种不同的方法,而现在,JS提出了Iterator机制,可以给不同的数据结构提供统一的遍历方法,就是for…o ...

  8. iterator [ɪtə'reɪtə] 遍历器

    lterator 遍历器 遍历器是一种接口,它为不同的数据结构提供了统一的访问机制. 如果一个数据结构具有遍历器接口,那么就可以依次处理该数据结构的成员. 当前 javascript 用来表示集合的数 ...

  9. 【前端】【javascript】es6中的遍历器接口Iterator

    好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...

随机推荐

  1. hdu 2167 题解

    题目 题意 一个数字正方形(所有数都是两位的正整数),取了一个数后,它的周围 $ 8 $ 个数都不能被选,问最大取数总和. 注意数据范围 $ 3=< n <=15 $ 我们可能一开始会去想 ...

  2. linux根文件系统的挂载过程详解

    一:前言 前段时间在编译kernel的时候发现rootfs挂载不上.相同的root选项设置旧版的image却可以.为了彻底解决这个问题.研究了一下rootfs的挂载过程.特总结如下,希望能给这部份知识 ...

  3. vue 等比例截图组件,支持缩放和旋转

    <template> <div class="crop-image" :style="wrapStyle"> <img :src= ...

  4. 组件上使用v-model

    组件上使用v-model <input v-model="searchText"> 等价于 <input v-bind:value="searchTex ...

  5. 1.sql统计语句

    select exam_item_code, exam_item, EXAMDATE, count(distinct patient_id) from (select t2.exam_item_cod ...

  6. hdu 2353 n皇后问题

    Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对于给定的N, ...

  7. C#数字日期转成中文日期

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  8. 可以在一个.java文件中写两个类吗?

    一个java文件中可以有任意多个类,接口或是注解..但是只能有一个类是public的,而且这个类的名字要和文件同名,比如public类名为A则文件名就应当为A.java

  9. input 被checked时和label配合的妙用

    input 和label配合的妙用 1:作为文字隐藏与否的开关: 如下代码:对div里面所包含的文字较多,一开始只展示小部分,当用户点击按钮时,进行全部内容的展示(按钮是以向下隐藏箭头的图片) htm ...

  10. 解决JAVA连接Sybase数据库查询数据乱码的问题

    连接字符串加上charset=eucgb&jconnect_version=0例如:jdbc:sybase:Tds:server:port/database?charset=eucgb& ...