Recentemente, revisitei o Livro Vermelho e encontrei alguns métodos de escrita interessantes. Muitas coisas são usadas na vida cotidiana, mas descobri que ainda existem métodos de escrita diferentes. Combinado com alguns métodos usados no trabalho diário, vou resumir um artigo que é frequentemente usado na vida diária. Você pode não saber o ponto, espero que possa ajudá-lo:
Uma linha de código completa a estrutura mais a atribuição
Muitas vezes usamos atribuições de estrutura em nossa vida diária. Normalmente, estruturamos primeiro e depois atribuímos valores. Claro, também podemos concluir as operações de desconstrução e atribuição em uma linha. Parece muito simplificado. Claro, você conhece a legibilidade!
let people = { name: null, age: null };
let result = { name: '张三', age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###Desestruturando os tipos de dados subjacentes
Não devemos usar tais cenários na vida diária, mas na verdade também podemos desconstruir os tipos básicos de dados
const {length : a} = '1234';
console.log(a) // 4Desconstrua a matriz para obter rapidamente o último valor
Na verdade, podemos desconstruir e atribuir o array para obter o atributo length, e podemos fazer mais coisas por meio desse recurso.
const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3Converta o subscrito para chinês zero um dois três...
Precisamos converter o 012345 correspondente em chinês um, dois, três, quatro, cinco... na lista diária. No projeto antigo, vi que existem muitas linhas definidas manualmente por mim, então escrevi uma conversão de método como esse
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 maneiras de julgar números inteiros
/* 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 o estilo globalmente detectando a cor do tema do sistema através do css
O atributo prefere-color-scheme de @media pode conhecer o tema atual do sistema. Claro, você precisa verificar a compatibilidade antes de usá-lo.
@media (prefers-color-scheme: dark) { //... }
@media (prefers-color-scheme: light) { //... }javascript também pode facilmente fazer
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
})Aleatoriamente embaralhe a ordem da matriz
Obtenha um número aleatório por meio de 0.5-Math.random() e, em seguida, classifique-o duas vezes para torná-lo mais completo, mas esse método não é aleatório o suficiente. Se for um aplicativo de nível empresarial, é recomendável usar o segundo embaralhamento 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
}Obter aleatoriamente um valor booleano
Igual ao princípio anterior, através da aquisição de números aleatórios, o intervalo de **Math.random()** é 0-0,99, com uma probabilidade de 0,5 no meio de 50%
function randomBool() {
return 0.5 - Math.random()
}Mova o último item da matriz para o primeiro item
function (arr){
return arr.push(arr.shift());
}Coloque o primeiro item na matriz para o último item
function(arr){
return arr.unshift(arr.pop());
}Use set array para desduplicar
function uniqueArr(arr){
return [...new Set(arr)]
}O nó dom rola suavemente para a área mas, superior, inferior
O método scrollTo nativo não tem animação, semelhante ao salto do ponto de ancoragem, que é relativamente contundente, e esse método trará um efeito de transição suave
function scrollTo(element) {
element.scrollIntoView({ behavior: "smooth", block: "start" }) // 顶部
element.scrollIntoView({ behavior: "smooth", block: "end" }) // 底部
element.scrollIntoView({ behavior: "smooth"}) // 可视区域
}obter cor aleatória
Na vida diária, muitas vezes precisamos obter uma cor aleatória, o que pode ser feito por número aleatório
function getRandomColor(){
return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
}Verifique se um objeto vazio
Ao usar o método estático Reflect do ES6 para julgar seu comprimento, você pode julgar se é uma matriz vazia ou pode julgá-la por **Object.keys()**
function isEmpty(obj){
return Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}conversão booleana
Em alguns cenários, definiremos valores booleanos como cenários, mas strings não vazias em js serão consideradas verdadeiras
function toBoolean(value, truthyValues = ['true']){
const normalizedValue = String(value).toLowerCase().trim();
return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // trueVários métodos de clonagem de matriz
Na verdade, existem muitos métodos de clonagem de array, veja se há algum que você não tenha 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);Comparar dois tamanhos de tempo
Obtenha a comparação de carimbo de data/hora chamando getTime
function compare(a, b){
return a.getTime() > b.getTime();
}Calcule a diferença em meses entre duas vezes
function monthDiff(startDate, endDate){
return Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
}Extraia o ano, mês, dia, hora, minuto e segundo da hora em uma única etapa
A formatação da hora é fácil de resolver e o ano, mês, dia, hora, minuto, segundo e milissegundo podem ser obtidos em uma etapa. Como toISOString perderá o fuso horário, a diferença de horário será de oito horas, portanto, podemos adicionar oito horas antes da formatação.
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']Verifique se um parâmetro é uma função
Às vezes nosso método precisa passar um callback de função, mas precisamos detectar seu tipo, podemos passar Object
O método de protótipo para detectar, é claro, esse método pode detectar com precisão qualquer tipo.
function isFunction(v){
return ['[object Function]', '[object GeneratorFunction]', '[object AsyncFunction]', '[object Promise]'].includes(Object.prototype.toString.call(v));
}Calcular a distância entre duas coordenadas
function distance(p1, p2){
return `Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}Detectar se dois nós dom se sobrepõem
Em alguns cenários, precisamos julgar se o dom colidiu ou se sobrepôs. Podemos obter as coordenadas x1, y1, x2, y2 do dom por meio de getBoundingClientRect e comparar as coordenadas para julgá-lo.
function overlaps = (a, b) {
return (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);
}Determine se é um ambiente NodeJs
O desenvolvimento diário do front end é inseparável dos nodeJs. Ao julgar o ambiente global para detectar se é um ambiente de nodeJs
function isNode(){
return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
}soma de parâmetros
Eu vi antes que existe um somatório através da forma de fisicalização da função Ke, e isso pode ser feito reduzindo uma linha
function sum(...args){
args.reduce((a, b) => a + b);
}