Array methods - Speaker Deck

Slide 1

Slide 1 text

Array methods @jessecogollo Software developer at Advice Interactive Group @medellinjs/@mongodbmedellin/@jsconfcoco-organizer

Slide 2

Slide 2 text

Motivación Qué mejor que conocer los métodos nativos que JS nos ofrece para manipular Arrays.

Slide 3

Slide 3 text

¿Qué conoceremos hoy? ● .length() ● .from() ● .isArray() ● .of() ● .concat() ● .every() ● .fill() ● .filter() ● .find() ● .findIndex() ● .forEach() ● .includes() ● .indexOf() ● .join() ● .keys() ● .lastIndexOf() ● .map() ● .pop()

Slide 4

Slide 4 text

¿Qué conoceremos hoy? ● .push() ● .reduce() ● .reduceRight() ● .reverse() ● .shift() ● .slice() ● .some() ● .sort() ● .splice() ● .toLocaleString() ● .toSource() ● .toString() ● .unShift() ● .values() v10.9

Slide 5

Slide 5 text

Y si tenemos tiempo... ● .copyWithin() ● .entries() ● .flat() v11 ● .flatMap() v11

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

.length() Este método nos retorna el número de elementos en el array. Código: https://github.com/jessecogollo/arrayMethods/tree/02-length

Slide 8

Slide 8 text

.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

Slide 9

Slide 9 text

.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

Slide 10

Slide 10 text

.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

Slide 11

Slide 11 text

.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

Slide 12

Slide 12 text

.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

Slide 13

Slide 13 text

.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

Slide 14

Slide 14 text

.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

Slide 15

Slide 15 text

.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

Slide 16

Slide 16 text

.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

Slide 17

Slide 17 text

.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

Slide 18

Slide 18 text

.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

Slide 19

Slide 19 text

.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

Slide 20

Slide 20 text

.join() Este método retorna un string concatenado por el parámetro (separador). Código: https://github.com/jessecogollo/arrayMethods/tree/15-join

Slide 21

Slide 21 text

.keys() Este método retorna un array iterator. Código: https://github.com/jessecogollo/arrayMethods/tree/16-keys

Slide 22

Slide 22 text

.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

Slide 23

Slide 23 text

.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

Slide 24

Slide 24 text

.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

Slide 25

Slide 25 text

.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

Slide 26

Slide 26 text

.reduce() Este método retorna un valor definido por la función reducer. Código: https://github.com/jessecogollo/arrayMethods/tree/21-reduce

Slide 27

Slide 27 text

.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

Slide 28

Slide 28 text

.reverse() *veneno reversa un array, no recibe parámetros. Código: https://github.com/jessecogollo/arrayMethods/tree/23-reverse

Slide 29

Slide 29 text

.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

Slide 30

Slide 30 text

.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

Slide 31

Slide 31 text

.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

Slide 32

Slide 32 text

.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

Slide 33

Slide 33 text

.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

Slide 34

Slide 34 text

.toLocaleString() Este método retorna un string del elemento, es especial para Dates. Código: https://github.com/jessecogollo/arrayMethods/tree/19-tolocalestring

Slide 35

Slide 35 text

.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

Slide 36

Slide 36 text

.toString() Este método retorna un string de los elementos del array. Código: https://github.com/jessecogollo/arrayMethods/tree/31-tostring

Slide 37

Slide 37 text

.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

Slide 38

Slide 38 text

.values() Este método retorna un array iterator, que contiene los elementos del array. Código: https://github.com/jessecogollo/arrayMethods/tree/33-values

Slide 39

Slide 39 text

.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

Slide 40

Slide 40 text

.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

Slide 41

Slide 41 text

.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

Slide 42

Slide 42 text

.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

Slide 43

Slide 43 text

Array iterator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Ar ray/@@iterator

Slide 44

Slide 44 text

Workshop… (?)

Slide 45

Slide 45 text

¿Preguntas? *disclaimer: las marcadas como veneno, significa que sin las utilizan es bajo su propia responsabilidad.

Slide 46

Slide 46 text

Gracias !!!