资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6-迭代器（iterator）和生成器（generator）- 可迭代对象

ES6-迭代器（iterator）和生成器（generator）- 可迭代对象

xiao7cn / 3463人阅读

摘要：什么是可迭代对象可迭代对象具有属性是一个方法的返回值是一个迭代器结合以上第二点和第三点，可以得出就是一个生成器所以我们可以给出一个可迭代对象的明确定义就是一个具有属性，且其为一个生成器的对象，就是可迭代对象。

1: 什么是可迭代对象？

</>复制代码 
  1. 1: 可迭代对象具有Symbol.iterator属性
  2. 2: Symbol.iterator是一个方法
  3. 3: Symbol.iterator的返回值是一个迭代器
  4. 4: 结合以上第二点和第三点，可以得出Symbol.iterator就是一个生成器

所以我们可以给出一个可迭代对象的明确定义就是：一个具有Symbol.iterator属性，且其为一个生成器的对象，就是可迭代对象。

2: 如何创建一个可迭代对象？
有了上面的第一点的定义，我们就可以创建出一个可迭代对象，如下：

</>复制代码 
  1. let myIteratorObject = {
  2.     items: [],
  3.     *[Symbol.iterator](){
  4.         for(let item of this.items){
  5.             yield item;
  6.         }
  7.     }
  8. };
  9. myIteratorObject.items = [1, 2, 3];
  10. for(let item of myIteratorObject){
  11.     console.log(item);//依次得到1, 2, 3
  12. }

3: ES6默认的可迭代对象有哪些？
从前面的内容我们知道，并不是所有的对象都是可迭代对象，我们自己创建的对象，必须要手动添加*[Symbol.iterator]这个生成器才行。但是ES6内建的对象，有一些默认就是可迭代对象，毋需我们再做额外的工作。它们就是以下这些：

</>复制代码 
  1. 1: 数组Array
  2. 2: Set
  3. 3: Map
  4. 4: 字符串String
  5. 5: NodeList(准确说来是定义在DOM标准中)

4: 集合对象（Array, Set, Map）的内建迭代器有几种？
从上面的第三点我们知道Array, Set, Map它们默认就是可迭代对象，这说明它们默认就有迭代器。而这三个集合对象，不仅有默认迭代器，而且还不止1个，有3个：

</>复制代码 
  1. 1: entries() 返回一个迭代器，其值为多个键值对
  2. 2: values()  返回一个迭代器，其值为集合的值
  3. 3: keys()    返回一个迭代器，其值为集合中的所有键名

下面通过代码来来看一下使用这三种不同的集合所对应的三种不同的迭代器得到的数据是什么：

</>复制代码 
  1. let array = [1, 2, 3];
  2. let set = new Set(["a", "b", "c"]);
  3. let map = new Map();
  4. map.set("name", "apple");
  5. map.set("price", 20);
  6. //entries()
  7. for (let item of array.entries()) {
  8.     console.log(item);
  9. }
  10. for (let item of set.entries()) {
  11.     console.log(item);
  12. }
  13. for (let item of map.entries()) {
  14.     console.log(item);
  15. }
  16. //values()
  17. for(let item of array.values()){
  18.     console.log(item);
  19. }
  20. for(let item of set.values()){
  21.     console.log(item);
  22. }
  23. for(let item of map.values()){
  24.     console.log(item);
  25. }
  26. //keys()
  27. for(let item of array.keys()){
  28.     console.log(item);
  29. }
  30. for(let item of set.keys()){
  31.     console.log(item);
  32. }
  33. for(let item of map.keys()){
  34.     console.log(item);
  35. }

entries()

</>复制代码 
  1. [0, 1]
  2. [1, 2]
  3. [2, 3]
  4. ["a", "a"]
  5. ["b", "b"]
  6. ["c", "c"]
  7. ["name", "apple"]
  8. ["price", 20]

values()

</>复制代码 
  1. 1
  2. 2
  3. 3
  4. a
  5. b
  6. c
  7. apple
  8. 20

keys()

</>复制代码 
  1. 0
  2. 1
  3. 2
  4. a
  5. b
  6. c
  7. name
  8. price

从以上结果我们看出，

</>复制代码 
  1. 1: 对于Array来说，会把元素下标作为每一个“键值对”的key；
  2. 2: 对于Set来说，集合元素本身既是key，又是value；
  3. 3: Map就是最标准的key就是key，value就是value啦。

5: 集合对象的默认迭代器是什么？
从上面的第4点我们知道了，Array，Set，Map这三种集合对象都内建了三种不同的迭代器，但是如果当我们在使用for...of的时候，不是十分确定地指定某一种迭代器，那这三个对象会默认使用哪个呢？

