ES6学习第五篇--迭代器(Iterator)

最新推荐文章于 2023-08-01 22:23:25 发布
最新推荐文章于 2023-08-01 22:23:25 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： ES6 javascript 文章标签： es6 iterator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014481405/article/details/107916668
版权

ES6学习第五篇--迭代器

迭代器的概念

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。
遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
扩展知识：阮一峰解说迭代器

迭代器的作用

Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费。
for-of的原理，每次遍历都会调用该对象的[Symbol.iterator]属性的next方法，当返回{value: undefined, done: true}后，表示遍历结束。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
console.log(iterator.next());  // Object { value: "a", done: false }
console.log(iterator.next());  // Object { value: "d", done: false }
console.log(iterator.next());  // Object { value: "c", done: false }
console.log(iterator.next());  // Object { value: undefined, done: true }

迭代器的原理

普通的对象没有实现迭代器接口，不能通过迭代器遍历

let myIterable = {
	a: 1,
	b: 2,
	c: 3
}

// 使用 for..of 循环
for(let elem of myIterable) { 
  console.log(elem);
}

运行结果图：
在这里插入图片描述
那如何实现迭代器(Iterator)接口呢，只需要在这个对象中实[Symbol.iterator]属性方法，[Symbol.iterator]这个属性名看起来怪怪的，Symbol是ES6表示唯一性的标识符，是Symbol的静态属性，标准委员会是为了避免命名的冲突，所以才这样命名。下面我们来实现[Symbol.iterator]属性。如下：

let myIterable = {
    a: 1,
    b: 2,
    c: 3
}
myIterable[Symbol.iterator] = function() {
  let self = this;
  let arr = Object.keys(self);
  let index = 0;
  return {
    next() {
      return index < arr.length ? {value: self[arr[index++]], done: false} : {value: undefined, done: true};
    }
  }
}
for(const i of myIterable) {
  console.log(i);
}

将myIterable对象添加Symbol.iterator属性，同时在返回的next方法中，添加两个属性，既让它成为了一个可迭代对象。（其实如果真的有这样的需求，可以考虑使用Map）。

迭代器的实例

原生的具备 Iterator 接口的数据结构如下：
Array
Map
Set
String
TypedArray（类数组）
函数的 arguments 对象
DOM NodeList 对象

Array

Array的原型链上面实现了迭代器接口，如下：

Array.prototype.values === Array.prototype[Symbol.iterator]

数组用for…of遍历

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
//下面两个for of后面接数组对象或数组的迭代器对象都能遍历数组
for (const value of iterator) {
  console.log(value);
}//输出a b c
for (const value of array1 ) {
  console.log(value);
}//输出a b c
//有朋友会问，为什么上面的iterator 也能用for...of遍历
//在控制台执行两条语句
//const array1 = ['a', 'b', 'c']; 
//array1.values()[Symbol.iterator];
//执行结果：ƒ [Symbol.iterator]() { [native code] } 为一个迭代器接口

用iterator 遍历数组：

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
console.log(iterator.next());  // Object { value: "a", done: false }
console.log(iterator.next());  // Object { value: "d", done: false }
console.log(iterator.next());  // Object { value: "c", done: false }
console.log(iterator.next());  // Object { value: undefined, done: true }

运行结果图：
在这里插入图片描述
数组可以自己实现迭代器接口（Symbol.iterator为Symbol的静态属性）：

const array1 = ['a', 'b', 'c'];
Array.prototype[Symbol.iterator] = function(){
	var self = this;
    let index = -1;
    return {
        next: function() {
            let len = self.length;
            index++;
            //注意这个特殊打印标记，区分是调用自定义的还是原生的
			console.log("自定义的迭代器接口");
            return  index < len ? {value:self[index],done:false}:{value:self[index],done:true};
        }
    };
};
for (let item of array1) {
  console.log(item); // 'a', 'b', 'c'
}

运行结果图：
在这里插入图片描述

Map

Map.prototype[Symbol.iterator]()方法返回Map对象的键值对遍历器。其内部的实现原理和返回值和Map.prototype.entries()一致。

Map.prototype.entries === Map.prototype[Symbol.iterator]

Map的扩展知识：Map构造函数及其属性方法

