Menguasai JavaScript: Bahagian 3, Meneroka Gelung

Andaikan tugas anda ialah menulis program yang memaparkan nombor 1 hingga 100. Satu cara untuk mencapainya ialah dengan menulis 100 pernyataan console.log(). Tetapi saya pasti anda tidak akan melakukannya, kerana anda akan bosan dengan baris sembilan atau baris sepuluh. console.log() 语句。但我确信你不会，因为你会厌倦第九行或第十行。

每个语句中唯一改变的部分是数字，因此应该有一种方法只编写一个语句。还有循环。循环让我们在代码块中重复执行一组步骤。

• While 循环
• Do-While 循环
• For 循环
• 数组
• For-Of 循环
• For-In 循环

While 循环

当某些条件计算为 true 时，While 循环将重复执行一组语句。当条件为假时，程序将退出循环。这种循环在执行迭代之前测试条件。迭代是循环体的执行。这是 while 循环的基本示例：

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x -= 1;
}

console.log("Out of the loop.");

/* Outputs:
x is now 10
x is now 9
x is now 8
x is now 7
x is now 6
x is now 5
x is now 4
x is now 3
x is now 2
x is now 1
Out of the loop. */

在上面的示例中，我们首先将 x 设置为 10。在本例中，条件 x > 0 的计算结果为 true，因此执行块内的代码。这会打印语句“x is now 10”，并将 x 的值减 1。在下一次检查期间，x 等于 9，仍然大于 0。因此循环继续。在最后一次迭代中，x 最终变为 1，并且我们打印“x is now 1”。之后，x 变为 0，因此我们正在评估的条件不再成立 true。然后，我们开始执行循环外的语句并打印“Out of theloop”。

这是 while 循环的一般形式：

while (condition) {
    statement;
    statement;
    etc.
}

使用 while 循环时要记住的一件事是不要创建永无止境的循环。发生这种情况是因为条件永远不会变为 false。如果它发生在你身上，你的程序就会崩溃。这是一个例子：

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x += 1;
}

console.log("Out of the loop.");

在本例中，我们增加 x 而不是减少，并且 x 的值已经大于 0，因此循环将无限期地继续下去。

任务

这个循环体会被执行多少次？

let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

Do-While 循环

do-while 循环将首先执行语句主体，然后检查条件。当您知道要至少运行代码一次时，这种循环很有用。以下示例将记录 x 的值一次，即使条件计算结果为 false，因为 x 等于 0。

let x = 0;

do {
   console.log(`x is now ${x}`);
   x -= 1;
} while(x > 0);

console.log("Out of the loop.");

/* Outputs:
x is now 0
Out of the loop. */

我在自己的项目中多次使用 do-while 循环来生成随机值，然后只要它们不满足某些条件就继续生成它们。这有助于避免由于初始化和循环内重新分配而导致的重复。

这是 do-while 循环的一般形式：

do {
    statement;
    statement;
    etc.
} while (condition);

任务

编写一个 do-while 循环来显示数字 1 到 10。

For 循环

for 循环将重复执行代码块特定次数。以下示例显示数字 1 到 10：

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

这是 for 循环的一般形式：

for (initial; condition; step) {
    statement;
    statement;
    etc.
}

Initial 是一个设置变量值的表达式。这是执行初始化的可选表达式。

条件是一个表达式，必须为真才能执行语句。仅当条件计算结果为 true 时才会执行块内的语句。完全跳过条件将导致它们始终为真，因此您必须以其他方式退出循环。

step 是一个递增变量值的表达式。这也是可选的，并且在 for 块内的所有语句执行完毕后执行。步骤表达式通常用于接近循环的结束条件。

您还可以将 for 循环编写为等效的 while 循环。您所需要做的就是稍微改变您的陈述和条件。上面的 for 循环可以重写为：

initial;

while(condition) {
    statement;
    statement;
    etc.
    step;
}

一种编程模式是使用 for 循环用变量本身和新值来更新变量的值。此示例将数字 1 到 10 相加：

let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

// Outputs: 55
console.log(x);

这是等效的 while 循环，它给出相同的输出：

let x = 0;
let i = 1;

while(i <= 10) {
  x += i;
  i += 1;
}

// Outputs: 55
console.log(x);

您应该注意我是如何在 while 块的末尾而不是在开头进行增量的。在开始时增加循环变量 i 会给我们 65，这不是我们在这里打算做的。

+=

Satu-satunya bahagian yang berubah dalam setiap pernyataan ialah nombor, jadi perlu ada cara untuk menulis hanya satu pernyataan. Terdapat juga gelung. Gelung membolehkan kami mengulangi set langkah dalam blok kod. 🎜

• While loop
• Gelung Do-While
• Untuk gelung
• Array
• Gelung For-Of
• Gelung Untuk-Dalam

While loop

🎜A While Loop akan melaksanakan set pernyataan berulang kali apabila sesetengah keadaan dinilai kepada benar. Apabila syarat adalah palsu, atur cara keluar dari gelung. Gelung jenis ini menguji keadaan sebelum melaksanakan lelaran. Lelaran ialah pelaksanaan badan gelung. Berikut ialah contoh asas gelung sementara: 🎜

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

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

