scuba 报表

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

是否想了解JavaScript的for循环？ 这个动画的SCUBA潜水员可以提供帮助！ (Want to learn about JavaScript’s for loops? This animated SCUBA diver can help!)

For loops can be tough to follow if you are learning to code for the first time. This animated explanation should make it slightly easier.

如果您是第一次学习编码，那么可能很难遵循for循环。 这种生动的解释应该使其更容易些。

For loops are a fundamental part of pretty much every language used in web development. You learn about them in the first week of every computer science 101 class, and they will be a part of any introductory online course.

For循环是Web开发中使用的几乎所有语言的基本组成部分。 您将在每门计算机科学101课的第一周了解它们，并且它们将成为任何在线入门课程的一部分。

Even so, if JavaScript is your first coding language (like it was for me), the concept of a for loop can still feel a little mysterious. Sure, you might understand it in principle. But once you start layering other concepts on top — like arrays, objects, and more complicated math — you might find that you don’t understand them as clearly as you would like.

即使这样，如果JavaScript是您的第一种编码语言(就像对我一样)，for循环的概念仍然会让人感到有些神秘。 当然，您可能会原则上理解它。 但是，一旦您开始将其他概念(例如数组，对象和更复杂的数学)放在顶层，您可能会发现您对自己的理解不够清楚。

So, I wanted to create a crystal-clear explanation that will be lodged in your brain. When you are introduced to more complicated concepts, it will be easy to use them inside your for loops.

因此，我想创建一个清晰的解释，该解释将在您的大脑中提出。 在向您介绍更复杂的概念时，将很容易在for循环中使用它们。

那么什么是for循环？ (So what are for loops?)

If you aren’t already familiar, for loops allow you to take action on a list of elements without explicitly naming each element.

如果您还不熟悉，则for循环可让您对元素列表执行操作，而无需显式命名每个元素。

Say you have the following list of elements: 0,1,2,3,4. You would not want to manually plug each one into a function or access the index of an array. You would want to loop through them and automatically take the action for each element in the list. I will explain more in a moment.

假设您具有以下元素列表：0、1、2、3、4。 您不想手动将每个插入功能或访问数组的索引。 您可能想要遍历它们，并自动对列表中的每个元素执行操作。 我将在稍后解释更多。

为什么我需要for循环解释？ (Why the heck do I need a for loop explanation?)

Let’s look at a basic one.

让我们看一个基本的。

This would output:

这将输出：

01234

Here are the two problems that I see:

这是我看到的两个问题：

• What is the concept of i? It is used differently than other variables.

  i的概念是什么？ 与其他变量的用法不同。

• Where does the iteration happen? In other words, when does i increase?

  迭代在哪里发生？ 换句话说， 我什么时候增加？

We are going to look at for loops a different way. Imagine that you are a scuba diver, and you are planning a day-long trip to a new location. You are checking out a new reef, so you will probably want to take multiple trips to the bottom to make sure you see all the coral and marine life.

我们将以另一种方式查看for循环。 想象一下，您是一名潜水员，并且您计划一日游到新地点。 您正在检查一个新的礁石，因此您可能需要多次到达海底，以确保您看到所有的珊瑚和海洋生物。

准备潜水(初始化和条件) (Preparing for the dive (initialization and condition))

Before you start your dive, you need to determine how many oxygen tanks you will need over the course of the day.

在开始潜水之前，您需要确定一天中需要多少个氧气瓶。

let i= 0;

让我= 0;

This is the initialization. It tells you the value of the first oxygen tank. In this case, you start at tank 0.

这是初始化。 它 告诉您第一个氧气罐的价值。 在这种情况下，您将从油箱0开始。

i <; 5

我< ; 5

This is the condition. It is kind of like the capacity of the boat. You can only add as many oxygen tanks as your boat will hold.

这是条件 。 这有点像船的容量。 您只能添加与船只容纳的氧气罐数量相同的氧气罐。

设置氧气罐(更新) (Setting up oxygen tanks (update))

