Arrays em Java Script

Um array em JavaScript é um objeto, da mesma forma que String ou Math. Como tal, você o cria com um construtor. Neste post veja arrays em Java Script.

let novoArray = new Array(‘um’, ‘dois’);

Você também pode criar um array como um valor literal, o que não requer o uso explícito do objeto array:

let novoArray = [‘um’, ‘dois’];

Se um array for criado e, logo após, incluido um novo elemento além do limite do array, as posições antes da última serão definidas como undefined:

 let cores = new Array('Azul', 'Verde', 'Laranja')
 cores[7] = 'Rosa'
 
 
 /* Será gerado: 
 ['Azul', 'Verde', 'Laranja', 'undefined', 'undefined', 'undefined', 'undefined', 'Rosa']
 */ 

Funções de arrays

Adiciona elementos em um determinado índice ou exclui um determinado índice: meu_array.splice:

 cores = ['Azul', 'Verde', 'Laranja']
 cores.splice(1,1) //exclui um elemento a partir da posição 1
 //ou seja: ['Azul', 'Laranja']
 
 cores.splice(1,2) //exclui dois elementos a partir da posição 1
 //ou seja: ['Azul']
 
 //exclui dois elementos a partir da posição 1 e acrescenta os elementos 'Vermelho' e 'Preto':
 cores.splice(1,2, 'Vermelho', 'Preto') 
 
 //ou seja: ['Azul', 'Vermelho', 'Preto'] 

Calcula o tamanho de um array: meu_array.length

Exclui posição de um array: delete meu_array[x]

Pega um pedaço do array: meu_array.slice(1, 4)

No caso acima o pedaço do array compreende, desde a posição 1, até a posição 3, apesar do intervalo 1-4.

Exclui a posição ‘x’ de um array e define o valor da posição excluida como undefined.

Ordena array: meu_array.sort

Diferentemente de String e Number, a aplicação em JavaScript converte imediatamente o literal em um objeto do tipo Array, atribuindo o resultado à variável. Literais String, Number e Boolean são convertidos em objetos apenas quando objetos de métodos são chamados e descartam as instâncias dos objetos imediatamente depois.

Assim que a instância de Array for criada, você pode acessar elementos do array por seu valor de índice – o número representando sua localização no array:

alert(novoArray[0]);

Índices de arrays começam em 0 e vão até o número de elementos menos 1. Assim, um array de cinco elementos teria índices de 0 a 4.

Arrays não precisam ser unidimensionais. Não é incomun a existência de um array no qual cada elemento tenha múltiplas dimensões, e a forma de gerenciar isso em JavaScript é criando um array onde cada elemento seja ele mesmo um array.

No trecho de código a seguir, é criado um array de valores tridimensonais:

 let tresPontos = new Array();
 tresPontos[0] = new Array(1.6, 4.13, 3.0);
 tresPontos[1] = new Array(4.3, 3.7, 6.5);
 tresPontos[2] = new Array(7.2, 1.3, 1.5);

Se o array interno contiver as coordenadas x, y e z em ordem, você pode acessar a coordenada z do terceiro ponto como a seguir:

var novoPonto2 = tresPontos[2][2]; //e assim por diante

Percorrendo um array com forEach

  const pessoas = ['Aline', 'Benedito', 'Marianna', 'Jaqueline']
  
  //percorre o array 'pessoas' informando o nome e o índice como parâmetros a uma função
  pessoas.forEach(function(nome, indice) {
     console.log(`${indice + 1}) ${nome}`)
  }) 

Método map()

O método map() é útil quando precisamos traduzir/mapear todos os elementos em um array para outro conjunto de valores.

