Em nossas tarefas diárias, escrevemos funções como classificar, pesquisar, encontrar valores únicos, passar parâmetros, trocar valores, etc., então compilei aqui uma lista de minhas dicas de taquigrafia!
JavaScript é realmente uma ótima linguagem para aprender e usar. Para um determinado problema, pode haver mais de uma maneira de se chegar à mesma solução. Neste artigo, discutiremos apenas os mais rápidos.
Esses métodos certamente irão ajudá-lo:
A maioria desses JavaScript Hacks usa ECMAScript6 (ES2015) e tecnologias posteriores, embora a versão mais recente seja ECMAScript11 (ES2020).
==Nota==: Todas as dicas abaixo foram testadas no console do Google Chrome.
Podemos inicializar um array de tamanho específico usando um valor padrão (como "", nulo ou 0). Você já pode estar usando isso para arrays 1D, mas como inicializar um array/matriz 2D?
matriz const = Array(5).fill(''); //Saída(5) ["", "", "", "", ""] matriz const = Array(5).fill(0).map(()=>Array(5).fill(0)); //Saída(5) [Array(5), Array(5), Array(5), Array(5), Array(5)] 0: (5) [0, 0, 0, 0, 0] 1: (5) [0, 0, 0, 0, 0] 2: (5) [0, 0, 0, 0, 0] 3: (5) [0, 0, 0, 0, 0] 4: (5) [0, 0, 0, 0, 0] comprimento: 5
Devemos usar o método reduce
para encontrar rapidamente operações matemáticas básicas.
const array = [5,4,7,8,9,2]
array.reduce((a,b) => a+b); // Saída: 35
array.reduce((a,b) => a>b?a:b); // Saída: 9
array.reduce((a,b) => a<b?a:b); // Saída: 2
Temos métodos integrados sort()
e reverse()
para classificar strings, mas e quanto a arrays de números ou objetos?
Vejamos as técnicas de classificação ascendente e descendente para números e objetos.
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // Saída(4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // Saída (4) ["Steve", "Musk", "Kapil", "Joe"]
const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => ab); //Saída(6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => ba); // Saída (6) [100, 40, 25, 10, 5, 1]
const objectArr = [ {nome: 'Lazslo', sobrenome: 'Jamf' }, {nome_nome: 'Porco', sobrenome: 'Bodine' }, {nome_nome: 'Pirata', sobrenome: 'Prentice' } ]; objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name)); // Saída(3) [{…}, {…}, {…}] 0: {primeiro_nome: "Porco", sobrenome: "Bodine"} 1: {primeiro_nome: "Lazslo", sobrenome: "Jamf"} 2: {nome: "Pirata", sobrenome: "Prentice"} comprimento: 3
Valores falsos como 0
, undefined
, null
, false
, ""
, ''
podem ser facilmente omitidos por
const array = [3, 0, 6, 7, '' , falso]; array.filtro(Booleano); // Saída (3) [3, 6, 7]
Se você quiser reduzir if...else aninhados ou alternar casos, você pode simplesmente usar os operadores lógicos básicos AND/OR
.
function façaAlgo(arg1){ arg1 = arg1 || 10; // Define arg1 como 10 como padrão se ainda não estiver definido return arg1; } seja foo = 10; foo === 10 && doSomething(); // é a mesma coisa que if (foo == 10) then doSomething(); //Saída: 10 foo === 5 || façaAlguma coisa(); // é a mesma coisa que if (foo != 5) then doSomething(); // Saída: 10
Você pode ter usado indexOf()
com um loop for que retorna o primeiro índice encontrado ou o mais recente includes()
que retorna um booleano verdadeiro/falso de um array para encontrar Out/remove duplicatas. É aqui que temos dois métodos mais rápidos.
matriz const = [5,4,7,8,9,2,7,5]; array.filter((item,idx,arr) => arr.indexOf(item) === idx); // ou const nãoUnique = [...new Set(array)]; // Saída: [5, 4, 7, 8, 9, 2]
Na maioria das vezes, você precisa resolver o problema criando um objeto contador ou mapa que rastreie variáveis como chaves e rastreie sua frequência/ocorrência como um valor.
deixe string = 'kapilalipak'; tabela const={}; for(deixe o caractere da string) { tabela[char]=tabela[char]+1 || 1; } // Saída {k: 2, a: 3, p: 2, i: 2, l: 2}
e
const countMap = new Map(); for (seja i = 0; i < string.length; i++) { if (countMap.has(string[i])) { countMap.set(string[i], countMap.get(string[i]) + 1); } outro { contagemMap.set(string[i], 1); } } // Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}
você pode evitar condicionais aninhadas usando o operador ternário if…elseif…elseif.
function Febre(temperatura) { retornar temperatura> 97? 'Visite o médico!' : temp < 97 ? 'Sair e brincar!!' : temp === 97 ? 'Descanse um pouco!'; } // Saída Fever(97): "Descanse um pouco!" Fever(100): "Visit Doctor!"
for
e for..in
que fornece um índice por padrão, mas você pode usar arr[index].for..in
também aceita não-números, então evite-os.forEach
, for...of
obter elementos diretamente.forEach
também pode fornecer um índice, mas for...of
não pode.for
e for...of
consideram buracos na matriz, mas não os outros 2.Normalmente precisamos mesclar vários objetos em tarefas diárias.
const usuário={ nome: 'Kapil Raghuwanshi', gênero: 'Masculino' }; faculdade constante = { primário: 'Escola Primária Mani', secundário: 'Escola Secundária Lass' }; habilidades const = { programação: 'Extremo', natação: 'Média', dormindo: 'Pró' }; const resumo = {...usuário, ...faculdade, ...habilidades}; // Gênero de saída: "Masculino" nome: "Kapil Raghuwanshi" primário: "Escola Primária Mani" programação: "Extremo" secundário: "Escola Secundária Lass" dormindo: "Pró" natação: "Média"
As expressões de função de seta são alternativas compactas às expressões de função tradicionais, mas têm limitações e não podem ser usadas em todas as situações. Como eles têm escopo lexical (o escopo pai) e não possuem escopo próprio, this
arguments
referem-se, portanto, ao ambiente em que são definidos.
const pessoa = { nome: 'Kapil', digaNome() { retorne este.nome; } } pessoa.sayNome(); // Saída "Kapil",
mas
const person = { nome: 'Kapil', digaNome : () => { retorne este.nome; } } pessoa.sayNome(); // Saída ""
Encadeamento opcional Encadeamento opcional?. Interrompe a avaliação se o valor vier antes de ?. é indefinido ou nulo e retorna
indefinido. const usuário={ funcionário: { nome: "Kapil" } }; usuário.funcionário?.nome; //Saída: "Kapil" usuário.empregar?.nome; //Saída: indefinido usuário.employ.nome // Saída: VM21616:1 TypeError não capturado: Não é possível ler a propriedade 'nome' de indefinido
Use o método Math.random()
integrado para embaralhar o array.
lista const = [1, 2, 3, 4, 5, 6, 7, 8, 9]; lista.sort(() => { retornar Math.random() - 0,5; }); //Saída(9) [2, 5, 1, 6, 9, 8, 4, 3, 7] //Chame novamente (9) [4, 1, 7, 5, 3, 8, 2, 9, 6]
O operador de coalescência nulo (??) é um operador lógico, quando seu operando esquerdo está vazio ou indefinido, retorna seu operando direito, caso contrário retorna seu operando esquerdo.
const foo = null ?? 'minha escola'; // Saída: "minha escola" const baz = 0 ?? 42; // Saída: 0
Esses misteriosos 3 pontos ...
podem descansar ou espalhar! ?
função minhaFun(a, b, ...muitosMaisArgs) { retornar argumentos.length; } myFun("um", "dois", "três", "quatro", "cinco", "seis"); // Saída: 6
e
const parts = ['ombros', 'joelhos']; const letras = ['cabeça', ...partes, 'e', 'dedos dos pés']; letra da música; //saída: (5) ["cabeça", "ombros", "joelhos", "e", "dedos dos pés"]
const search = (arr, low=0,high=arr.length-1) => { retorno alto; } pesquisar([1,2,3,4,5]); // Saída: 4
Ao resolver o problema, podemos usar alguns métodos integrados, como .toPrecision()
ou .toFixed()
para implementar muitas funções auxiliares.
num const = 10; num.toString(2); //Saída: "1010" num.toString(16); //Saída: "a" num.toString(8); // Saída: "12"
deixe a = 5; seja b = 8; [a,b] = [b,a] [a, b] // Output(2) [8, 5]
Bem, esta não é uma dica completa de taquigrafia, mas lhe dará uma boa ideia de como usar strings.
function checkPalindrome(str) { retornar str == str.split('').reverse().join(''); } checkPalindrome('naman'); // Saída: true
usando Object.entries(), Object.keys() e Object.values() const obj = {a: 1, b: 2, c: 3}; Objeto.entradas(obj); //Saída(3) [Array(2), Array(2), Array(2)] 0: (2) ["a", 1] 1: (2) ["b", 2] 2: (2) ["c", 3] comprimento: 3 Object.keys(obj); (3) ["a", "b", "c"] Objeto.valores(obj); (3) [1, 2, 3]