乐趣区

es6迭代器iterator和生成器generator2-可迭代对象

jiezi

1: 什么是可迭代对象？

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

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

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

let myIteratorObject = {items: [],
    *[Symbol.iterator](){for(let item of this.items){yield item;}
    }
};

myIteratorObject.items = [1, 2, 3];
for(let item of myIteratorObject){console.log(item);// 依次得到 1, 2, 3
}

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

1: 数组 Array
2: Set
3: Map
4: 字符串 String
5: NodeList(准确说来是定义在 DOM 标准中)

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

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

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

let array = [1, 2, 3];
let set = new Set(['a', 'b', 'c']);
let map = new Map();
map.set('name', 'apple');
map.set('price', 20);

//entries()
for (let item of array.entries()) {console.log(item);
}
for (let item of set.entries()) {console.log(item);
}
for (let item of map.entries()) {console.log(item);
}
//values()
for(let item of array.values()){console.log(item);
}
for(let item of set.values()){console.log(item);
}
for(let item of map.values()){console.log(item);
}

//keys()
for(let item of array.keys()){console.log(item);
}
for(let item of set.keys()){console.log(item);
}
for(let item of map.keys()){console.log(item);
}

entries()

[0, 1]
[1, 2]
[2, 3]
["a", "a"]
["b", "b"]
["c", "c"]
["name", "apple"]
["price", 20]

values()

1
2
3
a
b
c
apple
20

keys()

0
1
2
a
b
c
name
price

从以上结果我们看出，

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

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

let array = [1, 2, 3];
let set = new Set(['a', 'b', 'c']);
let map = new Map();
map.set('name', 'apple');
map.set('price', 20);
for(let item of array){console.log(item);
}
for(let item of set){console.log(item);
}
for(let item of map){console.log(item);
}

我们会得到以下结果：

1
2
3
a
b
c
["name", "apple"]
["price", 20]

所以结论就是：

1: Array 的默认迭代器是 values()
2: Set 的默认迭代器是 values()
3: Map 的默认迭代器是 entries()

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

退出移动版