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 se usa con frecuencia. utilizado en la vida diaria Puede que no sepas el punto, espero que pueda ayudarte:
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. Parece 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) // 4Deconstruya la matriz para obtener rápidamente el último valor
De hecho, podemos deconstruir y asignar la matriz para obtener el atributo de longitud, 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; // 3Convierte 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 En el proyecto anterior, vi que hay muchas líneas definidas manualmente por mí mismo, 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
}
/* 5.ES6提供了Number.isInteger */Modifique el estilo globalmente detectando el color del tema del sistema a través de css
El atributo prefers-color-scheme de @media puede conocer el tema del sistema actual. Por supuesto, debe verificar la compatibilidad antes de usarlo.
@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
Obtenga un número aleatorio a través de 0.5-Math.random(), y luego clasifíquelo dos veces para que sea más completo, pero este método en realidad no es lo suficientemente aleatorio.Si es una aplicación de nivel empresarial, se recomienda usar la segunda mezcla. algoritmo
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, a través de la adquisición de números aleatorios, el intervalo de **Math.random()** es 0-0.99, con una probabilidad de 0.5 en el medio 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 método scrollTo 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 el método estático Reflect de Es6 para juzgar su longitud, puede juzgar si es una matriz vacía, o puede juzgarla por **Object.keys()**
function isEmpty(obj){
return Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}conversión booleana
En algunos escenarios, definiremos valores booleanos como escenarios, pero las cadenas no vacías en js se considerarán verdaderas
function toBoolean(value, truthyValues = ['true']){
const normalizedValue = String(value).toLowerCase().trim();
return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // trueVarios 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
Obtenga la comparación de la marca de tiempo llamando a getTime
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. Dado que toISOString perderá la zona horaria, 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 pasar Object
El método prototipo para detectar, 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 colisionó o se superpuso. Podemos obtener las coordenadas x1, y1, x2, y2 del dom a través de getBoundingClientRect y luego comparar las coordenadas para juzgarlo.
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 se puede hacer reduciendo una línea
function sum(...args){
args.reduce((a, b) => a + b);
}