JavaScript をマスターする: パート 3、ループを探索する

1 から 100 までの数字を表示するプログラムを作成する任務を与えられているとします。これを達成する 1 つの方法は、100 個の console.log() ステートメントを作成することです。でも、9 行目や 10 行目では飽きてしまうので、きっとそうしないでしょう。

各ステートメントで変更される唯一の部分は数値であるため、ステートメントを 1 つだけ記述する方法があるはずです。ループもあります。ループを使用すると、コード ブロック内の一連のステップを繰り返すことができます。

• while ループ
• Do-while ループ
• For ループ
＃＃＃＃＃＃配列＃＃＃＃＃＃
• For-Of ループ
• For-In ループ
• while ループ
A While ループは、何らかの条件が true と評価されると、一連のステートメントを繰り返し実行します。条件が false の場合、プログラムはループを終了します。この種のループは、反復を実行する前に条件をテストします。反復とは、ループ本体の実行です。 while ループの基本的な例を次に示します:

リーリー

上記の例では、まず

x

を 10 に設定します。この例では、条件

x > 0

は true と評価されるため、ブロック内のコードが実行されます。これにより、「x は現在 10 です」というステートメントが出力され、x の値が 1 ずつ減分されます。次のチェックでは、#xx は 9 に等しくなりますが、これはまだ 0 より大きくなります。そしてそのサイクルが続きます。最後の反復では、#xx は 1 になり、「x は 1 になりました」と出力されます。その後、#xx は 0 になるため、評価している条件は true を保持しなくなります。次に、ループの外でステートメントの実行を開始し、「Out of theloop」を出力します。 これは while ループの一般的な形式です: リーリー while ループを使用するときに覚えておくべきことの 1 つは、終わりのないループを作成しないことです。これは、条件が false にならないために発生します。そうなった場合、プログラムはクラッシュしてしまいます。以下に例を示します: リーリー

この場合、

x

を減少させるのではなく増加させており、

x の値はすでに 0 より大きいため、ループは無限に継続します。 ＃＃＃タスク＃＃＃

このループは何回実行されますか?

リーリー Do-while ループ do-while ループは、最初にステートメント本体を実行し、次に条件をチェックします。この種のループは、コードを少なくとも 1 回実行する必要があることがわかっている場合に便利です。次の例では、x

が 0 に等しいため、条件が

false

と評価される場合でも、

x

の値を 1 回ログに記録します。

リーリー

私は自分のプロジェクトで do-while ループを何度も使用してランダムな値を生成し、特定の条件を満たさない限りそれらの値を生成し続けました。これは、初期化とループ内再割り当てによる重複を回避するのに役立ちます。

これは do-while ループの一般的な形式です: リーリー ＃＃＃タスク＃＃＃ 1 から 10 までの数字を表示する do-while ループを作成します。 For ループ

for ループは、コードのブロックを特定の回数繰り返します。次の例は、1 ～ 10 の数字を示しています。 リーリー

これは for ループの一般的な形式です:

リーリー

Initial

は、変数の値を設定する式です。これは初期化を実行するオプションの式です。

条件

は、ステートメントを実行するために true でなければならない式です。ブロック内のステートメントは、条件が

true

と評価された場合にのみ実行されます。条件を完全にスキップすると、条件は常に true になるため、別の方法でループを終了する必要があります。

step

は、変数の値をインクリメントする式です。これもオプションであり、for ブロック内のすべてのステートメントが実行された後に実行されます。ステップ式は、ループの終了条件近くでよく使用されます。 for ループを同等の while ループとして作成することもできます。必要なのは、発言と条件を少し変更することだけです。上記の for ループは次のように書き換えることができます:

リーリー

プログラミング パターンの 1 つは、for ループを使用して、変数自体と新しい値で変数の値を更新することです。この例では、1 から 10 までの数字を加算します: リーリー これは、同じ出力を与える同等の while ループです: リーリー while ブロックの先頭ではなく、最後にインクリメントしていることに注目してください。最初にループ変数

i

を増やすと 65 になりますが、これはここで行うつもりではありません。

=

演算子は、値を変数に加算して戻す代入演算子です。すべての代入演算子のリストは次のとおりです:

操作员	示例	等效
+=	x += 2	x = x + 2
-=	x -= 2	x = x - 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2
%=	x%=2	x = x % 2

任务

编写一个 for 循环来计算数字的阶乘。数字n的因子是从1到n的所有整数的乘积。例如，4！ （4 阶乘）为 1 x 2 x 3 x 4，等于 24。

数组

数组是一个包含项目列表的对象，这些项目称为元素，可以通过索引进行访问。索引是元素在数组中的位置。第一个元素位于索引 0 处。

数组有一个名为 length 的属性，它为您提供数组中元素的总数。这意味着您可以创建一个 for 循环来迭代数组中的项目，如下所示：

let arr = [1, 2, "Hello", "World"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

/*
Outputs:
1
2
Hello
World
*/

二维数组是指元素为数组的数组。例如：

let arr = [
    [1, 2],
    ["Hello", "World"]
];

这是循环数组并显示每个元素的方式：

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
        console.log(arr[ i ][ j ]);
    }
}

/*
Outputs:
1
2
Hello
World
*/

您将如何重写上面的循环，以便从末尾开始打印数组元素？

For-Of 循环

迭代数组时最常见的场景之一是从头开始，然后一次遍历所有元素，直到到达末尾。有一种更短的方法可以将 for 循环编写为 for-of 循​​环。

for-of 循​​环让我们可以循环遍历可迭代对象（例如数组、映射和字符串）的值。 for-of 循​​环基本上用于迭代对象的属性值。这是上一节中的循环，重写为 for-of 循​​环。

let arr = [1, 2, "Hello", "World"];

for (let item of arr) {
    console.log(item);
}

/*
Outputs:
1
2
Hello
World
*/

循环字符串：

let big_word = "Pulchritudinous";

for (let char of big_word) {
    console.log(char);
}

/*
Outputs:
P
u
l
c
h
r
i
t
u
d
i
n
o
u
s
*/

For-In 循环

这种循环让我们可以循环访问对象的属性。对象是一种将键映射到值的数据结构。 JavaScript 中的数组也是对象，因此我们也可以使用 for-in 循环来循环数组属性。我们首先看看如何使用 for-in 循环来迭代对象键或属性。

以下是使用 for-in 循环遍历对象键的示例：

let obj = {
    foo: "Hello",
    bar: "World"
};

for (let key in obj) {
    console.log(key);
}

/*
Outputs:
foo
bar
*/

下面是使用 for-in 循环遍历数组的示例：

let arr = [1, 2, "hello", "world"];

for (let key in arr) {
    console.log(arr[key]);
}

/* Outputs:
1
2
hello
world */

我想补充一点，即使我们能够使用 for-in 循环遍历数组元素，您也应该避免这样做。这是因为它的目的是循环访问对象的属性，如果您只想循环数组索引来获取数组值，则在某些情况下可能会得到意外的结果。

评论

循环让我们减少代码中的重复。 While 循环让我们重复一个动作，直到条件为假。 do-while 循环将至少执行一次。 For 循环让我们重复一个动作，直到到达计数结束。 for-in 循环的设计是为了让我们可以访问对象中的键。 for-of 循​​环的设计是为了让我们能够获取可迭代对象的值。

在下一部分中，您将学习函数。

本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员，他也喜欢编写教程和学习新的 JavaScript 库。

以上がJavaScript をマスターする: パート 3、ループを探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。