JScript Katana

Domine os Arrays em JavaScript: Um Guia Completo de Criação, Manipulação, Filtragem e Aplicações Práticas

Processamento de Dados (Strings, Números, Datas, Arrays e Objetos)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introdução

O que são Arrays em JavaScript e Por que São Importantes?

Arrays em JavaScript são um dos elementos essenciais para gerenciar e manipular dados de forma eficiente. Ao usar arrays, você pode armazenar múltiplos valores em uma única variável e recuperá‑los ou modificá‑los conforme necessário.
Por exemplo, arrays são extremamente úteis ao salvar uma lista de nomes de usuário, uma lista de produtos ou resultados de cálculos. Especialmente no desenvolvimento de aplicações web, arrays são frequentemente usados ao lidar com dados de formulários ou dados obtidos de APIs.

Casos de Uso Práticos de Arrays

  • Gerenciamento de Listas : Gerenciar itens de carrinho de compras ou uma lista de tarefas.
  • Filtragem de Dados : Funcionalidades de busca e ordenação de usuários.
  • Controle de Animação : Gerenciar a ordem dos elementos ou mudanças dinâmicas.

Arrays são uma estrutura fundamental para lidar com dados agrupados e são um tópico essencial ao aprender JavaScript.

O que Você Aprenderá Neste Artigo

Este artigo explica sistematicamente os arrays em JavaScript, abordando tópicos como:

  1. Como declarar e inicializar arrays
  2. Como adicionar, remover e recuperar elementos
  3. Técnicas de ordenação e filtragem
  4. Métodos para mesclar e dividir arrays
  5. Exemplos de aplicação usando arrays

O conteúdo é adequado para iniciantes até aprendizes intermediários e explica cuidadosamente tudo, desde conceitos básicos até técnicas práticas.

Para Quem Este Artigo é Destinado

  • Iniciantes : Aqueles que estão lidando com arrays pela primeira vez.
  • Usuários Intermediários : Aqueles que desejam aprender operações avançadas ou escrever código mais eficiente.

Com exemplos de código e casos de uso práticos, até iniciantes podem aprender com confiança.

O que Você Pode Conquistar ao Aprender Arrays

Depois de dominar os arrays em JavaScript, você adquirirá as seguintes habilidades:

  • Gerenciamento & Manipulação de Dados : Adicionar, remover ou ordenar dados facilmente.
  • Integração com APIs : Manipular e exibir dados obtidos de APIs Web de forma eficiente.
  • Desenvolvimento de Aplicações : Construir aplicativos simples usando exemplos práticos.

Use o que aprender aqui para construir aplicações JavaScript mais avançadas.

2. Conceitos Básicos de Arrays | Declaração e Inicialização

2.1 Definição e Papel dos Arrays

Arrays em JavaScript são objetos especiais que permitem gerenciar múltiplos itens de dados simultaneamente. Cada elemento possui um índice que determina sua posição, facilitando a recuperação e manipulação dos dados.

Principais Papéis dos Arrays

  1. Gerenciamento de Listas : Gerenciar dados agrupados como listas de produtos ou informações de usuários.
  2. Manipulação de Dados : Executar tarefas eficientes como ordenação ou busca.
  3. Processamento Dinâmico de Dados : Manipular e transformar dados obtidos de APIs.

Características dos Arrays

  • Os índices dos elementos começam em 0.
  • Valores de diferentes tipos de dados podem ser armazenados juntos.
    let mixedArray = [1, "hello", true];
console.log(mixedArray[1]); // "hello"

2.2 Declarando e Inicializando Arrays

Declaração Básica de Array

Em JavaScript, arrays podem ser declarados de duas maneiras:

  1. Usando notação literal (recomendado)
    let fruits = ["apple", "banana", "grape"];
  1. Usando o construtor Array
    let fruits = new Array("apple", "banana", "grape");

Criando um Array Vazio

let emptyArray = [];

2.3 Declarando Arrays Multidimensionais

Um array multidimensional é um array que contém outros arrays. É útil ao gerenciar estruturas de dados hierárquicas.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Observações sobre Inicialização

Mistura de Tipos de Dados

