You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/12-while-for/article.md
+45-45Lines changed: 45 additions & 45 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Usualmente necesitamos repetir acciones.
4
4
5
-
Por ejemplo, imprimir bienes de una lista uno tras otro o simplemente ejecutar el mismo código para cada número del 1 al 10.
5
+
Por ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo código para cada número del 1 al 10.
6
6
7
7
Los *Bucles* son una forma de repetir el mismo código varias veces.
8
8
@@ -17,38 +17,38 @@ while (condition) {
17
17
}
18
18
```
19
19
20
-
Mientras que `condition` (condición) sea `true`, el `código` del cuerpo del bucle sera ejecutado.
20
+
Mientras que la `condition` (condición) sea `true`, el `código` del cuerpo del bucle será ejecutado.
21
21
22
22
Por ejemplo, el bucle debajo imprime `i` mientras que `i < 3`:
23
23
24
24
```js run
25
25
let i =0;
26
-
while (i <3) { // muestra 0, entonces 1, entonces 2
26
+
while (i <3) { // muestra 0, luego 1, luego 2
27
27
alert( i );
28
28
i++;
29
29
}
30
30
```
31
31
32
-
Una sola ejecución del cuerpo del bucle es llamada *una iteración*. El bucle en ejemplo de arriba realiza 3 iteraciones.
32
+
Una sola ejecución del cuerpo del bucle es llamada *una iteración*. El bucle en el ejemplo de arriba realiza 3 iteraciones.
33
33
34
-
Si `i++` no estuviera en el ejemplo de arriba, el bucle sera repetido (en teoría) eternamente. En la practica, el navegador proporciona maneras de detener dichos bucles, y en el JavaScript del lado del servidor, podemos eliminar el proceso.
34
+
Si `i++` no estuviera en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la practica, el navegador proporciona maneras de detener dichos bucles, y en el JavaScript del lado del servidor, podemos eliminar el proceso.
35
35
36
-
Cualquier expresión o variable puede ser una condición del bucle, no solo comparaciones: la condición sera evaluada y transformada a un booleano por `while`.
36
+
Cualquier expresión o variable puede ser una condición del bucle, no solo comparaciones: la condición será evaluada y transformada a un booleano por `while`.
37
37
38
38
Por ejemplo, una manera más corta de escribir `while (i != 0)` es `while (i)`:
39
39
40
40
```js run
41
41
let i =3;
42
42
*!*
43
-
while (i) { // cuando i sea 0, la condición sera un valor falso, y el bucle se detendrá
43
+
while (i) { // cuando i sea 0, la condición será un valor falso, y el bucle se detendrá
44
44
*/!*
45
45
alert( i );
46
46
i--;
47
47
}
48
48
```
49
49
50
-
````smart header="Las llaves no son requeridas por un cuerpo de una sola línea"
51
-
Si el cuerpo del bucle no tiene una sola declaración, podemos omitir las llaves `{…}`:
50
+
````smart header="Las llaves no son requeridas para un cuerpo de una sola línea"
51
+
Si el cuerpo del bucle tiene una sola sentencia, podemos omitir las llaves `{…}`:
52
52
53
53
```js run
54
54
let i = 3;
@@ -68,7 +68,7 @@ do {
68
68
} while (condition);
69
69
```
70
70
71
-
El bucle primero ejecuta el cuerpo, luego comprueba la condición, y, mientras sea un valor verdadero, la ejecutara una y otra vez.
71
+
El bucle primero ejecuta el cuerpo, luego comprueba la condición, y, mientras sea un valor verdadero, la ejecuta una y otra vez.
72
72
73
73
Por ejemplo:
74
74
@@ -80,11 +80,11 @@ do {
80
80
} while (i <3);
81
81
```
82
82
83
-
Esta forma de sintaxis solo debería ser usado cuando quieres que el cuerpo del bucle sea ejecutado **al menos una vez** sin importar que la condición sea un valor verdadero. Usualmente, la otra forma es preferida: `while(…) {…}`.
83
+
Esta sintaxis solo debería ser usada cuando quieres que el cuerpo del bucle sea ejecutado **al menos una vez** sin importar que la condición sea verdadera. Usualmente, se prefiere la otra forma: `while(…) {…}`.
84
84
85
85
## El bucle "for"
86
86
87
-
El bucle `for` es el bucle comúnmente más usado.
87
+
El bucle `for` es el bucle más comúnmente usado.
88
88
89
89
Se ve así:
90
90
@@ -94,10 +94,10 @@ for (begin; condition; step) {
94
94
}
95
95
```
96
96
97
-
Aprendamos el significado de cada parte, por ejemplo. El bucle debajo corre `alert(i)` para `i`del`0` hasta (pero no incluyendo) `3`:
97
+
Aprendamos el significado de cada parte con un ejemplo. El bucle debajo corre `alert(i)` para `i`desde`0` hasta (pero no incluyendo) `3`:
98
98
99
99
```js run
100
-
for (let i =0; i <3; i++) { // muestra 0, entonces 1, entonces 2
100
+
for (let i =0; i <3; i++) { // muestra 0, luego 1, luego 2
101
101
alert(i);
102
102
}
103
103
```
@@ -106,10 +106,10 @@ Vamos a examinar la declaración `for` parte por parte:
|comenzar|`i = 0`| Se ejecuta una vez comenzando el bucle. |
109
+
|comienzo|`i = 0`| Se ejecuta una vez al comienzo del bucle. |
110
110
| condición |`i < 3`| Comprobada antes de cada iteración del bucle. Si es falsa, el bucle se detiene. |
111
111
| paso |`i++`| Se ejecuta después del cuerpo en cada iteración pero antes de la comprobación de la condición. |
112
-
| cuerpo |`alert(i)`| Se ejecuta una y otra vez mientras que la condición sea un valor verdadero. |
112
+
| cuerpo |`alert(i)`| Se ejecuta una y otra vez mientras que la condición sea verdadera. |
113
113
114
114
El algoritmo general del bucle funciona de esta forma:
115
115
```
@@ -120,9 +120,9 @@ Se ejecuta comenzar
120
120
→ ...
121
121
```
122
122
123
-
Si eres nuevo en bucles, te podría ayudar regresar al ejemplo y reproducir como se ejecuta paso por paso en una pedazo de papel.
123
+
Si eres nuevo en bucles, te podría ayudar regresar al ejemplo y reproducir cómo se ejecuta paso por paso en una pedazo de papel.
124
124
125
-
Aquí esta exactamente que sucede en nuestro caso:
125
+
Esto es lo que sucede exactamente en nuestro caso:
126
126
127
127
```js
128
128
// for (let i = 0; i < 3; i++) alert(i)
@@ -139,25 +139,25 @@ if (i < 3) { alert(i); i++ }
139
139
```
140
140
141
141
````smart header="Declaración de variable en línea"
142
-
Aquí, la variable "counter" `i` es declarado en el bucle. Esto es llamado una declaración de variable "en línea". Dichas variables son visibles solo dentro del bucle.
142
+
Aquí, la variable "counter" `i` es declarada en el bucle. Esto es llamado una declaración de variable "en línea". Dichas variables son visibles solo dentro del bucle.
143
143
144
144
```js run
145
145
for (*!*let*/!* i = 0; i < 3; i++) {
146
146
alert(i); // 0, 1, 2
147
147
}
148
-
alert(i); // error, no hay dicha variable
148
+
alert(i); // error, no existe dicha variable
149
149
```
150
150
151
151
En vez de definir una variable, podemos usar una que ya exista:
152
152
153
153
```js run
154
154
let i = 0;
155
155
156
-
for (i = 0; i < 3; i++) { // usar variable existente
156
+
for (i = 0; i < 3; i++) { // usa una variable existente
157
157
alert(i); // 0, 1, 2
158
158
}
159
159
160
-
alert(i); // 3, visible, porque es declarado afuera del bucle
160
+
alert(i); // 3, visible, porque fue declarada fuera del bucle
161
161
```
162
162
163
163
````
@@ -172,7 +172,7 @@ Por ejemplo, podemos omitir `comenzar` si no necesitamos realizar nada al comien
172
172
Como aquí:
173
173
174
174
```js run
175
-
let i =0; // Ya tenemos i declarado y asignado
175
+
let i =0; // Ya tenemos i declarada y asignada
176
176
177
177
for (; i <3; i++) { // no hay necesidad de "comenzar"
178
178
alert( i ); // 0, 1, 2
@@ -199,11 +199,11 @@ for (;;) {
199
199
}
200
200
```
201
201
202
-
Por favor nota que los dos punto y comas`;` deben estar presente. De otra manera, habría un error de sintaxis.
202
+
Por favor, nota que los dos punto y coma`;`del `for`deben estar presentes. De otra manera, habría un error de sintaxis.
203
203
204
204
## Rompiendo el bucle
205
205
206
-
Normalmente, se sale de un bucle cuando la condición es un valor falso.
206
+
Normalmente, se sale de un bucle cuando la condición es falsa.
207
207
208
208
Pero podemos forzar una salida en cualquier momento usando la directiva especial `break`.
209
209
@@ -226,13 +226,13 @@ while (true) {
226
226
alert( 'Suma: '+ sum );
227
227
```
228
228
229
-
La directiva `break` es activada en la linea`(*)` si el usuario ingresa una línea vacía o cancela la entrada. Detiene inmediatamente el bucle, pasando el control a la primera linea después de el bucle. `alert`.
229
+
La directiva `break` es activada en la línea`(*)` si el usuario ingresa una línea vacía o cancela la entrada. Detiene inmediatamente el bucle, pasando el control a la primera línea después de el bucle. En este caso,`alert`.
230
230
231
-
La combinación "bucle infinito + `break` según sea necesario" es genial para situaciones cuando la condición del bucle debe ser comprobada no en el inicio o al final de el bucle, sino a la mitad o incluso en varias partes del cuerpo.
231
+
La combinación "bucle infinito + `break` según sea necesario" es ideal en situaciones donde la condición del bucle debe ser comprobada no al inicio o al final de el bucle, sino a la mitad o incluso en varias partes del cuerpo.
232
232
233
233
## Continuar a la siguiente iteración [#continue]
234
234
235
-
La directiva `continue` es una "versión más ligera" de `break`. No detiene todo el bucle. En lugar, detiene la iteración actual y forzá el bucle a comenzar una nueva (si la condición lo permite).
235
+
La directiva `continue` es una "versión más ligera" de `break`. No detiene todo el bucle. En su lugar, detiene la iteración actual y fuerza al bucle a comenzar una nueva (si la condición lo permite).
236
236
237
237
Podemos usarlo si hemos terminado con la iteración actual y nos gustaría movernos a la siguiente.
238
238
@@ -244,11 +244,11 @@ for (let i = 0; i < 10; i++) {
244
244
// si es verdadero, saltar el resto del cuerpo
245
245
*!*if (i %2==0) continue;*/!*
246
246
247
-
alert(i); // 1, entonces 3, 5, 7, 9
247
+
alert(i); // 1, luego 3, 5, 7, 9
248
248
}
249
249
```
250
250
251
-
Para los valores pares de `i`, la directiva `continue`para de ejecutar el cuerpo y pasa el control a la siguiente iteración de `for` (con el siguiente número). Así que el `alert` solo es llamado para valores impares.
251
+
Para los valores pares de `i`, la directiva `continue`deja de ejecutar el cuerpo y pasa el control a la siguiente iteración de `for` (con el siguiente número). Así que el `alert` solo es llamado para valores impares.
252
252
253
253
````smart header="La directiva `continue` ayuda a disminuir la anidación"
254
254
Un bucle que muestra valores impares podría verse así:
@@ -263,13 +263,13 @@ for (let i = 0; i < 10; i++) {
263
263
}
264
264
```
265
265
266
-
Desde un punto de vista técnico, esto es idéntico al ejemplo de arriba. Claro, podemos simplemente envolver el code en un bloque `if` en vez de usar `continue`.
266
+
Desde un punto de vista técnico, esto es idéntico al ejemplo de arriba. Claro, podemos simplemente envolver el código en un bloque `if` en vez de usar `continue`.
267
267
268
-
Pero como efecto secundario, esto crearía un nivel mas de anidación (la llamada a `alert` dentro de las llaves). Si el código dentro de `if`es más que solo unas líneas, eso podría reducir la legibilidad en general.
268
+
Pero como efecto secundario, esto crearía un nivel más de anidación (la llamada a `alert` dentro de las llaves). Si el código dentro de `if`posee varias líneas, eso podría reducir la legibilidad en general.
269
269
````
270
270
271
271
````warn header="No `break/continue` a la derecha de '?'"
272
-
Por favor nota que las construcciones de sintaxis que no son expresiones no pueden user usadas con el operador terniario `?`. En particular, directivas como `break/continue` no son permitidas aquí.
272
+
Por favor, nota que las construcciones de sintaxis que no son expresiones no pueden user usadas con el operador terniario `?`. En particular, directivas como `break/continue` no son permitidas aquí.
273
273
274
274
Por ejemplo, si tomamos este código:
275
275
@@ -285,13 +285,13 @@ if (i > 5) {
285
285
286
286
287
287
```js no-beautify
288
-
(i > 5) ? alert(i) : *!*continue*/!*; // continue no es permitido aquí
288
+
(i > 5) ? alert(i) : *!*continue*/!*; // continue no está permitida aquí
289
289
```
290
290
291
-
...deja de funcionar. Código como este generaran un error de sintaxis:
291
+
...deja de funcionar. Código como este generarán un error de sintaxis:
292
292
293
293
294
-
Esta es otra razón por la cual se recomienda no usar el operador de signo de interrogación `?` en vez de `if`.
294
+
Esta es otra razón por la cual se recomienda no usar el operador de signo de interrogación `?` en lugar de `if`.
295
295
````
296
296
297
297
## Etiquetas para break/continue
@@ -307,7 +307,7 @@ for (let i = 0; i < 3; i++) {
307
307
308
308
let input =prompt(`Valor en las coordenadas (${i},${j})`, '');
309
309
310
-
// ¿Y si quier salir de aquí hacia Listo (debajo)?
310
+
// ¿Y si quiero salir de aquí hacia Listo (debajo)?
311
311
312
312
}
313
313
}
@@ -317,7 +317,7 @@ alert('Listo!');
317
317
318
318
Necesitamos una manera de detener el proceso si el usuario cancela la entrada.
319
319
320
-
El `break` ordinario después de `input` solo nos sacaría de el bucle interno. Eso no es suficiente--etiquetas, vienen al rescate!
320
+
El `break` ordinario después de `input` solo nos sacaría del bucle interno. Eso no es suficiente--etiquetas, vengan al rescate!
321
321
322
322
Una *etiqueta* es un identificar con dos puntos antes de un bucle:
323
323
```js
@@ -335,7 +335,7 @@ La declaración `break <labelName>` en el bucle debajo nos saca hacia la etiquet
335
335
336
336
let input =prompt(`Value at coords (${i},${j})`, '');
337
337
338
-
// Si es una cadena de texto vacía o es cancelada, entonces salir de ambos bucles
338
+
// Si es una cadena de texto vacía o se canceló, entonces salir de ambos bucles
339
339
if (!input) *!*break outer*/!*; // (*)
340
340
341
341
// hacer algo con el valor...
@@ -344,23 +344,23 @@ La declaración `break <labelName>` en el bucle debajo nos saca hacia la etiquet
344
344
alert('Listo!');
345
345
```
346
346
347
-
En el codigo de arriba, `break outer` mira hacia arriba por la etiquieta llamada `outer` y nos saca de dicho bucle.
347
+
En el código de arriba, `break outer` mira hacia arriba por la etiquieta llamada `outer` y nos saca de dicho bucle.
348
348
349
-
Asi que el control va directamente de `(*)` a `alert('Listo!')`.
349
+
Así que el control va directamente de `(*)` a `alert('Listo!')`.
350
350
351
-
Tambien podemos mover la etiqueta a una línea separada:
351
+
También podemos mover la etiqueta a una línea separada:
352
352
353
353
```js no-beautify
354
354
outer:
355
355
for (let i =0; i <3; i++) { ... }
356
356
```
357
357
358
-
La directiva `continue` también puede usar usada con una etiqueta. En este caso, la ejecución de el código salta a la siguiente iteración de el bucle etiquetado.
358
+
La directiva `continue` también puede usar usada con una etiqueta. En este caso, la ejecución del código salta a la siguiente iteración del bucle etiquetado.
359
359
360
360
````warn header="Las etiquetas no son \"goto\""
361
361
Las etiquetas no nos permiten saltar a un lugar arbitrario en el código.
362
362
363
-
Por ejemplo, es imposible de hacer esto:
363
+
Por ejemplo, es imposible hacer esto:
364
364
```js
365
365
break label; // saltar a label? No.
366
366
@@ -382,4 +382,4 @@ Para crear un bucle "infinito", usualmente se usa `while(true)`. Un bucle como e
382
382
383
383
Si no queremos hacer nada con la iteración actual y queremos adelantarnos a la siguiente, podemos usar la directiva `continue`.
384
384
385
-
`break/continue` soportan etiquetas antes del bucle. Una etiqueta es la única forma de usar `break/continue` para escapar de un bucle anidado para ir a uno exterior.
385
+
`break/continue` soportan etiquetas antes del bucle. Una etiqueta es la única forma de usar `break/continue` para escapar de un bucle anidado para ir a uno exterior.
0 commit comments