lista de javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | |

Nós vamos criar uma lista de frutas nós mesmos. Chamaremos nossa lista de "frutas" e adicionaremos os seguintes valores: banana, melão, uva. Ah, como eu amo frutas! Embora isso possa parecer um tutorial de lista de compras , na verdade acabamos de criar uma tabela.

Neste guia, veremos o que são arrays, como eles funcionam e por que você deve usá-los em seu código. Vamos discutir alguns exemplos de placas em ação para que você possa se tornar um ninja de placa JavaScript!

O que é um array?

Um array é um objeto que armazena dados. Os arrays contêm uma coleção ordenada de elementos e podem armazenar zero ou mais elementos. Os arrays são úteis na programação porque permitem você armazene valores semelhantes ‚Äã‚Äãem uma variável.

Você não precisa escrever dez variáveis simples para listar suas frutas favoritas, por exemplo. Com um array, você pode adicionar todas as suas frutas favoritas em uma variável.

Considere o seguinte exemplo:.

Aqui criamos um array chamado "fruits". Ele armazena três valores diferentes, cada um dos quais reflete uma fruta que queremos comprar em uma mercearia. Para declarar nosso array, colocamos nossa lista de elementos entre colchetes.

Declarando um array

Existem duas maneiras de declarar um array. A maneira como você verá a maioria das pessoas fazendo isso é circulando uma lista de itens entre colchetes, como fizemos anteriormente:

Neste exemplo, declaramos um array com três valores. Também podemos usar o construtor de array, que usa a palavra-chave new para declarar um array:

Esses trechos de código criam a mesma matriz, mas usando métodos diferentes. Observe que em nosso segundo exemplo, usamos suportes circulares para declarar nosso array. Também usamos o construtor new Array para declarar um array. É por esta razão que a maioria das pessoas prefere o primeiro método; Colchetes são muito mais fáceis de lembrar e digitar mais rápido

as tabelas podem não incluir as mesmas tipo de dados Nossa rede pode armazenar vários tipos de dados diferentes.

Este array armazena três tipos de dados diferentes: uma string, um número e um booleano Agora que você já sabe como declarar um array, você está pronto para acessar seu conteúdo.

Ler um array

Os arrays não seriam muito úteis se não pudéssemos lê-los. valores. É por isso que existe indexação. o índice é uma maneira de acessar elementos individuais em objeto iterável como uma lista.

Cada elemento de uma matriz em uma matriz recebe seu índice numb er. Esses números começam com 0 e podem ser usados para alternar a corrente para elementos individuais em uma matriz. Lembra da nossa tabela "fruta t"?

Aqui estão os valores de índice ‚Äã‚Äãatribuídos a esta matriz:

usando esses números podemos acessar os diferentes itens da nossa lista. Digamos que você queira identificar que a fruta está na posição de índice 1 em sua matriz. Você pode fazer isso indicando o valor do índice entre colchetes após o nome da tabela:

Nosso código retorna. uvas Referimo-nos à posição 1 do índice, que armazena o valor "Passa". Se você passasse o valor 0, "Banana" seria retornado. Se você tentar acessar um elemento que não existe, "undefined" será retornado:

Saída: indefinida. Onde a indexação é particularmente útil é quando você deseja percorrer elementos em uma matriz. Digamos que você queira imprimir cada fruta em seu estêncil no console. Você pode fazer isso usando um loop como este:

Este código retorna:

Nosso código passa por cada item em nossa lista e imprime cada item no console. Você também notará que usamos o comprimento . Esta função retorna o tamanho da nossa lista

Adicionar elementos a um array

mais pa , Às vezes você quer adicionar um novo valor a um array depois de declarar inicialmente seu array.Você pode fazer isso usando push() array.

Esquecemos de adicionar "Morango" à nossa lista de frutas. Ah, não! Não se preocupe, sempre podemos adicionar usando o push() :

Agora que executamos este código, nosso array se parece com isso:

< table class = "wp-block table cours-info table"> Banana uvas Melão Morango 1 2 3

Você pode adicionar dados ao início de sua tabela usando o código < > unshift() . Morangos são tão importantes em nossa lista de compras que queremos que eles apareçam primeiro:

Isso faria com que nossa lista de "frutas" ficasse assim:

< td > morango
Banana uvas Melão
1 2 3

removendo elementos de um array

Acontece que já temos um melão em casa, então não precisamos para comprar um. Qual é o ponto de comprar um melão, certo? Como o melão está no final da nossa lista, temos duas opções para removê-lo:

usando Let splice() como exemplo:.

Nosso código retorna:

splice () aceita dois parâmetros. O primeiro é o número de índice a ser removido da matriz e o segundo é o número de itens a serem removidos. Nesse caso, queríamos excluir o elemento com o valor de índice 3, então especificamos "3, 1" como nossos parâmetros.

pop() não aceita nenhum parâmetro . Remova apenas o último item de uma lista:

Nosso código retorna:

Você também pode usar shift() para remover um elemento do início de uma lista:

Nosso código retorna:

push() e unshift() adicionam itens à lista. Itens pop () e shift () Remover da lista. O método de montagem também pode ser usado para remover um item de uma lista com base em seu valor de índice

Modificação elementos de uma série

Mesmo que as bananas sejam uma fruta saborosa, elas geralmente são tão grandes que você não pode comer uma como lanche quando está um pouco nervoso. Eu me atrevo a ficar com fome. Bananas bebês são mais fáceis para comer.

Agora, digamos que queremos mudar nossa lista de "frutas" para comprar bananas pequenas em vez de bananas comuns. Podemos fazer isso usando o operador de atribuição como todas as variáveis:

Nosso code retorna:

Modificamos a entrada na posição do índice 0 para armazenar o valor "baby bananas". Não há necessidade de usar métodos especiais para fazer essa alteração; o operador de atribuição é usado para modificar val usa ‚Äã‚Äãem um array.

Conclusão

Esta é a base do que você precisa saber sobre arrays JavaScript. Há mais para aprender, mas é isso que torna a programação divertida: sempre há um novo desafio a ser enfrentado. Se nada mais, você aprendeu sobre minhas frutas favoritas. Embora eu diga que gosto de groselha, não a mencionei neste tutorial.

Agora você está pronto para começar a trabalhar com arrays JavaScript como um especialista!