Arrays em JavaScript podem armazenar valores de diferentes tipos de dados, o que pode causar erros inesperados se não forem tratados com cuidado.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Exemplos Básicos de Operações com Arrays

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Resumo

Esta seção explicou os seguintes conceitos sobre arrays em JavaScript:

  1. Definição e papéis dos arrays
  2. Sintaxe básica para declaração e inicialização
  3. Arrays multidimensionais e tratamento de comprimento
  4. Considerações importantes durante a inicialização com exemplos de código

Com esse conhecimento, você estará melhor preparado para a próxima etapa: “Operações Básicas com Arrays.”

3. Operações Básicas com Arrays | Adicionando, Removendo e Recuperando Elementos

3.1 Métodos para Adicionar Elementos

Adicionar Elementos ao Final – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Adicionar Elementos ao Início – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Métodos para Remover Elementos

Remover o Último Elemento – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Remover o Primeiro Elemento – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Remover Elementos de Qualquer Posição – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Métodos para Recuperar Elementos

Recuperar por Índice

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Recuperar o Último Elemento

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Recuperar o Primeiro Elemento Correspondente – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Resumo

Nesta seção, explicamos as seguintes operações de arrays em JavaScript:

  1. Como adicionar elementos (push() e unshift())
  2. Como remover elementos (pop(), shift(), splice())
  3. Como recuperar elementos (acesso por índice, find(), includes())

Ao combinar essas operações básicas, você pode manipular arrays livremente.

4. Ordenando e Filtrando Arrays

4.1 Métodos para Ordenar Arrays

Ordenar em Ordem Ascendente ou Descendente – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Inverter a Ordem – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Métodos para Filtrar Arrays

Extrair Elementos que Correspondem a uma Condição – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Recuperar o Primeiro Elemento que Corresponda a uma Condição – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Obter o Índice do Primeiro Elemento Correspondente – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Resumo

Esta seção explicou como ordenar e filtrar arrays em JavaScript:

  1. Ordenação: usando sort() e reverse() para controlar a ordem.
  2. Filtragem: usando filter() para extrair elementos que correspondem.
  3. Busca: usando find() e findIndex() para localizar elementos.

5. Unindo, Dividindo e Transformando Arrays

5.1 Métodos para Unir Arrays

Unir Arrays – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Junte Usando a Sintaxe Spread

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Métodos para Dividir Arrays

Extrair uma Porção – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Remover ou Substituir Elementos – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Métodos para Transformar Arrays

Converter Array para String – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Converter String para Array – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Achatar um Array Multidimensional – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Resumo

Esta seção explicou vários métodos de arrays em JavaScript para juntar, dividir e transformar arrays:

  1. Juntando arrays: concat() e sintaxe spread
  2. Dividindo arrays: slice() para extração e splice() para remoção ou substituição
  3. Transformando arrays: join() e split() para conversão de strings
  4. Achatar: flat() para converter arrays aninhados em uma única dimensão

6. Percorrendo Arrays e Técnicas Avançadas

6.1 Métodos para Percorrer Arrays

Loop Básico com for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Loop Simplificado com for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Percorrendo com o Método forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Criar um Novo Array com map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Técnicas Avançadas

Remover Elementos Duplicados

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Achatar um Array – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Resumo

Esta seção explicou os métodos de iteração de arrays e técnicas avançadas:

  1. Loops básicos: iteração eficiente usando for e for...of.
  2. Loops baseados em métodos: usando forEach() e map() para um processamento mais limpo e funcional.
  3. Manipulação avançada de dados: remoção de duplicados e achatamento de arrays aninhados.

7. Exemplo Prático | Construindo uma Aplicação Simples Usando Arrays

7.1 Criando uma Aplicação de Lista de Tarefas

Visão Geral das Funcionalidades

Este simples aplicativo de lista de tarefas inclui as seguintes funcionalidades:

  1. Adicionar novas tarefas
  2. Remover tarefas concluídas
  3. Exibir a lista atual de tarefas

Exemplo de Código

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Exemplo de Saída

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Resumo

Esta seção introduziu uma aplicação prática usando operações de array:

  1. Aplicativo de Lista de Tarefas : Praticou a adição, remoção e exibição de tarefas.
  2. Busca e Análise de Dados : Demonstrou como implementar buscas flexíveis e agregação de dados usando operações de array.

