Array JavaScript: como manipular vetores

Neste artigo, iniciamos uma jornada para compreender e dominar os elementos essenciais para compreender Array JavaScript. 

Resumidamente, um Array é uma variável que guarda vários elementos.

Uma estrutura de dados versátil que permite organizar e manipular conjuntos de informações com agilidade e eficiência. 

Artigos relacionados:

• JavaScript Splice: adicionando e removendo elementos
• JavaScript .length: função ou não função?
• Split JavaScript: dividir uma string em array
• Filter JavaScript: filtrando e gerindo dados
• For JavaScript: como usar esse laço de repetição
• If JavaScript: O que é e como funciona?
• Else if JavaScript: Como usar?
• DOM JavaScript: O que é e como funciona?
• While JavaScript: um guia completo

O que é Array JavaScript?

Um “Array” em JavaScript é uma estrutura de dados fundamental que permite armazenar e organizar elementos relacionados de maneira eficiente. Ele pode conter vários valores, como números, strings ou objetos, e esses valores são organizados em uma lista ordenada. 

Vamos explorar os componentes essenciais de um Array em JavaScript de forma didática:

1. Declarar e inicializar

Para criar um Array, você o declara usando a palavra-chave `let` ou `const`, seguida pelo nome que você deseja dar ao Array. Em seguida, você atribui uma lista de elementos entre colchetes `[]` para inicializar o Array.

   Exemplo:

   let numeros = [1, 2, 3, 4, 5];

2. Índices e Acesso a Elementos

Cada elemento dentro do Array é associado a um índice, que começa em 0 para o primeiro elemento. Você pode, assim, acessar um elemento específico usando seu índice entre colchetes após o nome do Array.

   Exemplo:

   let terceiroNumero = numeros[2]; // Retorna o terceiro elemento (índice 2) do Array

3. Tamanho do Array

O tamanho de um Array é o número de elementos que ele contém. Você pode obter o tamanho usando a propriedade `length`.

   Exemplo:

   let tamanho = numeros.length; // Retorna o tamanho do Array "numeros"

4. Manipulação de Elementos

Você pode adicionar, remover ou modificar elementos em um Array. Para adicionar elementos, você pode usar o método `push()`. Para remover elementos, o método `pop()` é comum. Dessa forma, para modificar um elemento existente, simplesmente atribua um novo valor ao índice correspondente.

   Exemplo:

numeros.push(6); // Adiciona o número 6 ao final do Array

   numeros.pop();   // Remove o último elemento do Array

   numeros[0] = 10; // Modifica o primeiro elemento para 10

5. Iteração através de um Array

Para percorrer todos os elementos de um Array, você pode usar loops, como o loop `for` ou o método `forEach()`. Isso permite que você execute uma determinada ação em cada elemento.

   Exemplo usando `for`:

for (let i = 0; i < numeros.length; i++) {

       console.log(numeros[i]);

   }

   Exemplo usando `forEach()`:

numeros.forEach(function(numero) {

       console.log(numero);

   });

Um Array JavaScript permite que você armazene e manipule conjuntos de dados de maneira eficiente. 

Com a compreensão desses componentes, portanto, você estará pronto para começar a trabalhar com Arrays em seus projetos de programação.

Manipulando Elementos: Inserção, Acesso e Modificação em Array JavaScript

Arrays são estruturas de dados amplamente utilizadas na programação para organizar e manipular dados de forma eficiente, conforme o que dissemos anteriormente. Eles possuem três conceitos fundamentais e exploraremos logo abaixo:

Inserção em Arrays

A inserção em arrays envolve adicionar um novo elemento ao conjunto de elementos já existentes. Para isso, você precisa especificar a posição onde deseja inserir o elemento e, em seguida, ajustar os elementos existentes, se necessário. Existem duas abordagens comuns para inserção:

• Inserção no Final: adicionar um elemento no final do array é a forma mais simples. Você simplesmente aumenta o tamanho do array e coloca o novo elemento na última posição;
• Inserção em Posição Específica: aqui, você define a posição desejada para o novo elemento e desloca os elementos posteriores para abrir espaço. Em seguida, insere o novo elemento na posição especificada.

Inserção no Final

let numeros = [1, 2, 3, 4];

numeros.push(5); // Adiciona o número 5 no final do array

console.log(numeros); // Saída: [1, 2, 3, 4, 5]

Inserção em Posição Específica

let frutas = ['maçã', 'banana', 'laranja'];

frutas.splice(1, 0, 'uva'); // Insere 'uva' na posição 1

console.log(frutas); // Saída: ['maçã', 'uva', 'banana', 'laranja']

Acesso em Arrays

Acesso envolve recuperar um elemento específico de um array. Comumente, cada elemento em um array é associado a um índice numérico, que começa em zero para o primeiro elemento. Para acessar um elemento:

let carros = ['Ford', 'Chevrolet', 'Toyota', 'Honda'];

