>웹 프론트엔드 >프런트엔드 Q&A >JavaScript에서 목록을 반복하는 방법

JavaScript에서 목록을 반복하는 방법

WBOY
WBOY원래의
2023-05-12 14:53:372074검색

JavaScript에서는 목록을 반복해야 하는 경우가 많습니다. 이 프로세스는 매우 일반적이며 프로그래밍의 필수 부분입니다. 이 기사에서는 독자가 이 중요한 기술을 더 잘 익힐 수 있도록 JavaScript에서 목록을 반복하는 방법을 소개합니다.

1. for 루프

for 루프는 JavaScript에서 가장 일반적으로 사용되는 루프 방법 중 하나입니다. 배열을 통한 루프와 같이 루프 수를 알 수 있는 상황에 적합합니다.

다음은 for 루프를 사용하여 배열을 순회하는 예입니다.

let arr = ['apple', 'banana', 'pear', 'orange'];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

위 코드에서는 arr 배열을 정의한 다음 for 루프를 사용하여 배열을 순회하고 인쇄합니다. 각 요소를 꺼냅니다. arr,然后使用for循环遍历数组并打印出每个元素。

二、forEach方法

除了使用for循环遍历数组,还可以使用JavaScript提供的forEach()方法来实现循环操作。

下面是一个使用forEach()方法遍历数组的例子:

let arr = ['apple', 'banana', 'pear', 'orange'];
arr.forEach(function(item) {
  console.log(item);
});

上面的代码中,我们定义了一个数组arr,然后使用forEach()方法遍历数组并打印出每个元素。forEach()方法需要传入一个回调函数,该函数会在遍历数组的每个元素时执行一次。

三、for...in循环

除了循环遍历数组,还有一些情况下需要遍历JavaScript对象。这时候,我们可以使用for...in循环来实现遍历操作。

下面是一个使用for...in循环遍历对象的例子:

let obj = {
  name: 'Tom',
  age: 20,
  gender: 'male'
};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

上面的代码中,我们定义了一个JavaScript对象obj,然后使用for...in循环遍历对象并打印出每个属性的键值对。

注意,for...in循环并不保证对象属性的遍历顺序,因此在实际应用中需要注意这一点。

四、while循环

JavaScript中的while循环可以在条件满足的情况下反复执行一段代码。相比于for循环,while循环更加灵活,适用于不确定循环次数的情况。

下面是一个使用while循环打印数字的例子:

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

上面的代码中,我们首先定义了变量i,然后使用while循环反复打印出i的值,直到i的值为10时跳出循环。

五、do...while循环

do...while循环与while循环类似,不过do...while循环会先执行一次循环体,然后再根据条件判断是否需要继续执行。

下面是一个使用do...while循环打印数字的例子:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

上面的代码中,我们定义了变量i,然后使用do...while循环打印出i的值。与while循环不同的是,在第一次循环时,i的值为0,不满足循环条件,但是由于是使用do...while

2. forEach 메서드

for 루프를 사용하여 배열을 순회하는 것 외에도 JavaScript에서 제공하는 forEach() 메서드를 사용하여 루프 작업을 구현할 수도 있습니다.

다음은 forEach() 메서드를 사용하여 배열을 순회하는 예입니다. 🎜rrreee🎜위 코드에서는 arr 배열을 정의한 후 forEach () 메소드는 배열을 반복하고 각 요소를 인쇄합니다. forEach() 메서드는 배열의 각 요소를 순회할 때 한 번 실행되는 콜백 함수를 전달해야 합니다. 🎜🎜3. for...in 루프🎜🎜배열을 통한 루프 외에도 JavaScript 객체를 순회해야 하는 상황도 있습니다. 이때 for...in 루프를 사용하여 순회 작업을 구현할 수 있습니다. 🎜🎜다음은 for...in을 사용하여 객체를 반복하는 예입니다. 🎜rrreee🎜위 코드에서는 JavaScript 객체 obj를 정의한 다음 for...in을 사용하여 객체를 반복하고 각 속성에 대한 키-값 쌍을 인쇄합니다. 🎜🎜for...in 루프는 객체 속성의 순회 순서를 보장하지 않으므로 실제 응용 프로그램에서는 이에 주의해야 합니다. 🎜🎜4. While 루프🎜🎜JavaScript의 while 루프는 조건이 충족되면 코드 조각을 반복적으로 실행할 수 있습니다. for 루프에 비해 while 루프는 더 유연하고 루프 수가 불확실한 상황에 적합합니다. 🎜🎜다음은 while 루프를 사용하여 숫자를 인쇄하는 예입니다. 🎜rrreee🎜위 코드에서는 먼저 변수 i를 정의한 다음 while 코드> 루프는 <code>i 값이 10이 되고 루프에서 벗어날 때까지 i 값을 반복적으로 인쇄합니다. 🎜🎜5. do...while 루프🎜🎜do...while 루프는 while 루프와 유사하지만 do...while 루프는 먼저 루프 본문을 한 번 실행한 다음 조건에 따라 계속 실행해야 하는지 여부를 결정합니다. 🎜🎜다음은 do...while 루프를 사용하여 숫자를 인쇄하는 예입니다. 🎜rrreee🎜위 코드에서는 변수 i를 정의한 다음 사용 do...while 루프는 i 값을 인쇄합니다. while 루프와 달리 첫 번째 루프에서는 i의 값이 0이므로 루프 조건을 충족하지 않습니다. 그러나 do... while 루프이므로 루프 본문이 적어도 한 번 실행됩니다. 🎜🎜요약🎜🎜JavaScript에서 루프 작업은 프로그래밍 프로세스의 필수 부분입니다. 이 문서에서는 for 루프, forEach 메서드, for...in 루프, while 루프 및 do... While 루프를 포함하여 일반적으로 사용되는 루프 메서드를 소개합니다. , 독자는 실제 필요에 따라 자신의 코드 논리를 구현하기 위해 다양한 루프 방법을 선택할 수 있습니다. 🎜

위 내용은 JavaScript에서 목록을 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.