JavaScript 마스터하기: 3부, 루프 탐색

당신의 임무가 1부터 100까지의 숫자를 표시하는 프로그램을 작성하는 것이라고 가정해 보겠습니다. 이를 달성하는 한 가지 방법은 100개의 console.log() 문을 작성하는 것입니다. 하지만 나는 당신이 그렇지 않을 것이라고 확신합니다. 왜냐하면 당신은 9번째 줄이나 10번째 줄에 싫증을 낼 것이기 때문입니다.

각 명세서에서 변경되는 부분은 숫자뿐이므로, 명세서를 하나만 작성하는 방법이 있어야 합니다. 루프도 있습니다. 루프를 사용하면 코드 블록 내에서 일련의 단계를 반복할 수 있습니다.

• While 루프
• Do-While 루프
• For 루프
• 배열
• For-Of 루프
• For-In 루프

While 루프

While 루프는 일부 조건이 true로 평가될 때 일련의 명령문을 반복적으로 실행합니다. 조건이 거짓이면 프로그램은 루프를 종료합니다. 이러한 종류의 루프는 반복을 실행하기 전에 조건을 테스트합니다. 반복은 루프 본문의 실행입니다. 다음은 while 루프의 기본 예입니다.

으아아아

위 예에서는 먼저 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 루프를 사용할 때 기억해야 할 한 가지는 끝없는 루프를 생성하지 않는다는 것입니다. 조건이 false가 되지 않기 때문에 이런 일이 발생합니다. 이런 일이 발생하면 프로그램이 중단됩니다. 예는 다음과 같습니다.

으아아아

이 경우 x 而不是减少，并且 x 값을 이미 0보다 큰 값으로 늘리므로 루프가 무한정 계속됩니다.

미션

이 루프는 몇 번 실행되나요?

으아아아

Do-While 루프

do-while 루프는 문 본문을 먼저 실행한 다음 조건을 확인합니다. 이러한 종류의 루프는 코드를 한 번 이상 실행하려는 경우에 유용합니다. 다음 예에서는 x가 0이기 때문에 조건이 x 的值一次，即使条件计算结果为 false，因为 x로 평가되더라도 x 값을 한 번 기록합니다.

으아아아

저는 내 프로젝트에서 do-while 루프를 여러 번 사용하여 임의의 값을 생성한 다음 특정 조건을 충족하지 않는 한 계속해서 생성했습니다. 이는 초기화 및 루프 내 재할당으로 인한 중복을 방지하는 데 도움이 됩니다.

다음은 do-while 루프의 일반적인 형태입니다.

으아아아

미션

1부터 10까지의 숫자를 표시하는 do-while 루프를 작성하세요.

For 루프

for 루프는 특정 횟수만큼 코드 블록을 반복합니다. 다음 예에서는 1부터 10까지의 숫자를 보여줍니다.

으아아아

for 루프의 일반적인 형태는 다음과 같습니다.

으아아아

Initial은 변수의 값을 설정하는 표현식입니다. 초기화를 수행하는 선택적 표현식입니다.

조건은 명령문을 실행하기 위해 참이어야 하는 표현식입니다. 블록 내의 명령문은 조건이 true로 평가되는 경우에만 실행됩니다. 조건을 완전히 건너뛰면 조건이 항상 true가 되므로 다른 방법으로 루프를 종료해야 합니다.

step은 변수의 값을 증가시키는 표현식입니다. 이 역시 선택 사항이며 for 블록 내의 모든 명령문이 실행된 후에 실행됩니다. 단계 표현식은 루프의 끝 조건 근처에서 자주 사용됩니다.

for 루프를 while 루프와 동일하게 작성할 수도 있습니다. 당신이 해야 할 일은 진술과 조건을 약간만 바꾸는 것뿐입니다. 위의 for 루프는 다음과 같이 다시 작성할 수 있습니다.

으아아아

한 가지 프로그래밍 패턴은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!