# ARRAY
Jhonatan Marques
Posted on January 23, 2023
ARRAYS
Boas práticas | um array armazena valores que são do mesmo tipo, sequencialmente. Embora o JS permita criar arrays com tipos diferentes é altamente recomendável seguir as boas práticas de utilizar o mesmo tipo para se criar um array.
Um array é um conjunto ordenado de valores.
Cada valor é chamado de elemento e cada elemento tem uma posição numérica no array, conhecida como índice.
Os arrays em JavaScript são: não tipados : um elemento do array pode ser de qualquer tipo e diferentes elementos do mesmo array e podem ser de tipos diferentes.
Os elementos podem ser até objetos ou outros arrays, o que permite a criação de estruturas de dados complexas, como arrays de objetos e arrays de arrays.
Os arrays em JavaScript são baseados em zero e usam índices de 32 bits: o índice do primeiro elemento é 0 e o índice mais alto possível é 4294967294 (232−2), para um tamanho de array máximo de 4.294.967.295 elementos.
Os arrays em JavaScript são dinâmicos: eles crescem ou diminuem conforme o necessário e não há necessidade de declarar um tamanho fixo para o array ao criá-lo ou realocá-lo quando o tamanho muda.
Os arrays em JavaScript podem ser esparsos: os elementos não precisam ter índices contíguos e pode haver lacunas.
Todo array em JavaScript tem uma propriedade length. Para arrays não esparsos, essa propriedade especifica o número de elementos no array. Para arrays esparsos, length é maior do que o índice de todos os elementos.
Criando arrays
A maneira mais fácil de criar um array é com um array literal, que é simplesmente uma lista de elementos de array separados com vírgulas dentro de colchetes.
`Por exemplo:
var empty = []; // Um array sem elementos
var primes = [2, 3, 5, 7, 11]; // Um array com 5 elementos numéricos | boa prática
var misc = [ 1.1, true, "a", ]; // 3 elementos de vários tipos + vírgula à direita|má pratica`
Os valores de um array literal não precisam ser constantes. Podem ser expressões arbitrárias:
var base = 1024;
var table = [base, base+1, base+2, base+3];
Os array literais podem conter objetos literais ou outros array literais:
var b = [[1,{x:1, y:2}], [2, {x:3, y:4}]];
INSERINDO UM ELEMENTO NO FINAL DO ARRAY
Se quisermos acrescentar um novo elemento nesse array (por exemplo o numero 10), tudo que precisamos fazer é referenciar a última posição livre do array e atribuir-lhe um valor.
Em JavaScript, array é um objeto mutável. Podemos facilmente lhe acrescentar novos elementos. O objeto crescerá dinamicamente á medida que novos elementos forem adicionados.
// inserindo elemento no final do array
let numbers = [0,1,2,3,4,5,6,7,8,9]
numbers [numbers.length] = 10
console.log (numbers) // saida : [0,1,2,3,4,5,6,7,8,9,10]
INSERINDO UM ELEMENTO NA ÚLTIMA POSIÇÃO [push]
A API de JavaScript também tem um método chamado push
que nos permite acrescentar novos elementos no final de um array. Podemos acrescentar quantos elementos quisermos como argumentos no método ***push***
//***push*** que nos permite acrescentar novos elementos no final de um array
let numbers = [0,1,2,3,4,5,6,7,8,9,10]
numbers.push(11)
numbers.push (35)
console.log (numbers) // saída : [0,1,2,3,4,5,6,7,8,9,10,11,35]
ISERINDO UM ELEMENTO NA PRIMEIRA POSIÇÃO [unshift]
Agora vamos adicionar mais um elemento no array, só que agora na primeira posição [-1], basta utilizar o método ***unshift***
//*unshift *****que nos permite acrescentar novos elementos no começo de um array
let numbers = [0,1,2,3,4,5,6,7,8,9,10,11,35]
numbers.unshift(-1)
numbers.unshift(-2)
console.log(numbers) // saída : [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,35]
REMOVENDO UM ELEMENTO DO FINAL DO ARRAY [pop]
Para remover um elemento do final de array, basta utilizar o método ***pop***
// ***pop*** que nos permite remover o último elemento de um array
let numbers = [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,35]
numbers.pop(); // não precisa inserir nenhum valor
console.log(numbers) // saída : [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11]
// para saber qual elemento foi retirado é simples, basta jogar o 'numbers.pop' dentro de uma
// variavel
let removidos = numbers.pop();
console.log(removed) // saída : [35]
REMOVENDO UM ELEMENTO DO INÍCIO DO ARRAY [shift]
Para remover um elemento do início de array, basta utilizar o método ***shift***
// ***shift*** que nos permite remover o primeiro elemento de um array
let numbers = [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11]
numbers.shift(); // não precisa inserir nenhum valor
console.log(numbers) // saída : [-1,0,1,2,3,4,5,6,7,8,9,10,11]
// para saber qual elemento foi retirado é simples, basta jogar o 'numbers.pop' dentro de uma
// variavel
let removed = numbers.shift();
console.log(removed) // saída : [-2]
ADICIONANDO E REMOVENDO ELEMENTOS DE UMA POSIÇÃO ESPECIFICA [splice]
O método splice
pode ser usado para remover um elemento de um array, simplesmente especificando a posição / índice a partir do qual queremos fazer a remoção e a quantidade de elementos que gostaríamos de remover, assim:
MUITO IMPORTANTE O PRIMEIRO ITEM DO
numbers.splice(2,3)
(2)
REMOVE A PARTIR DESTE INDICEPOR ISSO A REMOÇÃO COMEÇOU DO
[ -1 ]
E A ACABOU COM O NUMERO DE ITEM(3)
ACIMA
// ***splice*** que nos permite remover um elemento em especifico do elemento de um array
let numbers = [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,35]
numbers.splice(2,3); // o primeiro elemento (2) vai acessar o indice do array
// o segundo elemento (3) vai ser a quantidade de itens que vc quer remover
console.log(numbers) // saída : [-2,-1,3,4,5,6,7,8,9,10,11,35]
// para saber qual elemento foi retirado é simples, basta jogar o 'numbers.splice' dentro de uma
// variavel
let removidos = numbers.splice(2,3);
console.log(removed) // saída : [0, 1, 2]
Para inserir novamente os números de volta utilizamos o splice
novamente
MUITO IMPORTANTE PARA INSERIR NOVAMENTE OS ELEMENTOS A PARTIR DO
[0]
A CONTAGEM COMEÇOU A PARTIR DO ELEMENTO(2)
E O NUMEROS VAI SER INSERIDOS DEPOIS DO[-1]
// ***splice*** que nos permite diconar um elemento em especifico no elemento de um array
let numbers = [-2,-1,4,5,6,7,8,9,10,11,35]
numbers.splice(2,0,1,2,3);
// o primeiro elemento (3) vai acessar o indice do array
// o segundo elemento (0) vai ser a quantidade de itens que vc quer remover
// a partir do elemento (0) vai ser os elementos que vc quer inserir (1,2,3)
console.log(numbers) // saída : [-2,-1,0,1,2,3,4,5,6,7,8,9,10,11]
// para saber qual elemento foi retirado é simples, basta jogar o 'numbers.splice' dentro de uma
// variavel
let removidos = numbers.splice(2,3);
console.log(removed) // saída : [0, 1, 2]
ARRAYS BIDIMENSIONAIS ?????? PROCURAR
MÉTODOS ARRAYS
CONCAT - Junta vários arrays e devolve uma cópia dos arrays concatenados.
let a = [1,2,3,4,5];
let b = [7,8,9,10];
const numbers = a.concat(b);
console.log(numbers) // saida : [1,2,3,4,5,7,8,9,10]
EVERY - Itera por todos os elementos do array, verificando uma condição desejada (função) até que ‘false’ seja devolvido ( verifica se passa no teste e da um resultado booleano)
let a = [1,2,3,4,5];
let b = [7,8,9,10];
const resultado = (a) => a > 2; // condição boolean
console.log(resultado(a [2])) // saída : true ( 3 é > 2)
FILTER - Filtra elementos específicos que você quer que esteja em um lista com determinados critérios.
let names = [
'Furia',
'Navi',
'Luminosity',
'Fnatic',
'Liquid',
'North',
'G2',
'NZXT',
]
// o 'name' dentro da função é o nome de uma variavel e você pode colocar
// o nome que vc quiser
const times = names.filter((name) => name.startsWith('N')) // função para saber que times começam
// com a letra 'N'
console.log(filtro) // saída : [ 'Navi', 'North', 'NZXT' ]
FOREACH - O método forEach
do JavaScript é uma de várias maneiras de percorrer arrays.
O método forEach é usado para percorrer arrays, mas usa uma função de modo diferente do "laço for" tradicional.
O método forEach passa uma função de callback para cada elemento do array juntamente aos seguintes parâmetros:
- Valor atual (obrigatório) - O valor do elemento atual do array
- Índice (opcional) - O número do índice do elemento atual
- Array (opcional) - O objeto de array ao qual o elemento atual pertence
Como alternativa, você pode usar uma representação de arrow function do ES6 para simplificar o código:
numbers.forEach(number => console.log(number));
let numbers = [1,2,3,4,5]
// o 'numbers' dentro da função é o nome de uma variavel e você pode colocar
// o nome que vc quiser
const numerosExemplo = numbers.forEach (numbers => console.log(numbers)) // saída : 1,2,3,4,5
JOIN - Junta todos o elementos do array em uma string
let juntandoNome = ['Jhonatan', 'Marques', 'dos', 'Santos']
const retornoNome = juntandoNome.join('-') // paramentro que eu quero entre os nomes
console.log(retornoNome) // saída : Jhonatan-Marques-dos-Santos
INDEXOF - Pesquisa o array em busca de elementos específicos e devolve a sua posição. (case-sensitive)
Quando aparecer -1 no console é porque o texto não existe nos parâmetros buscados
let juntandoNome = ['Jhonatan', 'Marques', 'dos', 'Santos']
console.log(juntandoNome.indexOf('Marques')) // saída : '1' : pois esse é o numero
// do índice que esta a palavra 'Marques'
LASTINDEXOF - Devolve o índice da ultima posição que corresponda ao critério de pesquisa.
(case-sensitive)
let juntandoNome = ['Jhonatan', 'Marques', 'dos', 'Santos']
const teste = juntandoNome.lastIndexOf('Santos')
console.log(teste) // saída : 3 : pois esse é o numero do índice que esta a palavra 'Santos'
MAP - (importante para o react) - Criar outro array a partir de uma função que contém o critério/condição e devolve os elementos do array que corresponde o critério/condição.
let numbers = [1,2,3,4,5]
// 'number' nome qualquer para a variavel
let multiplica = numbers.map ((number)=> number * 2)
// nessa função irá ser multiplicado os numeros dentro do array '[1,2,3,4,5]'
// e retornar um nome array com o resultado [ 2, 4, 6, 8, 10 ]
console.log(multiplica) // saída : [ 2, 4, 6, 8, 10 ]
SORT - Classifica os elementos em ordem alfabética crescente
Serve somente para strings
let times = [
'Luminosity',
'Sk',
'Navi',
'Liquid',
'Outsiders',
'Vitality',
'Astralis'
]
const ordemAlfabética = times.sort()
console.log(ordemAlfabética)
/* saída :
[
'Astralis',
'Liquid',
'Luminosity',
'Navi',
'Outsiders',
'Sk',
'Vitality'
]
REVERSE - Reverte os elementos, os últimos elementos serão os primeiros
let times = [
'Luminosity',
'Sk',
'Navi',
'Liquid',
'Outsiders',
'Vitality',
'Astralis'
]
const ordemAlfabética = times.reverse()
console.log(ordemAlfabética)
/* saída :
[ 'Astralis',
'Vitality',
'Outsiders',
'Liquid',
'Navi',
'Sk',
'Luminosity' ]
SLICE - Corta o array com o numero de índice especificado
let times = [
'Luminosity',
'Sk',
'Navi',
'Liquid',
'Outsiders',
'Vitality',
'Astralis'
]
// indice especificado (2,-1)
// inicial(2) quando positivo lido da esquerda p/ direita
//final(-1) quando negativo lido da direita p/ esquerda
const ordemAlfabética = times.slice(2,-1)
console.log(ordemAlfabética)
// saída : [ 'Navi', 'Liquid', 'Outsiders' ]
SOME - Itera por todos os elementos do array, verificando a condição desejada (função) até que true
seja devolvido.
SORT - Organiza o array em ordem alfabética ou de acordo com a função especificada.
let times = [
'Luminosity',
'Sk',
'Navi',
'Liquid',
'Outsiders',
'Vitality',
'Astralis'
]
times.sort();
console.log(times)
// saída :
[ 'Astralis',
'Liquid',
'Luminosity',
'Navi',
'Outsiders',
'Sk',
'Vitality'
]
TO STRING - Devolve o array em forma de uma string.
let times = [ 1, 2, 3, 4, 5 ]
times.toString();
console.log(times) // saída : o array tipo number sai como string [ 1, 2, 3, 4, 5 ]
Esses são apenas alguns tipos e possibilidades de se trabalhar com os arrays.
Posted on January 23, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.