Método 1: Usar el método forEach(): El método forEach() se usa para ejecutar código para cada elemento de la array recorriendo cada uno de ellos.
Sintaxis:
array.forEach( arrayElement => {
// lines of code to execute
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to use loop through an
array in JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to use loop through an
array in JavaScript?
</b>
<p>
Looping through the array: ['Item 1',
'Item 2', 'Item 3', 'Item 4', 'Item 5']
</p>
<p>Output: <div class="output"></div></p>
<button onclick="loopArray()">
Click to check
</button>
<script type="text/javascript">
function loopArray() {
list = ['Item 1', 'Item 2', 'Item 3',
'Item 4', 'Item 5'];
list.forEach(element => {
document.querySelector('.output').innerHTML
+= '<li>' + element + '</li>';
});
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Uso de la declaración for…of: La declaración for…of se puede usar para recorrer objetos iterables y realizar las funciones requeridas. Los objetos iterables incluyen arrays, strings y otros objetos similares a arrays.
Sintaxis:
for (arrayElement of array) {
// lines of code to execute
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to use loop through an
array in JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to use loop through an
array in JavaScript?
</b>
<p>
Looping through the array: ['Item 1',
'Item 2', 'Item 3', 'Item 4', 'Item 5']
</p>
<p>Output: <div class="output"></div></p>
<button onclick="loopArray()">
Click to check
</button>
<script type="text/javascript">
function loopArray() {
list = ['Item 1', 'Item 2', 'Item 3',
'Item 4', 'Item 5'];
for (element of list) {
document.querySelector('.output').innerHTML
+= '<li>' + element + '</li>';
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 3: Usar el bucle for básico: el bucle for predeterminado se puede usar para iterar a través de la array y se puede acceder a cada elemento por su índice respectivo.
Sintaxis:
for (i = 0; i < list.length; i++) {
// lines of code to execute
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to use loop through an
array in JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to use loop through an
array in JavaScript?
</b>
<p>
Looping through the array: ['Item 1',
'Item 2', 'Item 3', 'Item 4', 'Item 5']
</p>
<p>Output: <div class="output"></div></p>
<button onclick="loopArray()">
Click to check
</button>
<script type="text/javascript">
function loopArray() {
list = ['Item 1', 'Item 2', 'Item 3',
'Item 4', 'Item 5'];
for (i = 0; i < list.length; i++) {
document.querySelector('.output').innerHTML
+= '<li>' + element + '</li>';
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA