¿Hay cuatro formas de escribir en JS?

Este artículo ha participado en el evento "Ceremonia de creación de recién llegados" para iniciar el camino hacia la creación de oro.

Tutorial introductorio, por favor criticar y corregir.

1. Bucle for tradicional

for (init; cond; inc) {
  // body
}
复制代码

Al igual que en C++ o Java, forla configuración del bucle se describe entre paréntesis después de la palabra clave y ;la configuración del bucle está separada en tres partes por dos puntos y coma entre paréntesis, que son:

1. initUna declaración de inicialización (instrucción), ejecutada antes del inicio de todo el bucle.
2. condCondición (expresión lógica) que representa la condición bajo la cual continúa el ciclo
3. incUna declaración de incremento automático (instrucción), ejecutada después de que finaliza cada cuerpo del ciclo

Los pasos de ejecución de todo el ciclo son:

1. ejecutar initdeclaración
2. Evalúe la condexpresión y salga del bucle si es falsa
3. ejecutar el cuerpo del buclebody
4. Ejecute la incdeclaración, luego regrese al paso 2

P.ej:

let sum = 0
for (let i = 1; i <= 10; i++) {
  sum += i
}
console.log(sum) // 55
复制代码

2. para de bucle

for (const v of iterable) {
  // body
}
复制代码

Esto iterablese refiere a varios objetos JS que se pueden iterar. Los ejemplos más comunes son la matriz Array y la cadena String, además de argumentos, NodeList, Map, Set, etc. El efecto de la ejecución es que el bucle for atravesará iterablecada elemento y, en cada bucle, la variable representativa ves el elemento del bucle actual.

P.ej:

const arr = [1, 2, 3, 4, 5]
let sum = 0
for (const v of arr) {
  sum += v
}
console.log(sum) // 15
复制代码

Avanzado: for await (const v of iterable)se puede utilizar para recorrido de bucle asíncrono.

3. para en bucle

for (const k in object) {
  // body
}
复制代码

El bucle for in atravesará objectcada atributo. En cada bucle, la variable representativa es el nombre del atributo (clave)k del atributo actual .

P.ej:

const obj = { a: 1, b: 2, c: 3 }
let sum = 0
for (const k in obj) {
  sum += obj[k] // read the value from key
}
console.log(sum) // 6
复制代码

Presta especial atención a la diferencia entre for of y for in. La variable representativa del primero es el valor del artículo (valor), y la variable representativa del segundo es el nombre del atributo (clave).

4. para cada método

Array.forEach(Function)
复制代码

forEach是JS数组的原生方法。它接受一个函数作为参数，执行效果是对数组的每一个项目，执行传入的函数。传入的函数可以接受三个参数：(element, index, array)，其中element表示当前项目的值，index表示当前项目的下标，array表示循环的数组本身。

例如：

const arr = [1, 2, 3, 4, 5]
let sum = 0
arr.forEach(element => sum += element)
console.log(sum) // 15
复制代码

通常在程序中我们更倾向于使用for of循环来代替forEach方法，因为for关键字使得代码的可读性更高。但是在一些特殊的情况下，我们依然会使用forEach方法循环遍历数组中的每个项目。

高级：forEach可以传入异步函数，等效于使用for await (const v of Array)。