RSS Feed

Trabajar con arreglos en javascript (parte 1)

12

octubre 30, 2012 by - @ferrod20

Trabajar con arreglos es una tarea habitual para cualquier programador, particularmente para aquellos que elegimos el lenguaje javascript. Recorrer un arreglo, encontrar un elemento, obtener ciertos elementos según sus características son tareas frecuentes. Pequeños pedazos de código para manejar arreglos se copian y pegan (o en el mejor de los casos se reescriben) continuamente. La pregunta es simple: Algo que nos resulta tan natural y que estamos tan acostumbrados a hacer día a día, ¿lo estamos haciendo de la mejor manera?

A continuación se muestran los métodos de la clase array y algunos ejemplos de como pueden mejorar nuestro código notablemente. Estos métodos tienen implementación nativa en navegadores modernos, con lo cual la eficiencia es superior comparada con la eficiencia de cualquier otra librería .js para colecciones (se puede utilizar array.js para obtener soporte completo). Todavía más: por su vasta funcionalidad, los métodos de la clase array abarcan a casi todos los métodos de colecciones no nativos, solo hay que aprender a utilizarlos.

Métodos

Eliminar

pop: Elimina el ultimo elemento. Devuelve el elemento eliminado.
shift: Elimina el primer elemento. Devuelve el elemento eliminado.

Agregar

push: Agrega al final del arreglo uno o más elementos. Devuelve la nueva longitud.
unshift: Agrega uno o más elementos al inicio. Devuelve la nueva longitud.
splice: Agrega y/o elimina elementos.

Orden

reverse: Da vuelta el arreglo.
sort: Ordena los elementos.

Unión

concat: Une 2 arreglos.
join: Une los elementos en un string.

Posición

indexOf: Devuelve el índice del primer elemento encontrado.
lastIndexOf: Devuelve el índice del último elemento encontrado.

Recorrer

forEach: Ejecuta una función para cada elemento del arreglo.
filter: Devuelve un nuevo arreglo cuyos elementos satisfacen la función pasada por parámetro.
map: Dada una función de conversión, devuelve un nuevo arreglo con cada elemento convertido.
some: Dada una función, devuelve verdadero si algún elemento cumple con la misma.
every: Dada una función, devuelve verdadero si todos los elementos cumplen con la misma.

Ejemplos

var arr = ['durazno', 'pera', 'manzana', 'banana', 'mandarina']

arr.pop()
> "mandarina" //el arreglo queda: ["durazno", "pera", "manzana", "banana"]

arr.shift()
> "durazno" //el arreglo queda: ["pera", "manzana", "banana"]

arr.push('naranja')
> 4 //el arreglo queda: ["pera", "manzana", "banana", "naranja"]

arr.unshift('kiwi')
> 5 //el arreglo queda: ["kiwi", "pera", "manzana", "banana", "naranja"]

arr.splice(0,1)
> ["kiwi"] //el arreglo queda: ["pera", "manzana", "banana", "naranja"]

arr.splice(2,2)
> ["banana", "naranja"] //el arreglo queda: ["pera", "manzana"]

arr.splice(2,0, "banana", "naranja")
> [] //el arreglo queda: ["pera", "manzana", "banana", "naranja"]

arr.splice(0,1, "kiwi")
> ["pera"] //el arreglo queda: ["kiwi", "manzana", "banana", "naranja"]

arr.reverse()
> ["naranja", "banana", "manzana", "kiwi"] //el arreglo queda: ["naranja", "banana", "manzana", "kiwi"]

arr.sort()
> ["banana", "kiwi", "manzana", "naranja"] //el arreglo queda: ["banana", "kiwi", "manzana", "naranja"]

arr.concat(['pera', 'pomelo'])
> ["banana", "kiwi", "manzana", "naranja", "pera", "pomelo"] //el arreglo queda: ["banana", "kiwi", "manzana", "naranja"]

arr.join()
> "banana,kiwi,manzana,naranja"

arr.indexOf('naranja')
> 3

arr.indexOf('kiwi')
> 1

En la segunda parte de este artículo se muestran ejemplos de los métodos más interesantes de array: forEach, filter, map, every, some


  • http://twitter.com/pepoviola pepo

    Muy bueno!! Saludos!

  • tito

    Buen resumen!

    Podrían debatir cuál es la mejor forma de obtener la cabeza (“head”) y la cola (“tail”) del arreglo. Me interesa sobremanera las técnicas/estilos de programación funcional.

    • matiasarriola

      Buenas, la verdad que hablando de javascript, sin bibliotecas de por medio, no existe tal cosa, sino que lo tenés que hacer a mano. Si encontrás que vas a necesitar usar ese tipo de funciones recurrentemente, podés escribir la tuya y reutilizarla. Asimismo, hay muchísimas bibliotecas que implementan métodos first() y last().

      Por ejemplo usando underscorejs, podés usar head : _.head(array); .. (head es un alias de first, de la misma manera existe last o tail).

      Sugarjs también implementa first y last, pero alterando el prototype de Array, al igual que la biblioteca prototype. Su uso sería algo así como elArray.last().

      En esta pregunta de stackoverflow se menciona el tema.

      En resumen: es cuestión de gustos, no creo que haya una mejor forma, pero a simple vista el problema ya se solucionaría haciendo array[0] y array[array.length - 1] respectivamente. Ahora sí, a mi juzgar no queda lo más “limpio” ver eso repetido por todos lados en el código.

      Tengo ganas de armar algún post sobre técnicas de programación funcional en js, como aplicación parcial, así que cuando tenga tiempo lo haré, tal vez podamos usar last como ejemplo :).

      saludos

      • pjnovas

        +1 para ese post Mati!!! :)

    • tito

      Matías, qué tal?

      En realidad cuando me refiero a “tail” no quiero decir “array[array.length – 1]” (que eso sí sería “last”), más bien quiero obtener un nuevo arreglo con todos los elementos del original menos el primero (o sea menos “array.head()”).

      Y además quiero conservar el arreglo original, por lo que después de invocar al método no debería mutar.

      Bueno, les dejo la pregunta para el futuro post de programación funcional en js.

      Muy bueno el blog!

      • matiasarriola

        Gracias tito! perdón, me emocioné con otros temas :P
        En ese caso se puede usar el método slice del array.
        La forma “a mano” sería la siguiente.

        var a = [1,4,7];
        a.slice(1); // [4, 7]
        a; // [1, 4, 7]
        a.slice(1).slice(1); // [7]
        a.slice(2); // [7]

        slice no te va a modificar el array original, te va a devolver uno nuevo. Es más, a veces se usa como “truquito” hacer array.slice(0); para obtener un clon del array.

        Saludos!

        • tito

          Muy, muy, bueno. Claro, no había pensado que slice no modifica el arreglo.

          El “slice(0)” también está útil.

          Abz!

  • Pingback: joel

  • Pingback: william

  • Pingback: Chester

  • Pingback: david

  • Pingback: David