JScript Katana

Guia do Underscore.js: Simplifique Arrays, Objetos e Funções em JavaScript

Bibliotecas Externas / Gerenciamento de Módulos
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introdução

JavaScript é uma linguagem de programação essencial para o desenvolvimento web, mas trabalhar com arrays e objetos pode frequentemente tornar o código complexo. Especialmente para operações como filtragem e transformação de dados, código conciso e eficiente é altamente desejável. É aqui que a biblioteca JavaScript Underscore.js se torna útil. Ao usar esta biblioteca, você pode simplificar a forma como manipulações de dados complexas são escritas.

Os Benefícios do Underscore.js

  1. Código Mais Limpo
  • Com JavaScript tradicional, certos processos tendem a se tornar verbosos, mas com Underscore.js, eles podem frequentemente ser escritos em apenas algumas linhas.
  1. Conjunto Rico de Funções de Utilidade
  • Ela fornece numerosas funcionalidades para manipulação de arrays, tratamento de objetos e controle de funções.
  1. Leve e Flexível
  • Você pode usar apenas as funções de que precisa, mantendo o overhead de desempenho ao mínimo.

O Que Você Aprenderá Neste Artigo

  • Como configurar o Underscore.js
  • Funções básicas e exemplos práticos
  • Casos de uso reais para desenvolvimento

2. O Que é Underscore.js?

Visão Geral do Underscore.js

Underscore.js é uma biblioteca JavaScript leve projetada para simplificar a manipulação de dados. Ela fornece uma ampla gama de funções de utilidade principalmente para trabalhar de forma eficiente com arrays e objetos, frequentemente referida como um kit de ferramentas de utilidade JavaScript. Embora o JavaScript em si tenha recursos integrados poderosos, o código pode às vezes se tornar extenso ou difícil de ler. Ao usar Underscore.js, você pode resolver esses problemas e escrever código mais limpo e manutenível.

Principais Recursos

  1. Funções de Utilidade Abrangentes
  • Ela oferece funções para manipulação de arrays, tratamento de objetos e controle de funções, entre outras.
  1. Código Simplificado e Legível
  • Em comparação com o JavaScript tradicional, ela reduz o código boilerplate e melhora a legibilidade.
  1. Sem Dependências
  • Ela não depende de outras bibliotecas, tornando-a flexível para integração.
  1. Leve e Rápido
  • Seu tamanho pequeno e impacto mínimo no desempenho a tornam adequada mesmo para aplicativos web modernos.

Underscore.js vs. Lodash

Uma biblioteca comumente comparada ao Underscore.js é Lodash. O Lodash foi construído sobre o Underscore.js e estende suas capacidades. Aqui estão algumas diferenças:

FeatureUnderscore.jsLodash
FunctionalityProvides many basic utility functionsExpanded functionality with more features
Modular SupportPartially supportedFully modular
PerformanceFastFast and further optimized

Qual você escolhe depende dos requisitos do seu projeto. Se você precisar de uma biblioteca simples e leve, o Underscore.js é uma opção melhor.

Quando o Underscore.js é Útil?

O Underscore.js brilha nos seguintes cenários:

  1. Trabalhando com Arrays
  • Realize filtragem, mapeamento e outras operações de array com sintaxe concisa.
  1. Tratando Objetos
  • Recupere facilmente chaves, valores ou mescle propriedades de objetos.
  1. Controlando Funções
  • Implemente execução única, execução atrasada e outros padrões de controle de funções com facilidade.
  1. Funções de Utilidade
  • Use-o para classificação, randomização ou até como um simples motor de templates.

3. Como Instalar

Nesta seção, vamos percorrer os passos específicos para adicionar o Underscore.js ao seu projeto. Vamos cobrir o uso de um CDN, instalação via npm ou yarn, download de arquivos manualmente e integração com empacotadores de módulos.

1. Usando um CDN

Um CDN (Content Delivery Network) permite que você use bibliotecas hospedadas na internet simplesmente adicionando um link. Insira o seguinte código na tag <head> ou no final da tag <body> no seu arquivo HTML:

Exemplo: Adicionando a um arquivo HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using Underscore.js</title>
  <!-- Underscore.js CDN Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Testing Underscore.js</h1>
  <script>
    // Test code
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Ao abrir em um navegador, o console de desenvolvedor exibirá apenas os números pares.

2. Instalando com npm ou yarn

Você também pode instalar o Underscore.js no seu ambiente local ou em um projeto Node.js.

Usando npm

npm install underscore

Usando yarn

yarn add underscore

Exemplo de Importação em JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Baixando o Arquivo

  1. Acesse o site oficial: underscorejs.org
  2. Baixe o arquivo JavaScript mais recente na seção “Download”.
  3. Coloque o arquivo baixado na pasta do seu projeto (por exemplo, js/).
  4. Vincule-o no seu HTML usando uma tag script.
    <script src="js/underscore-min.js"></script>

