Array methods

Qué mejor que conocer los métodos nativos que JS nos ofrece para manipular Arrays. Map, Reduce, filter, find... Solo por mencionar algunos.

Transcript

1. Array methods @jessecogollo Software developer at Advice Interactive Group @medellinjs/@mongodbmedellin/@jsconfcoco-organizer
2. Motivación Qué mejor que conocer los métodos nativos que JS nos ofrece para manipular Arrays.
3. ¿Qué conoceremos hoy? • .length() • .from() • .isArray() • .of() • .concat() • .every() • .fill() • .filter() • .find() • .findIndex() • .forEach() • .includes() • .indexOf() • .join() • .keys() • .lastIndexOf() • .map() • .pop()
4. ¿Qué conoceremos hoy? • .push() • .reduce() • .reduceRight() • .reverse() • .shift() • .slice() • .some() • .sort() • .splice() • .toLocaleString() • .toSource() • .toString() • .unShift() • .values() v10.9
5. Y si tenemos tiempo... • .copyWithin() • .entries() • .flat() v11 • .flatMap() v11
6. Antes de comenzar... Para iniciar, vamos a obtener la información de la API de meetup.com Específicamente utiliazando este endpoint: http://api.meetup.com/medellinjs/events?status=past Que básicamente, nos entrega el histórico de meetups que ha hecho medellinjs desde sus inicios. Código: https://github.com/jessecogollo/arrayMethods/tree/01-set-data
7. .length() Este método nos retorna el número de elementos en el array. Código: https://github.com/jessecogollo/arrayMethods/tree/02-length
8. .from() Este método retorna una copia de un array especificado. Recibe dos parámetros, el primero obligatorio que es el array a copiar, el segundo es una función que hará un map de los elementos. Código: https://github.com/jessecogollo/arrayMethods/tree/03-from
9. .isArray() Este método determina si un valor que se le pasa por parámetro es un array. Código: https://github.com/jessecogollo/arrayMethods/tree/04-isArray
10. .of() Este método retorna un nuevo array cuyos elementos son los parámetros que se le pasaron en la función. Código: https://github.com/jessecogollo/arrayMethods/tree/05-of
11. .concat() Este método retorna un nuevo array cuyos elementos del array son los parámetros que se le pasaron en la función. Código: https://github.com/jessecogollo/arrayMethods/tree/06-concat
12. .every() Este método retorna true o false, dependiendo si todos los elementos cumplen con la condición que se establece en la función que se pasa como parámetro. Código: https://github.com/jessecogollo/arrayMethods/tree/07-every
13. .fill() *veneno Este método rellena con un valor fijo, los elementos que se le definan en el segundo y tercer parametro, si no se define rellena todo el array. Código: https://github.com/jessecogollo/arrayMethods/tree/08-fill
14. .filter() Este método retorna un nuevo array con los elementos que cumplan la condición establecida en la función que se le pasa como parámetro. Código: https://github.com/jessecogollo/arrayMethods/tree/09-filter
15. .find() Este método retorna el primer elemento que cumpla la condición establecida en la función que se le pasa como parámetro. Código: https://github.com/jessecogollo/arrayMethods/tree/10-find
16. .findIndex() Este método retorna el primer index que cumpla la condición establecida en la función que se le pasa como parámetro. De no encontrar ningún elemento retorna -1. Código: https://github.com/jessecogollo/arrayMethods/tree/11-findIndex
17. .forEach() Este método simplemente recorre el array y nos da acceso a cada elemento. Código: https://github.com/jessecogollo/arrayMethods/tree/12-forEach
18. .includes() Este método retorna true o false, si este encuentra al menos un elemento que sea igual al parámetro que se le pasa en la función. Código: https://github.com/jessecogollo/arrayMethods/tree/13-includes
19. .indexOf() Este método retorna el index de un array cuando un elemento es encontrado, o -1 si no se encuentra ningún elemento. Código: https://github.com/jessecogollo/arrayMethods/tree/14-indexOf
20. .join() Este método retorna un string concatenado por el parámetro (separador). Código: https://github.com/jessecogollo/arrayMethods/tree/15-join
21. .keys() Este método retorna un array iterator. Código: https://github.com/jessecogollo/arrayMethods/tree/16-keys
22. .lastIndexOf() Este método retorna el último índice del array, donde fue encontrado el elemento que se definió en el primer parámetro. Código: https://github.com/jessecogollo/arrayMethods/tree/17-lastIndex
23. .map() Este método retorna un nuevo array con el valor retornado por cada elemento del array. Código: https://github.com/jessecogollo/arrayMethods/tree/18-map
24. .pop() *veneno Este método remueve el último elemento de un array y retorna el elemento removido. Código: https://github.com/jessecogollo/arrayMethods/tree/19-pop
25. .push() *veneno Este método retorna agrega uno o más elementos al final de un array y retorna el length del array. Código: https://github.com/jessecogollo/arrayMethods/tree/20-push
26. .reduce() Este método retorna un valor definido por la función reducer. Código: https://github.com/jessecogollo/arrayMethods/tree/21-reduce
27. .reduceRight() Igual que el reduce, solo que este recorre el array de derecha a izquierda. Código: https://github.com/jessecogollo/arrayMethods/tree/22-reduceright
28. .reverse() *veneno reversa un array, no recibe parámetros. Código: https://github.com/jessecogollo/arrayMethods/tree/23-reverse
29. .shift() *veneno Este método retorna el primer elemento de un array, y modifica el tamaño del array original. Código: https://github.com/jessecogollo/arrayMethods/tree/24-shift
30. .slice() Este método retorna una porción de un array, la porción es definida por los valores en los parámetros(recibe dos, valor inicial y valor final). Código: https://github.com/jessecogollo/arrayMethods/tree/25-slice
31. .some() Este método retorna true o false. true si al menos un elemento cumple la condición proporcionada en la condición. Nota: si el array a evaluar es vacío === [] siempre va a retornar false sin importar la condición. Código: https://github.com/jessecogollo/arrayMethods/tree/26-some
32. .sort() Este método ordena un array. si no se pasan parámetros ordena con el valor en UTF-16, o se le pueden pasar dos parámetros que son los que se van a comparar. Código: https://github.com/jessecogollo/arrayMethods/tree/27-sort
33. .splice() *veneno Este método cambia el contenido de una array ya sea, añadiendo, reemplazado o eliminado el elemento. recibe tres ó mas elementos: start(integer): donde le decimos desde que índice va a operar. deleteCount(integer): especificamos la cantidad de elementos a eliminar. item1, item2, itemn…: indicamos el/los elementos que queremos insertar. Código: https://github.com/jessecogollo/arrayMethods/tree/28-splice
34. .toLocaleString() Este método retorna un string del elemento, es especial para Dates. Código: https://github.com/jessecogollo/arrayMethods/tree/19-tolocalestring
35. .toSource() *no usar en producción. Este método retorna un string con el código fuente del array. Código: https://github.com/jessecogollo/arrayMethods/tree/30-tosource
36. .toString() Este método retorna un string de los elementos del array. Código: https://github.com/jessecogollo/arrayMethods/tree/31-tostring
37. .unShift() *veneno Este método retorna el tamaño del array y agrega uno o más elementos al inicio de un array. Código: https://github.com/jessecogollo/arrayMethods/tree/32-unshift
38. .values() Este método retorna un array iterator, que contiene los elementos del array. Código: https://github.com/jessecogollo/arrayMethods/tree/33-values
39. .copyWithin() *veneno Este método copia un elemento de un array, en otra posición del mismo array. recibe tres parámetros: • la posición donde se va a copiar • el elemento que se va a copiar • el límite de elementos a copiar Código: https://github.com/jessecogollo/arrayMethods/tree/34-copywithin
40. .entries() Este método retorna un array iterator con la llave valor de cada elemento del array. Código: https://github.com/jessecogollo/arrayMethods/tree/35-entries
41. .flat() Este método retorna un nuevo array “aplanado” si este tiene contiene array(s) como elementos. Recibe un parámetro, en donde se le especifica que tan anidado debe hacer el “aplanado”. Código: https://github.com/jessecogollo/arrayMethods/tree/36-flat
42. .flatMap() Este método retorna un nuevo array. Es la combinación eficiente de hacer un map y un flat a un array. recibe una función(callback) como único parámetro. Código: https://github.com/jessecogollo/arrayMethods/tree/37-flatmap
43. Array iterator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Ar ray/@@iterator
44. Workshop… (?)
45. ¿Preguntas? *disclaimer: las marcadas como veneno, significa que sin las utilizan es bajo su propia responsabilidad.
46. Gracias !!!