Symbol.iterator的理解

103 阅读 0 评论 68 点赞

我是靠谱客的博主迷人发夹，最近开发中收集的这篇文章主要介绍Symbol.iterator的理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

es6中有三类结构生来就具有Iterator接口：数组、类数组对象、Map和Set结构。

var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next());
//{ value: 1, done: false }
console.log(iterator.next());
//{ value: 2, done: false }
console.log(iterator.next());
//{ value: 3, done: false }
console.log(iterator.next());
//{ value: 4, done: false }
console.log(iterator.next());
//{ value: undefined, done: true }

　　至于对象没有布置iterator接口的原因，不知道最近大家有没有看根据《你一生的故事》拍成的电影“降临"，片中出现的外星语言是一门非线性的语言。而我们说的数组，Map等结构中的成员都是有顺序的，即都是线性的结构，而对象，各成员并没有一个确定的顺序，所以遍历时先遍历谁后遍历谁并不确定。所以，给一个对象部署iterator接口，其实就是对该对象做一种线性转换。如果你有这种需要，就需要手动给你的对象部署iterator接口咯~

　　如：

let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};

　　可以看到，Symbol.iterator会返回一个对象，这就是一个遍历器对象，而作为遍历器对象，其必须具备的特征就是必须具备next()方法。

我们还可以据此实现指针结构的数据结构。具体略~

　　至于可以使用Array.from转换成数组的类数组对象，部署iterator有一种很简单的方法，即直接使用数组的[Symbol.iterator]接口。　

fakeArray.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

　　当然，不知道你们看到next是否想到了es6的一个新玩意儿，即Generator函数。用Generator函数来实现Symbol.iterator接口，事半功倍。

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...yieldIterator] // [1, 2, 3]　　注意，yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

　　其次，其它调用到遍历器的操作还有解构赋值、扩展操作符、其它任何接受数组作为参数的场合，如：