Este es el segundo día de mi participación en el Desafío de actualización de noviembre. Para obtener detalles del evento, consulte: Desafío de última actualización de 2021
Recientemente, vi algunos artículos sobre una línea de código en la comunidad técnica extranjera. Lo encontré muy interesante. Lo resolví y lo compartí contigo. Espero que te ayude~
Estos métodos usan algunas API para simplificar la operación, pero algunos métodos no son muy elegantes para escribir una línea, ¡así que aquí aprendemos principalmente las habilidades para usar la API!
1. Fecha de procesamiento
1. Comprobar si la fecha es válida
Este método se utiliza para comprobar si la fecha dada es válida:
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00"); // true
复制代码2. Calcula el intervalo entre dos fechas
Este método se utiliza para calcular el intervalo entre dos fechas:
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1")) // 90
复制代码Quedan 90 días hasta el Año Nuevo Chino~
3. Encuentra el día del año donde se encuentra la fecha
Este método se usa para detectar qué día la fecha dada cae dentro del año:
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()); // 307
复制代码Han pasado más de 300 días en 2021 ~
4. Formato de tiempo
Este método se puede utilizar para convertir el tiempo al formato de hora:minutos:segundos:
const timeFromDate = date => date.toTimeString().slice(0, 8);
timeFromDate(new Date(2021, 11, 2, 12, 30, 0)); // 12:30:00
timeFromDate(new Date()); // 返回当前时间 09:00:00
复制代码Segundo, procesamiento de cadenas
1. Escriba en mayúscula la primera letra de la cadena
Este método se utiliza para poner en mayúscula la primera letra de una cadena en inglés:
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world") // Hello world
复制代码2. Voltear la cuerda
Este método se usa para voltear una cadena y devolver la cadena invertida:
const reverse = str => str.split('').reverse().join('');
reverse('hello world'); // 'dlrow olleh'
复制代码3. Cadena aleatoria
Este método se utiliza para generar una cadena aleatoria:
const randomString = () => Math.random().toString(36).slice(2);
randomString();
复制代码4. Cadena truncada
Este método trunca una cadena de una longitud especificada:
const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString('Hi, I should be truncated because I am too loooong!', 36) // 'Hi, I should be truncated because...'
复制代码5. Eliminar HTML de la cadena
Este método se utiliza para eliminar elementos HTML de una cadena:
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
复制代码3. Procesamiento de matrices
1. Eliminar duplicados de una matriz
Este método se usa para eliminar duplicados en una matriz:
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
复制代码2. Compruebe si la matriz está vacía
Este método se usa para verificar si una matriz está vacía, devolverá un valor booleano:
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]); // true
复制代码3. Combinar dos matrices
Se pueden fusionar dos matrices usando los dos métodos siguientes:
const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];
复制代码4. Operación digital
1. Determinar si un número es par o impar
Este método se utiliza para determinar si un número es par o impar:
const isEven = num => num % 2 === 0;
isEven(996);
复制代码2. Obtenga el promedio de un conjunto de números
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 3
复制代码3. Obtenga un número entero aleatorio entre dos números enteros
Este método se utiliza para obtener un número entero aleatorio entre dos números enteros
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);
复制代码4. Redondee el número especificado de dígitos
Este método se utiliza para redondear un número al lugar especificado:
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56
复制代码Cinco, operación de color
1. Convertir RGB a dieciséis mecanismo
Este método puede convertir un valor de color RGB en un valor hexadecimal:
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255); // '#ffffff'
复制代码2. Obtenga un color hexadecimal aleatorio
Este método se utiliza para obtener un valor de color hexadecimal aleatorio:
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();
复制代码6. Operación del navegador
1. Copia el contenido al portapapeles
Este método usa navigator.clipboard.writeText para copiar texto al portapapeles:
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
复制代码2. Borrar todas las cookies
Este método puede acceder a las cookies y borrar todas las cookies almacenadas en la página web utilizando document.cookie:
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
复制代码3. Obtener el texto seleccionado
Este método obtiene el texto seleccionado por el usuario a través de la propiedad integrada getSelection:
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
复制代码4. Detecta si es modo oscuro
Este método se utiliza para detectar si el entorno actual está en modo oscuro, es un valor booleano:
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
复制代码5. Desplácese hasta la parte superior de la página
Este método se utiliza para volver al principio de la página:
const goToTop = () => window.scrollTo(0, 0);
goToTop();
复制代码6. Determinar si la pestaña actual está activa
Este método se utiliza para detectar si la pestaña actual se ha activado:
const isTabInView = () => !document.hidden;
复制代码7. Determine si el dispositivo actual es un dispositivo Apple
Este método se utiliza para detectar si el dispositivo actual es un dispositivo Apple:
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();
复制代码8. Si desplazarse hasta la parte inferior de la página
Este método se utiliza para determinar si la página ya está en la parte inferior:
const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
复制代码9. Redirigir a una URL
Este método se utiliza para redirigir a una nueva URL:
const redirect = url => location.href = url
redirect("https://www.google.com/")
复制代码10. Abra el cuadro de impresión del navegador
Este método se utiliza para abrir el cuadro de impresión del navegador:
const showPrintDialog = () => window.print()
复制代码7. Otras operaciones
1. Booleano aleatorio
Este método puede devolver un valor booleano aleatorio. Use Math.random() para obtener un número aleatorio de 0 a 1. En comparación con 0,5, existe la mitad de probabilidad de obtener un valor verdadero o un valor falso.
const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();
复制代码2. Cambio variable
Los valores de dos variables se pueden intercambiar sin una tercera variable utilizando el siguiente formulario:
[foo, bar] = [bar, foo];
复制代码3. Obtenga el tipo de la variable
Este método se utiliza para obtener el tipo de una variable:
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf(''); // string
trueTypeOf(0); // number
trueTypeOf(); // undefined
trueTypeOf(null); // null
trueTypeOf({}); // object
trueTypeOf([]); // array
trueTypeOf(0); // number
trueTypeOf(() => {}); // function
复制代码4. Conversión entre Fahrenheit y Celsius
Este método se utiliza para convertir entre Celsius y Fahrenheit:
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0
复制代码5. Comprueba si el objeto está vacío
Este método se utiliza para comprobar si un objeto de JavaScript está vacío:
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
复制代码Eso es todo por el artículo de hoy, si te parece útil, ¡dale a Me Gusta!