So far, we know that our first oxygen tank has a value of 0, and the last one must be less than 5. But how many tanks do you need to prepare?

到目前为止，我们知道我们的第一个氧气罐的值为0，而最后一个氧气罐的值必须小于5。但是，您需要准备多少个氧气罐？

The last part, called the update, tells us how many tanks we need to line up.

最后一部分称为更新 ，它告诉我们需要排队的坦克数量。

i++

我++

This is shorthand for: i = i+1

这是以下项的简写： i = i + 1

It means that every time we finish a loop, we will add 1 to i. Since i starts at 0, here is what that looks like.

这意味着每次完成循环时，我们都将i加1。 由于我从0开始，这就是它的样子。

We continue to add oxygen tanks until we hit the limit. When we add one tank at a time, the last value that fulfills the condition is 4.

我们继续添加氧气罐，直到达到极限。 一次添加一个储罐时，满足条件的最后一个值为4。

水肺潜水员进行第一次旅行(重复) (Scuba diver goes on first trip (iteration))

So far, we know the start value of i (0) and each value of i that fulfills the condition (0–4). We are all set up. Now, we need to bring in the scuba diver and execute the statements within the for loop.

到目前为止，我们知道i的初始值(0)和满足条件的每个i值(0–4)。 我们都准备好了。 现在，我们需要引入潜水员并在for循环内执行语句。

Imagine that we are running this loop:

假设我们正在运行以下循环：

So, your scuba diver starts at a value of 0.

因此，您的潜水员从0开始。

Do you see where we are going with this? Your scuba diver is actually i! And it is going to move through the contents of the for loop, and then come up for another tank.

您知道我们要怎么做吗？ 您的潜水员实际上是我 ！ 然后它将遍历for循环的内容，然后到达另一个槽。

Right now, the loop only has one statement. Here is what will happen on the first iteration.

现在，循环只有一个语句。 这是第一次迭代时将发生的情况。

The console would log: “The current value is 0” since i is 0. Your scuba diver carries the value of each oxygen tank as it moves through the array.

控制台将记录：由于i为0，因此“当前值为0”。您的潜水员携带每个氧气瓶在阵列中移动时的值。

游回(第二次迭代) (Swimming back up (second iteration))

Since this for loop only has one statement, you just completed the first iteration. Now, you need to run through it using the next value.

由于此for循环只有一个语句，因此您刚刚完成了第一次迭代。 现在，您需要使用下一个值运行它。

You will usually find that your for loops have many lines of code. But for the time being, we are just sticking to the one line so that you can trace the path of i.

通常，您会发现for循环有很多代码行。 但是暂时，我们只是坚持一条线，以便您可以跟踪i的路径。

Here’s what happens when you hit that last bracket: }.

当您碰到最后一个括号时，会发生以下情况：}。

The scuba diver drops the 0 tank and climbs the ladder back up to grab the second tank, with a value of 1. The scuba diver is doing some sort of weird solitary relay race, but hey, that is the nature of a for loop. You want it to be as quick as possible. Now, the diver is ready to go through the loop again with a value of 1.

水肺潜水员放下0罐，然后爬上梯子以抓住第二个水桶，值为1。水肺潜水员正在做某种怪异的单独接力赛，但是，这就是for循环的本质。 您希望它尽快。 现在，潜水员准备再次经过循环，值为1。

其余氧气罐(每次迭代) (The rest of the oxygen tanks (every iteration))

Now the diver needs to take each oxygen tank through the loop until they are all gone.

现在，潜水员需要将每个氧气瓶都通过回路，直到全部没了。

Each time, we will log a new statement to the console.

每次，我们都会在控制台中记录一条新语句。

The final output would be:

最终输出将是：

The current value is 0The current value is 1The current value is 2The current value is 3The current value is 4

By the end of the loop, i is equal to 4 and cannot go any higher due to the condition, so the loop is done. If you run the loop again, i will start at 0 again due to the initialization.

