• Saltar al contenido principal
  • Skip to secondary menu
  • Saltar a la barra lateral principal
  • Saltar al pie de página
  • Inicio
  • Secciones
    • Ciencia de datos
    • Criptografía
    • Herramientas
    • Machine Learning
    • Noticias
    • Opinión
    • Productividad
    • Programación
      • JavaScript
      • Julia
      • Matlab
      • Python
      • R
  • Programación
    • JavaScript
    • Julia
    • Matlab
    • Python
    • R
  • Noticias
  • Boletín
  • Contacto
  • Tienda
    • Libros
    • Equipamiento de oficina
    • Equipamiento en movilidad
    • Tiendas afiliadas
      • AliExpress
      • Amazon
      • Banggood
      • GeekBuying
      • Lenovo

Analytics Lane

Ciencia e ingeniería de datos aplicada

  • Ciencia de datos
  • Machine Learning
  • Python
  • Pandas
  • NumPy
  • Matlab
  • Julia
  • JavaScript
  • Excel

Métodos para operar sobre arrays en JavaScript de forma eficiente

noviembre 4, 2019 Por Daniel Rodríguez Deja un comentario
Tiempo de lectura: 5 minutos

A la hora de trabajar con vectores de objetos el paradigma declarativo utilizado habitualmente el JavaScript puede ser un poco pesado. En estos suele ser más cómodo utilizar paradigma de programación funcional. JavaScript dispone de múltiples métodos para utilizar programación funcional, algunos de los más conocidos son map(), reduce(), filter() y find(). En esta entrada se va a mostrar como utilizar estos métodos para operar sobre arrays en JavaScript de forma eficiente.

La programación funcional

En su gran mayoría el código JavaScript se escribe bajo el paradigma declarativo. Un paradigma en el que cada línea es una instrucción en un proceso que ha de ser ejecutada en un orden concreto. En muchas ocasiones el orden de ejecución de las instrucciones puede ser indiferente, como puede ser a la hora de sumar los números de un vector.

Tradicionalmente estos problemas se resuelven mediante la utilización de un bucle. Pero los métodos de programación funcional permiten hacer esto de forma más eficiente. Para trabajar bajo este paradigma JavaScript disponemos de los métodos filter(), find(), map(), reduce(), every() y some()cuyo funcionamiento básico se explicará a continuación.

filter()

El método filter() permite buscar a los registros de un array que cumple una condición. Devolviendo como resultado un nuevo array con estos elementos.

Publicidad


A modo de ejemplo se puede utilizar un listado de clientes generado aleatoriamente para buscar aquellos que hubiesen gastado más de una cantidad. En el siguiente ejemplo se muestra cómo utilizar filter().

const clients = [{
	"id": 1,
	"name": "Adria Zack",
	"amount": 22.68
}, {
	"id": 2,
	"name": "Libby Willerstone",
	"amount": 11.91
}, {
	"id": 3,
	"name": "Antonetta Brandli",
	"amount": 6.91
}, {
	"id": 4,
	"name": "June Moverley",
	"amount": 7.93
}, {
	"id": 5,
	"name": "Kendrick Lindell",
	"amount": 18.13
}];
	
const spend = clients.filter(client => {
	return client.amount > 10;
});

// El resultado en spend es
// [ { id: 1, name: 'Adria Zack', amount: 22.68 },
//   { id: 2, name: 'Libby Willerstone', amount: 11.91 },
//   { id: 5, name: 'Kendrick Lindell', amount: 18.13 } ]

Lo primero que vemos es que filter() es un método del array al que hay que inyectar una función para aplicar sobre cada uno de los elementos que devuelve un valor verdadero o falso. Siendo seleccionados únicamente los elementos en los que la función devuelve el valor verdadero.

A pesar de ser un código ya compacto la función se puede simplificar. Como el método solamente tiene una línea se pueden eliminar las llaves y la palabra clave return.

