Recientemente, revisé el Libro Rojo y encontré algunos métodos de escritura interesantes. Muchas cosas se usan en la vida diaria, pero descubrí que todavía hay diferentes métodos de escritura. Combinado con algunos métodos que se usan en el trabajo diario, resumiré un artículo que a menudo se utilizado en la vida diaria Puede que no sepas el punto, espero que pueda ayudarte:
Tabla de contenido
Una línea de código completa la estructura más la asignación
Destrucción de los tipos de datos subyacentes
Deconstruya la matriz para obtener rápidamente el último valor
Convierte el subíndice a chino cero uno dos tres...
Diferentes formas de juzgar números enteros
Modifique el estilo globalmente detectando el color del tema del sistema a través de css
Baraja aleatoriamente el orden de la matriz
Obtener aleatoriamente un valor booleano
Mover el último elemento de la matriz al primer elemento
Coloque el primer elemento de la matriz en el último elemento
Use la matriz establecida para deduplicar
El nodo dom se desplaza suavemente hacia el área pero, arriba, abajo
Varios métodos de clonación de matrices
Calcular la diferencia en meses entre dos tiempos
Extraiga el año, mes, día, hora, minuto y segundo de la hora en un solo paso
Comprobar si un parámetro es una función
Calcular la distancia entre dos coordenadas
Detectar si dos nodos dom se superponen
Determinar si es un entorno NodeJs
Una línea de código completa la estructura más la asignación
A menudo usamos asignaciones de estructura en nuestra vida diaria. Por lo general, primero estructuramos y luego asignamos valores. Por supuesto, también podemos completar las operaciones de deconstrucción y asignación en una sola línea. Se ve muy simplificado. ¡Por supuesto, ya conoces la legibilidad!
let people = { name: null, age: null };
let result = { name: '张三', age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###
Destrucción de los tipos de datos subyacentes
No deberíamos usar tales escenarios en la vida diaria, pero de hecho también podemos deconstruir los tipos de datos básicos
const {length : a} = '1234';
console.log(a) // 4
Deconstruya la matriz para obtener rápidamente el último valor
De hecho, podemos deconstruir y asignar valores a matrices para obtener lengthatributos, y podemos hacer más cosas a través de esta función.
const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3
Convierte el subíndice a chino cero uno dos tres...
Necesitamos convertir el 012345 correspondiente en chino uno, dos, tres, cuatro, cinco... en la lista diaria. Vi que hay muchas líneas definidas manualmente por mí mismo en el proyecto anterior, así que escribí un método de conversión como este
export function transfromNumber(number){
const INDEX_MAP = ['零'，'一'.....]
if(!number) return
if(number === 10) return INDEX_MAP[number]
return [...number.toString()].reduce( (pre, cur) => pre + INDEX_MAP[cur] , '' )
}
Diferentes formas de juzgar números enteros
/* 1.任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
function isInteger(obj) {
return obj%1 === 0
}
/* 1. 添加一个是数字的判断 */
function isInteger(obj) {
return typeof obj === 'number' && obj%1 === 0
}
/* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
function isInteger(obj) {
return Math.floor(obj) === obj
}
/* 3. 通过parseInt判断 某些场景不准确 */
function isInteger(obj) {
return parseInt(obj, 10) === obj
}
/* 4. 通过位运算符*/
function isInteger(obj) {
return (obj | 0) === obj
}
Modifique el estilo globalmente detectando el color del tema del sistema a través de css
@mediapropiedades prefers-color-schemepara conocer el tema del sistema actual, por supuesto, debe verificar la compatibilidad antes de usar
@media (prefers-color-scheme: dark) { //... }
@media (prefers-color-scheme: light) { //... }
javascript también puede hacer fácilmente
window.addEventListener('theme-mode', event =>{
if(event.mode == 'dark'){}
if(event.mode == 'light'){}
})
window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => {
if (event.matches) {} // dark mode
})
Baraja aleatoriamente el orden de la matriz
Pasar 0.5: Math.random()para obtener un número aleatorio, y luego a través de dos sorttipos para codificar más a fondo, pero este método en realidad no es lo suficientemente aleatorio.Si se trata de una aplicación de nivel empresarial, se recomienda utilizar el segundo algoritmo de barajado.
shuffle(arr) {
return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
},
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const randomIndex = Math.floor(Math.random() * (i + 1))
;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
}
return arr
}
Obtener aleatoriamente un valor booleano
Al igual que el principio anterior, Math.random()el intervalo se obtiene mediante números aleatorios, 0-0.99y la probabilidad de utilizarlo 0.5en el medio es del 50%.
function randomBool() {
return 0.5 - Math.random()
}
Mover el último elemento de la matriz al primer elemento
function (arr){
return arr.push(arr.shift());
}
Coloque el primer elemento de la matriz en el último elemento
function(arr){
return arr.unshift(arr.pop());
}
Use la matriz establecida para deduplicar
function uniqueArr(arr){
return [...new Set(arr)]
}
El nodo dom se desplaza suavemente hacia el área pero, arriba, abajo
El scrollTométodo nativo no tiene animación, similar al salto del punto de anclaje, que es relativamente contundente, y este método traerá un efecto de transición suave.
function scrollTo(element) {
element.scrollIntoView({ behavior: "smooth", block: "start" }) // 顶部
element.scrollIntoView({ behavior: "smooth", block: "end" }) // 底部
element.scrollIntoView({ behavior: "smooth"}) // 可视区域
}
obtener color al azar
En la vida diaria, a menudo necesitamos obtener un color aleatorio, que se puede hacer por número aleatorio
function getRandomColor(){
return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
}
Comprobar si un objeto vacío
Al usar Reflectel método estático de Es6 para juzgar su longitud, puede juzgar si es una matriz vacía, o puede Object.keys()juzgarla por
function isEmpty(obj){
return Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}
conversión booleana
En algunos escenarios, definiremos booleanel valor como un escenario, pero las cadenas no vacías en js se considerarán comotrue
function toBoolean(value, truthyValues = ['true']){
const normalizedValue = String(value).toLowerCase().trim();
return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // true
Varios métodos de clonación de matrices
En realidad, existen muchos métodos de clonación de matrices, ¡vea si hay alguno que no haya visto!
const clone = (arr) => arr.slice(0);
const clone = (arr) => [...arr];
const clone = (arr) => Array.from(arr);
const clone = (arr) => arr.map((x) => x);
const clone = (arr) => JSON.parse(JSON.stringify(arr));
const clone = (arr) => arr.concat([]);
const clone = (arr) => structuredClone(arr);
Compara dos tamaños de tiempo
getTimeObtenga la comparación de la marca de tiempo llamando
function compare(a, b){
return a.getTime() > b.getTime();
}
Calcular la diferencia en meses entre dos tiempos
function monthDiff(startDate, endDate){
return Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
}
Extraiga el año, mes, día, hora, minuto y segundo de la hora en un solo paso
El formato de tiempo es fácil de resolver, y el año, mes, día, hora, minuto, segundo y milisegundo se pueden obtener en un solo paso. Debido a que se perderá la zona toISOStringhoraria, la diferencia horaria será de ocho horas, por lo que podemos agregar ocho horas antes de formatear
function extract(date){
const d = new Date(new Date(date).getTime() + 8*3600*1000);
return new Date(d).toISOString().split(/[^0-9]/).slice(0, -1);
}
console.log(extract(new Date())) // ['2022', '09', '19', '18', '06', '11', '187']
Comprobar si un parámetro es una función
A veces, nuestro método necesita pasar una devolución de llamada de función, pero necesitamos detectar su tipo. Podemos usar el Objectmétodo prototipo para detectarlo. Por supuesto, este método puede detectar con precisión cualquier tipo.
function isFunction(v){
return ['[object Function]', '[object GeneratorFunction]', '[object AsyncFunction]', '[object Promise]'].includes(Object.prototype.toString.call(v));
}
Calcular la distancia entre dos coordenadas
function distance(p1, p2){
return `Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
Detectar si dos nodos dom se superponen
En algunos escenarios, necesitamos juzgar si el dom ha colisionado o superpuesto. Podemos juzgar obteniendo getBoundingClientRectlas coordenadas x1, y1, x2, y2del dom y comparando las coordenadas
function overlaps = (a, b) {
return (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);
}
Determinar si es un entorno NodeJs
El desarrollo diario del front-end es inseparable de los nodos. Al juzgar el entorno global para detectar si es un entorno de nodos.
function isNode(){
return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
}
suma de parámetros
Vi antes que hay una suma a través de la forma de fisicalización de la función Ke, y reducese puede hacer por una línea
function sum(...args){
args.reduce((a, b) => a + b);
}