8. Resumo | Dominando Operações de Array

Arrays em JavaScript são ferramentas poderosas que ajudam a simplificar o gerenciamento e a manipulação de dados. Este artigo abordou tudo, desde operações básicas até técnicas avançadas e exemplos práticos.

8.1 Revisão deste Artigo

1. Operações Básicas de Array

  • Declaração e Inicialização : Aprendeu como criar arrays e lidar com arrays multidimensionais.
  • Adição, Remoção e Recuperação de Elementos : Praticou a manipulação dinâmica de dados usando métodos como push(), pop() e outros.

2. Ordenação e Filtragem de Arrays

  • Ordenação : Explicou como modificar a ordem do array usando sort() e reverse().
  • Filtragem : Aprendeu como extrair dados usando filter() e find().

3. Junção, Divisão e Transformação de Arrays

  • Junção : Entendeu como mesclar arrays usando concat() e a sintaxe spread.
  • Divisão & Transformação : Usou slice(), splice(), join() e split() para manipulação flexível de dados.

4. Looping e Técnicas Avançadas

  • Looping : Usou for, forEach() e map() para iteração eficiente.
  • Técnicas Avançadas : Aprendeu a remover duplicatas e achatar arrays aninhados.

5. Exemplos Práticos

  • Aplicativo de Lista de Tarefas : Aplicou operações de array para construir um aplicativo funcional.
  • Busca & Agregação de Dados : Demonstrou filtragem e análise de dados prática.

8.2 Importância das Operações de Array e Casos de Uso

Por que as Operações de Array são Importantes?

A manipulação de arrays é essencial para organizar, analisar e exibir dados. Cenários comuns incluem:

  1. Gerenciamento e Exibição de Dados : Filtrando dados de API e exibindo resultados em tabelas.
  2. Manipulação de Formulários e Entrada de Usuário : Atualizando listas dinamicamente ou processando valores de entrada.
  3. Funções de Busca e Ordenação : Manipulando grandes conjuntos de dados de forma eficiente.
  4. Desenvolvimento de Aplicações : Construindo recursos de UI como carrinhos de compra e gerenciadores de tarefas.

8.3 Próximos Passos no Aprendizado

1. Uso Avançado de Métodos de Array

  • Tarefa Sugerida : Crie um aplicativo que busque dados de API e filtre os resultados usando operações de array.

2. Compare e Use Outras Estruturas de Dados

  • Aprenda Objetos, Set e Map para escolher a estrutura correta para cada cenário.

3. Aplique o Conhecimento em Frameworks JavaScript

  • Use habilidades de array em frameworks como React ou Vue.js para desenvolvimento real.

8.4 Links de Referência e Recursos

8.5 Considerações Finais e Conselhos para os Leitores

JavaScript array operations are essential for building a solid programming foundation. This article provided a structured approach from basics to advanced concepts.

Conselho

  1. Pratique escrevendo código : Teste cada método para aprofundar sua compreensão.
  2. Desenvolva habilidades de resolução de problemas : Converta tarefas do mundo real em programas para aprimorar a expertise prática.
  3. Continue aprendendo : Aprenda novos frameworks e as tecnologias mais recentes para melhorar seu conjunto de habilidades.

Dê o Próximo Passo!

Use este artigo como base para avançar na construção de aplicações mais complexas ou aprender frameworks modernos.

FAQ | Perguntas Frequentes

Q1. Qual é a diferença entre map() e forEach()?

  • map() : Retorna um novo array após aplicar uma função a cada elemento.
  • forEach() : Executa uma função para cada elemento, mas não retorna um novo array.

Exemplo:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Como ordenar números corretamente?

Por padrão, sort() compara valores como strings. Para ordenar números numericamente, você deve passar uma função de comparação.

Exemplo:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Como remover duplicatas de um array?

Use o objeto Set para remover duplicatas facilmente.

Exemplo:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Como verificar se um elemento existe em um array?

Use o método includes() para determinar se o array contém um valor específico.

Exemplo:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Como achatar um array multidimensional?

Use o método flat() para converter um array aninhado em um array de nível único.

Exemplo:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]
広告