</>复制代码 
  1. let array = [1, 2, 3];
  2. let set = new Set(["a", "b", "c"]);
  3. let map = new Map();
  4. map.set("name", "apple");
  5. map.set("price", 20);
  6. for(let item of array){
  7.     console.log(item);
  8. }
  9. for(let item of set){
  10.     console.log(item);
  11. }
  12. for(let item of map){
  13.     console.log(item);
  14. }

我们会得到以下结果：

</>复制代码 
  1. 1
  2. 2
  3. 3
  4. a
  5. b
  6. c
  7. ["name", "apple"]
  8. ["price", 20]

所以结论就是：

</>复制代码 
  1. 1: Array的默认迭代器是values()
  2. 2: Set的默认迭代器是values()
  3. 3: Map的默认迭代器是entries()

6: 可迭代对象的初级使用场景

</>复制代码 
  1. 1：用于for...of
  2. 2：用于展开运算符...

for...of和展开运算符都要求作用的对象是可迭代对象。for...of我们就不再赘述，前面的例子里面已经有用到；接下来看一下展开运算符的代码示例：

</>复制代码 
  1. let map = new Map([["name", "apple"],["price", 20]]);
  2. let array = [...map];
  3. for(let item of array){
  4.     console.log(item)
  5. }

得到结果：

</>复制代码 
  1. ["name", "apple"], ["price", 20]

以上我们通过for...of迭代array的元素，得到两个一维数组，由此可知array本身是一个二维数组：[["name", "apple"],["price", 20]]，也就是和传给new Map()的参数的数组一样。这是因为展开运算符会使用作用对象的默认迭代器（对于Map来说，就是多对键值对）然后，把这些键值对，依次放入数组中。

云服务器 GPU云服务器 迭代器对象 -迭代器 迭代器 数组迭代器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110257.html

相关文章

  • ES6 的 for..of 和 Generator，从伪数组 jQuery 对象说起

    摘要：引用自可迭代对象和迭代器不以规矩，不成方圆为了使某个对象成为可迭代对象象，它必须实现方法，也就是说，它得有一个是的属性。的遍历，绝对应该用。 pseudo 英 [sju:dəʊ] 美 [su:doʊ]adj.假的，虚伪的n.[口]假冒的人，伪君子 pseudo-array 英 [sju:dəʊəreɪ] 美 [sju:dəʊəreɪ][计] 伪数组 jQuery 对象是伪数组 两个...

    Harriet666 评论0 收藏0

  • ES6 之 Iterator&Generator

    摘要：可迭代对象就具有属性，它是一种与迭代器密切相关的对象。它通过指定的函数可以返回一个作用于附属对象的迭代器。迭代器特点每次调用方法时，返回一个数组，数组中两个元素，分别表示键和值。示例之输出输出输出之迭代器特点返回集合中存在的每一个键。 Iterator由来 不推荐Iterator方法。 Iterator 函数是一个 SpiderMonkey 专有特性，并且会在某一时刻被删除。有一点，需...

    xietao3 评论0 收藏0

  • ES6-迭代器（iterator）和生成器（generator） - 什么是迭代器和生成器

    摘要：我个人认为迭代器和生成器是新增的特性里面，非常重要的部分，充分地掌握和使用迭代器和生成器，是十分必要和重要的，所以我会写关于二者的一系列文章。 我个人认为迭代器和生成器是es6新增的特性里面，非常重要的部分，充分地掌握和使用迭代器和生成器，是十分必要和重要的，所以我会写关于二者的一系列文章。话不多说，先来了解一下基本概念：一：什么是迭代器 1: 迭代器是一个对象 2: 迭代器有一个属性...

    CollinPeng 评论0 收藏0

  • 《深入理解ES6》笔记——迭代器（Iterator）和生成器（Generator）（8）

    摘要：迭代器是一种特殊对象，每一个迭代器对象都有一个，该方法返回一个对象，包括和属性。默认情况下定义的对象是不可迭代的，但是可以通过创建迭代器。在迭代器中抛出错误不再执行生成器返回语句生成器中添加表示退出操作。迭代器是一个对象。 迭代器（Iterator） ES5实现迭代器 迭代器是什么？遇到这种新的概念，莫慌张。 迭代器是一种特殊对象，每一个迭代器对象都有一个next()，该方法返回一个对...

    AndroidTraveler 评论0 收藏0

发表评论

登陆后可评论

0条评论

xiao7cn

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<