Loops offer a quick and easy way to do something repeatedly. This chapter of the JavaScript 指南 introduces the different iteration statements available to JavaScript.
You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea "Go five steps to the east" could be expressed this way as a loop:
for (let step = 0; step < 5; step++) {
// Runs 5 times, with values of step 0 through 4.
console.log('Walking east one step');
}
There are many different kinds of loops, but they all essentially do the same thing: they repeat an action some number of times. (Note that it's possible that number could be zero!)
The various loop mechanisms offer different ways to determine the start and end points of the loop. There are various situations that are more easily served by one type of loop over the others.
The statements for loops provided in JavaScript are:
for
statement
A
for
loop repeats until a specified condition evaluates to
false
. The JavaScript
for
loop is similar to the Java and C
for
loop.
A
for
statement looks as follows:
for ([initialExpression]; [conditionExpression]; [incrementExpression]) statement
当
for
loop executes, the following occurs:
initialExpression
, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
conditionExpression
expression is evaluated. If the value of
conditionExpression
is true, the loop statements execute. If the value of
condition
is false, the
for
loop terminates. (If the
condition
expression is omitted entirely, the condition is assumed to be true.)
statement
executes. To execute multiple statements, use a block statement (
{ ... }
) to group those statements.
incrementExpression
is executed.
In the example below, the function contains a
for
statement that counts the number of selected options in a scrolling list (a
<select>
element that allows multiple selections). The
for
statement declares the variable
i
and initializes it to
0
. It checks that
i
is less than the number of options in the
<select>
element, performs the succeeding
if
statement, and increments
i
by after each pass through the loop.
<form name="selectForm">
<p>
<label for="musicTypes">Choose some music types, then click the button below:</label>
<select id="musicTypes" name="musicTypes" multiple="multiple">
<option selected="selected">R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
</p>
<p><input id="btn" type="button" value="How many are selected?" /></p>
</form>
<script>
function howMany(selectObject) {
let numberSelected = 0;
for (let i = 0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected) {
numberSelected++;
}
}
return numberSelected;
}
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
});
</script>
do...while
statement
do...while
statement repeats until a specified condition evaluates to false.
A
do...while
statement looks as follows:
do statement while (condition);
statement
is always executed once before the condition is checked. (To execute multiple statements, use a block statement (
{ ... }
) to group those statements.)
若
condition
is
true
, the statement executes again. At the end of every execution, the condition is checked. When the condition is
false
, execution stops, and control passes to the statement following
do...while
.
In the following example, the
do
loop iterates at least once and reiterates until
i
is no longer less than
5
.
let i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
while
statement
A
while
statement executes its statements as long as a specified condition evaluates to
true
. A
while
statement looks as follows:
while (condition) statement
若
condition
becomes
false
,
statement
within the loop stops executing and control passes to the statement following the loop.
The condition test occurs
before
statement
in the loop is executed. If the condition returns
true
,
statement
is executed and the
condition
is tested again. If the condition returns
false
, execution stops, and control is passed to the statement following
while
.
To execute multiple statements, use a block statement (
{ ... }
) to group those statements.
下列
while
loop iterates as long as
n
is less than
3
:
let n = 0;
let x = 0;
while (n < 3) {
n++;
x += n;
}
With each iteration, the loop increments
n
and adds that value to
x
. Therefore,
x
and
n
take on the following values:
n
=
1
and
x
=
1
n
=
2
and
x
=
3
n
=
3
and
x
=
6
After completing the third pass, the condition
n < 3
is no longer
true
, so the loop terminates.
Avoid infinite loops. Make sure the condition in a loop eventually becomes
false
—otherwise, the loop will never terminate! The statements in the following
while
loop execute forever because the condition never becomes
false
:
// Infinite loops are bad!
while (true) {
console.log('Hello, world!');
}
labeled
statement
A
label
provides a statement with an identifier that lets you refer to it elsewhere in your program. For example, you can use a label to identify a loop, and then use the
break
or
continue
statements to indicate whether a program should interrupt the loop or continue its execution.
The syntax of the labeled statement looks like the following:
label : statement
值
label
may be any JavaScript identifier that is not a reserved word. The
statement
that you identify with a label may be any statement.
In this example, the label
markLoop
identifies a
while
loop.
markLoop:
while (theMark === true) {
doSomething();
}
break
statement
使用
break
statement to terminate a loop,
switch
, or in conjunction with a labeled statement.
break
without a label, it terminates the innermost enclosing
while
,
do-while
,
for
，或
switch
immediately and transfers control to the following statement.
break
with a label, it terminates the specified labeled statement.
The syntax of the
break
statement looks like this:
break; break [label];
switch.
The following example iterates through the elements in an array until it finds the index of an element whose value is
theValue
:
for (let i = 0; i < a.length; i++) {
if (a[i] === theValue) {
break;
}
}
let x = 0;
let z = 0;
labelCancelLoops: while (true) {
console.log('Outer loops: ' + x);
x += 1;
z = 1;
while (true) {
console.log('Inner loops: ' + z);
z += 1;
if (z === 10 && x === 10) {
break labelCancelLoops;
} else if (z === 10) {
break;
}
}
}
continue
statement
continue
statement can be used to restart a
while
,
do-while
,
for
，或
label
语句。
continue
without a label, it terminates the current iteration of the innermost enclosing
while
,
do-while
，或
for
statement and continues execution of the loop with the next iteration. In contrast to the
break
statement,
continue
does not terminate the execution of the loop entirely. In a
while
loop, it jumps back to the condition. In a
for
loop, it jumps to the
increment-expression
.
continue
with a label, it applies to the looping statement identified with that label.
The syntax of the
continue
statement looks like the following:
continue [label];
The following example shows a
while
loop with a
continue
statement that executes when the value of
i
is
3
. Thus,
n
takes on the values
1
,
3
,
7
，和
12
.
let i = 0;
let n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
console.log(n);
}
//1,3,7,12
let i = 0;
let n = 0;
while (i < 5) {
i++;
if (i === 3) {
// continue;
}
n += i;
console.log(n);
}
// 1,3,6,10,15
A statement labeled
checkiandj
contains a statement labeled
checkj
。若
continue
is encountered, the program terminates the current iteration of
checkj
and begins the next iteration. Each time
continue
is encountered,
checkj
reiterates until its condition returns
false
。当
false
is returned, the remainder of the
checkiandj
statement is completed, and
checkiandj
reiterates until its condition returns
false
。当
false
is returned, the program continues at the statement following
checkiandj
.
若
continue
had a label of
checkiandj
, the program would continue at the top of the
checkiandj
语句。
let i = 0;
let j = 10;
checkiandj:
while (i < 4) {
console.log(i);
i += 1;
checkj:
while (j > 4) {
console.log(j);
j -= 1;
if ((j % 2) === 0) {
continue checkj;
}
console.log(j + ' is odd.');
}
console.log('i = ' + i);
console.log('j = ' + j);
}
for...in
statement
for...in
statement iterates a specified variable over all the enumerable properties of an object. For each distinct property, JavaScript executes the specified statements. A
for...in
statement looks as follows:
for (variable in object) statement
The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.
function dump_props(obj, obj_name) {
let result = '';
for (let i in obj) {
result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
}
result += '<hr>';
return result;
}
For an object
car
with properties
make
and
model
,
result
would be:
car.make = Ford car.model = Mustang
Although it may be tempting to use this as a way to iterate over
Array
elements, the
for...in
statement will return the name of your user-defined properties in addition to the numeric indexes.
Therefore, it is better to use a traditional
for
loop with a numeric index when iterating over arrays, because the
for...in
statement iterates over user-defined properties in addition to the array elements, if you modify the Array object (such as adding custom properties or methods).
for...of
statement
for...of
statement creates a loop Iterating over
iterable objects
(including
Array
,
Map
,
Set
,
arguments
object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
for (variable of object) statement
The following example shows the difference between a
for...of
loop and a
for...in
loop. While
for...in
iterates over property names,
for...of
iterates over property values:
const arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // logs 3, 5, 7
}