迭代器遍历

var map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
map.set('d', 4);
map.set('e', 5);

var iter = map[Symbol.iterator]();
iter.next().value; // ['a', 1]
iter.next().value; // ['b', 2]
iter.next().value; // ['c', 3]
iter.next().value; // ['d', 4]
iter.next().value; // ['e', 5]
iter.next();       // undefined

Map的for…of遍历

var map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
map.set('d', 4);
map.set('e', 5);

for (let elem of map) {
  console.log(elem);
  console.log(elem instanceof Array);
}

运行结果图：
在这里插入图片描述
有兴趣的朋友也可以自己定义Map的迭代器接口

Set

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

Set.prototype.values === Set.prototype[Symbol.iterator]

迭代器遍历

const set1 = new Set();

set1.add(42);
set1.add('forty two');

const iterator1 = set1[Symbol.iterator]();

console.log(iterator1.next().value);
// expected output: 42

console.log(iterator1.next().value);
// expected output: "forty two"

for…of遍历

const set1 = new Set();

set1.add(42);
set1.add('forty two');

for (let elem of set1) {
  console.log(elem);
}

String

strSymbol.iterator方法返回一个新的Iterator对象，它遍历字符串的代码点，返回每一个代码点的字符串值。

const str = 'The quick red fox jumped over the lazy dog\'s back.';

const iterator = str[Symbol.iterator]();
let theChar = iterator.next();

while (!theChar.done && theChar.value !== ' ') {
  console.log(theChar.value);
  theChar = iterator.next();
  // expected output: "T"
  //                  "h"
  //                  "e"
}

TypedArray

默认的迭代器接口遍历

//Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。
//创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
var arr = new Uint8Array([10, 20, 30, 40, 50]);
for (let n of arr) {
  console.log(n);
}
//输出10 20 30 40. 50
//注意：arr [Symbol.iterator] === Array.prototype.values === Array.prototype[Symbol.iterator]

自定义类数组的迭代器接口进行遍历

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}
//运行结果输出：a b c

下面是把类数组转换为了数组后，进行遍历

let tyepArray = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
for (let item of Array.from(tyepArray)) {
  console.log(item); // 'a', 'b', 'c'
}
//运行结果输出a b c

arguments

argumentsSymbol.iterator返回一个迭代器遍历每一个参数的值

function f() {
  // your browser must support for..of loop
  // and let-scoped variables in for loops
  for (let letter of arguments) {
    console.log(letter);
  }
}
f('w', 'y', 'k', 'o', 'p');

DOM NodeList

Node.childNodes 返回包含指定节点的子节点的集合，子节点集合为 NodeList 类型。

for…of遍历

var node = document.createElement("div"); 
var kid1 = document.createElement("p"); 
var kid2 = document.createTextNode("hey"); 
var kid3 = document.createElement("span"); 
node.appendChild(kid1); 
node.appendChild(kid2); 
node.appendChild(kid3); 

var list = node.childNodes;

// 使用 for..of 循环
for(var elem of list) { 
  console.log(elem);
}

迭代器的 return()，throw()

遍历器对象除了具有next方法，还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数，那么next方法是必须部署的，return方法和throw方法是否部署是可选的。

return方法的使用场合是，如果for…of循环提前退出（通常是因为出错，或者有break语句），就会调用return方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法。

let myIterable = {
    a: 1,
	b: 2,
	c: 3
}
myIterable[Symbol.iterator] = function() {
  let self = this;
  let arr = Object.keys(self);
  let index = 0;
  return {
	next: function() {
	  return index < arr.length ? {value: self[arr[index++]], done: false} : {value: undefined, done: true};
	},
	return: function() {
		console.log("遍历结束");
		return {value: undefined, done: true};
	}
  }
}

for(const i of myIterable) {
  console.log(i);
  if (i == "2") {
	break;
  }
}
for(const i of myIterable) {
  console.log(i);
  if (i == "2") {
	throw new Error();
  }
}

运行结果图：
在这里插入图片描述
return和throw都会触发迭代器接口中的return方法，throw是先执行return方法后，再抛出错误。

for…of和for …in的区别

1 遍历数组的区别
for…in遍历数组


