-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfindlast_findlastindex_groupby.html
177 lines (169 loc) · 11.1 KB
/
findlast_findlastindex_groupby.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
<!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">
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link href="../estilos/style.css" rel="stylesheet">
<link href="./estilos/articulo.css" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WFELBG80ZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WFELBG80ZH');
</script>
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/code-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/code-32x32.png">
<title>Rodrigo Juarez 🧑🏻💻</title>
</head>
<body>
<header class="header">
<nav class="header-nav bd-grid">
<div class="header-nav__logo">
<a href="index.html" class="logo">Rodrigo Juarez</a>
</div>
<div class="header-nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html#home" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">Sobre mi</a>
</li>
<li class="nav__item">
<a href="index.html#skills" class="nav__link">Skills</a>
</li>
<li class="nav__item">
<a href="index.html#portfolio" class="nav__link">Portfolio</a>
</li>
<li class="nav__item">
<a href="index.html#contact" class="nav__link">Contacto</a>
</li>
<!-- <li class="nav__item">
<a href="index.html#blog" class="nav__link">Blog</a>
</li> -->
<li class="nav__item">
<a href="index.html#blog" class="nav__link active">Articulos</a>
</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<div id="progress-bar"></div>
<main class="l-main">
<section class="article-section">
<h2 class="article-title">Mas metodos en Javascript: findLast(), findLastIndex() y groupBy()</h2>
<p class="paragraph">
JavaScript (JS), como lenguaje de programación, se va a actualizando contantemente, y como desarrolladores queremos estar atentos a esas novedades, que sin dudas, mejoran mucho la experiencia a la hora de programar.
</p>
<p class="paragraph">
Alguna de las novedades, ya las comentamos en un articulo reciente, en donde analizábamos, las funcionalidades de nuevos métodos de arrays, como lo son toReversed(), toSorted(), to Spliced(), y with(). Te recomiendo la lectura en este <a href="https://rodrigojuarez.dev/js_nuevos_metodos_de_arrays_que_debes_conocer">enlace</a>.
</p>
<p class="paragraph">
Y a esos métodos de arrays, se le suman nuevos !!! 😱<br>
Es por eso, que durante este articulo, vamos a hablar sobre los métodos groupBy(), findLast() y lastIndexOf().
</p>
<h3 class="section-title">
findLast()
</h3>
<p class="paragraph">
Imaginemos que nos encontremos ante una situacion en las que debamos buscar el ultimo elemento de un array, que cumpla con una determinada condición. ¿Cómo podríamos implementar esa lógica? <br>
Bueno, se nos podrían ocurrir diferentes formas. Quizás hayas pensado en una solución como esta.
</p>
<figure class="container-image">
<img src="imagenes/Articulos/findLast, lastIndexOf, groupBy/before_find_last.png" alt="Alternative to using the findLast() method" class="image" loading="lazy" style="width: 100%;">
</figure>
<p class="paragraph">
Un recorrido del array en el sentido inverso con la utilización de un ciclo for.
En este caso, si ejecutamos en código, lo que nos retornara sera un array, con la posición del elemento que cumple la condición otorgada, junto con el elemento en si. Lo cual seria correcto ya que las posiciones de los elementos del array comienzan desde el numero 0. <br> Imagen con un grafico mas visual:
</p>
<figure class="container-image">
<img src="imagenes/Articulos/findLast, lastIndexOf, groupBy/excalidraw_find_last.png" alt="In the image, the positions of the elements of the array from which was taken as an example" class="image" loading="lazy" style="width: 100%;">
</figure>
<p class="paragraph">
Si bien el código es correcto, funciona bien y llegamos a la solución buscada, el método findLast() en estos casos viene en nuestra ayuda, ya que nos facilita todo el proceso de búsqueda del ultimo elemento. Veamos el mismo ejemplo de búsqueda, pero utilizando este nuevo método.
</p>
<figure class="container-image">
<img src="/imagenes/Articulos/findLast, lastIndexOf, groupBy/find_last.png" alt="Example in the use of the method findLast()" class="image" loading="lazy" style="width: 90%;">
</figure>
<p class="paragraph">
¿Qué te parece? ¿Mas sencillo? Sin dudas, que si. Por supuesto, como es un nuevo método que se suma al lenguaje, podemos consultar la disponibilidad de uso de los navegadores <a href="https://caniuse.com/?search=findLast">aquí</a>.
</p>
<h3 class="section-title">
findLastIndex()
</h3>
<p class="paragraph">
Este nuevo método es similar al anterior, ya que nos permite obtener el ultimo índice de un elemento en un determinado array que cumpla con determinada condición. En el caso de que no se cumpla la condición, el método retornara -1. <br>
Veamos un ejemplo practico del mismo.
</p>
<figure class="container-image">
<img src="/imagenes/Articulos/findLast, lastIndexOf, groupBy/findLastIndex.png" alt="Example in the use of the method findLastIndex()" class="image" loading="lazy" style="width: 90%;">
</figure>
<p class="paragraph">
En este caso, como la condición buscaba el ultimo índice del array que fue igual al string “Ana”, es correcto el retorno de la posición 3.
</p>
<figure class="container-image">
<img src="/imagenes/Articulos/findLast, lastIndexOf, groupBy/excalidraw_findLastIndex.png" alt="Example in the structure of the array" class="image" loading="lazy" style="width: 90%;">
</figure>
<h3 class="section-title">
groupBy()
</h3>
<p class="paragraph">
Si lo que buscamos es filtrar un determinado objeto por algún tipo de propiedad, el método groupBy(), viene a nuestra ayuda. Por que nos permite separar objetos según algún el valor, el tipo o cantidad.
<br>
Veamos un ejemplo:
</p>
<figure class="container-image">
<img src="/imagenes/Articulos/findLast, lastIndexOf, groupBy/object groupBy.png" alt="Example in the use of the method groupBy()" class="image" loading="lazy" style="width: 90%;">
</figure>
<p class="paragraph">
Al igual que los otros métodos, también puedes ver el soporte que le dan los navegadores, haciendo click <a href="https://caniuse.com/mdn-javascript_builtins_object_groupby">aqui</a>
</p>
<p class="paragraph">
Sin dudas, como hemos visto, estos nuevos métodos con los que contamos a partir de ahora nos facilitaran a un mas, la manipulación de las estructuras de datos. Tenerlos en cuenta, nos mejora mucho nuestra experiencia de al programar.
</p>
<p class="paragraph">
Desde ya muchas gracias por llegar hasta aca.<br> Happy coding !! 👨🏻💻👩🏻💻
</p>
</section>
</main>
<footer class="footer section">
<div class="footer__container bd-grid">
<div class="footer__data">
<h2 class="footer__title">RODRIGO JUAREZ</h2>
<p class="footer__text">Espero que hayas disfrutado mi website. Si deseas compartir tu feedback, no dudes en contactarme.</p>
<h2 class="footer__title">
<a href='https://cafecito.app/rodrijuarez' rel='noopener' target='_blank'><img srcset='https://cdn.cafecito.app/imgs/buttons/button_5.png 1x, https://cdn.cafecito.app/imgs/buttons/button_5_2x.png 2x, https://cdn.cafecito.app/imgs/buttons/button_5_3.75x.png 3.75x' src='https://cdn.cafecito.app/imgs/buttons/button_5.png' alt='Invitame un café en cafecito.app' /></a>
</h2>
</div>
<div class="footer__data">
<h2 class="footer__title">EXPLORE</h2>
<ul>
<li><a href="index.html#home" class="footer__link">Home</a></li>
<li><a href="index.html#about" class="footer__link">Sobre mi</a></li>
<li><a href="index.html#skills" class="footer__link">Skills</a></li>
<li><a href="index.html#portfolio" class="footer__link">Portfolio</a></li>
<li><a href="index.html#contact" class="footer__link">Contacto</a></li>
<li><a href="index.html#articles" class="footer__link">Articulos</a></li>
</ul>
</div>
<div class="footer__data">
<h2 class="footer__title">FOLLOW</h2>
<a href="https://www.linkedin.com/in/rodrijuarez/" class="about__social-icon"><i class='bx bxl-linkedin' ></i></a>
<a href="https://github.com/RodriJOk" class="about__social-icon"><i class='bx bxl-github' ></i></a>
<a href="https://www.instagram.com/preguntastech" class="about__social-icon"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
</footer>
</body>
</html>