const spend = clients.filter(client => client.amount > 10)

Esta línea devuelve los mismos resultados que todas la anteriores, pero es más compacta. Lo que permite dejar el código mucho más compacto y legible.

Publicidad


find()

Cuando solamente se desea identificar un registro que verifica la condición se puede utilizar find() en lugar defilter(). A diferencia del caso anterior el método no devuelve un array sino que el primer objeto que cumpla con la condición. Aplicando este método en el ejemplo anterior se obtendría.

const first = clients.find(client => client.amount > 10);

// El resultado en first es
// { id: 1, name: 'Adria Zack', amount: 22.68 }

every()

Si solamente se quiere comprobar que se cumple una condición se puede utilizar el método every(). Este método devuelve verdadero si todos los registros cumplen con la condición indicada o falso en caso contrario. Lo que permite comprobar si todos los clientes han realizado un gasto mínimo dato.

clients.every(client => client.amount > 5)  // true
clients.every(client => client.amount > 10) // false

En la primera línea el resultado es verdadero porque todos los clientes han gastado más de 5. Pero no así en la segunda, ya que hay clientes que han gastado menos de 10.

some()

Por otro lado para comprobar si algún registro cumple una condición se utilizará el método some(). Este devuelve verdadero si algún registro cumple la condición y falso en caso contrario.

Publicidad


clients.some(client => client.amount > 10) // true
clients.some(client => client.amount > 30) // false

map()

El método map() permite aplicar la función a cada uno de los registros y devolverá un nuevo array con los resultados. Por ejemplo, se puede obtener fácilmente un array con el nombre de los clientes.

const names = clients.map(client => client.name);

// El resultado en names es
// [ 'Adria Zack',
//   'Libby Willerstone',
//   'Antonetta Brandli',
//   'June Moverley',
//   'Kendrick Lindell' ]

reduce()

Finalmente, para obtener un único resultado se dispone del método reduce(). El cual es ligeramente diferente a los vistos anteriormente. En primer lugar, la función a inyectar requiere dos parámetros. El primero es el resultado del paso anterior y el segundo es el elemento evaluado actualmente. Como en la primera iteración no hay un valor previo se pasan los dos elementos del array.

Este método se puede utilizar para obtener el gasto total de los clientes. Lo que se puede hacer como se muestra a continuación.

const amount = clients.reduce((a, b) => {
	return { "amount": a.amount + b.amount };
});

// El resultado en amount es
//  { amount: 67.56 }

Otra alternativa es evaluar si la primera entrada es un elemento del array o un número.

Publicidad


const totalamount = clients.reduce((a, b) => {
	if (a.hasOwnProperty('amount')){
		return a.amount + b.amount;
	}else{
		return a + b.amount;
	}
});

Combinación de los métodos para operar sobre arrays en JavaScript

Si estos métodos son ya potentes por sí solos juntos lo son aún más. Es posible combinar todos ellos para crear complejas operaciones con poco código. Por ejemplo, obtener el nombre de los clientes que han comprado más de una cantidad. Para lo que en primer lugar es necesario aplicar el método filter() y posteriormente el método map(). Antes de aplicar el método map() no es necesario guardar los datos en una variable ya se puede aplicar directamente sobre la salida del método filter().

const names_10 = clients.filter(client => client.amount > 10).map(client => client.name);

Conclusiones

En esta entrada se han visto seis métodos para operar sobre arrays en JavaScript que permite producir código más compacto y claro. Una de las grandes ventajas de la programación funcional. Aunque hay que tener en cuenta que suelen ser más lentos que los bucles for, como se muestra en esta comparativa del rendimiento de los métodos de iteración en JavaScript. Salvo que el rendimiento sea clave y se trabaje con una cantidad enorme de registros estos métodos son una buena solución para mejorar nuestro código.

Imágenes: Pixabay (pasja1000)

¿Te ha parecido de utilidad el contenido?

