Explora estas 27 funciones JavaScript en una sola línea, esenciales para el desarrollo diario de cualquier programador.
1. Copiar al portapapeles
Una útil función de JavaScript de una sola línea que le permite copiar fácilmente cualquier texto en el portapapeles.
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("This Sring is Copied To Clipboard.");2. Obtener un número aleatorio en un rango determinado
Una función importante de JavaScript para generar un número aleatorio en un rango específico de números. Como argumentos, se especifica un valor mínimo y máximo, y una función de una sola línea devuelve un número aleatorio de un rango determinado.
const numeroAleatorioEnRango = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;
numeroAleatorioEnRango();
// Resultado: El rango predeterminado de números aleatorios es de 0 a 100, por lo que obtendrás un número entre 0 y 100.
numeroAleatorioEnRango(100, 200);
// Resultado: Obtendrás un número aleatorio en el rango de 100 a 200, donde 100 es el valor mínimo y 200 es el valor máximo.
3. Convertir código RGB a hexadecimal
Una función útil que se utiliza para convertir RGB a código hexadecimal.
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// Resultado: #0033ff
4. Desplázate hasta la parte superior de la página
Otra característica útil de JavaScript que se utiliza para desplazarse automáticamente a la parte superior de una página web.
const goToTop = () => window.scrollTo(0, 0);
goToTop();5. Hallar el número de días intermedios entre dos fechas
La siguiente función es muy útil cuando se trabaja con calendario/fechas en JavaScript. Encuentre el número de días intermedios entre dos fechas dadas usando el siguiente código:
const diferenciaDias = (fecha1, fecha2) => Math.ceil(Math.abs(fecha1.getTime() - fecha2.getTime()) / 86400000);
diferenciaDias(new Date("2020-10-21"), new Date("2021-10-22"));
// Resultado: 366
6. Genere códigos de color hexadecimales aleatorios
Con esta función, puede generar códigos de color hexadecimales aleatorios, lo cual es muy útil cuando se trabaja en proyectos front-end.
const hexAleatorio = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(hexAleatorio());
// Resultado: #92b008
7. Comprobar si el día especificado es un día laborable
Con esta función, puede verificar si la fecha que está pasando como argumento es un día de la semana o un fin de semana.
const esDiaLaborable = (fecha) => fecha.getDay() % 6 !== 0;
console.log(esDiaLaborable(new Date(2021, 0, 11)));
// Resultado: true (lunes)
console.log(esDiaLaborable(new Date(2021, 0, 10)));
// Resultado: false (domingo)
8. Conversión de temperatura Fahrenheit/Celsius
Si especifica una temperatura en su proyecto, estas dos funciones de JavaScript serán útiles. Te ayudarán a convertir el valor Fahrenheit en el valor Celsius y viceversa.
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Ejemplos:
celsiusToFahrenheit(15);
// Resultado: 59
celsiusToFahrenheit(0);
// Resultado: 32
celsiusToFahrenheit(-20);
// Resultado: -4
fahrenheitToCelsius(59);
// Resultado: 15
fahrenheitToCelsius(32);
// Resultado: 0
9. Comprobar si el usuario tiene un dispositivo Apple
En muchos proyectos, necesitamos implementar funciones basadas en ciertos dispositivos. Puede utilizar esta función para averiguar si el usuario está operando con un dispositivo Apple o no.
const esDispositivoApple = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(esDispositivoApple);
// Resultado: Devolverá true si el usuario está utilizando un dispositivo de Apple
10. Obtener el tiempo de la fecha
Puede usar el método .toTimeString() y, al dividir la cadena en el lugar correcto, obtener la hora desde la fecha que proporciona o la hora actual.
const tiempoDesdeFecha = fecha => fecha.toTimeString().slice(0, 8);
console.log(tiempoDesdeFecha(new Date(2021, 0, 10, 17, 30, 0)));
// Resultado: "17:30:00"
console.log(tiempoDesdeFecha(new Date()));
// Resultado: Devolverá el tiempo actual
11. Extraer HTML del texto
Una función JavaScript de una línea muy útil, que también es importante por razones de seguridad. Los usuarios pueden introducir valores basados en etiquetas. Al aceptar la entrada del usuario, puede extraer cualquier elemento HTML del texto del usuario mediante DOMParser.
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
const result = stripHtml('<h1>Hello <strong>World</strong>!!!</h1>');
console.log(result); // Output: Hello World!!!
12. Alternar "mostrar/ocultar elemento"
Puede alternar fácilmente la función de mostrar/ocultar de un elemento utilizando este método de una sola línea utilizando el valor de la propiedad de visualización CSS.
const alternarVisibilidadElemento = elemento => elemento.style.display = (elemento.style.display === "none" ? "block" : "none");
toggleElementDisplay(document.body);
// Resultado: Si el cuerpo de la página estaba visible anteriormente, se volverá invisible, y al ejecutar nuevamente el comando, se alternará su visibilidad.
13. Extensión de línea
Puede expandir una fila en una sola fila usando el botón , y .splitjoinreverse
const invertirCadena = str => str.split("").reverse().join("");
stringReverse('elcitra ym ekil uoy epoh i');
// Resultado: "i hope you like my article"
14. Poner en mayúscula una línea
Dado que JavaScript no tiene un método integrado para esta acción, puede poner en mayúsculas la cadena con esta función de una sola línea.
const capitalizar = str => str.charAt(0).toUpperCase() + str.slice(1);
capitalizar("i hope you like my article.");
// Resultado: "I hope you like my article."
15. Redondear decimales a un cierto número de decimales
Cuando se trata de cantidades, es muy importante hacer los cálculos decimales correctamente. Usar el método de redondear decimales a un número fijo de decimales no es una tarea fácil en JavaScript. El método toFixed() integrado de JavaScript puede manejar fácilmente esta tarea, pero en algunos casos produce resultados extraños debido a la aritmética de punto flotante.
Para evitar este problema, puede aplicar los números en representación exponencial y usar Math.round() para obtener un decimal redondeado a un número determinado de decimales.
// Comportamiento predeterminado de la función toFixed en JavaScript:
Number((1.005).toFixed(2)); // Produce 1 en lugar de 1.01
Number((1.555).toFixed(2)); // Produce 1.55 en lugar de 1.56
const redondear = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d);
redondear(1.005, 2); // Resultado: 1.01
redondear(1.555, 2); // Resultado: 1.56
16. Barajado de matrices
Puede usar el siguiente código para mezclar la matriz. Utiliza los métodos y .sortrandom
const mezclarArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(mezclarArray([1, 2, 3, 4]));
// Resultado: [1, 4, 3, 2]
17. Detección de modo oscuro
Averigüe si el dispositivo del usuario está en modo oscuro mediante el siguiente código.
const esModoOscuro = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(esModoOscuro);
// Resultado: true o false
18. Recuperación de parámetros de solicitud de URL
Una característica muy útil para aquellos que se ocupan de urls y parámetros de consulta. Puede obtener fácilmente los parámetros de consulta de la url pasando url como argumento a la función.
const obtenerParametros = (URL) => JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
obtenerParametros("https://www.google.de/search?q=cars&start=40");
// Resultado: { q: 'cars', start: '40' }
19. Obtener el valor promedio de una matriz de números
El reductor de JavaScript permite calcular el valor medio de varias matrices de la misma serie. El método Reduce es muy útil cuando se escriben soluciones unifilares para una serie de problemas, como encontrar una suma o un máximo en una matriz de números.
const promedio = arr => arr.reduce((a, b) => a + b) / arr.length;
promedio([21, 56, 23, 122, 67]);
// Resultado: 57.8
20. Comprobación de la compatibilidad del usuario actual con los eventos táctiles
const esSoporteTactil = () => ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
console.log(esSoporteTactil());
// Resultado: Devolverá true si los eventos táctiles son compatibles, y false si no lo son.
21. Determinación del número secuencial de un día en un año
Otra característica muy útil de JavaScript relacionada con el trabajo con fechas/calendarios. De hecho, permite conocer el número secuencial del día del año. Por ejemplo, el 6 de febrero es el día 37 de los 365 días del año.
const diaDelAño = (fecha) => Math.floor((fecha - new Date(fecha.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Resultado: 272
22. Recuperar el valor de la cookie del navegador
Una función JavaScript útil y corta diseñada para recuperar el valor de la cookie del navegador.
const obtenerCookie = nombre => `; ${document.cookie}`.split(`; ${nombre}=`).pop().split(';').shift();
obtenerCookie('_ga');
// Resultado: "GA1.2.1929736587.1601974046"
23. Borrar todas las cookies del navegador
¿Necesita borrar todas las cookies almacenadas en una página web? Acceda a las cookies y bórrelas.document.cookie
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));<span class="hljs-keyword"></span>
24. Obtener un valor booleano aleatorio (verdadero/falso)
Esta función devolverá un valor booleano (verdadero o falso) usando el archivo . creará un número aleatorio entre 0 y 1, después de lo cual comprobamos si es mayor o menor que 0,5. Esto significa que la probabilidad de obtener verdadero o falso es 50/50.Math.random()Math.random
const booleanoAleatorio = () => Math.random() >= 0.5;
console.log(booleanoAleatorio());
// Resultado: 50/50 al devolver true o false.
25. Eliminación de duplicados en una matriz
Los conjuntos en JavaScript almacenan solo elementos únicos. Podemos usar este comportamiento para eliminar duplicados de la matriz. Sin embargo, esta técnica solo funciona con matrices que almacenan datos primitivos. Por lo tanto, tendrá que escribir una solución de varias líneas para eliminar los duplicados en las matrices que almacenan objetos. Sin embargo, es un método muy eficaz para eliminar duplicados en escenarios sencillos.
const eliminarDuplicados = (arr) => [...new Set(arr)];
removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
// Resultado: [31, 56, 12, 45]
26. Comprobación de la exactitud de la fecha
Verifique que la fecha ingresada por el usuario sea correcta usando esta función Js.
const esFechaValida = (...val) => !Number.isNaN(new Date(...val).valueOf());
esFechaValida("December 17, 1995 03:24:00");
// Resultado: true
27. Obtener un elemento aleatorio de una matriz
Esta función de una sola línea devuelve un elemento aleatorio de la matriz de entrada que se pasa como argumento a la función.
const elementoAleatorioArray = (arr) => arr[Math.floor(Math.random() * arr.length)];
randomArrayItem(['lol', 'a', 2, 'foo', 52, 'Jhon', 'hello', 57]);
// Resultado: Un elemento aleatorio del array.
