Publicado em por MundoJS

JavaScript Básico 6: Lista (Array)


Código do Vídeo:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script>
        //Lista ou Array(Vetor)

        let listaVazia = [];

        let listaNumero = [1, 2, 3, 4, 55, 66, 777];

        let listaPalavras = ["ola", "mundo", "mundojs", "batata"];

        let listaMista = [1, "ola", true, [111,222,333], 1.345];
        
        // console.log(listaVazia);
        // console.log(listaNumero);
        // console.log(listaPalavras);
        // console.log(listaMista);

        //primeiro item é 0
        console.log(listaNumero[0]);
        //maior que maximo casua erro
        console.log(listaPalavras[10]);
        //lista dentro de lista
        console.log(listaMista[3][0]);

        //adiciona no ultimo local
        listaNumero[7] = 88;
        listaNumero.push(99);
        console.log(listaNumero);
    </script>
</body>

</html>

O que é uma Lista no JavaScript?

Uma lista, também chamada de Array, é um tipo de dado que nos permite armazenar e ler diversos valores em sequência. Esse é uma estrutura muito útil quando estamos lidando com diversos dados e não sabemos quantos serão ou não seria prático ter uma variável para cada um deles.

Como declarar uma lista?

Para criar uma lista é simples, basta declarar uma variável e ao associar o valor da lista, faça-o com os dados dentro de colchetes [ ], separando cada um por virgula. Caso queira criar uma lista vazia, basta abrir e fechar os colchetes.

let listaVazia = [];
let listaNumero = [1, 2, 3, 4, 55, 66, 777];

Como ler a lista?

Para ler a lista inteira, basta inserir a variável dentro do console.log(). Caso você queira exibir dados específicos, utilize a posição(índice) do item dentro da lista, não esquecendo que o primeiro item fica na posição 0.

//posição na lista
//                 0    1    2    3    4
let listaNumero = [123, 111, 333, 555, 88888];

//Lê a lista inteira
//aqui aparecerá [123, 111, 333, 555, 88888]
console.log(listaNumero);

//Lê o primeiro item
//aqui aparecerá '123'
console.log(listaNumero[0]);

//Lê o segundo item
//aqui aparecerá '111'
console.log(listaNumero[1]);

//Criamos uma variavel com o valor do item na posição 2 (terceiro item)
let numero = listaNumero[2];
//exibirá 333
console.log(numero)
//exibirá 888
console.log(numero + listaNumero[3]);

Como adicionar ou alterar valores da lista?

Quando você está trabalhando com listas, pode fazer dois tipos de atribuição de valores, sendo o primeiro que alterará a variável, e por sua vez sobrescrevera a lista

let lista = ["be", "bebe", "bebece"];

//exibirá ["be", "bebe", "bebece"]
console.log(lista);

lista = 4;

//exibirá 4
console.log(lista);

O segundo permite que você altere ou adicione valores dentro da lista. Para isso, basta informar a posição (índice) do item para alterá-lo.

let listaNumero = [1, 2, 3, 4, 55, 66, 777];

listaNumero[0] = 88;
listaNumero[1] = 88;

//exibirá [88, 88, 3, 4, 55, 66, 777];
console.log(listaNumero);

Importante: para evitar erros e alterações incorretas, quando você quiser adicionar um item a mais no final da lista, experimente o método push() conforme o exemplo abaixo. Desta forma você não precisará saber qual é o índice do item anterior.

let lista = [123,4,3,42,55,6,457,768,789,4,65,376,56,2,676,8];

//não preciso saber o tamanho da lista
lista.push(2);
lista.push(22);
lista.push(222);
lista.push(2222);
lista.push(22222);

//exibirá [123,4,3,42,55,6,457,768,789,4,65,376,56,2,676,8,2,22,222,2222,22222];
console.log(lista)

Exercícios:

  1. Conhecimento de indices
    1. Crie 2 llstas (listaA e listaB) que serão identicas e terão os valores 1, 2, 3, e 4.
    2. Em seguida, crie 4 console.log(), um para cada posição (indice), com a soma dos valores das listas.
    3. Você deverá obter o resultado: 2, 4, 6, 8 (um por linha).
  2. Alterando dados
    1. Crie uma lista mista com os valores = [1,4,”cinco”,8,9,”dez”,10,11,”doze”,13].
    2. Faça um console.log dos valores que são strings.
    3. Altere as strings pelo seus valor numerico correspondente e faça novamente o console.log().
  3. inserindo dados
    1. Crie uma lista chamada invertido com os valores = [5,4,3,2,1].
    2. Crie uma lista chamada ordenado que esteja vazia.
    3. Utilize o metodo push() para inserir os dados da lista invertido de forma a lista ordenada ficar com os valores [1,2,3,4,5]

Deixe um comentário