4. Usando um Empacotador de Módulos

Se você estiver usando Webpack ou Parcel, é igualmente fácil:

Exemplo com Webpack

  1. Instale via npm:
    npm install underscore
  1. Importe no seu arquivo JavaScript:
    import _ from 'underscore';
  1. Empacote e use conforme necessário.

Solução de Problemas

1. “Uncaught ReferenceError: _ não está definido”

  • O Underscore.js pode não ter sido carregado corretamente. Verifique novamente seu link CDN ou caminho de importação.

2. Erros após a instalação via npm

  • Certifique-se de que o Node.js e o npm estejam atualizados para a versão mais recente.

4. Uso Básico

Nesta seção, apresentaremos algumas das funções principais do Underscore.js com exemplos. Essas funções são particularmente úteis para simplificar operações com arrays e objetos.

1. Iterando Sobre Arrays – _.each()

_.each() itera sobre arrays ou objetos.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Print each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Saída:

1
2
3
4
5

Pontos Principais:

  • Funciona tanto com arrays quanto com objetos.
  • O callback recebe o elemento, o índice e a coleção completa.

2. Mapeando Arrays – _.map()

_.map() aplica uma função a cada elemento de um array e retorna um novo array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Saída:

[2, 4, 6, 8, 10]

3. Encontrando o Primeiro Elemento Correspondente – _.find()

_.find() retorna o primeiro elemento que corresponde a uma condição.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Saída:

3

4. Filtrando Elementos – _.filter()

_.filter() extrai todos os elementos que correspondem a uma condição para um novo array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Get only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Saída:

[2, 4]

5. Embaralhando Elementos – _.shuffle()

_.shuffle() randomiza a ordem dos elementos em um array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Saída: (exemplo)

[3, 5, 1, 4, 2]

6. Removendo Duplicatas – _.uniq()

_.uniq() remove elementos duplicados de um array.

Exemplo

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Saída:

[1, 2, 3, 4, 5]

Resumo

Até agora, vimos algumas das funções fundamentais do Underscore.js:

  • _.each() para iteração
  • _.map() para criar novos arrays
  • _.find() e _.filter() para correspondência condicional
  • _.shuffle() para randomizar elementos
  • _.uniq() para remover duplicatas

5. Uso Avançado

Nesta seção, exploraremos funções mais avançadas no Underscore.js. Essas permitem uma manipulação e análise de dados mais poderosas.

1. Ordenação de Arrays – _.sortBy()

_.sortBy() ordena um array com base em uma chave ou condição dada.

Exemplo

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Saída:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Agrupamento de Dados – _.groupBy()

_.groupBy() agrupa elementos em um array com base em uma chave ou condição.

Exemplo

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Saída:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Contagem de Dados – _.countBy()

_.countBy() facilita a contagem de itens com base em uma condição.

Exemplo

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Saída:

{
  a: 2,
  b: 2
}

Resumo

Nesta seção, cobrimos casos de uso avançados do Underscore.js:

  • _.sortBy() para ordenar arrays
  • _.groupBy() e _.countBy() para agrupar e contar dados

6. Operações com Objetos

Nesta seção, cobriremos funções úteis do Underscore.js para trabalhar com objetos. Essas funções facilitam o processamento de chaves, valores e propriedades de objetos de forma eficiente.

1. Recuperando Chaves e Valores

Obter Chaves – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Saída:

['name', 'age', 'city']

Obter Valores – _.values()

const values = _.values(person);
console.log(values);

Saída:

['Alice', 25, 'Tokyo']

2. Clonando Objetos – _.clone()

_.clone() cria uma cópia superficial de um objeto.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Resumo

Nesta seção, introduzimos funções relacionadas a objetos no Underscore.js:

  • _.keys() e _.values() para recuperar chaves e valores
  • _.clone() para criar cópias superficiais

7. Operações com Funções

Nesta seção, exploraremos como o Underscore.js ajuda você a controlar e otimizar o comportamento de funções. Essas utilidades são especialmente úteis para controle de execução e ajuste de desempenho.

1. Vinculando Funções – _.bind()

_.bind() vincula uma função a um objeto específico, garantindo que this sempre se refira a esse objeto.

Exemplo

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Atrasando a Execução – _.delay()

_.delay() atrasa a execução de uma função por um tempo especificado.

Exemplo

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Saída: (após 2 segundos)

Displayed after 2 seconds

3. Executando Uma Vez – _.once()

_.once() garante que uma função execute apenas na primeira vez que for chamada.

Exemplo

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Runs
initialize(); // Ignored

4. Memoização – _.memoize()

_.memoize() armazena em cache os resultados de uma função, pulando a recomputação para as mesmas entradas.

Exemplo

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Computed
console.log(factorial(5)); // Retrieved from cache

5. Controle de Execução – _.throttle()

_.throttle() garante que uma função seja executada no máximo uma vez dentro de um intervalo de tempo especificado.

Exemplo

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate rapid events
setInterval(log, 500); // Executes only once every 2 seconds

Resumo

Esta seção apresentou utilitários relacionados a funções no Underscore.js:

  • _.bind() para fixar o this
  • _.delay() para execução atrasada
  • _.once() para inicialização única
  • _.memoize() para cache de resultados
  • _.throttle() para limitar a taxa de execução

8. Funções Utilitárias

Nesta seção, abordaremos algumas das funções utilitárias práticas fornecidas pelo Underscore.js. Essas funções podem ser aplicadas em uma ampla variedade de situações, como gerar valores aleatórios, verificar estados de dados ou trabalhar com templates.

1. Gerando Números Aleatórios – _.random()

_.random() gera um número inteiro ou de ponto flutuante aleatório dentro de um intervalo especificado.

Exemplo

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating point

2. Verificando Valores Vazios – _.isEmpty()

_.isEmpty() verifica se um array, objeto ou string está vazio.

Exemplo

console.log(_.isEmpty([]));        // true
console.log(_.isEmpty({}));        // true
console.log(_.isEmpty(''));        // true
console.log(_.isEmpty([1, 2, 3])); // false

3. Criando Templates – _.template()

_.template() é usado para criar templates de strings simples.

Exemplo

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Saída:

Hello, Alice!

Resumo

Aqui estão as funções utilitárias que apresentamos:

  • _.random() para gerar números aleatórios
  • _.isEmpty() para verificar se estruturas de dados estão vazias
  • _.template() para criar templates simples

9. Conclusão

Neste artigo, exploramos o Underscore.js desde o básico até casos de uso mais avançados. Esta biblioteca é altamente eficaz para simplificar a manipulação de dados e escrever código JavaScript eficiente e mantível.

Recapitulação

  1. Uso Básico – Aprendeu as funções principais para trabalhar com arrays e objetos.
  2. Uso Avançado – Cobriu classificação, ordenação e agregação de dados.
  3. Operações com Funções – Explicou otimizações com controle de execução e memoização.
  4. Funções Utilitárias – Introduziu randomização, verificação de vazio e criação de templates.

Considerações Finais

Underscore.js é uma ferramenta poderosa que torna o desenvolvimento JavaScript mais eficiente e fácil de gerenciar. Use este artigo como guia para incorporá-lo em seus projetos. Continue praticando para aprimorar ainda mais suas habilidades.

Perguntas Frequentes (FAQ)

Q1: O Underscore.js é gratuito para uso?

R: Sim. Underscore.js é distribuído sob a Licença MIT e é gratuito tanto para uso pessoal quanto comercial.

Q2: Qual a diferença entre Underscore.js e Lodash?

R: Underscore.js é uma biblioteca utilitária simples e leve. Lodash é baseada no Underscore.js, mas estende sua funcionalidade, oferecendo melhor desempenho e modularidade completa. A escolha depende dos requisitos do projeto.

Q3: O Underscore.js é desnecessário com o JavaScript moderno (ES6+)?

R: Embora o ES6+ inclua métodos poderosos para arrays e objetos, o Underscore.js ainda é útil para compatibilidade entre navegadores, sintaxe concisa e trabalho com código legado.

Q4: Que tipos de projetos são mais adequados para o Underscore.js?

R: Projetos pequenos a médios ou aplicações que priorizam a simplicidade do código. É especialmente útil quando se deseja utilitários leves para operações rápidas de dados.

Q5: Como instalar o Underscore.js?

A: Você pode instalá-lo de várias maneiras:

  1. Link CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. npm:
    npm install underscore
  1. yarn:
    yarn add underscore

Q6: Onde posso encontrar a documentação oficial?

A: A documentação oficial está disponível aqui: Site Oficial do Underscore.js

Q7: O Underscore.js pode ser usado em projetos grandes?

A: Sim, embora para projetos maiores o Lodash seja frequentemente recomendado devido à sua modularização e otimizações de desempenho. Ainda assim, o Underscore.js funciona bem para necessidades de pequeno e médio porte.

Q8: Existem outras maneiras de controlar a execução de funções?

A: Sim. O JavaScript moderno suporta setTimeout(), setInterval(), Promise e async/await. No entanto, o Underscore.js fornece _.throttle() e _.debounce() para implementações concisas e eficientes.

Q9: Existem armadilhas ao usar o Underscore.js?

A:

  1. Tenha cuidado para não usá-lo em excesso onde os recursos nativos do ES6 são suficientes.
  2. Sempre use a versão mais recente para evitar problemas de segurança.
  3. Para projetos maiores, considere o Lodash como alternativa.

Q10: _.template() é recomendado como motor de templates?

A: _.template() é conveniente para templating simples. Para necessidades avançadas, considere bibliotecas dedicadas como Handlebars.js ou EJS.

広告