JavaScript — Array (Métodos transformadores, Métodos accesores)
Antes de iniciar quiero agradecer a mi buen amigo David , por ayudarme a que este post haya quedado más completo.
Temario
- Introducción al array
- Métodos transformadores (push, pop, shift, unshift, splice, reverse, sort)
- Métodos accesores (concat, join, slice, toString, indexOf, lastIndexOf, includes)
i.Introducción al array
El Array en JavaScript es un objeto que sirve para construir arreglos que son objetos tipo lista de alto nivel, donde podemos crearlo como instancia o asignación.
Cuando creamos nuestro arreglo como instancia, la sintaxis es de la siguiente manera:
Cuando creamos nuestro arreglo por asignación, la sintaxis es de la siguiente manera:
Independientemente como se cree el Array; este contiene una serie de métodos para su manipulación (recordemos que hereda de manera prototipada), y lo podemos separar en dos grupos:
- Métodos transformadores
- Métodos accesores
ii.Métodos transformadores
Estos métodos son aquellos que SÍ modifican (mutan) nuestro arreglo sin necesidad de que el resultado sea nuevamente asignado a la variable; veamos como funciona cada uno de ellos…
Me he tomado la libertad de agruparlos de la siguiente manera:
- Insertar: push (al final) y unshift (al principio)
- Eliminar: pop (al final) y shift (al principio)
- Insertar/Eliminar: splice (dependiendo los parámetros)
- Alterar: reverse, sort
Bien, ya que los tenemos identificados, vamos a ver cada uno de ellos…
a — push
Este método nos permite introducir uno o varios elementos al FINAL de la lista y además retorna el tamaño de la lista.
b — pop
Este método nos permite eliminar el ÚLTIMO elemento de la lista y además retorna el tamaño de la lista.
Una de las ventajas que tiene este método, es que aunque el arreglo este vacío y se utilice, solo nos va a retornar undefined
c — unshift
Este método nos permite introducir uno o varios elementos al PRINCIPIO de la lista y además retorna el tamaño de la lista.
d — shift
Este método nos permite eliminar el PRIMER elemento de la lista y además retorna el tamaño de la lista.
Al igual que el método pop, el método shift tiene la ventaja de que aunque el arreglo este vacío y se utilice, solo nos va a retornar undefined
e — splice
Este método inserta o elimina uno o varios elementos en cualquier posición del arreglo (dependiendo de los parámetros), para saber qué acción realizar es importante entender su sintaxis:
De acuerdo a la imagen anterior podemos decir que:
- a — El índice donde va a iniciar el arreglo (recordemos que inicia con 0)
- b — (opcional) Es el número de elementos a eliminar de acuerdo a la posición inicial (a)
- c — (opcional) Son los valores que vamos a insertar
Dependiendo de los parámetros que mandemos es el resultado que vamos a obtener.
Pensemos que tenemos el siguiente arreglo:
En memoria debe verse algo así:
El PRIMER parámetro nos indica la posición (índice) donde va a iniciar el arreglo; pensemos que queremos comenzar en la posición 3:
Si decidimos no mandar más parámetros va a suceder lo siguiente:
- Se va a posicionar en el índice le indicamos.
- A partir de esa posición en adelante los va a borrar (el segundo parámetro automáticamente toma el ancho restante del arreglo)
Entonces si no queremos borrar todos los restantes, hacemos uso del SEGUNDO parámetro, este nos indica cuantos elementos vamos a eliminar; pensemos que queremos borrar 2 elementos:
Si decidimos no mandar más parámetros va a suceder lo siguiente:
- Se va a posicionar en el índice le indicamos.
- A partir de esa posición va borrar los elementos que le hemos indicado.
Qué pasaría si nosotros no queremos borrar ninguno, pero si insertar nuevos valores, hacemos uso del TERCER parámetro, este nos indica los valores que vamos insertar; pensemos que queremos agregar 4 nuevos valores:
Entonces va a suceder lo siguiente:
- Se va a posicionar en el índice le indicamos.
- A partir de esa posición va borrar los elementos que le hemos indicado, en el caso de nuestro ejemplo al ponerle 0 NO borra ninguno.
- A partir del tercer parámetro son los valores que va a considerar el método splice para agregar al arreglo.
Es importante considerar las siguientes reglas para los parámetros:
- Para el parámetro ‘a’ —Si nosotros ponemos un número mayor a la longitud del arreglo SIEMPRE será la última posición del arreglo; en caso de que sea negativo, empezará esa cantidad de elementos contando desde el final.
- Para el parámetro ‘b’ — Si le indicamos el valor 0 o negativo, no va a borrar ningún elemento; si ponemos un valor mayor a 1, desde la posición indicada borrará los elementos indicados
Este método es bastante útil cuando queremos insertar/eliminar elementos dentro del arreglo en posiciones específicas; veamos más ejemplos:
f — reverse
Este método nos permite invertir orden de la lista y además retorna el arreglo de la invertido.
g — sort
Por default este método ordenará los elementos con base a la posición del valor del string de acuerdo a su valor UNICODE[ref], y retorna el arreglo ordenado.
En el ejemplo anterior, podemos observar que el orden de los valores quizás no es el que esperábamos, ya que por lógica debería de ordenar de manera correcta los números y después las letras; por fortuna el método sort nos permite introducir una función para personalizar la forma de ordenamiento, su sintaxis es la siguiente:
Veamos un ejemplo:
Si has leído todas las stories pasadas, sabrás que estas líneas nos dicen mucho:
Sabemos que:
- Estamos usando el método sort que tiene el Array (método propio que es adquirida de forma prototípica) [ref].
- Estamos usando función de orden superior y el return [ref]
- Estamos usando closures [ref]
Podemos simplificar código y convertirlo en arrow functions [ref]:
El ejemplo de arriba es una de las tantas formas que podemos ordenar números (si te interesa ver mas ejemplos [aquí]).
Veamos un ejemplo con cadenas:
Observamos que realmente sí está ordenado, pero no como esperábamos… el problema es de que el método sort de acuerdo a la tabla UNICODE[ref] el valor de las mayúsculas vale más que las minúsculas, inclusive NO ordena de manera correcta con acentos y caracteres especiales…
Para ordenar cadenas con caracteres no ASCII (letras con acentos, letras que no están el idioma inglés) se utiliza el método localeCompare.
El método localeCompare devuelve un número que indica si una cadena de referencia viene antes, después o es la misma que la cadena dada en orden de clasificación [ref].
El método localeCompare tiene muchas propiedades muy útiles (si quieres ver saber [aquí]), para nuestro caso nos basta con la sintaxis básica. Además es importante saber que este es un método que lo heredan todos los valores tipo String, y funciona de la siguiente manera:
Podemos observar en el ejemplo de arriba que la respuesta que arroja el método es justo lo que necesitamos para ordenar un arreglo (-1, 0, 1).
Entonces, aplicando el método, nuestro ejemplo quedaría de la siguiente manera:
Podemos observar en nuestro ejemplo, que efectivamente ya ordena como nosotros esperábamos.
Importante: al ser un método de String NO va a funcionar con valores tipo numéricos (a menos que vengan como cadena), veamos el siguiente ejemplo:
Si queremos que ordene números tipo String (1, 2, 3, …), debemos agregar unos parámetros extras a nuestro método de localeCompare[ref]:
Inclusive hasta podemos ordenar objetos:
Super Importante: La documentación de mozilla nos dice que NO confiemos en el retorno de los valores exactos de -1 y 1, ya que puede variar entre navegadores (pueden regresar -2 o 2 u otro valor)[ref]; así que recomiendo hacer pruebas antes de hacer uso del método en producción.
Bien, hasta aquí hemos visto todos los métodos transformadores (recordemos que su mayor característica es la mutabilidad del arreglo), ahora veamos que y cuales son los métodos accesores…
iii. Métodos accesores
Estos métodos NO modifican el arreglo (no mutan) y retornan una representación del arreglo
a — concat
Este método permite tomar varios arreglos y unirlos en uno solo, para posteriormente ser asignado a una variable.
b — join
Este método convierte el arreglo en un string y como parámetro permite introducir un carácter separador.
c — slice
Este método permite extraer una sección de la lista sin afectarla al arreglo original, veamos cómo funciona:
Dependiendo de los parámetros que mandemos es el resultado que vamos a obtener.
Pensemos que tenemos el siguiente arreglo:
En memoria debe verse algo así:
El PRIMER parámetro nos indica la posición (índice) donde va a iniciar la extracción del arreglo; pensemos que queremos comenzar en la posición 3:
Si decidimos no mandar más parámetros va a suceder lo siguiente:
- Se va a posicionar en el índice le indicamos.
- A partir de esa posición nos va a retornar un nuevo arreglo con los valores restantes.
Entonces si no queremos extraer todos los restantes, hacemos uso del SEGUNDO parámetro, este nos indica hasta qué elemento vamos a extraer (pero sin incluirlo); pensemos que queremos extraer 2 elementos:
Se pone el número 5, ya que 5 – 3 = 2, y son los valores que vamos a extraer, para nuestro ejemplo sería el 4 y 5 .
Este método es bastante útil cuando queremos extraer elementos del arreglo de posiciones específicas; veamos más ejemplos:
d — toString
Este método trata de convertir el arreglo a su representación en string
e — indexOf
Este método regresa el primer índice que coincida con la búsqueda, en caso de no encontrarlo regresará un -1
Algo importante que debemos considerar es que solo nos va a regresar el índice del primer valor que coincida:
f — lastIndexOf
Este método regresa el último índice que coincida con la búsqueda, en caso de no encontrarlo regresará un -1
Debemos considerar es que solo nos va a regresar el índice del último valor que coincida:
g — includes
Este método regresa true si en el arreglo se encuentra el valor dado, de lo contrario regresa false.
En la siguiente entrega vamos a ver JavaScript — Loops
La entrega pasada vimos JavaScript — Closures & Currying
Bibliografía y links que te puede interesar…
