Arrays em JavaScript Explicados: Conceitos Básicos, Operações e Exemplos Práticos

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 armazenar listas de nomes de usuários, catálogos de produtos ou resultados de cálculos. No desenvolvimento de aplicações web, arrays são frequentemente usados ao lidar com dados de formulários ou dados recuperados de APIs.

Casos de Uso Práticos para Arrays

• Gerenciamento de listas : Gerenciar itens de carrinho de compras ou listas de tarefas.
• Filtragem de dados : Pesquisas de usuários e funcionalidade de ordenação.
• Manipulação de animações : Controlar a ordem dos elementos e atualizações dinâmicas.

Dessa forma, arrays são uma estrutura fundamental para lidar com dados agrupados e um tópico indispensável ao aprender JavaScript.

O que Você Aprenderá Neste Artigo

Este artigo explica sistematicamente os arrays em JavaScript com os seguintes tópicos:

1. Como declarar e inicializar arrays
2. Como adicionar, remover e recuperar elementos
3. Técnicas de ordenação e filtragem
4. Métodos de mesclagem e divisão de arrays
5. Exemplos práticos de aplicação usando arrays

O conteúdo foi projetado tanto para iniciantes quanto para aprendizes intermediários, cobrindo cuidadosamente tudo, desde operações básicas até técnicas avançadas.

Público‑Alvo

• Iniciantes : Aqueles que estão trabalhando com arrays pela primeira vez.
• Desenvolvedores intermediários : Aqueles que desejam aprender operações de arrays mais avançadas e eficientes.

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

O que Você Pode Conquistar ao Aprender Arrays

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

• Gerenciamento e manipulação de dados : Adicionar, remover e ordenar dados facilmente.
• Integração de APIs : Processar e exibir dados recuperados de APIs web de forma eficiente.
• Desenvolvimento de aplicações : Construir aplicações simples baseadas em exemplos práticos.

Use o conhecimento adquirido aqui para criar programas mais avançados com JavaScript.

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

2.1 Definição e Papel dos Arrays

Em JavaScript, um array é um objeto especial que permite gerenciar múltiplos valores ao mesmo tempo. Cada elemento possui uma ordem (índice), facilitando a recuperação e manipulação dos dados.

Principais Papéis dos Arrays

1. Gerenciamento de listas : Organizar listas de produtos ou informações de usuários.
2. Manipulação de dados : Processamento eficiente como ordenação e busca.
3. Manipulação de dados dinâmicos : Transformar e processar dados obtidos de APIs.

Características dos Arrays

• Os índices começam em 0.
• Elementos de diferentes tipos de dados podem coexistir no mesmo array.

  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 usando os dois métodos a seguir.

1. Usando literais de array (recomendado)

   let fruits = ["apple", "banana", "grape"];
   

2. 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 armazena arrays dentro de um array. É ú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 Notas Importantes ao Inicializar Arrays

Mistura de Tipos de Dados

Como os arrays em JavaScript podem conter diferentes tipos de dados, isso pode gerar erros inesperados se não for tratado 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

Nesta seção, abordamos os seguintes tópicos relacionados a arrays em JavaScript:

1. A definição e o papel dos arrays
2. Sintaxe básica para declaração e inicialização
3. Arrays multidimensionais e indexação
4. Considerações importantes e exemplos práticos de código

Ao dominar esses fundamentos, você poderá avançar suavemente para o próximo passo: operações básicas com arrays.

3. Operações Básicas com Arrays: Adicionar, Remover e Recuperar

3.1 Como Adicionar Elementos

Adicionar um Elemento ao Final – push()

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

Adicionar um Elemento ao Início – unshift()

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

3.2 Como Remover Elementos

Remover um Elemento do Final – pop()

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

Remover um Elemento do Início – 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 Como Recuperar Elementos

Recuperar por Índice

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

Obter o Último Elemento de um Array

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

Recuperar um Elemento que Atende a uma Condição – find()

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

Resumo

Nesta seção, cobrimos os seguintes pontos-chave sobre operações de arrays em JavaScript:

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

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

4. Ordenação e Filtragem de Arrays

4.1 Como Ordenar Arrays

Ordenar em Ordem Ascendente/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 Como 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]

Obter 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

Nesta seção, explicamos detalhadamente como ordenar e filtrar arrays em JavaScript.