¡Puntúalo entre una y cinco estrellas!

Puntuación promedio 0 / 5. Votos emitidos: 0

Ya que has encontrado útil este contenido...

¡Síguenos en redes sociales!

¡Siento que este contenido no te haya sido útil!

Publicidad


¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Publicaciones relacionadas

  • compass
    Creación de un proyecto TypeScript en Node (2º parte…
  • juggler
    Truco JavaScript: máximo o mínimo de un array en JavaScript
  • seagulls
    Eliminar duplicados de un vector JavaScript
  • JavaScript
    Estructurar las funciones JavaScript (Creación de…
  • font
    Localizar la palabra más larga en una cadena de…
  • compass
    Compilar con Webpack (4º parte - Creación de una…

Publicado en: JavaScript

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

I accept the Terms and Conditions and the Privacy Policy

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Publicidad





Barra lateral principal

Suscríbete a nuestro boletín

Suscríbete al boletín semanal para estar al día de todas las publicaciones.

Política de Privacidad

Analytics Lane en redes sociales

  • Amazon
  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • RSS
  • Twitter
  • Tumblr
  • YouTube

Publicidad

Entradas recientes

Mantener un sistema de alta disponibilidad con PostgreSQL y repmgr

diciembre 1, 2023 Por Daniel Rodríguez

Diferencias entre los errores 401 y 403 del estándar HTTP

noviembre 29, 2023 Por Daniel Rodríguez

Ver el código de cualquier función en Python

noviembre 27, 2023 Por Daniel Rodríguez

Publicidad

Es tendencia

  • Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas publicado el mayo 10, 2019 | en Python
  • Diferentes formas de ordenar dataframes en pandas publicado el abril 29, 2019 | en Python
  • Seleccionar filas y columnas en Pandas con iloc y loc publicado el junio 21, 2019 | en Python
  • Codificación JSON Archivos JSON con Python: lectura y escritura publicado el julio 16, 2018 | en Python
  • pandas Pandas: Cómo crear un DataFrame vacío y agregar datos publicado el noviembre 16, 2020 | en Python

Publicidad

Lo mejor valorado

4.9 (22)

Seleccionar filas y columnas en Pandas con iloc y loc

4.7 (12)

Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas

4.6 (15)

Archivos JSON con Python: lectura y escritura

4.5 (10)

Diferencias entre var y let en JavaScript

4.4 (13)

Ordenación de diccionarios en Python mediante clave o valor

Publicidad

Comentarios recientes

  • Anto en Rendimiento al iterar en JavaScript sobre un vector
  • Daniel Rodríguez en Creación de un certificado Let’s Encrypt en Windows con Win-Acme
  • Guillermo en Creación de un certificado Let’s Encrypt en Windows con Win-Acme
  • Daniel Rodríguez en ¿Cómo eliminar columnas y filas en un dataframe pandas?
  • Miguel en ¿Cómo eliminar columnas y filas en un dataframe pandas?

Publicidad

Footer

Analytics Lane

  • Acerca de Analytics Lane
  • Boletín de noticias
  • Contacto
  • Libros
  • Lo más popular
  • Noticias
  • Tienda
  • Tiendas afiliadas

Secciones

  • Ciencia de datos
  • Criptografía
  • Herramientas
  • Machine Learning
  • Opinión
  • Productividad
  • Programación
  • Reseñas

Sobre de Analytics Lane

En Analytics Lane tratamos de explicar los principales conceptos de la ciencia e ingeniería de datos con un enfoque práctico. Los principales temas tratados son ciencia de datos, ingeniería de datos, inteligencia artificial, machine learning, deep learning y criptografía. Además, también se habla de los principales lenguajes de programación y herramientas utilizadas por los científicos e ingenieros de datos.

Copyright © 2018-2023 Analytics Lane ·Términos y condiciones ·Política de Cookies ·Política de Privacidad ·Herramientas de privacidad ·Contacto