Matrizes em JavaScript

Arrays em JavaScript podem inicialmente ser confusos e difíceis de entender, especialmente quando se lida com conceitos avançados. Eu também tive dificuldade em entender arrays em JavaScript no início. Neste artigo, pretendo desmistificar arrays em JavaScript, detalhando tudo o que você precisa saber para poder trabalhar com eles com confiança.

Definição

O que é uma matriz

Um array é uma estrutura de dados que armazena uma coleção de elementos, cada um acessível por um índice. Em muitas linguagens de programação, os arrays armazenam elementos em locais de memória contíguos. Em JavaScript, arrays são objetos semelhantes a listas de alto nível usados ​​para armazenar vários valores em uma única variável. Eles são indexados em zero, o que significa que o primeiro elemento está no índice 0.

Matrizes em JavaScript

Como JavaScript é uma linguagem de tipo dinâmico, arrays podem conter elementos de diferentes tipos. Um array pode conter números, strings, booleanos, objetos e até outros arrays. Isso difere de linguagens de tipo estaticamente como Java ou C , onde os arrays são normalmente homogêneos e devem conter elementos do mesmo tipo de dados.

Por que usar uma matriz?

Arrays ajudam a gerenciar dados de forma eficiente, permitindo armazenar, acessar e manipular valores. Eles são usados ​​para qualquer coisa que envolva listas ou coleções, como gerenciar itens em um carrinho de comércio eletrônico ou monitorar as entradas do usuário.

Como criar um array em JavaScript

Existem várias maneiras de criar arrays em JavaScript, abordarei algumas delas:

1. Usando literais de array []

Em JavaScript, você pode simplesmente criar um array atribuindo [] a uma variável ou constante

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Observe que os elementos de um array são separados por vírgula,

2. Usando o construtor Array

Você também pode criar um array como uma instância de um construtor JavaScript nativo de array usando a seguinte sintaxe:
const meuArray = new Array()
O construtor Array recebe um ou mais argumentos (eles devem ser números) e se comporta de maneira diferente de acordo com o número de argumentos que você passa!
Se você passar um argumento: const myArray = new Array(4), isso criará um novo array com 4 elementos vazios!

Se você passar mais de um argumento: const myArray = new Array(1, 2, 3), isso cria uma matriz de 3 números 1, 2 e 3 respectivamente e é semelhante a escrever const myArray = [1, 2 , 3]!

Eu sei que isso parece confuso, mas acredite, é fácil se você fizer mais alguns exercícios com eles!

3. Usando o método Array.of

Arrays também podem ser criados usando este método Array.of e ele apenas criará um array contendo todos os elementos que você passa para ele como argumentos. A diferença entre usar Array.of e o construtor Array está em como eles se comportam quando recebem um argumento!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Observe como Array.of se comporta quando recebe um parâmetro, ao contrário do construtor Array que apenas cria um array de n elementos vazios, o Array.of apenas cria um array com um único elemento que é aquele que você passou!

4. Usando o método Array.from

Você também pode usar o método Array.from(iterable), que recebe um argumento que também deve ser iterável e cria um array a partir dele! Por exemplo, você pode passar um conjunto para este método e criar um array a partir dos valores desse conjunto!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Manipulação de arrays em JavaScript

Vimos o que é um array e como você pode criar arrays em JavaScript, agora o problema restante que você deve estar se perguntando é: como faço para usar e trabalhar com arrays?
Bem, essa é uma boa pergunta!

Maneira tradicional de trabalhar com arrays em JavaScript

Tradicionalmente, usamos loops para iterar sobre os elementos armazenados em um array e usá-los!
O exemplo a seguir mostra como você pode percorrer uma matriz de números e exibir o dobro de cada número dentro da matriz:

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  Usando sintaxe de método de array JavaScript moderno


JavaScript vem com muitos métodos de array (funções de ordem superior) prontos para uso, eles são acessíveis a todas as instâncias de array por meio do objeto Array.prototype, usamos esses métodos fornecidos por JavaScript para manipular e trabalhar com dados armazenados em arrays! Podemos até criar nossos próprios métodos de array (veremos isso no próximo capítulo)

Eles são métodos de ordem superior, porque usam outras funções como argumentos e usam essas funções para manipular os dados armazenados em arrays!

Esses métodos de array também são categorizados em duas categorias:



Mutating: Eles fazem um loop sobre o array e, ao aplicar a função de retorno de chamada, eles também alteram o array original!

Sem mutação: Eles iteram sobre o array e aplicam a função de retorno de chamada, mas em vez de alterar o array original, eles retornam um novo array


  
  
  1. Método forEach()