/*
Outputs:
1
2
Hello
World
*/

🎜Dalam contoh di atas, kami mula-mula menetapkan x kepada 10. Dalam contoh ini, syarat x > 0 dinilai kepada true, jadi kod dalam blok tersebut dilaksanakan. Ini mencetak pernyataan "x kini 10" dan mengurangkan nilai x dengan satu. Semasa semakan seterusnya, x bersamaan dengan 9, yang masih lebih besar daripada 0. Dan jadi kitaran berterusan. Pada lelaran terakhir, x akhirnya menjadi 1, dan kami mencetak "x kini 1". Selepas itu, x menjadi 0, jadi syarat yang kami nilai tidak lagi memegang true. Kemudian, kami mula melaksanakan penyata di luar gelung dan mencetak "Out of theloop". 🎜 🎜Ini ialah bentuk umum gelung sementara: 🎜

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

🎜Satu perkara yang perlu diingat apabila menggunakan gelung sambil adalah untuk tidak mencipta gelung yang tidak berkesudahan. Ini berlaku kerana syarat tidak pernah menjadi false. Jika ia berlaku kepada anda, program anda akan ranap. Berikut adalah contoh: 🎜

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
*/

🎜Dalam kes ini, kami meningkatkan x dan bukannya mengurangkannya, dan nilai x sudah lebih besar daripada 0, jadi gelung akan berterusan selama-lamanya. 🎜

Tugas

🎜Berapa kali gelung ini akan dilaksanakan? 🎜

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

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

/*
Outputs:
1
2
Hello
World
*/

Gelung Do-While

🎜Gelung do-while akan melaksanakan badan penyata dahulu dan kemudian menyemak keadaan. Gelung jenis ini berguna apabila anda tahu anda mahu menjalankan kod sekurang-kurangnya sekali. Contoh berikut mencatatkan nilai x sekali, walaupun syarat tersebut dinilai kepada false kerana x adalah sama dengan 0. 🎜

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
*/

🎜Saya telah menggunakan gelung do-while berkali-kali dalam projek saya sendiri untuk menjana nilai rawak dan kemudian terus menjananya selagi ia tidak memenuhi syarat tertentu. Ini membantu mengelakkan pertindihan disebabkan oleh permulaan dan pengagihan semula intra-gelung. 🎜 🎜Ini ialah bentuk umum gelung do-while: 🎜

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

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

/*
Outputs:
foo
bar
*/

Tugas

🎜Tulis gelung do-while untuk memaparkan nombor 1 hingga 10. 🎜

Untuk gelung

🎜Gelung for akan melaksanakan blok kod berulang kali dalam beberapa kali tertentu. Contoh berikut menunjukkan nombor 1 hingga 10: 🎜

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

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

/* Outputs:
1
2
hello
world */

🎜Ini ialah bentuk umum gelung untuk: 🎜 rrreee 🎜Awal ialah ungkapan yang menetapkan nilai pembolehubah. Ini ialah ungkapan pilihan yang melakukan pemulaan. 🎜 🎜Syarat ialah ungkapan yang mesti benar untuk melaksanakan pernyataan. Pernyataan dalam blok dilaksanakan hanya jika keadaan dinilai kepada true. Melangkau syarat sepenuhnya akan menyebabkannya sentiasa benar, jadi anda perlu keluar dari gelung dengan cara lain. 🎜 🎜langkah ialah ungkapan yang menambah nilai pembolehubah. Ini juga adalah pilihan dan dilaksanakan selepas semua pernyataan dalam blok for telah dilaksanakan. Ungkapan langkah sering digunakan berhampiran keadaan akhir gelung. 🎜 🎜Anda juga boleh menulis gelung for sebagai gelung while yang setara. Apa yang anda perlu lakukan ialah menukar sedikit kenyataan dan syarat anda. Gelung for di atas boleh ditulis semula sebagai: 🎜 rrreee 🎜Satu corak pengaturcaraan ialah menggunakan gelung for untuk mengemas kini nilai pembolehubah dengan kedua-dua pembolehubah itu sendiri dan nilai baharu. Contoh ini menambah nombor 1 hingga 10: 🎜 rrreee 🎜Ini ialah gelung while setara yang memberikan output yang sama: 🎜 rrreee 🎜Anda harus perhatikan cara saya menambah pada penghujung sekatan sementara dan bukannya pada permulaan. Meningkatkan pembolehubah gelung i pada mulanya akan memberi kita 65, yang bukan perkara yang kita ingin lakukan di sini. 🎜 Pengendali 🎜+= ialah pengendali tugasan yang menambah nilai kembali kepada pembolehubah. Berikut adalah senarai semua pengendali tugasan: 🎜

操作员	示例	等效
+=	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 库。

Atas ialah kandungan terperinci Menguasai JavaScript: Bahagian 3, Meneroka Gelung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!