by Zell Liew

由Zell Liew

JavaScript Essentials：如何为循环而烦恼 (JavaScript Essentials: how to wrap your head around for loops)

Let’s say you want to run a function, bounceBall, four times. How would you do it? Like this?

假设您要运行一次功能bounceBall四次。你会怎么做？像这样？

function bounceBall() {   // bounce the ball here }

bounceBall() bounceBall() bounceBall() bounceBall()

This approach is great if you need to bounceBall only for a few times. What happens if you need to bounceBall for a hundred times?

如果只需要bounceBall则此方法非常bounceBall 。如果您需要bounceBall一百次球怎么办？

The better way is through a for loop.

更好的方法是通过for循环。

“ for”循环 (The ‘for’ loop)

The for loop runs a block of code as many times as you want to. Here’s a for loop that runs bounceBall ten times:

for循环可以运行一块代码多次。这是一个运行bounceBall十次的for循环：

for (let i = 0; i < 10; i++) {   bounceBall() }

It’s broken down into four parts — the initialExpression, the condition, the incrementalExpression , and the statement:

它分为四个部分initialExpression ， condition ， incrementalExpression和statement ：

for (initialExpression; condition; incrementExpression) {   statement }

Before you loop, you need to have a statement. This statement is the block of code you’d like to run multiple times. You can write any number of lines of code here. You can even use functions.

在循环之前，您需要有一条声明。该语句是您希望多次运行的代码块。您可以在此处编写任意多行代码。您甚至可以使用功能。

Here’s what the for loop looks like with bounceBall as its statement:

这是使用bounceBall作为语句的for循环的样子：

for (initialExpression; condition; incrementExpression) {     bounceBall() }

Next, you need an initial expression to begin a loop. This is where you declare a variable. For most loops, this variable is called i. It’s also set to 0.

接下来，您需要一个初始表达式来开始循环。在这里声明变量。对于大多数循环，此变量称为i 。也设置为0。

Here’s how it’ll look like when you put the initialExpression into the for loop:

当您将initialExpression放入for循环时，它的外观如下：

for (let i = 0; condition; incrementExpression) {   bounceBall() }

After the statement runs, the variable, i is increased or decreased. You increase or decrease the value of i in the increment expression.

语句运行后，变量i增大或减小。您可以在增量表达式中增加或减少i的值。

To increase the value of i by one, you reassign i such that it becomes i + 1 with i = i + 1. The shorthand for this reassignment is i++, which is what you’ll find in most for loops.

若要将i的值增加1，请重新分配i ，使其在i = i + 1时变为i + 1 。这种重新分配的简写是i++ ，这是您在大多数for循环中都可以找到的。

To decrease the value of i by one, you reassign i such that it becomes i - 1 with i = i - 1. The shorthand for this reassignment is i--, which is another variation of what you’ll find in most for loops.

要减小的值i被一个，重新分配i使得它成为i - 1与i = i - 1 。这种重新分配的简写是i-- ，这是您在大多数for循环中会发现的另一种变体。

In the bounceBall example above, we increased the variable i by one each time the code runs:

在上面的bounceBall示例中，每次代码运行时，我们将变量i增加一：

for (let i = 0; condition; i++) {   bounceBall() }

But should you increase or decrease i?

但是你应该增加还是减少i呢？

The answer lies in the condition. This condition statement evaluates either to true or false. If the statement evaluates to true, the statement runs.

答案在于条件。此条件语句的计算结果为true或false 。如果该语句的值为true ，则该语句运行。

When the statement has ran, JavaScript runs the increment expression and checks if the condition evaluates to true again. It repeats this process until the condition evaluates to false.

语句运行后，JavaScript运行增量表达式并检查条件是否再次为true 。重复此过程，直到条件评估为false为止。

Once the condition evaluates to false, JavaScript skips the loop and moves on with the rest of your code.

一旦条件评估为false ，JavaScript将跳过循环，并继续处理其余代码。

So, if you do not want the loop to run, you can set a condition that evaluates to false immediately:

因此，如果您不希望循环运行，则可以设置一个条件，该条件的值立即为false：

// This loop will not run since the condition evaluates to false for (let i = 0; i < 0; i++) {   bounceBall()   const timesBounced = i + 1   console.log('The ball has bounced ' + timesBounced + ' times') }

// You will only see this console.log('next line of code')

If you want the loop to run twice, you change the condition such that it evaluates to false when the increment expression has run twice.

如果希望循环运行两次 ，则可以更改条件，以使增量表达式运行两次时其结果为false。

// This loop will run twice for (let i = 0; i < 2; i++) {   bounceBall()   const timesBounced = i + 1   console.log('The ball has bounced ' + timesBounced + ' times')") }

console.log('next line of code')

If you want the loop to run ten times, you change the condition such that it evaluates to false when the increment expression has run ten times.

如果希望循环运行十次 ，请更改条件，以使增量表达式运行十次后其结果为false。

// This loop will run ten times for (let i = 0; i < 10; i++) {   bounceBall()   const timesBounced = i + 1   console.log('The ball has bounced ' + timesBounced + ' times')") }

console.log('next line of code')

无限循环 (Infinite loops)

Infinite loops occur when the condition for your for loops always return true. Your browser will hang if you run an infinite loop.

当for循环的条件始终返回true时，将发生无限循环。如果运行无限循环，浏览器将挂起。

To recover from an infinite loop, you need to quit your browser forcefully. On a Mac, this means you right click on your browser icon and select “force quit.” On a Window’s machine, you open the Windows Task manager with ctrl + alt + del, select your browser, and click “End task.”

要从无限循环中恢复，您需要强行退出浏览器。在Mac上，这意味着您右键单击浏览器图标，然后选择“强制退出”。在Windows的计算机上，使用ctrl + alt + del打开Windows任务管理器，选择浏览器，然后单击“结束任务”。

遍历数组 (Looping through arrays)

In practice, you almost never write a loop that runs ten times like in the bounceBall example above. You’d always loop through an array or a object.

实际上，您几乎从不会编写像上面的bounceBall示例中那样运行十次的循环。您将始终遍历数组或对象。

When you loop (or iterate) through an array, you go through each item in the array once. To do so, you can use the length or the array as a condition:

当您遍历(或迭代)数组时，将遍历数组中的每一项。为此，可以使用长度或数组作为条件：

const fruitBasket = ['banana', 'pear', 'guava']

// fruitBasket.length is 3 for (let i = 0; i < fruitBasket.length; i++) {   console.log("There's a " + fruitBasket[i] + " in the basket") }

// => There's a banana in the basket // => There's a pear in the basket // => There's a guava in the basket

The alternate way to write this for loop is to use a negative increment expression. This version runs slightly faster than the for loop above, but loops the array from the end instead.

编写此for循环的另一种方法是使用负增量表达式。该版本比上面的for循环运行速度稍快，但是从末尾开始循环数组。

for (let i = fruitBasket.length - 1; i >= 0; i--) {  console.log("There's a " + fruitBasket[i] + " in the basket") }

// => There's a guava in the basket // => There's a pear in the basket // => There's a banana in the basket

用“ for of”遍历数组 (Looping through arrays with “for of”)

Yet another (much better) way to loop through an array is to use a for...of loop. This is a new loop syntax that comes with ES6. It looks like this:

循环遍历数组的另一种方法(更好)是使用for...of循环。这是ES6随附的新循环语法。看起来像这样：

const fruitBasket = ['banana', 'pear', 'guava']

for (let fruit of fruitBasket) {   console.log(fruit) }

// => There's a banana in the basket // => There's a pear in the basket // => There's a guava in the basket

The for...of loop is preferable to the standard for loop because it always loops through the array once. There’s no need to write array.length, which makes your code much easier to read and maintain.

for...of循环优于标准的for循环，因为它总是循环遍历数组一次。无需编写array.length ，这使您的代码更易于阅读和维护。

You can use for...of with any iterable object. These are objects that contain the Symbol.iterator property. Arrays are one such object. If you console.log an empty array, you’ll see that it has the Symbol.iterator as one of its keys (within the Array __proto__ key):

您可以将for...of用于任何可迭代的对象。这些是包含Symbol.iterator属性的对象。数组就是这样一种对象。如果console.log一个空数组，您将看到它具有Symbol.iterator作为其键之一(在Array __proto__键内)：

循环逻辑 (Logic in loops)

You can use if/else or any other logic within a for loop.

您可以在循环中使用if/else或任何其他逻辑。

For example, let’s say you have a list of numbers, and you want to create a second list of numbers that are smaller that 20.

例如，假设您有一个数字列表，并且想创建第二个小于20的数字列表。

To complete this objective, you first loop through the numbers.

为了完成这个目标，您首先要遍历数字。

const numbers = [25, 22, 12, 56, 8, 18, 34]

for (let num of numbers) {   // do something here }

Here, you want to check if each num is smaller than 20.

在这里，您要检查每个num是否小于20。

const numbers = [25, 22, 12, 56, 8, 18, 34]

for (let num of numbers) {   if (num < 20) {     // do something   } }

If num is smaller than 20, you want to add it to another array. To do so, you use the push method.

如果num小于20，则要将其添加到另一个数组中。为此，您可以使用push方法。

const numbers = [25, 22, 12, 56, 8, 18, 34]let smallerThan20 = []

for (let num of numbers) {   if (num < 20) {     smallerThan20.push(num)   } }

// smallerThan20 === [12, 8 , 18]

结语 (Wrapping up)

A for loop is used when you want to execute the same task (or a set of tasks) multiple times.

如果要多次执行同一任务(或一组任务)，则使用for循环。

You would rarely loop through code for exactly ten times. Normally, you’ll want to loop through an array instead.

您很少会遍历代码十次。通常，您将需要遍历数组。

To loop through an array exactly once, you can use the for...of loop, which is much easier to write and understand compared to the traditional for loop.

要只遍历一次数组，可以使用for...of循环，与传统的for循环相比，它易于编写和理解。

Remember, you can write any amount of logic you want in loops. You can use functions, if/else statements, or even use loops in loops.

请记住，您可以在循环中编写任意数量的逻辑。您可以使用函数， if/else语句，甚至可以在循环中使用循环。

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with Javascript. Click here to find out more about Learn JavaScript if you’re interested.

如果您喜欢这篇文章，那么您会喜欢学习JavaScript ，这是一门可以帮助您从头开始使用Javascript 构建实际组件的课程。如果您有兴趣，请单击此处以了解有关学习JavaScript的更多信息。

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. ?)

(哦，顺便说一句，如果您喜欢这篇文章，如果可以分享的话，不胜感激。)

Originally published at zellwk.com.

最初在zellwk.com上发布。