Bucles de JavaScript

JavaScript proporciona muchas formas de iterar a través de bucles. Este tutorial explica todas las diversas posibilidades de bucle en JavaScript moderno

Introducción

JavaScript proporciona muchas formas de iterar a través de bucles. Este tutorial explica cada uno con un pequeño ejemplo y las principales propiedades.

for

const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
  console.log(list[i]) //value
  console.log(i) //index
}
  • Puedes interrumpir unforbucle usandobreak
  • Puede avanzar rápidamente a la siguiente iteración de unforbucle usandocontinue

para cada

Introducido en ES5. Dada una matriz, puede iterar sobre sus propiedades usandolist.forEach():

const list = ['a', 'b', 'c']
list.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
})

//index is optional list.forEach(item => console.log(item))

lamentablemente no puedes salir de este bucle.

do...while

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

Puedes interrumpir unwhilebucle usandobreak:

do {
  if (something) break
} while (true)

y puedes saltar a la siguiente iteración usandocontinue:

do {
  if (something) continue

//do something else } while (true)

while

const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
}

Puedes interrumpir unwhilebucle usandobreak:

while (true) {
  if (something) break
}

y puedes saltar a la siguiente iteración usandocontinue:

while (true) {
  if (something) continue

//do something else }

La diferencia condo...whilees esodo...whilesiempre ejecute su ciclo al menos una vez.

for...in

Itera todas las propiedades enumerables de un objeto, dando los nombres de las propiedades.

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

for...of

ES6introdujo elfor...ofloop, que combina la concisión de forEach con la capacidad de romper:

//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using entries() for (const [index, value] of [‘a’, ‘b’, ‘c’].entries()) { console.log(index) //index console.log(value) //value }

Observe el uso deconst. Este bucle crea un nuevo alcance en cada iteración, por lo que podemos usarlo de manera segura en lugar delet.

for...invsfor...of

La diferencia confor...ines:

  • for...of itera sobre los valores de la propiedad
  • for...in itera los nombres de las propiedades

Más tutoriales de js: