Iterator和for...of

Iterator和for...of 什么是Iterator

ES6中的Map 和 Set ,再加上之前的数组和对象,这样就有了四种数据集合,用户可以组合使用它们,定义自己的数据结构。这时,我们就需要一个统一的机制,来处理这几种不同的和数据结构。

Iterator 遍历器就是这样一种机制,它是一种接口,为各种不同的数据结构提供统一的访问机制。

其作用有下:

为各种数据结构提供统一简便的访问接口

使得数据结构成员能够按照某种次序排列

为es6中新的遍历方法 for...of 服务

Iterator的遍历过程

创建一个指针对象,指向当前数据结构的起始位置。

遍历器的本质,就是一个指针对象

第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员

第二次调用指针对象的next方法,指针就指向数据结构的第二个成员

如上不停的调用next 方法,直到它指向数据结构的结束位置

学到这里突然想到了链表,哈哈哈 ~ ~

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

手写一个 Iterator接口 const arr = [1, 2, 3] function iterator(arr) { let index = 0 return { next: function () { return index < arr.length ? { value: arr[index++], done: false } : { value: undefined, done: true } } } } const it = iterator(arr) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())

执行结果如下图:

iterator

Symbol.iterator属性

凡是具有Symbol.iterator属性的数据结构都自带具有Iterator 接口

原生具备 Iterator 接口的数据结构如下:

Array

Map

Set

String

TypedArray

函数的 arguments 对象

NodeList 对象

拿数组为例:

let arr = ['a', 'b', 'c']; let iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', done: false } iter.next() // { value: undefined, done: true }

iterator

给对象添加Symbol.iterator属性

另外一些数据结构没有(比如对象):

使用for of作用于对象时:

// Uncaught TypeError: obj is not iterable

const obj = {} console.log(obj[Symbol.iterator]) // undefined

凡是具有Symbol.iterator属性的数据结构都可以被for...of 循环调用,我们可以手动的给对象添加Symbol.iterator 属性

一个对象如果要具备可被for...of循环调用的 Iterator 接口,就必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。

下面是通过遍历器实现指针结构的例子:

function Obj(value) { this.value = value this.next = null } Obj.prototype[Symbol.iterator] = function() { var iterator = {next: next} var current = this function next() { if (current) { var value = current.value current = current.next return { value: value, done: false } } else { return {done: true} } } return iterator } var one = new Obj(1); var two = new Obj(2); var three = new Obj(3); one.next = two; two.next = three; for (var i of one) { console.log(i); // 1, 2, 3 }

简单一点,我们可以这样实现:

var obj = { a: 1, b: 2, 'me': 'akong', 'lover': 'xwr' } obj[Symbol.iterator] = function () { let keys = Object.keys(obj) let len = keys.length let n = 0 return { next: function() { if (n < len) { return { value: keys[n++], done: false } } else { return { done: true } } } } } for (var attr of obj) { console.log(attr) }

这样我们就可以遍历obj对象啦~!

调用 Iterator 接口的场合

(1)解构赋值

对数组和 Set 结构进行解构赋值时,会默认调用Symbol.iterator方法。

let set = new Set().add('a').add('b').add('c'); let [x,y] = set; // x='a'; y='b' let [first, ...rest] = set; // first='a'; rest=['b','c'];

(2)扩展运算符

扩展运算符(...)也会调用默认的 Iterator 接口。

// 例一 var str = 'hello'; [...str] // ['h','e','l','l','o'] // 例二 let arr = ['b', 'c']; ['a', ...arr, 'd'] // ['a', 'b', 'c', 'd']

(3)其他场合

由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。下面是一些例子。

for...of

Array.from()

Map(), Set(), WeakMap(), WeakSet()(比如new Map([['a',1],['b',2]]))

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjjjj.html