JavaScript - 可迭代对象

你好，有抱负的程序设计师们！今天，我们将踏上一段令人兴奋的旅程，探索JavaScript可迭代对象的世界。作为你友好的计算机科学老师，我将引导你一步一步地完成这次冒险。所以，拿起你的虚拟背包，让我们一起开始吧！

JavaScript - Iterables

什么是可迭代对象？

在我们深入了解之前，让我们先了解一下什么是可迭代对象。在JavaScript中，可迭代对象是一个可以被“迭代”的对象。换句话说，它就像是一系列你可以逐个遍历的项。把它想象成一个装满宝贝的宝箱，你可以一件一件地探索。

JavaScript中常见的可迭代对象示例包括数组、字符串和映射。这些就像不同类型的宝箱，每个都有自己的独特特性。

使用for...of循环迭代

现在，让我们学习第一种探索这些宝箱的方法：for...of循环。这就像拥有一个魔法钥匙，可以一次打开我们宝箱的一个隔间。

示例 1：遍历数组

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
console.log(fruit);
}

在这个例子中，我们有一个水果数组（我们的宝箱）。for...of循环逐个遍历每个水果，并将其打印出来。当你运行这段代码时，你将看到：

apple
banana
orange

就像我们从宝箱中取出每个水果并欣赏它们一样！

示例 2：遍历字符串

字符串也是可迭代的。让我们看看如何探索它们：

const message = "Hello";

for (const character of message) {
console.log(character);
}

这段代码将输出：

H
e
l
l
o

我们字符串中的每个字符就像是我们仔细检查的小宝藏。

使用forEach()方法迭代

现在，让我们学习另一种探索宝藏的方法：forEach()方法。这就像有一个乐于助人的助手，他会遍历我们的宝箱并展示每一项。

示例 3：在数组中使用forEach()

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
console.log(number * 2);
});

这段代码将输出：

在这里，我们的助手（forEach()方法）不仅展示了每个数字，还为我们将其翻倍！

示例 4：在集合中使用forEach()

集合是JavaScript中的另一种可迭代类型。让我们看看如何与它们一起使用forEach()：

const uniqueColors = new Set(['red', 'blue', 'green']);

uniqueColors.forEach(function(color) {
console.log(`Color: ${color}`);
});

输出：

Color: red
Color: blue
Color: green

我们的助手现在正在展示我们颜色集合中的每个唯一颜色。

使用map()方法迭代

最后但并非最不重要的是，让我们了解一下map()方法。这就像拥有一个魔法棒，当我们在宝箱中遍历时，可以转换每一项。

示例 5：转换数组元素

const prices = [10, 20, 30, 40, 50];

const discountedPrices = prices.map(function(price) {
return price * 0.9;  // 10%折扣
});

console.log(discountedPrices);

输出：

[9, 18, 27, 36, 45]

在这里，我们的魔法棒（map()方法）正在将我们列表中的每个价格减少10%。

示例 6：从现有数据创建新数组

const names = ['Alice', 'Bob', 'Charlie'];

const greetings = names.map(function(name) {
return `Hello, ${name}!`;
});

console.log(greetings);

输出：

['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

我们的魔法棒已经将每个名字转换成了友好的问候！

迭代方法的总结

以下是我们在本文中学到的方法的便捷表格总结：

方法	描述	用例
`for...of`	遍历可迭代对象	当你需要每个值进行简单迭代时
`forEach()`	对数组的每个元素执行一个函数	当你想对每个项目执行操作时
`map()`	创建一个新数组，其结果是调用一个函数对每个元素的结果	当你想转换数组中的每个项目时

记住，这些方法就像你编程工具箱中的不同工具。随着经验的积累，你会学会在最佳情况下使用每一个。

总之，JavaScript中的可迭代对象是强大的构造，允许我们有效地处理数据集合。无论你是使用for...of循环、forEach()还是map()，你现在都有能力像真正的编程巫师一样探索和操作你的数据！

继续练习，很快你就能轻松施展复杂的代码咒语了。快乐编程，我的年轻学徒们！

Credits: Image by storyset