详谈js遍历集合(Array,Map,Set)

我来为你讲解如何用JavaScript遍历集合。

集合的遍历

在遍历集合之前，首先需要了解集合类型的基本特性。

JavaScript中常见的集合类型有Array、Map和Set。其中：

• Array是一种有序、可重复的数据集合，它可以通过下标或迭代器来访问其中的元素。
• Map是一种关联数组，它保存了键值对，并且键可以是任意类型的数据，而值可以是任意类型的数据。
• Set是一种无序、不重复的数据集合，它只能保存唯一的值。

在遍历集合时，我们通常需要使用迭代器(iterator)或者for...of语句。下面我们来详细讲解这两种方法。

使用迭代器遍历集合

在ES6中，可以使用迭代器遍历Array、Map和Set。

• 遍历Array

对于Array，我们可以使用for...of循环遍历其中的元素。下面是一个例子：

const arr = [1, 2, 3];
for (const value of arr) {
console.log(value);
}

输出结果为：

1
2
3

我们还可以使用迭代器对象手动遍历Array：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
console.log(result.value);
result = iterator.next();
}

输出结果与前面的例子相同。

• 遍历Map

对于Map，我们可以使用其entries()方法返回一个迭代器，用于遍历其中的键值对。下面是一个例子：

const map = new Map([
['foo', 1],
['bar', 2],
['baz', 3]
]);
for (const [key, value] of map.entries()) {
console.log(`${key}: ${value}`);
}

输出结果为：

foo: 1
bar: 2
baz: 3

我们还可以通过手动获取迭代器对象的方式来遍历Map：

const map = new Map([
['foo', 1],
['bar', 2],
['baz', 3]
]);
const iterator = map.entries();
let result = iterator.next();
while (!result.done) {
console.log(`${result.value[0]}: ${result.value[1]}`);
result = iterator.next();
}

输出结果与前面的例子相同。

• 遍历Set

对于Set，我们可以使用其values()方法返回一个迭代器，用于遍历其中的元素。下面是一个例子：

const set = new Set([1, 2, 3]);
for (const value of set.values()) {
console.log(value);
}

输出结果为：

1
2
3

我们还可以通过手动获取迭代器对象的方式来遍历Set：

const set = new Set([1, 2, 3]);
const iterator = set.values();
let result = iterator.next();
while (!result.done) {
console.log(result.value);
result = iterator.next();
}

输出结果与前面的例子相同。

使用for...of语句遍历集合

除了使用迭代器遍历集合，我们还可以使用for...of语句遍历集合。

• 遍历Array

对于Array，我们可以使用for...of语句遍历其中的元素。下面是一个例子：

const arr = [1, 2, 3];
for (const value of arr) {
console.log(value);
}

输出结果与前面使用迭代器遍历Array的例子相同。

• 遍历Map

对于Map，我们可以使用其entries()方法返回一个可迭代对象，用于遍历其中的键值对。下面是一个例子：

const map = new Map([
['foo', 1],
['bar', 2],
['baz', 3]
]);
for (const [key, value] of map.entries()) {
console.log(`${key}: ${value}`);
}

输出结果与前面使用迭代器遍历Map的例子相同。

• 遍历Set

对于Set，我们可以使用其values()方法返回一个可迭代对象，用于遍历其中的元素。下面是一个例子：

const set = new Set([1, 2, 3]);
for (const value of set.values()) {
console.log(value);
}

输出结果与前面使用迭代器遍历Set的例子相同。

总结

在JavaScript中，遍历集合可以使用迭代器和for...of语句。对于Array、Map和Set，我们都可以通过这两种方式快速地遍历其中的元素。在使用时，我们可以根据具体的需求选择适合的方式。