15 Técnicas avançadas de JavaScript
- 4485
- 1256
- Mrs. Christopher Okuneva
JavaScript é uma linguagem de programação versátil e poderosa que foi usada extensivamente no desenvolvimento de aplicativos da Web. Como desenvolvedor, é essencial ter uma sólida compreensão das capacidades e técnicas avançadas da linguagem para criar aplicativos da Web robustos, eficientes e escaláveis.
Aqui estão 15 técnicas avançadas de JavaScript que todo desenvolvedor deve conhecer.
1. Fechamentos
O fechamento é uma técnica poderosa em JavaScript que permite criar funções com estado persistente. Essencialmente, um fechamento é uma função que "se lembra" do ambiente em que foi criado. Isso pode ser útil para criar variáveis privadas, bem como para criar funções que podem ser usadas para gerar outras funções.
Por exemplo:
função contador () let count = 0; return function () return ++ count; const C = contador (); console.log (c ()); // 1 console.log (c ()); // 2 console.log (c ()); // 3| 1234567891011 | função contador () let count = 0; return function () return ++ count; const c = contador (); console.log (c ()); // 1console.log (c ()); // 2console.log (c ()); // 3 |
No exemplo acima, a função do contador retorna uma função que tem acesso à variável de contagem em seu escopo externo. Cada vez que a função retornada é chamada, incrementa a variável de contagem e retorna seu valor.
2. Escovando
Currying é uma técnica na qual uma função com múltiplos argumentos é transformada em uma série de funções que cada um assume um único argumento. Isso pode ser útil para criar um código mais modular, bem como para criar funções que podem ser reutilizadas em diferentes contextos.
Por exemplo:
função add (a, b) return a + b; função curryadd (a) return function (b) return add (a, b); const add5 = curryadd (5); console.log (add5 (10)); // 15| 123456789101112 | função add (a, b) return a + b; função curryadd (a) return function (b) return add (a, b); const add5 = curryadd (5); console.log (add5 (10)); // 15 |
No exemplo acima, a função Add é transformada em uma função ao curry usando a função curryadd. A função Curryadd pega o primeiro argumento A e retorna uma nova função que pega o segundo argumento B e chama a função Adicionar original com os dois argumentos.
3. Memórias
A memaçãoização é uma técnica para otimizar o desempenho das funções, armazenando em cache os resultados de cálculos caros. Isso pode ser útil para funções que são chamadas com frequência ou que levam muito tempo para executar.
Por exemplo:
função fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | função fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
No exemplo acima, a função Memoize pega uma função functão e retorna uma nova função que armazena em cache o resultado da chamada de função original com base em seus parâmetros de entrada. Na próxima vez que a função for chamada com os mesmos parâmetros de entrada, ele retorna o resultado em cache em vez de executar a função original.
4. Acelerar
Estruprar é uma técnica em que uma função é executada no máximo uma vez em um intervalo de tempo especificado. Isso pode ajudar a limitar o número de vezes que uma função é chamada e melhorar o desempenho do seu aplicativo.
Por exemplo:
Função acelerador (func, atraso) deixe lastCall = 0; Função de retorno (… args) const agora = new Date ().consiga tempo(); se (agora - lastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | Função acelerador (func, atraso) deixe lastCall = 0; Função de retorno (...args) const agora = new Date ().consiga tempo(); se (agora - lastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
No exemplo acima, a função do acelerador leva uma função func e um atraso no intervalo de tempo, como argumentos e retorna uma nova função que executa o Func no máximo uma vez por atraso milissegundos.
No exemplo acima, o ouvinte de eventos de rolagem está envolvido com uma função de acelerador que limita o número de vezes o console.A declaração de log ('rolagem') é executada durante a rolagem.
5. Debouncing
Debouncing é uma técnica em que uma função é atrasada até que um intervalo de tempo especificado tenha decorrido após a última invocação. Isso pode ajudar a reduzir o número de vezes que uma função é chamada e melhorar o desempenho do seu aplicativo.
Por exemplo:
function debounce (func, atraso) let timerId; Return function (… args) if (timerId) clearTimeout (timerId); timerId = setTimeout (() => func.aplicar (isso, args); timerID = nulo; , atraso); janela.addEventListener ('redimensionar', debounce (function () console.log ('redimensionamento'); , 500));| 12345678910111213141516 | function debounce (func, atraso) let timerId; Função de retorno (...args) if (timerId) cleartimeout (timerId); timerId = setTimeout (() => func.aplicar (isso, args); timerID = nulo; , atraso); janela.addEventListener ('redimensionar', debounce (function () console.log ('redimensionamento');, 500)); |
No exemplo acima, a função Debounce exige uma função func e um atraso no intervalo de tempo como argumentos e retorna uma nova função que atrasa a execução do FUNC até que os milissegundos atrasados tenham decorrido desde a última invocação.
No exemplo acima, o ouvinte de eventos de redimensionamento está envolvido com uma função de debounce que limita o número de vezes o console.A declaração de log ('redimensionamento') é executada durante o redimensionamento da janela.
6. Promessas
As promessas são uma maneira de gerenciar o código assíncrono em JavaScript. Eles são essencialmente um espaço reservado por um valor que ainda não está disponível, mas estará no futuro. As promessas podem ser usadas para garantir que certas execuções de código somente após o término do código terminassem de execução e também possam ser usadas para lidar com erros de uma maneira mais elegante do que o manuseio tradicional de erros.
Por exemplo:
função fetchdata () return nova promessa ((resolve, rejeição) => fetch ('https: // exemplo.com/dados ') .então (resposta => resposta.JSON ()) .então (dados => resolve (dados)) .capt (erro => rejeitar (erro)); ); fetchdata () .então (dados => console.log (dados))) .captura (erro => console.erro (erro));| 123456789101112 | função fetchdata () return nova promessa ((resolve, rejeição) => fetch ('https: // exemplo.com/dados ') .então (resposta => resposta.JSON ()) .então (dados => resolve (dados)) .capt (erro => rejeitar (erro)); ); fetchdata () .então (dados => console.log (dados))) .captura (erro => console.erro (erro)); |
No exemplo acima, a função FetchData retorna uma promessa que resolve com os dados obtidos em https: // exemplo.com/dados. A promessa é então consumida usando os métodos então e de captura para lidar com os dados resolvidos e quaisquer erros que ocorram.
7. Assíncrono/aguardar
Async/Wait é um açúcar sintático sobre as promessas que permitem escrever código assíncrono que se parece com código síncrono. Isso pode tornar o código assíncrono mais legível e fácil de manter.
Por exemplo:
função assíncrona fetchdata () try const Response = aguarda busca ('https: // exemplo.com/dados '); const dados = aguardar resposta.json (); retornar dados; catch (error) lança novo erro (erro); fetchdata () .então (dados => console.log (dados))) .captura (erro => console.erro (erro));| 12345678910111213 | função assíncrona fetchdata () try const Response = aguarda busca ('https: // exemplo.com/dados '); const dados = aguardar resposta.json (); retornar dados; catch (error) lança novo erro (erro); fetchdata () .então (dados => console.log (dados))) .captura (erro => console.erro (erro)); |
No exemplo acima, a função fetchdata é declarada com a palavra -chave assíncrona e usa a palavra -chave aguardar para aguardar o valor resolvido das promessas devolvidas pela busca e resposta.Métodos JSON. Quaisquer erros são pegos usando um bloco de tentativa/captura.
8. Geradores
Os geradores são uma característica poderosa em JavaScript que permite que você pause e retome a execução de uma função, mantendo seu estado interno. Isso pode ser útil para uma variedade de aplicações, desde programação assíncrona a iteradores de construção.
Aqui está um exemplo de como você pode usar um gerador para construir um iterador que gera uma sequência infinita de números de Fibonacci:
função* fibonacci () let [prev, curr] = [0, 1]; while (true) rendimento curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); console.log (fib.próximo().valor); // Logs 1 console.log (fib.próximo().valor); // Logs 1 console.log (fib.próximo().valor); // Logs 2 console.log (fib.próximo().valor); // Logs 3 console.log (fib.próximo().valor); // Logs 5| 123456789101112131415 | função* fibonacci () let [prev, curr] = [0, 1]; while (true) rendimento curr; [prev, curr] = [curr, prev + curr]; const fib = fibonacci (); console.log (fib.próximo().valor); // logs 1console.log (fib.próximo().valor); // logs 1console.log (fib.próximo().valor); // Logs 2Console.log (fib.próximo().valor); // Logs 3console.log (fib.próximo().valor); // Logs 5 |
Neste exemplo, a função Fibonacci é declarada como uma função de gerador usando a função* sintaxe. A função usa um loop de tempo para gerar uma sequência infinita de números de fibonacci, que são produzidos um de cada vez usando a palavra -chave de rendimento. A variável fib é então inicializada como um objeto iterador usando a função fibonacci (), e cada chamada subsequente para o método Next () gera o próximo número na sequência.
9. Operador espalhado
O operador de spread, indicado por três pontos (…), é uma característica poderosa em JavaScript que permite expandir um objeto iterável (como uma matriz ou uma string) em elementos individuais. Isso pode ser usado para simplificar e otimizar seu código de várias maneiras.
Aqui está um exemplo de como você pode usar o operador de spread para concatenar duas matrizes:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [… arr1,… arr2]; console.log (arr3); // logs [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...ARR1, ...arr2]; console.log (arr3); // logs [1, 2, 3, 4, 5, 6] |
Neste exemplo, o operador de spread é usado para concatenar o ARR1 e ARR2 em uma nova matriz ARR3. A sintaxe… ARR1 expande a matriz ARR1 para elementos individuais, que são então concatenados com a sintaxe… ARR2.
10. Funções de ordem superior
Uma função de ordem superior é uma função que tem outra função como argumento ou retorna uma função como resultado. Isso pode ser útil para criar código reutilizável que possa ser personalizado para se adequar a diferentes casos de uso.
função multiplyby (fator) retornar função (número) retornar número * fator; ; const duplo = multiplyby (2); const triplo = multiplyby (3); console.log (duplo (5)); // Logs 10 console.log (triplo (5)); // logs 15| 1234567891011 | função multiplyby (fator) retornar função (número) retornar número * fator; ; const duplo = multiplyby (2); const triplo = multiplyby (3); console.log (duplo (5)); // logs 10console.log (triplo (5)); // logs 15 |
Neste exemplo, a função multiplyby retorna outra função que multiplica um determinado número por um fator especificado. A função retornada pode ser usada para criar outras funções que se multipliquem por diferentes fatores.
11. Destruição
A destruição é uma maneira de extrair valores de objetos ou matrizes de uma maneira mais concisa. Isso pode ser particularmente útil ao lidar com estruturas de dados complexas, pois permite extrair rápida e facilmente os valores que você precisa.
Const Pessoa = Nome: 'John', Idade: 30, Endereço: Street: '123 Main St', City: 'Anytown', Estado: 'Ca', Zip: '12345'; const nome, idade, endereço: city = pessoa; console.log (nome); // 'John' Console.log (idade); // 30 console.log (cidade); // 'Anytown'| 12345678910111213141516 | Const Pessoa = Nome: 'John', Idade: 30, Endereço: Street: '123 Main St', City: 'Anytown', Estado: 'Ca', Zip: '12345'; const nome, idade, endereço: city = pessoa; console.log (nome); // 'John'Console.log (idade); // 30console.log (cidade); // 'Anytown' |
Neste exemplo, estamos destruindo o objeto de pessoa para extrair o nome, idade e propriedades da cidade e atribuí -las a variáveis.
12. Delegação de eventos
A delegação de eventos é uma técnica para lidar. Isso pode ser útil para melhorar o desempenho do manuseio de eventos, bem como para lidar com eventos em conteúdo gerado dinamicamente.
- Item 1
- Item 2
- Item 3
| 123456789101112131415 |
|
Neste exemplo, estamos anexando um ouvinte de evento de clique ao elemento UL e depois usando o evento.Propriedade de destino para determinar qual elemento LI foi clicado. Isso é útil para lidar com eventos em conteúdo dinâmico que podem ser adicionados ou removidos da página.
13. Uso do suporte encaracolado
No JavaScript, os suportes encaracolados são usados para delimitar blocos de código. No entanto, eles também podem ser usados de uma maneira mais concisa de criar objetos ou destruir objetos. Isso pode ser particularmente útil ao trabalhar com estruturas de dados complexas.
function myfunction () const x = 1; const y = 2; se (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | function myfunction () const x = 1; const y = 2; se (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
Neste exemplo, estamos usando colchetes encaracolados para definir o corpo da função MyFunction e a instrução IF.
14. Módulos JavaScript
Os módulos JavaScript são uma maneira de organizar o código em unidades reutilizáveis e independentes. Eles podem ser usados para encapsular a funcionalidade e criar um código mais sustentável.
// Módulo 1.função de exportação js add (a, b) return a + b; // módulo2.js importar add de './Módulo 1.js '; const sum = add (2, 3); console.log (soma); // 5| 1234567891011 | // Módulo 1.função jsexport add (a, b) return a + b; // module2.jsimport add de './Módulo 1.js '; const sum = add (2, 3); console.log (soma); // 5 |
Neste exemplo, estamos exportando a função Add do Module1.js e depois importando -o para o módulo2.JS usando a instrução de importação. Isso nos permite reutilizar a função Adicionar em diferentes partes do nosso código.
15. Funções de seta
As funções de seta são uma maneira concisa de definir funções em JavaScript. Eles são particularmente úteis para criar funções anônimas, bem como para criar funções que recebem um único argumento.
const números = [1, 2, 3, 4, 5]; const unnumbers = números.filtro (num => num % 2 === 0); console.registro (unidades e equilibres); // [2, 4]| 12345 | const números = [1, 2, 3, 4, 5]; const unnumbers = números.filtro (num => num % 2 === 0); console.registro (unidades e equilibres); // [2, 4] |
Neste exemplo, estamos usando uma função de seta para filtrar a matriz de números e retornar apenas os números pares. A sintaxe da função de seta é mais curta e mais concisa que a sintaxe da função tradicional.
Conclusão
Em conclusão, essas 15 técnicas avançadas de JavaScript são essenciais para qualquer desenvolvedor que deseje levar suas habilidades para o próximo nível. Esteja você trabalhando em um projeto pequeno ou em uma aplicação grande, essas técnicas podem ajudá -lo a escrever um código mais eficiente e sustentável. Então, comece a praticar e veja como essas técnicas podem ajudá -lo a levar suas habilidades de JavaScript para o próximo nível!