到循环结束时， i等于4并且由于condition不能再高一些，因此循环完成了。 如果再次运行循环，由于初始化 ， 我将再次从0开始。

Why aren’t there multiple scuba divers? Because there is only one i! There can only be one value of i going through the loop at any time. i needs to climb back up to the top to grab the next value.

为什么没有多个潜水员？ 因为只有一个我 ！ 只能有我在任何时候都会通过一个值。 我需要爬回顶部以获取下一个值。

改变条件 (Changing the conditions)

Let’s say that now, instead of counting up from 0 to 5, you want to count down every whole number from 10 to 2. How might you do that?

假设现在，您要从10到2倒数，而不是从0到5递增。

Since the start value is 10, you need to initialize i to 10.

由于起始值为10，因此需要将i 初始化为10。

let i= 10;

让我= 10;

Then, since you want the last number to be 2, you need to set a condition for all numbers greater than 1.

然后，由于您希望最后一个数字为2，因此需要为所有大于1的数字设置条件 。

i >; 1

我> ; 1个

And, instead of i++, we use i - -, which is equivalent to i= i-1.

而且，代替i ++，我们使用i-- ，它等效于i = i-1。

Full code:

完整代码：

for ( let i = 10; i > 1; i --){}

在数组旁边使用for循环 (Using for loops alongside arrays)

Before you read this section, you should understand arrays. If you have not studied them before, check out my guide here.

在阅读本节之前，您应该了解数组。 如果您以前没有学习过它们，请在此处查看我的指南 。

For loops are commonly used to iterate through arrays. Let’s say you have an array full of test scores.

For循环通常用于遍历数组。 假设您有一个充满考试分数的数组。

var testScores = [64, 86, 73, 82, 95, 62, 87, 99];

You want to log a message related to each score in the console. As you go through your loop, you need to be able to align the current value of i with the index of the array. Therefore, you need to make sure the for loop goes through every item in the array, no matter how many test scores are in it.

您要在控制台中记录一条与每个分数相关的消息。 遍历循环时，您需要能够将i的当前值与数组的索引对齐。 因此，无论其中有多少个测试分数，您都需要确保for循环遍历数组中的每个项目。

We can use the length property of the array to discover how many elements it contains. In this case, it is 8. Remember that arrays are also 0-indexed, meaning the first element of the array has an index of 0.

我们可以使用数组的length属性来发现它包含多少个元素。 在这种情况下，它是8。请记住，数组也是0索引的 ，这意味着数组的第一个元素的索引为0。

We initialize i to 0. We can actually use the testScores.length in the condition, so that it will work no matter how many elements are in the array.

我们将 i 初始化为0。我们实际上可以在条件中使用testScores.length，因此无论数组中有多少个元素，它都可以工作。

i< testScores.length

我<testScores.len gth

We can reference each item in the array by using i as the index.

我们可以通过使用i作为索引来引用数组中的每个项目。

testScores[i]

testScores [i]

Back to our scuba diver: It needs to takes as many trips as there are elements in the array. This is why it is so important for us to track i. In this example, the values of the tanks map to specific items in the array.

回到我们的水肺潜水员：它需要进行的行程与阵列中的元素数量一样多。 这就是为什么对我们追踪i如此重要的原因。 在此示例中，储罐的值映射到阵列中的特定项目。

The example above shows the third iteration of the loop, which will access the third element of the array at index 2. See how that can be tricky?

上面的示例显示了循环的第三次迭代，它将访问索引2处的数组的第三个元素。

Here is the final code for that:

这是最终的代码：

Did you enjoy this? Give it a clap so others can discover it as well. And, if you want to get notified when I release future tutorials that use analogies, sign up here:

你喜欢这个吗？ 给它鼓掌，以便其他人也可以发现它。 而且，如果您希望在以后发布使用类比的教程时得到通知，请在此处注册：

翻译自: https://www.freecodecamp.org/news/want-to-learn-about-javascripts-for-loops-this-animated-scuba-diver-can-help-76a038a09cc8/

scuba 报表