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:

這將輸出：

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:

你喜歡這個嗎？給它鼓掌，以便其他人也可以發現它。而且，如果您希望在以后發布使用類比的教程時得到通知，請在此處注冊：