forEach() é um método de ordem superior de array usado para fazer um loop sobre os elementos de um array e aplicar uma função de retorno de chamada em cada elemento sem modificar o array original ou criar um novo array!

A sintaxe das funções de retorno de chamada, que geralmente é uma função anônima (geralmente a mesma em todos os outros métodos):

function (currentElement[, index, targetArray]) {}




Isso significa que em cada iteração, o método array tem acesso ao elemento atual na iteração (currentElement), seu índice no array index que é opcional e a referência ao array alvo no qual o método está sendo executado targetArray que também é opcional. Mas você pode chamar esses parâmetros como quiser, basta prestar atenção em suas posições.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. Método map()


Assim como o mapa forEach também é outra maneira de iterar sobre os elementos do array e aplicar a função de retorno de chamada em cada elemento, mas diferentemente do mapa forEach é um método sem mutação e, portanto, ele cria e retorna o novo array como resultado de iteração e não altera o array original!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. Método filter()


O método 
filter() é usado quando você deseja filtrar o array removendo os elementos que você não deseja, este é um método sem mutação e retorna um novo array!

Para cada iteração, o retorno de chamada dentro de filter() deve retornar um valor booleano indicando se o elemento atual deve ou não ser incluído no novo array filtrado

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. Método reduzir()


O método 
reduce() é um pouco diferente dos acima. Pense nisso como uma forma de combinar todos os elementos de um array em um único valor, aplicando uma função a cada elemento, um por um. Ele retorna um único valor de todos os elementos do array, você o usará quando quiser um único valor de todos os elementos de um array como soma, média, máximo ou mínimo, apenas para citar alguns!

A sintaxe também é diferente

Array.reduce(função(acumulador, elemento[, índice, targetArray]) [, valor inicial])

Este método leva dois argumentos, o primeiro é a função de retorno de chamada, assim como outros métodos, e o segundo será o valor inicial da variável acumuladora. Este segundo argumento é opcional, se não for fornecido, a redução usará o primeiro elemento de um array como valor inicial do acumulador

O acumulador contém o resultado retornado pela função de retorno de chamada em cada iteração e será o resultado final retornado da redução quando a iteração terminar!

Vamos tentar encontrar uma soma a partir de uma matriz de números:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. Método slice()


slice() é outro método de array útil em JavaScript, que é usado para extrair uma pequena parte de um array! slice() cria um novo array copiando uma seção de um array existente sem modificar o array original.

A sintaxe do método slice() é a seguinte:

Array.slice(startIndex, endIndex) startIndex representa um ponto inicial de extração e é inclusivo e endIndex representa o elemento final de extração, é opcional e exclusivo. Quando não é fornecido, os métodos slice copiam um array de startIndex para o final de um array!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. Método splice()


splice() é um método de array em JavaScript, que é usado para adicionar, remover e substituir elementos em um array. splice() altera o conteúdo de um array adicionando, removendo ou substituindo elementos no array.

A sintaxe do método splice() é a seguinte:

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

Isso pode parecer confuso, mas deixe-me tentar explicar:

índice significa o índice inicial na matriz em que a remoção do elemento deve começar e é inclusivo.

ElementsToRemove representa o número de elementos do índice que você deseja remover do array, se quiser apenas adicionar novos elementos, você pode fornecer 0 nesta posição.

newElement1, newElement2 etc. Podem ser qualquer número de elementos que você deseja adicionar em sua matriz e substituirão os elementos ElementToRemove que você especificou em sua matriz!

Muito de conversa, vamos ver um exemplo:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "pineapple") isso significa que do índice 1, remova 1 elemento e adicione 'pineapple'

Se quiséssemos apenas adicionar abacaxi no array sem substituir outro valor por ele, poderíamos ter escrito isso como

fruits.splice(1, 0, "pineapple") isso adicionaria abacaxi após o elemento no índice1 e não removeria nenhum outro elemento deste array.


  
  
  Conclusão


Arrays são um recurso fundamental e versátil em JavaScript, oferecendo uma estrutura essencial para armazenar e manipular coleções de dados. Desde a simples criação de array usando literais até métodos mais avançados como Array.of() e Array.from(), os arrays JavaScript fornecem uma variedade de maneiras de lidar com diferentes tipos de dados. Ao dominar a manipulação de array por meio de loops ou métodos modernos como forEach(), map(), filter(), reduzir(), slice() e splice(), você pode executar operações complexas com eficiência. Compreender esses recursos de array é fundamental para se tornar proficiente em JavaScript, permitindo que você escreva um código mais limpo, conciso e poderoso.