-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnote.txt
More file actions
51 lines (37 loc) · 2.54 KB
/
Copy pathnote.txt
File metadata and controls
51 lines (37 loc) · 2.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
for each es para hacer recorridos de los elementos de un array
El método forEach de los arrays consiste en ejecutar una función (callback) para cada uno de los elementos iterados. Iterar significa repetir una acción varias veces.
Este método recibe dos argumentos:
La función que itera cada elemento del array (obligatorio).
Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined. Recuerde que this en arrow functions es el objeto global.
array.forEach(function(), thisArg)
La función, que recibe como argumento el método forEach, utiliza tres parámetros opcionales:
El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
El array que está iterando.
array.forEach(function(element, index, array))
Diferencia entre la estructura for y el método forEach
Los métodos de arrays nos permiten realizar algoritmos con una menor cantidad de líneas que una estructura for, con un resultado igual o parecido.
const letters=['a','b','c']
// Utilizando la estructura repetitiva for
for(let index=0; index<letters.length; index++){
const element=letters[index]
console.log('for',element)
}
// Utilizando el método forEach
letters.forEach(item => console.log('forEach',item))
Mostrar elementos de un array al usuario
Ahora que ya conoces cómo funciona el método forEach, utilízalo para agregar elementos al HTML y así que el usuario lo mire.
Por ejemplo, en un archivo HTML agrega una etiqueta div con un id app, que nos servirá para agregar nuestros elementos.
<div id="app"></div>
Después crea la lógica en un archivo de JavaScript.
const products = [
{ title: 'Burger', price: 121 },
{ title: 'Pizza', price: 20 },
{ title: 'Soda', price: 5 },
]
const app = document.getElementById('app')
products.forEach(product => {
app.innerHTML += `<li>${product.title} -$ ${product.price}</li>`
})
La mutabilidad es más flexible y una buena opción si se requiere cambiar, actualizar o eliminar datos; pero esto puede ocasionar fallos o resultados erróneos en nuestra aplicación. La inmutabilidad es más exigente, te permite generar nuevas estructuras para manejarlas sin cambiar la original; pero esto puede provocar que la memoria colapse.
Por lo que, ¿cuál es mejor? La respuesta es ninguna, cada uno te permite manejar estructuras de datos, por ende es necesario identificar cuál forma es la adecuada a aplicar en un algoritmo.