Eliminar duplicados de un arreglo en JavaScript

Eliminar elementos duplicados de arreglos en JavaScript

En este post veremos cómo eliminar elementos repetidos o duplicados de un arreglo en JavaScript. Para esto, no nos limitaremos a arreglos con tipos de datos simples; sino también arreglos de objetos.

Eliminar duplicados de un arreglo en JavaScript

Eliminar duplicados de un arreglo en JavaScript

Explicado de otra forma, lo que haremos será:

  • Ver cómo eliminar datos primitivos (cadena, entero, booleano, etcétera) repetidos de arreglos en JavaScript
  • Eliminar objetos repetidos, ya sea basados en una propiedad o comparándolos en profundidad.

Vamos allá.

(más…)

Buscar índice de un elemento en arreglo de JavaScript

Buscar índice o posición de elemento en arreglo de JavaScript

El índice de un elemento en un arreglo es importante cuando realizamos búsquedas o comprobamos si determinado valor existe en un arreglo. Hoy veremos dos maneras de buscar la posición de un elemento en un arreglo de JavaScript.

Como primer ejemplo veremos el uso de indexOf, que busca datos en arreglos con tipos de datos que no son objetos.

Buscar índice de un elemento en arreglo de JavaScript

Buscar índice de un elemento en arreglo de JavaScript

En segundo lugar, veremos una nueva versión llamada findIndex que nos permite definir una función que será la que busque a partir de un criterio, algo así como un indexOf mejorado. Esto sirve muy bien cuando queremos buscar dentro de un arreglo de objetos o cuando queremos que se cumpla cierto criterio de búsqueda.

(más…)

Invertir cadena o palabra en JavaScript

Ya vimos cómo invertir una cadena o palabra en C y en Arduino. Ahora vamos a ver cómo rotar una cadena en JavaScript utilizando dos maneras o funciones.

Las cadenas en JavaScript son inmutables y no son parecidas a las de C. Es decir, en C son arreglos de caracteres pero en JavaScript no. Por lo tanto, para invertir una cadena en JavaScript tenemos que crear una nueva cadena.

Ya sea que llamemos a una función que regrese una nueva cadena o que creemos una, al final sí podremos lograr nuestro objetivo, y podrá invertir cadenas, palabras, oraciones completas y texto.

(más…)

Eliminar caché en Chrome

Luchando contra el caché de los navegadores

Evitar que los navegadores web guarden en caché nuestros scripts y plantillas

Los navegadores web guardan en caché algunos archivos para que a la próxima llamada se carguen más rápido. Esto es una mejora para el usuario final, pero no tanto para los programadores.

Hay ocasiones (y te das cuenta 2 horas después de depurar como loco) en las que un script de JavaScript falla, arreglas el error pero misteriosamente sigue apareciendo, por más que refresques o guardes cambios.

Lo mismo pasa con las vistas o los archivos HTML, a veces cambias algo en la vista y no aparece al usar la aplicación web.

Todo esto es debido al caché de los navegadores web. Hoy veremos cómo obligar a los navegadores a que ya no guarden ese caché, y también otras medidas que podemos aplicar en caso de emergencia.

(más…)

App que explica la conversión hexadecimal a decimal

Explicando la conversión hexadecimal a decimal manualmente usando JavaScript

App que explica cómo convertir hexadecimal a decimal en JavaScript con Vue.JS 2

Como lo dije en otro post, hice una pequeña app que te explica cómo convertir un número hexadecimal a decimal. No es como cuando vimos conversión entre bases con JS, pues eso se hacía pero el lenguaje se encargaba.

Lo que trato de hacer aquí es explicar el procedimiento para realizar la conversión. Esto es por si estamos en nuestras clases de matemáticas discretas o simplemente algún día necesitamos hacer la conversión hexadecimal-decimal a mano.

Nota: te invito a ver una app que convierte bases.

(más…)

Subir archivos con JavaScript, fetch y FormData a PHP

Cargar archivo a PHP desde JavaScript con FormData

Introducción

Enviar datos con AJAX es algo relativamente fácil; pues al final de todo son simples datos. Ya sean cadenas o números, todo es texto. Pero algo distinto pasa cuando queremos cargar un archivo o fichero con JavaScript hacia PHP.

Esto es más complicado cuando queremos hacerlo con AJAX, pues no hay una forma estandarizada de enviar un archivo; y nos topamos con que el usuario podría seleccionar archivos pesados.

Lo que nos quedaría sería poner un formulario y agregar un <input type="file"> pero nuestra página perdería dinamismo. Afortunadamente desde hace algunos años existe la API de FormData, la cual ofrece una manera de enviar todo tipo de datos como se enviarían en un formulario; con la ventaja de poder hacerlo sin interrumpir al usuario o recargar la página.

(más…)

Convertidor binario octal decimal hexadecimal en JavaScript

Haciendo un conversor de bases numéricas con JavaScript y Vue JS 2

Introducción

Para reforzar y aplicar lo que vimos en cómo convertir entre binario, octal, decimal y hexadecimal en JavaScript decidí crear un convertidor (o conversor) de bases numéricas o números. Lo que hace es muy simple, convierte (desde cualquier base) a las siguientes:

  • Binario
  • Octal
  • Decimal
  • Hexadecimal

Para agregarle más comodidad al usuario pusimos la opción de copiar el texto directamente en el portapapeles.

Veamos una pequeña explicación.

(más…)

Explicación de watch en Vue JS 2

Introducción

Vue.Js es un framework maravilloso. Ofrece, al igual que AngularJS (y no sé cuáles otros, no los he usado) una forma de vigilar el cambio de un valor a través de un watch, watcher u observador. Esto permite observar el cambio de una variable, ya sea primitiva o compleja como un objeto o arreglo.

Veamos entonces cómo usar de forma correcta a watch en el framework web de JavaScript Vue.js

(más…)

Juego de la serpiente en JavaScript: versión 2

Introducción

Como he visto que mi implementación del juego de la serpiente ha ganado un poco de visitas (lo que significa que puede que alguien lo use, y qué pena que esté incompleto) decidí darle mantenimiento. Y por lo tanto, he escrito la versión 2 del juego de snake en JavaScript. Esto trae nuevos cambios…

  • Ya no es necesario jQuery (ya estamos en el 2018, incluso hay robots en Marte y es una vergüenza seguir usándolo). Además, sólo se usaba para los selectores, lo cual puede ser fácilmente remplazado por querySelector
  • Ahora sí toma la pantalla completa, sin scrolls o barras (era molesto porque al usar el teclado, la ventana bajaba o subía)
  • Lo mejor es: ahora ya no sigue avanzando cuando choca contra una pared

Veamos cómo logramos eso, además de explicar las cosas paso por paso. El código fuente está en GitHub, y la versión para jugar en el navegador la dejaré abajo. Vamos allá.

(más…)

Conversiones de números en JavaScript: Binario, Octal, Hexadecimal y Decimal

Introducción

Hoy veremos cómo podemos convertir números a una base distinta en JavaScript. Es decir, cómo hacer la operación (y lo inverso) para convertir un número de determinada a base a otra. Por ejemplo, convertir binario a octal, binario a decimal, decimal a hexadecimal y todas esas conversiones.

Para ello, no utilizaremos más que los métodos que le lenguaje provee; nada de librerías externas o algoritmos complicados.

(más…)