Introducción al bucle for en JavaScript
En JavaScript, existen varias declaraciones de bucle que se pueden usar para atravesar matrices, objetos u otras estructuras de datos iterables. Estos bucles de uso común incluyen el bucle for, el bucle for-in, el bucle for-of y el método forEach. Este artículo presenta sus características y uso a su vez:
1. para bucle:
para (inicialización; condición; incremento){
// cuerpo del bucle
}
Entre ellos, la inicialización es el bloque de código ejecutado antes del inicio del ciclo, que se utiliza para inicializar las variables del ciclo; la condición es la condición verificada antes de cada ciclo. Cuando la condición es falsa, el ciclo finaliza; el incremento es el código ejecutado después cada bucle termina Bloque, que se utiliza para actualizar el valor de una variable de bucle.
Esta es la forma más común de realizar bucles y es adecuada para casos en los que se conoce el número de iteraciones.
Ejemplo:
const arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
En este ejemplo, la parte de inicialización declara una variable i usando la palabra clave let y establece su valor inicial en 0. La parte condicional utiliza el operador menor que (<) para determinar si i es menor que la longitud de la matriz arr. Solo cuando i sea menor que la longitud de la matriz, el bucle continuará ejecutándose. La parte de operación utiliza el operador ++ para aumentar el valor de i en 1 cada vez.
Resultado de salida:
10
20
30
40
50
También se pueden omitir algunas piezas opcionales. Por ejemplo, en el siguiente bucle, se omite la parte de inicialización y el contador del bucle se inicializa a 0. El código anterior se puede cambiar a:
const arr = [10, 20, 30, 40, 50];
let i = 0;
for (; i < arr.length; i++) {
console.log(arr[i]);
}
2. bucle for-in:
para (clave var en el objeto) {
si (objeto.hasOwnProperty(clave)) {
// cuerpo del bucle
}
}
El bucle for-in se utiliza para recorrer las propiedades del objeto, donde la clave representa el nombre de cada propiedad del objeto. Tenga en cuenta que este método es para atravesar propiedades de objetos (pares clave-valor), no para atravesar matrices.
Ejemplo:
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + ": " + obj[key]);
}
}
Resultado de salida:
a: 1
b: 2
c: 3
3. bucle for-of:
para (var elemento de iterable) {
// cuerpo del bucle
}
El bucle for-of es una nueva característica introducida por ES6, que se puede utilizar para atravesar objetos iterables (como matrices, cadenas, conjuntos, mapas, etc.). En cada bucle, item representa el valor de cada elemento del objeto iterable, no el índice o la clave. Este método es adecuado para atravesar matrices, cadenas y otros objetos que se ajustan al protocolo iterable.
Ejemplo:
const arr = [10, 20, 30, 40, 50];
for (let item of arr) {
console.log(item);
}
Resultado de salida:
10
20
30
40
50
4. Además, JavaScript también proporciona el método forEach() para atravesar matrices. :
matriz.forEach(función(elemento, índice, matriz) {
// cuerpo del bucle
});
forEach () es un método proporcionado por el objeto de matriz. El método forEach no tiene valor de retorno y se utiliza para atravesar cada elemento de la matriz. En cada bucle, el elemento actual, el índice y la matriz original se procesan a través de la función de devolución de llamada. Cabe señalar que el método forEach() atraviesa toda la matriz y no puede salir del ciclo a mitad de camino (a menos que se produzca una excepción).
Ejemplo:
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
console.log("Index: " + index + ", Value: " + item);
});
Resultado de salida:
Índice: 0, Valor: 10
Índice: 1, Valor: 20
Índice: 2, Valor: 30
Índice: 3, Valor: 40
Índice: 4, Valor: 50
En JavaScript, las declaraciones break y continue se pueden usar en el cuerpo del bucle for, for-in y for-of para controlar el comportamiento del bucle.
La declaración de interrupción se utiliza para salir inmediatamente del ciclo, ya no ejecutar el código después del cuerpo del ciclo y continuar ejecutando el código después del ciclo.
La declaración de continuación se utiliza para omitir la iteración actual y continuar ejecutando la siguiente iteración.
Por ejemplo, un ejemplo del uso de romper y continuar en un bucle for:
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 跳过当前迭代，继续下一次迭代
}
if (i === 4) {
break; // 中途跳出循环
}
console.log(i);
}
Resultado de salida:
0
1
3
Sin embargo, para el método forEach(), es un método de matriz y las declaraciones break y continue no se pueden usar en el cuerpo del bucle para controlar el comportamiento del bucle. El método forEach() atravesará toda la matriz y ejecutará la función de devolución de llamada para cada elemento, y no podrá salir del bucle a mitad de camino. Si usa break o continue en una función de devolución de llamada, generarán un error de sintaxis.
Resumen :
Los bucles for, for...in y for...of son declaraciones de bucle en JavaScript, mientras que forEach() es un método del objeto de matriz.
El bucle for es la declaración de bucle más común y puede atravesar el bloque de código de ejecución especificando la condición inicial, la condición final y la operación de ejecución después de cada bucle.
El bucle for...in se utiliza para iterar sobre las propiedades de un objeto, iterará sobre las propiedades enumerables del objeto y su cadena de prototipo.
El bucle for...of se utiliza para iterar sobre objetos iterables (como matrices, cadenas, conjuntos, mapas, etc.) y puede iterar sobre cada valor de elemento en el objeto.
forEach() es un método de un objeto de matriz, que se utiliza para iterar a través de cada elemento de la matriz y ejecutar la función de devolución de llamada especificada para cada elemento.
En JavaScript, los bucles for, for-in y for-of admiten el uso de declaraciones break y continue para controlar el comportamiento del bucle. Las declaraciones break y continue no se pueden utilizar en el método forEach() para romper u omitir el ciclo.