let terceiroCarro = carros[2]; // Acessa o terceiro elemento (índice 2)

console.log(terceiroCarro); // Saída: 'Toyota'

Modificação em Arrays

Modificação refere-se à alteração de um elemento existente em um array. Para modificar um elemento:

let cores = ['vermelho', 'verde', 'azul'];

cores[1] = 'amarelo'; // Modifica o segundo elemento para 'amarelo'

console.log(cores); // Saída: ['vermelho', 'amarelo', 'azul']

Você seleciona o índice do elemento que deseja modificar.

Substitui o valor do elemento pelo novo valor desejado.

Você pode copiar e colar esses exemplos de código em um arquivo `.py` e executá-los para testar cada um dos métodos. Portanto, certifique-se de entender como cada método funciona e como eles afetam o array. 

No entanto, que diferentes linguagens de programação podem ter sintaxes ligeiramente diferentes. Mas os conceitos básicos de inserção, acesso e modificação em arrays permanecem os mesmos.

Métodos para Organizar Dados em Array JavaScript

Existem vários métodos disponíveis em JavaScript que permitem organizar os dados dentro de um array de maneira eficaz. Explicamos alguns dos mais importantes:

1. sort()

O método sort() é utilizado para ordenar os elementos de um array em ordem alfabética (ou numérica). Ele altera o array original e retorna o array ordenado. Por padrão, ele ordena os elementos como strings, portanto, é importante fornecer uma função de comparação se você estiver lidando com números.

Por exemplo:

const numeros = [5, 2, 8, 1, 3];

numeros.sort(); // Ordena os números em ordem alfabética

console.log(numeros); // Saída: [1, 2, 3, 5, 8]

2. reverse()

O método reverse() inverte a ordem dos elementos em um array. O primeiro elemento se torna o último e o último se torna o primeiro. Ele também modifica, assim, o array original. Exemplo:

const frutas = ['maçã', 'banana', 'laranja'];

frutas.reverse(); // Inverte a ordem das frutas

console.log(frutas); // Saída: ['laranja', 'banana', 'maçã']

3. concat()

O método concat() é usado para combinar dois ou mais arrays em um único array. Ele não modifica os arrays originais, mas retorna um novo array contendo todos os elementos dos arrays combinados. Por exemplo:

const array1 = [1, 2, 3];

const array2 = [4, 5, 6];

const combinado = array1.concat(array2);

console.log(combinado); // Saída: [1, 2, 3, 4, 5, 6]

4. slice()

O método slice() cria uma cópia superficial de parte de um array existente. Você pode especificar os índices de início e fim para selecionar os elementos que deseja copiar. O array original não é modificado. Por exemplo:

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

const copia = numeros.slice(1, 4); // Copia os elementos do índice 1 ao 3 (não incluído)

console.log(copia); // Saída: [2, 3, 4]

5. splice()

O método splice() é usado para adicionar, remover ou substituir elementos em um array. Ele modifica o array original e pode ser bastante flexível para manipular os dados de forma precisa. Exemplo:

const animais = ['cachorro', 'gato', 'elefante', 'leão'];

animais.splice(1, 2); // Remove 2 elementos a partir do índice 1

console.log(animais); // Saída: ['cachorro', 'leão']

Desvendando a Potência dos Arrays Multi-dimensionais em JavaScript

O termo “array multi-dimensional” se refere a uma estrutura de dados em que um array contém outros arrays como seus elementos. Isso cria uma organização em forma de matriz, em que cada elemento é acessado por meio de índices múltiplos. 

Os principais elementos envolvidos em um array multi-dimensional são:

• Array Principal: é o array que contém os subarrays. É como o recipiente geral que mantém os subarrays organizados;
• Subarrays: são arrays individuais que estão contidos no array principal. Eles formam as linhas ou colunas da matriz, dependendo da perspectiva;
• Índices Múltiplos: para acessar elementos em um array multi-dimensional, você usa índices múltiplos. No caso de um array bidimensional, você precisa de dois índices: um para a linha e outro para a coluna.

Por exemplo, considere uma matriz bidimensional que representa uma grade de números:

const matriz = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9]

];

Assim, nesse exemplo:

• O “array principal” é a variável matriz;
• Os “subarrays” são [1, 2, 3], [4, 5, 6] e [7, 8, 9];
• Os “índices múltiplos” são usados para acessar elementos. Por exemplo, matriz[1][2] para acessar o elemento na segunda linha e terceira coluna (que é 6).

Em resumo, um array multi-dimensional é uma coleção de arrays dentro de um único array. Ele permite a criação de estruturas de dados mais complexas, como matrizes ou tabelas. Cada subarray representa uma linha ou coluna, e você usa índices múltiplos para acessar os elementos.

Abaixo damos exemplos visualmente mais diretos:

1. Criando um Array Multi-dimensional

Aqui está um exemplo de como criar uma matriz bidimensional (uma matriz de matrizes):

const matriz = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9]

];

