# ARRAY

Jhonatan Marques — Mon, 23 Jan 2023 17:33:58 +0000

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 INDICE

POR 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.

HTML - como deixar seu website Acessível

Jhonatan Marques — Mon, 29 Aug 2022 00:44:00 +0000

O desenvolvedor web tem uma grande relevância quando o assunto é acessibilidade, pois ele tem o poder de democratizar as informações e pode usar uma simples ferramenta que pode mudar por completo a interação do usuário em um website.

Por isso quero falar do texto alternativo que é utilizado para descrever o conteúdo de uma imagem. Ele é inserido através do atributo 'alt' na tag .

Além de auxiliar o usuário em situações, como um erro no carregamento da imagem devido a uma conexão ruim ou até um erro na url da imagem, é também de suma importância para as pessoas com deficiência visual.
Visto que é pela descrição da imagem que as pessoas cegas conseguem identificar do que se trata o “gráfico” (nome dado pelos leitores de tela para sinalizar que naquele local existe uma imagem, mesmo quando não existe o alt na tag img).

É isso mesmo! Quando não colocamos um 'alt' em nossa tag, as pessoas com deficiência visual sabem que existe uma imagem no conteúdo do seu site, porém, não sabem do que se refere, o que traz uma experiência muito ruim para o usuário.

Dicas de como fazer um atributo 'alt' de qualidade.

Procure ser deixar tudo claro e objetivo.

Por exemplo, um site de notícias, neste site existe um artigo que conta sobre uma ONG que ajudou uma comunidade carente com agasalhos e alimentos.

Dentro deste conteúdo temos uma imagem que mostra as pessoas da ONG X entregando as doações para a comunidade, neste caso, criamos um 'alt' com a seguinte descrição: “Responsáveis da ONG X entregam doações à comunidade carente”.

O texto deve ser simples e direto a respeito do que se trata a figura, porém, quando a imagem tem mais um objetivo, como trabalhar a palavra-chave: “São Paulo” e “Amigos do bem”, neste exemplo, a palavra “São Paulo” teria o intuito de que o Google indexasse a notícia para esta região e já a palavra “Amigos do Bem”, seria mais um nome popular da ONG, como as pessoas da região conhecem. Como faríamos neste caso? A descrição poderia ser: “Amigos do bem (ONG X) entregam doações à comunidade carente em São Paulo”.

Exemplos de um HTML de imagem:

Exemplo 1 (Certo!): Com alt declarado e preenchido de vazio
_

<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ /->
_

Exemplo 2 (Certo!): Com alt declarado e preenchido
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” /->

Exemplo 3 (ERRADO): Com alt declarado, mas nulo
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” /->

Exemplo 4 (ERRADO): Sem alt declarado
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” /->

Ao criar o atributo 'alt' para suas imagens, sempre lembre que o objetivo é descrever a imagem para aqueles que podem não são capazes de vê-la. Deve-se levar em consideração que o SEO e as palavras-chave são definitivamente importantes.

DEV Community: Jhonatan Marques