var arr = ['a', 'b', 'c']; 
for(var i in arr){
   console.log(arr[i]);
 }

for…of遍历数组

var arr = ['a', 'b', 'c']; 
for(var ch of arr){
    console.log(ch);
}

for…of能直接获取数组的元素，for…in能获取到数组下标，再通过下标获取数组元素。

2 遍历对象的区别
for…of不能直接遍历普通对象，需要自定义对象的迭代器接口后才能遍历对象。
for…in能直接遍历对象的key,value

or(let key in obj) {
   console.log('for in key', key)
 }
  1. for…in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。
let arr = [1, 2, 3]
arr.set = 'world'  // 手动添加的键
Array.prototype.name = 'hello'  // 原型链上的键
 
for(let item in arr) {
  console.log('item', item)
}
 
/*
  item 0
  item 1
  item 2
  item set
  item name
*/

上一篇：ES6学习第四篇–Let和Var的相同点和区别
下一篇：ES6学习第六篇–生成器(Generator)

美兮，乐兮
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
range-iterator:迭代范围节点的 ES6 迭代器
06-20
迭代范围节点的 ES6 迭代器 安装 $ npm install range-iterator 例子 import RangeIterator from 'range-iterator' ; let range = document . createRange ( ) ; range . selectNodeContents ( document . body ) ;...
typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法)
Byebye_W0rld的博客
07-05 544
typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法)
Symbol.Iterator简单理解
m0_46525076的博客
07-10 6416
symbol 是什么？ Itertor是什么？ symbol的内置符号symbol.Iterator，有什么用？ 为什么会出现for..of? for..of怎么用? 首先symbol是es6新增的类型，它是一个基本类型，symbol英文翻译是符号的意思。 在叙述symbol之前，推出一个概念，“以操作目标为程序本身的行为特性的编程，我们称为元编程。” 我们已知symbol是es6新增类型，按照逻辑推演：作为新增的类型，symbol一定是为了弥补了之前的不足，所以才出现的
typescript: 类型“NodeListOf＜xxx＞”必须具有返回迭代器的 “[Symbol.iterator]()“ 方法。ts(2488)
小知的博客
09-16 4629
typescript
ES6 Symbol.iterator迭代器
weixin_43931898的博客
10-28 1576
定义：Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用。 描述： 当需要对一个对象进行迭代时（比如开始用于一个for…of循环中），它的@@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。 一些内置类型拥有默认的迭代器行为，其他类型（如 Object）则没有。下表中的内置类型拥有默认的@@iterator方法： ...
浅谈Object类
weixin_44151598的博客
07-26 565
Object所有类的超类，所有类在创建对象是都可以用object类引用任何类型的对象 Object a = new Text(); 在Object中一共有八种方法，接下来就跟着我一起看一下object中的这几种方法分别是什么，都可以干些什么。 1、clone()方法 protected Object clone() throws CloneNotSupportedException ...
js 谈谈Generator和[Symbol.iterator]
在下月亮有何贵干
09-09 754
对象中的[Symbol.iterator]属性，一般用来作为对象默认的迭代方法，当它返回迭代器对象时，可以帮助我们创建对象的可迭代方法。Generator是es6引入的一种特殊函数，它叫做生成器函数，调用它可以得到一个迭代器对象。我们从上文可以发现，一个需要返回迭代器对象，一个可以得到迭代器对象，必然可以合作，这就是有趣的地方。今天我们就来谈谈它们是什么，怎么用。
ES6 迭代器_Symbol.Iterator
weixin_55032665的博客
02-24 1193
简介：迭代器（Iterator）是一种接口（对象的一个属性方法），为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署了（Iterator）接口，就可以完成遍历操作。ES6提供了新的遍历命令 for of遍历，有iterator接口的数据结构可以使用，用来遍历键值。 拥有迭代器的数据结构 Arrty--数组 Argments--函数获取实参的变量 Set--ES6新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值 Map--是一组键值对的结构，具有极快的查找速度 Stri
详谈ES6中的迭代器(Iterator)和生成器(Generator)
12-08
前面的话 用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，而在许多编程语言中，已经...本文将详细介绍ES6中的迭代器(Iterator)和生成器(Generator) 引入 下面是一段标准的for循环代
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
11-26
迭代器(Iterator)是ES6引入的一个重要特性，它提供了一种统一的方式来遍历各种数据结构，如数组、Set、Map甚至是自定义的数据结构。在Java和Python等其他语言中，迭代器也是常见的一种机制。在JavaScript中，迭代器...
详解ES6语法之可迭代协议和迭代器协议
11-27
有两个协议：可迭代协议和迭代器协议。 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环（得到）。一些内置类型都是内置的可迭代对象...
TS错误信息列表
热门推荐
Jinmy的博客
07-11 9万+
错误信息列表code类型英文描述中文描述1002错误Unterminated string literal.未终止的字符串文本。1003错误Identifier expected.应为标识符。1005错误'{0}' expected.应为“{0}”。1006错误A file cannot have a reference to itself.文件不能引用自身。1009错误Trailing comm...
java的八大基本类型和类型之间的转换
qq_40226268的博客
09-07 1549
一、java的八大基本类型 四类： **1、整形** 类型 大小 范围 byte(字节类型) 1字节 -2^7 ~ 2^7-1 short(短整形) 2字节 -2^15 ~ 2^15-1 int(整形) 4字节 -2^31 ~ 2^31-1 long(长整型) 8字节 -2^63 ~ 2^63-1 **2、浮点型** 类型 大小 范围 float(单精度浮点数) 4字节 -2^128 ~ 2^128 double(双精度浮点数) 8字节 -2^102
认识Java的String类
weixin_58030464的博客
04-05 442
文章目录1. 创建字符串2. 字符串比较相等2.1 String 使用 == 比较并不是在比较字符串内容, 而是比较两个引用是否是指向同一个对象.2.2 Java 中要想比较字符串的内容, 必须采用String类提供的equals方法.3. 字符串常量池3.1 直接赋值3.2 采用构造方法3.3 面试题：请解释String类中两种对象实例化的区别4. 理解字符串不可变5. 字符, 字节与字符串5.1 字符与字符串5.1.1 获取指定位置的字符5.1.2字符串与字符数组的转换5.1.3给定字符串一个字符串,
HTMLCollection元素的For循环
asdfgh0077的博客
06-15 6623
I'm trying to set get id of all elements in an HTMLCollectionOf . 我正在尝试设置HTMLCollectionOf中所有元素的获取ID
Iterator迭代器和Generator生成器
lqiqil的博客
08-01 474
.
【前端杂文】 axios的AxiosResponse分析
baidu_36831253的博客
11-09 5836
axios的AxiosResonse分析
详解String类型
a13572259715的博客
04-23 1598
文章目录一、创建字符串二、字符串比较相等三、字符串常量池四、理解字符串不可变五、字符、字节和字符串1.字符与字符串2.字节与字符串六、字符串比较 一、创建字符串 常见的创建字符串的方式： 1.String str = “Hello”;//直接赋值 2.String str2 = new String(“Hello”);//new一个新的String 3.char[] array = {‘a’,‘b’,‘c’}; String str3 = new String(array); 注：被双引号("")引起..
[ES6]Symbol Iterator Generator Async使用小结
一起来看烟花吧的博客
06-06 336
async函数简介 ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 定义一个async函数 async function foo() { await 异步操作; await 异步操作； } async关键字表示后面的这个函数中有异步操作。await关键字等待后面的操作返回结果后再继续往下执行。 使用promise来处理异步操作 function test1() { return new Promise(function (resolve, reject) {
es6迭代器iterator
最新发布
09-20
ES6规定，默认的迭代器(Iterator)接口部署在数据结构的Symbol.iterator属性上，或者一个数据结构只要具有Symbol.iterator属性，就可以认为是可遍历(iterable)的。迭代器(Iterator)是一种接口，提供了遍历数据结构的方法。它是一个对象，具有next()方法，每次调用next()方法都会返回一个包含value和done两个属性的对象。value表示当前遍历到的值，done表示是否遍历结束。 ES6中的迭代器(Iterator)可以通过for...of循环来遍历可遍历的数据结构。for...of循环会自动调用迭代器的next()方法，直到done属性为true时停止循环。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值