console.log(matriz[0][0]); // Acessando o elemento na primeira linha e primeira coluna (saída: 1)

console.log(matriz[1][2]); // Acessando o elemento na segunda linha e terceira coluna (saída: 6)

2. Percorrendo um Array Multi-dimensional

Você pode usar loops aninhados para percorrer um array multi-dimensional. Por exemplo:

const matriz = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9]

];

for (let i = 0; i < matriz.length; i++) {

  for (let j = 0; j < matriz[i].length; j++) {

    console.log(matriz[i][j]);

  }

}

3. Manipulando Valores em um Array Multi-dimensional

Você pode alterar valores em um array multi-dimensional da mesma forma que faria em um array uni-dimensional:

const matriz = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 9]

];

matriz[1][1] = 99; // Alterando o valor na segunda linha e segunda coluna

console.log(matriz);

/* Saída:

[

  [1, 2, 3],

  [4, 99, 6],

  [7, 8, 9]

]

*/

4. Arrays Multi-dimensionais Irregulares

Arrays multi-dimensionais não precisam ter o mesmo número de elementos em cada subarray:

const irregular = [

  [1, 2],

  [3, 4, 5],

  [6]

];

console.log(irregular[1][2]); // Acessando o elemento na segunda linha e terceira coluna (saída: 5)

Esses exemplos, portanto, devem ajudar você a entender melhor como trabalhar com arrays multi-dimensionais em JavaScript. Lembre-se de testar os códigos em um ambiente JavaScript para ver os resultados.

Alternativas em JavaScript para os arrays

Além dos arrays, o JavaScript oferece outras estruturas de dados que podem ser utilizadas para diferentes finalidades. Por exemplo:

1. Objetos

Os objetos em JavaScript permitem armazenar pares chave-valor, onde as chaves são strings que funcionam como índices únicos. Eles são excelentes para representar coleções de propriedades e valores associados. Por exemplo:

let pessoa = {

       nome: "João",

       idade: 30,

       profissao: "Engenheiro"

   };

2. Mapas

Os mapas são semelhantes a objetos, mas têm maior flexibilidade nas chaves. Eles podem usar qualquer tipo de dado como chave e mantêm a ordem de inserção, o que pode ser útil em muitos cenários.

let mapa = new Map();

   mapa.set("chave1", "valor1");

   mapa.set(42, "valor2");

3. Conjuntos (Sets)

Os conjuntos permitem armazenar valores únicos e não duplicados. Eles podem ser úteis quando você precisa manter uma coleção de itens distintos.

let conjunto = new Set();

   conjunto.add(10);

   conjunto.add("texto");

   conjunto.add(10); // Não será duplicado

4. Pilhas (Stacks)

Pilhas são estruturas de dados LIFO (Last In, First Out), onde o último elemento adicionado é o primeiro a ser removido. Você pode implementar uma pilha utilizando arrays.

let pilha = [];

   pilha.push(1);

   pilha.push(2);

   let topo = pilha.pop(); // Retorna 2 (último elemento adicionado)

5. Filas (Queues)

Filas são estruturas de dados FIFO (First In, First Out), onde o primeiro elemento adicionado é o primeiro a ser removido. Assim como as pilhas, você pode implementar filas utilizando arrays.

let fila = [];

   fila.push("A");

   fila.push("B");

   let primeiro = fila.shift(); // Retorna "A" (primeiro elemento adicionado)

6. Matrizes Esparsas

Se você precisa lidar com matrizes muito grandes com muitos elementos vazios, pode considerar matrizes esparsas. Elas economizam espaço, armazenando apenas valores não padrão.

let matrizEsparsa = [];

   matrizEsparsa[10] = [];

   matrizEsparsa[10][5] = 42;

Lembre-se de que a escolha da estrutura de dados depende das necessidades do seu projeto. Dessa forma, cada uma dessas alternativas tem suas vantagens e limitações. Então escolha aquela que melhor se adapta aos requisitos específicos do seu código.

Conclusão

Explorar a manipulação de dados por meio de Array JavaScript é uma jornada essencial para qualquer programador. 

Esses componentes oferecem uma maneira eficaz e versátil de organizar e operar com conjuntos de informações.

Em conclusão, os Arrays JavaScript são ferramentas poderosas e versáteis que desempenham um papel fundamental na programação. Eles permitem armazenar, organizar e manipular dados de maneira eficiente. 

Ao compreender os componentes essenciais dos Arrays, você estará pronto para explorar todo o potencial dessa estrutura em seus projetos de programação. Compreendemos, então, que a capacidade de declarar, acessar, manipular elementos e iterar através de Arrays é um conhecimento essencial para qualquer desenvolvedor. 

Em suma, lembre-se de experimentar e praticar regularmente para aprimorar suas habilidades e tornar-se um programador mais habilidoso.

Considere aprender mais sobre Array em PHP para aprofundar seus conhecimentos, leia nosso artigo ou visite nosso blog e conteúdos diversificados que possuímos.