1. Ordenação: Controle a ordem usando sort() e reverse().
2. Filtragem: Use filter() para extrair apenas os elementos que atendem a uma condição.
3. Busca: Encontre elementos específicos com find() e findIndex().

5. Mesclando, Dividindo e Transformando Arrays

5.1 Como Mesclar Arrays

Mesclar Arrays – concat()

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

Mesclando com a Sintaxe de Spread

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

5.2 Como 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 Como Transformar Arrays

Converter um Array em uma String – join()

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

Converter uma String em um 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

Nesta seção, exploramos métodos para mesclar, dividir e transformar arrays do JavaScript.

1. Mesclando arrays usando concat() e a sintaxe de spread.
2. Dividindo arrays com slice() e modificando-os usando splice() .
3. Transformando arrays e strings com join() e split() .
4. Achatar arrays aninhados usando flat() .

6. Percorrendo Arrays e Técnicas Avançadas

6.1 Métodos de Percorrimento de Array

Percorrimento Básico com uma Instrução for

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

Percorrimento Conciso com for...of

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

Percorrendo com forEach()

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

Gerando 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

Removendo 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

Nesta seção, cobrimos técnicas de percorrimento e uso avançado de arrays.

1. Loops básicos usando for e for...of .
2. Processamento eficiente e criação de arrays com forEach() e map() .
3. Técnicas avançadas como remover duplicatas e achatar arrays.

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

7.1 Criando uma Aplicação de Lista de Tarefas

Visão Geral de Recursos

Esta aplicação é uma lista de tarefas simples com os seguintes recursos:

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();
}

// Função para remover uma tarefa function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Removido: ${removed[0]}); displayTasks(); } else { console.log(“Índice inválido”); } }

// Função para exibir as tarefas atuais function displayTasks() { console.log(“Tarefas Atuais:”); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Execução de teste addTask(“Study JavaScript”); addTask(“Create a shopping list”); addTask(“Check emails”);

removeTask(1); // Remove a segunda tarefa

### Sample Output

Adicionado: Study JavaScript Adicionado: Create a shopping list Adicionado: Check emails Tarefas Atuais: 1: Study JavaScript 2: Create a shopping list 3: Check emails Removido: Create a shopping list Tarefas Atuais: 1: Study JavaScript 2: Check emails

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:



1. **Data management and presentation** : Filtering API data and displaying it in tables.
2. **Form and user input handling** : Dynamically managing lists and processing inputs.
3. **Search and sorting features** : Efficiently handling large datasets.
4. **Application development fundamentals** : Building UI components such as shopping carts and task management systems.



### 8.3 Next Steps in Learning



#### 1. Further Use of Array Methods



* **Suggested challenge** : Build an application that displays and filters API data using array operations.



#### 2. Comparing and Choosing Other Data Structures



* Learn **Objects** , **Set** , and **Map** to choose the right structure for each use case.



#### 3. Practical Use in JavaScript Frameworks



* Apply these skills in frameworks such as React or Vue.js.



### 8.4 Reference Links and Resources



* **MDN Web Docs: Array Object**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
* **JavaScript.info: Arrays and Methods**  <https://javascript.info/>



### 8.5 Final Advice for Readers

JavaScript array operations são essenciais para construir uma base sólida de programação. Este artigo orienta você através de técnicas tanto fundamentais quanto avançadas.

Conselho

1. Pratique na prática : Escreva e teste código para reforçar seu entendimento.
2. Desenvolva habilidades de resolução de problemas : Traduza problemas do mundo real em código.
3. Comprometa-se com aprendizado contínuo : Mantenha-se atualizado com técnicas e frameworks modernos.

Avance para o Próximo Passo!

Use este artigo como base e continue avançando na construção de aplicações mais avançadas e no aprendizado de frameworks modernos.

FAQ: Perguntas Frequentes

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

• map() : Retorna um novo array. Aplica uma transformação a cada elemento e coleta os resultados.
• forEach() : Não retorna um novo array e simplesmente executa uma função para cada elemento.

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 posso ordenar números corretamente?

O método sort() compara elementos como strings por padrão. Para ordenar números corretamente, você deve fornecer 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 posso remover elementos duplicados de um array?

Você pode remover duplicatas facilmente usando o objeto Set.

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 posso verificar se um elemento existe em um array?

Use o método includes() para determinar se um elemento específico existe em um array.

Exemplo:

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

Q5. Como posso converter um array multidimensional em um array unidimensional?

Use o método flat() para achatar arrays aninhados.

Exemplo:

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