-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharray.html
180 lines (180 loc) · 12.7 KB
/
array.html
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Cardio 💪</title>
<!-- Favicon -->
<link rel="shortcut icon" href="./assets/img/js.png" type="image/x-icon">
<!--Para el SEO -->
<meta name="description"
content="Hola bienvenidos! Soy Maria Eugenia Costa y estoy practicando arreglos con JavaScript">
<link rel="apple-touch-icon" href="./assets/img/js.png">
<meta name="theme-color" content="#d5197a">
<meta name="twitter:card" content="summary">
<meta property="og:type" content="website">
<meta property="og:title" name="twitter:title" content="Array Cardi con JS">
<meta property="og:description" name="twitter:description"
content="Hola bienvenidos! Soy Maria Eugenia Costa y estoy practicando arreglos con JavaScript">
<meta property="og:image" name="twitter:image"
content="./assets/img/js.png">
<meta property="og:url" name="twitter:url"
content="https://eugenia1984.github.io/ejercicios-dom/array">
<!-- Styles-->
<link rel="stylesheet" href="./css/array.css">
</head>
<body>
<header class="header">
<h1>Bienvenidos a mis ejercicios con arreglos en JS</h1>
</header>
<main>
<p>Por favor mira la consola del navegador, para ver los ejercicios de práctica con arreglos. 💁</p>
<p>También te dejo el código detallado a continuación:</p>
<p>✔ Tengo el arreglo <strong>inventors</strong> de inventores, con su nombre, apellido, año de nacimiento y año de fallecimiento.</p>
<code>
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
</code>
<p>✔ Tengo otro arreglo <strong>people</strong>con una lista de String con nombre y apellido de personas.</p>
<code>
const people = [
'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
];
</code>
<p>✔ Para utilizar Array.prototype.filter(), filtro la lista de inventores que nacieron en 1500's</p>
<code class="format">const fifteen = inventors.filter(function(inventor) {</code>
<code class="format pl-1">if(inventor.year >= 1500 && inventor.year <= 1599) {</code>
<code class="format pl-2">return true; // asi me lo guarda</code>
<code class="format pl-1">}</code>
<code class="format">});</code>
<p>También lo puedo escribir como <strong>arrow function</strong> y como solo voy a guardar lo que cumpla la condición, puedo hacer un return implícito y sacar la palabra return:</p>
<code class="format">const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <= 1599));</code>
<p>Para verlo en tabla utilizo <strong>console.table()</strong>.</p>
<code class="format">console.table(fifteen);</code>
<p>✔ Para utilizar Array.prototype.map(), voy a crear un arreglo con los nombres y apellidos de los inventores</p>
<code class="format">const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);</code>
<code class="format">console.log(fullNames);</code>
<p>✔ Para utilizar Array.prototype.sort() voy a ordener a los invertores, con el dato de su nacimiento, desde el más viejo al más joven</p>
<code class="format">const orderedByAge = inventors.sort(function(firstInventor, secondInventor) {</code>
<code class="format pl-1">if(firstInventor.year > secondInventor.year) { </code>
<code class="format pl-2">return 1; </code>
<code class="format pl-1">} else { </code>
<code class="format pl-2"> return -1;</code>
<code class="format pl-1"> }</code>
<code class="format">}); </code>
<p>O lo puedo simplificar con un <strong>ternario</strong>:</p>
<code class="format">const orderedByAge = inventors.sort((firstInventor, secondInventor) =>(firstInventor.year > secondInventor.year) ? 1 : -1); </code>
<p>Y para mostrarlo en una tabla:</p>
<code class="format">console.table(orderedByAge); </code>
<p>✔ Para utilizar Array.prototype.reduce() voy a calcular cuantos años en total vivieron todos los inventores juntos.</p>
<p>En ver de utilizar un ciclo for con un acumulador para ir sumando, voy a usar <strong>reduce</strong>:</p>
<code class="format">const totalYears = inventors.reduce((total, inventor) => {</code>
<code class="format pl-1"> return total + (inventor.passed - inventor.year);</code>
<code class="format">}, 0);</code>
<p>En el primer loop total no está definido, por eso con el 0 lo inicializo en 0.</p>
<p>✔ Ordeno a los inventores por los años vividos</p>
<code class="format">const oldest = inventors.sort(function(a,b) {</code>
<code class="format pl-1">const lastInventor = a.passed - a.year;</code>
<code class="format pl-1">const nextInventor = b.passed - b.year;</code>
<code class="format pl-1">return lastInventor > nextInventor ? -1 : 1;</code>
<code class="format">});</code>
<p>Y para verlo en una tabla:</p>
<code class="format">console.table(oldest);</code>
<p>✔ Para crear una lista de boulevares de Paris que contengan 'de' en algún lugar de su nombre</p>
<p>Utilizo la consola de esta web: </p>
<a href="https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris</a>
<code class="format">const category = document.querySelector('mw-category');</code>
<p>Si hago: <i>const links = category.querySelectorAll('a');</i>, como .querySelector me devuelve una lista de nodos, no un array, voy a convertir la constante links en un array de nombres y luego filtrarla con los que incluyan 'de'.</p>
<p>Una opción es con rest: const links = [...category.querySelectorAll('a')];</p>
<p>Pero utilizo otra forma que es más legible:</p>
<code class="format">const links = Array.from(category.querySelectorAll('a'));</code>
<p>Y aplico .map() y .filter():</p>
<code class="format">const de = links</code>
<code class="format pl-5">.map(link => link.textContent) </code>
<code class="format pl-5">.filter(streetName => streetName.includes('de')); </code>
<p>Lo muestro por consola:</p>
<code class="format">console.log(de); </code>
<p> ✔ Ahora voy a trabajar con el array de personas, para ordenar a las personasa lfabeticamente por el apellido, con .sort().</p>
<code class="format">const alpha = people.sort((lastOne, nextOne) => { </code>
<code class="format">//Como me devuelve un array los voy a pasar a variables, para poder separar con .split() </code>
<code class="format pl-1">const [aLast, aFirst] = lastOne.split(', '); </code>
<code class="format pl-1">const [bLast, bFirst] = nextOne.split(', '); </code>
<code class="format pl-1"> return aLast > bLast ? 1 : -1;</code>
<code class="format">}); </code>
<p>Y lo veo en consola en forma de tabla:</p>
<code class="format"> console.table(alpha);</code>
<p> ✔ Para utilizar .reduce(), sumo las instancias del array guardado en la constante data</p>
<code class="format">const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; </code>
<code class="format "> const transportation = data.reduce(function(obj, item) {</code>
<code class="format pl-1">if (!obj[item]) {</code>
<code class="format pl-2">obj[item] = 0; </code>
<code class="format pl-1">} </code>
<code class="format pl-1">obj[item]++; </code>
<code class="format pl-1">return obj; </code>
<code class="format"> }, {});</code>
<p>Para verlo en consola:</p>
<code class="format">console.log(transportation); </code>
<p>✔ Tengo el arreglo guardado en la constante <strong>peopele2</strong> que tiene como elementos objetos(personas, con atributos de nombre y año de nacimiento).</p>
<code class="format">const people2 = [</code>
<code class="format pl-1"> { name: 'Wes', year: 1988 },</code>
<code class="format pl-1"> { name: 'Kait', year: 1986 },</code>
<code class="format pl-1"> { name: 'Irv', year: 1970 },</code>
<code class="format pl-1"> { name: 'Lux', year: 2015 }</code>
<code class="format"> ];</code>
<p>Voy a utilizar el metodo <strong>.some()</strong> para ver si hay mayores de edad:</p>
<code class="format">const isAdult = people2.some(person => ((new Date()).getFullYear()) - person.year >= 18);</code>
<p>Y lo muestro por consola:</p>
<code class="format">console.log({isAdult});</code>
<p>Y como el método <strong>.some()</strong> me da como resultado <strong>true</strong> si al menos uno de los elementos cumple con la condición, entonces veo en consola <strong>true</strong></p>
<p>Pero si utilizo el método <strong>.every()</strong>, todos los elementos deben sumplir con la condición, y como eso no sucede, voy a ver <strong>false</strong>:</p>
<code class="format">const allAdults = people2.every(person => ((new Date()).getFullYear()) - person.year >= 19);</code>
<p>Para verlo por consola:</p>
<code class="format">console.log({allAdults});</code>
<p>>✔ Tengo un nuevo arreglo guardado en la constante <strong>comments</strong>, cada elemento es un objeto con un texto y un id</p>
<code class="format">const comments = [</code>
<code class="format pl-1">{ text: 'Love this!', id: 523423 },</code>
<code class="format pl-1">{ text: 'Super good', id: 823423 },</code>
<code class="format pl-1">{ text: 'You are the best', id: 2039842 },</code>
<code class="format pl-1">{ text: 'Ramen is my fav food ever', id: 123523 },</code>
<code class="format pl-1">{ text: 'Nice Nice Nice!', id: 542328 }</code>
<code class="format">];</code>
<p>Con este nuevo array comments voy a utilizar el metodo find(), que es parecido a .filter(), pero en vez de retornar solo el que estoy buscando. Voy a buscar el comment con ID de 823423:</p>
<code class="format">const comment = comments.find(comment => comment.id === 823423);</code>
<p>Lo veo en consola:</p>
<code class="format">console.log(comment);</code>
<p>✔ Y ahora para utilizar le metodo <strong>.findIndex()</strong>, voy a buscar en que posicion se encuentra el elemento que tiene como ID: 823423.</p>
<code class="format">const index = comments.findIndex(comment => comment.id === 823423)</code>
<p>Para verlo en consola:</p>
<code class="format">console.log(index);</code>
<p>✔ Y ahora voy a eliminar ese elemento, lo podría hacer utilizando el método .splice(index,1); pero mejor voy a utilizar el método .slice(); y lo voy a guardar en la nueva constante llamada <strong>newComments</strong></p>
<code class="format">const newComments = [</code>
<code class="format pl-1">...comments.slice(0, index),</code>
<code class="format pl-1">...comments.slice(index + 1)</code>
<code class="format">];</code>
<p>Para verlo por consola:</p>
<code class="format">console.log(newComments);</code>
</main>
<footer class="footer">
<p>Gracias por ver mi práctica</p>
<a href="https://www.linkedin.com/in/mar%C3%ADaeugeniacosta/" target="_blank" rel="noopener noreferrer">María Eugenia Costa</a>
</footer>
<script src="./js/array.js"></script>
</body>
</html>