A função não altera o array original, apenas cria um outro array do mesmo tamanho com outros valores:

 const numeros = [1, 2, 3, 4, 5, 6]
 
 //foi passado uma função ao map para calcular o triplo do valor de cada elemento do array numeros
 let resultado = numeros.map(function(e) {
    return e * 3
 })
 
 console.log(resultado) // [ 3, 6, 9, 12, 15, 18 ] 
 
  const soma5 = e => e + 5
  const dobro = e => e * 2
  
  //formata valor para float com duas casas decimais e substituindo ponto por vírgula
  const formatoMonetario = e => `R$ ${parseFloat(e).toFixed(2).replace('.',',')}`   
  
  /* map encadeado */
  resultado = numeros.map(soma5).map(dobro).map(formatoMonetario)
  console.log(resultado)
 
 //Resultado:
 ['R$ 12,00',
  'R$ 14,00',
  'R$ 16,00',
  'R$ 18,00',
  'R$ 20,00',
  'R$ 22,00'] 
  
  /* extrair apenas valores de um array */
  
  //Primeiro precisamos converter para objeto para depois pegar apenas os preços:
  
  const carrinho = [
    '{"nome": "Computador", "preco": 1.999 }',
    '{"nome": "Impressora", "preco": 589.90 }',
    '{"nome": "Monitor", "preco": 499.90 }',
    '{"nome": "Mouse", "preco": 49.99 }'
  ]
  
  const paraObjeto = json => JSON.parse(json)
  const apenasPreco = produto => produto.preco
  
  const resultado = carrinho.map(paraObjeto).map(apenasPreco)
  console.log(resultado) //[ 1999, 589.9, 499.9, 49.99 ] 

Método filter()

O método filter() é uma função callback que filtra os dados de um array por um determinado valor de forma a obter um subarray:

   const produtos = [
    {nome: "Computador", preco: 1.999, fragil: true },
    {nome: "Impressora", preco: 589.90, fragil: true },
    {nome: "Monitor", preco: 499.90, fragil: true },
    {nome: "Mouse", preco: 49.99, fragil: false }
  ]
  
  //recebe o ítem, índice e array atual percorrido (p) e, no final, retorna true ou false: 
  console.log(produtos.filter(function(p) {
     return false
  }))
  
  const caro = produto => produto.preco >= 500
  const fragil = produto => produto.fragil
  
  //método filter encadeado
  console.log(produtos.filter(caro).filter(fragil)) //[ { nome: 'Impressora', preco: 589.9, fragil: true } ]

Método reduce()

O método reduce() executa uma função reducer (provida por você) para cada membro do array, resultando num único valor de retorno:

 const clientes = [
    { nome: 'José', compra: 2.500, ativo: true },
    { nome: 'Aline', compra: 20.750, ativo: true },
    { nome: 'Arnaldo', compra: 1.200, ativo: false },
    { nome: 'Marilice', compra: 7.700, ativo: true }
  ]
  
  //Map extrai de clientes apenas o valor da compra. Reduce soma todos os valores e os acumula:
  const resultado = clientes.map(a => a.compra).reduce(function(acumulador, atual) {
     console.log(acumulador, atual)
     return acumulador + atual
  })
  
  //Resultado:
  2.5 20.75 //2.5 + 20.75 = 23.25
  23.25 1.2 //23,25 + 1.2 = 24.45
  24.45 7.7//24,45 + 7.7 = ...

Método concat()

O Método concat() combina o texto de duas ou mais strings e retorna uma nova string:

 const coresPrimarias = ['Azul', 'Vermelho', 'Amarelo']
 const coresSecundarias = ['Verde', 'Rosa', 'Bege']
 const todasCores = coresPrimarias.concat(coresSecundarias)
 
 console.log(todasCores, coresPrimarias, coresSecundarias)
 
 //Resultado:
 [ 'Azul', 'Vermelho', 'Amarelo', 'Verde', 'Rosa', 'Bege' ] [ 'Azul', 'Vermelho', 'Amarelo' ] [ 'Verde', 'Rosa', 'Bege' ]

Filas FIFO

Você pode usar arrays para registrar uma fila de itens, onde cada um é adicionado FIFO (first-in, first-out, ou “o primeiro a entrar é o primeiro a sair”).

Quatro métodos úteis de Array podem realizar a manutenção de filas, listas e outras estruturas do gênero: push, pop, shift e unshift. Exemplo:

 let fifoArray = new Array(); 
 fifoArray.push("Maça"); //adiciona o elemento no final do array
 fifoArray.shift(); //remove o primeiro elemento do array
 fifoArray.unshift("Couve"); //adiciona o elemento no início do array
 fifoArray.pop(); //remove o último elemento do array

Declarações em Java Script

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits