Antes de começar as aulas que é muito importante responde para você mesmo: você já treinou bastante uso das estruturas de repetição whille, do. . wille e for?
Já fez todos os exercícios que acabaram de passar na aula 14? E por falar em exercícios que acabaram de passar, você já aprendeu a manipular objetos em HTML utilizando JavaScript? Principalmente os objetos de formulário porque você vai precisar bastante quando você tiver trabalhando na construção de um site que exija JavaScript para a validação de dados por exemplo, outra coisa seria interessante você dar uma reduzida, uma simplificada, uma otimizada nos seus códigos?
Agora que a gente já viu um pouquinho do básico, fazer mais escrevendo menos e uma pergunta muito importante: você é daquele tipo de pessoas que pensam assim "ah não usar array é muito difícil trabalhar com vetores é complicadíssimo nas linguagens de programação"? Ou você passou no seu colégio e faculdade por aquele tipo de gente que olha pra você no fundo dos olhos e diz: "ah você está aprendendo a programar não é? Espera só chegar até array, espera aprender a utilizar vetores e você vai ver o que é difícil", pois eu estou te avisando não tem nada de difícil e se você quer aprender de uma vez por todas a utilizar vetores exemplificando aqui com o JavaScript é só você assistir esse vídeo até o final.
Legendas:Tainá Bandeira Olá pequeno Gafanhoto, seja bem vindo a mais uma aula do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google, o meu nome é Gustavo Guanabara, eu sou professor e agora durante a aula 15 nós vamos começar a trabalhar com variáveis compostas na linguagem JavaScript e se nesse momento você está pensando assim: " o que é uma variável composta? " Pois é só você analisar o nome é muito simples de entender, eu não entendo sinceramente aquilo que eu falei no início do vídeo, a galera falando que utilizar variáveis compostas, utilizar arrays é uma coisa complicada não é, mas pra eu te provar que utilizar variáveis compostas é uma coisa muito simples, vamos entender a diferença entre variáveis simples variáveis compostas. Como a gente já viu durante as aulas anteriores, toda aula a gente usou variáveis, variáveis simples só consegue armazenar um valor por vez, então quando você cria uma variável com var ou com let, você criou uma variável N e essa variável N recebe 5 por exemplo, sua variável está valendo 5, se por acaso você tentar atribuir 8 a ela, ela vai perder o 5 isso porque é uma variável simples e variáveis simples só aguarda um valor por vez e você não precisa nem pensar muito para chegar a conclusão do que uma variável composta, uma variável composta deve ser capaz de armazenar vários valores em uma mesma estrutura, isso é você colocou 5 ela guarda, você colocou 8 ela guarda também, vai colocar um 12 ela guarda também, isso é ela não vai perder os valores anteriores para poder guardar os próximos valores esse é um conceito fundamental de variáveis compostas.
Mas pra te explicar direitinho daquele jeito que a gente sempre faz, vamos para a tela cheia e para dar uma relembrada num conceito, num exemplo prático que eu te dei lá anteriormente na aula de variáveis. ♫ Você deve se lembrar muito bem do exemplo que a gente viu anteriormente naquele lance do terreno para fazer um estacionamento, a gente tinha um terreno exatamente como está aqui e a gente colocava várias vagas de automóveis, a gente delimita para poder caber dentro de uma vaga apenas um automóvel, nós fizemos isso durante as aulas de variáveis e para facilitar para eu saber onde que eu guardei o carro, eu coloco um identificador, um nome para cada uma dessas vagas, eu coloquei aqui do lado do a0 até o a5, só que isso consumia muito código na hora que a gente programava, quando a gente precisa de muitas variáveis em um programa, ela consome muito código a gente tem que escrever muito então por exemplo para declarar essas vagas que estão aqui do lado representadas, eu tenho que colocar vaga várias vezes que seria o nosso var ou let e eu tenho que colocar o nome de cada um dos indicadores de a0 até a5, agora você imagina que sejam 200 vagas, imagina o tamanho do código que iria aparecer aqui do meu lado, a partir do momento em que eu declarei essas variáveis, que declarei essas vagas de estacionamento, eu consigo colocar automóveis ali dentro sem problema nenhum e a gente viu durante as aulas de variável, se você não viu aperta aqui em cima da minha cabeça, vai para o curso completo e acessa aula de variáveis, não esquece disso! A gente naquele momento utilizou o código maior e eu nem me lembro se durante a aula eu prometi reduzir esse código mas a gente vai reduzir a partir de agora, naquela aula também eu coloquei um carro na vaga a2, se por acaso eu quiser colocar outro carro na vaga a2 eu sou obrigado a tirar esse daqui, isso porque elas são variáveis simples e se eu quiser colocar em outra vaga que esteja livre por exemplo a1, tem uma vaga ali eu posso colocar sem problema porque a vaga está livre mas qualquer vaga se eu quiser colocar outro carro eu tenho que tirar um carro que por ventura esteja lá.
Acho que você entendeu isso lá durante a aula de variáveis, o que eu vou fazer agora é propor uma outra forma em que você vai escrever menos e vai ser muito mais fácil para você gerenciar os automóveis que estão nessas vagas. Eu não vou dar mais um identificador pra cada uma das vagas que estão aparecendo aqui do lado, eu vou chamar elas todas pelo mesmo nome, então eu vou traçar uma linha aqui, dá uma olhada nessa linha azul que eu tracei, todas essas vagas vão se chamar a, que são vagas para automóveis, por isso que eu coloquei o a. Nunca se esqueça pequeno Gafanhoto coloque nomes claros para suas variáveis, não adianta ficar sendo programador alfabeto abcdef para todas as variáveis e nem o o programador contador n1,n2,n3,n4, aqui eu utilizei a porque é uma vaga de automóveis poderia ser "auto" por exemplo também, você escolhe o nome contanto que ele seja claro pra você.
Sendo assim eu estou com as vagas a e você vai falar: "mas não tem a identificação de cada vaga", tem sim porque essa variável grandona é a minha variável a e eu vou colocar um identificador de índice, uma chave que vai identificar cada uma delas e para declarar essas vagas eu só vou usar uma linha, "vaga a" e para cada vaga eu coloco uma chave, um índice, exatamente o que acabou de acontecer aqui na animação e aí você pode estar pensando: "ah mas deu no mesmo", não é exatamente no mesmo, eu simplesmente escrevi muito menos, agora eu continuo tendo do a0 até o a5, só que eu vou escrever de uma forma um pouco diferente, utilizando colchetes, já você vai ver, o que eu quero é que você entenda que antes eu utilizei um monte de linha para declarar, agora eu só utilizei uma e para que eu faça essa variável funcionar como uma variável composta que é exatamente isso que acabei de explicar, essa é uma variável única chamada "a" que guarda vários valores identificados por uma chave que é a identificação de cada vaga, pra eu declarar isso em JavaScript, é muito simples! É só eu colocar isso aqui: vaga a = [ ] e é claro que não é só colocar assim, porque se você olhar aqui eu tenho carros nas vagas como é que eu declaro uma variável desse tipo e já coloca os carros na vaga, simples dá uma olhada aqui, eu vou colocar: vaga a = [ , ] e vou colocar 3 áreas ali, se você identificar dentro dos colchetes eu tenho 3 espaços para colocar carros, é só eu colocar os carros ali, automaticamente quando eu faço isso ele já vai arrumando os carros nas vagas. Basicamente o que vai acontecer é eu vou declarar uma variável a, olha lá embaixo como é que tá acontecendo, só que essa variável a é um pouco mais espaçosa, isso porque ela vai ter que ser dividida em 3 partes, no caso pela declaração ali em cima, não precisa ser sempre 3 partes, pode ser quantas partes você precisar, quando eu faço aquela linha que está ali em cima, vaga a abre colchete e coloca os 3 carros, automaticamente os 3 carros vão para essas vagas, vão para esses espaços e cada espaço desse recebe uma identificação, recebe um número que a gente chama de chave ou índice então coloquei ali embaixo de vermelho os números, então eu tenho a0 que está com o primeiro carro, a1 que está com o segundo carro e a2 que está com o terceiro carro, aquele menorzinho.
E uma observação muito importante, geralmente as pessoas que estão começando se enrolam um pouco porque as variáveis compostas na maioria das linguagens de programação começam com índice 0, geralmente a gente pensa assim: a primeira vaga é a vaga 1, só que na programação, já acostume-se com isso, tem várias linguagens de programação que funcionam assim, a primeira vaga não é a vaga 1, é a vaga 0, então uma variável composta de 10 posições não vai de 1 a 10, vai de 0 a 9 acostume-se com isso. E vamos aproveitar que a gente já está aqui com esse desenho na tela e vamos dar nome aos bois, vamos começar a dar nome às coisas, essa variável composta que a gente declarou, essa variável a ela é uma variável do tipo composta ou array ou em português vetor, então sempre que você pensar assim: "ah o vetor tal", vetor é uma variável com vários espaços, exatamente como está representada aqui embaixo, o vetor ele é composto de elementos, um elemento de um vetor, ele é um par que agrupa o espaço da memória, o valor colocado dentro dele e o índice. E por falar em índice, índice é esse número que está aqui embaixo também pode ser chamado de chave ou inglês key e por último aqui no nosso componente está o conteúdo de cada elemento, então analisando esse gráfico que tem na sua tela fica muito simples, um array ou um vetor ou uma variável composta é uma variável que tem vários elementos, cada elemento é composto por seu valor e por uma chave de identificação.
Aproveita que você está com o caderno na mão que eu sei e a nota essa frase é muito importante e se você não pegou a frase é só você voltar um pouquinho no vídeo e anota ela vai ser muito importante mas pra frente pra você. E como é que eu faço isso aqui que aconteceu com carros acontecer em JavaScript? Muito simples o que está vaga vira var ou então vou fazer um pouco mais moderno, let então vou colocar: let num = [, é uma variável composta então ela não vai guardar um número, ela vai guardar vários números, sendo assim essa linha que apareceu vai declarar uma variável num que é um pouquinho mais larguinha, um pouco mais gordinha, dentro dos colchetes que estão aqui em cima eu vou utilizar vírgulas para separar os elementos, nesse caso mais uma vez eu separei 3 espaços mas na prática eu separo mais pra você quando eu separo 3 espaços automaticamente ele vai dividir essa variável em 3 partes e já vai dar os índices exatamente como aconteceu ali, lembrando o primeiro índice não é 1, é 0, vou colocar o primeiro valor ali, vou escrever 5 o que vai acontecer?
O 5 vai primeiro espaço, vou colocar o segundo valor 8 e 8 foi para o espaço 1, vou colocar mais um valor 4 e o 4 vai pro espaço 2, sendo assim acabei de representar que um vetor de 3 elementos, elementos 0, 1 e 2 que tem os valores 5, 8 e 4. Facinho de entender mas você não precisa acreditar em mim não, você vai abrir o seu Visual Studio Code e vamos começar a praticar. Então vamos abrir o VS Code e dentro do VS Code, vamos criar primeiro a nossa pasta da aula 15, vamos vir aqui em cima "New Folder" e eu vou criar a aula 15, dentro de aula 15 eu vou criar um documento, posso vir aqui para criar um documento ou dentro da aula 15, botão direito "New File" vou colocar: ambiente.
js, porque eu vou utilizar aquela nossa extensão que quando aperta f8 ela já executa, se você não sabe é por que você pulou alguma aula, não adianta você vir aqui só para tentar aprender array não, o curso está bem completo, bem passo a passo e você precisa assistir tudo. Então já posso encolher aqui, fechar o "Welcome" e vou ficar aqui com o meu ambiente, vamos começar criando o nosso primeiro vetor vamos colocar o var ou let, vou colocar let e vou chamar de num então acabei de criar uma variável num aqui, certo, vamos tentar mostrar aqui: console. log(num), vamos mostrar o num na tela e pra executar vamos apertar F8 e ele mostrou lá que está vazio, ele mostrou que o num é uma variável vazia.
Eu posso até utilizar as crases para utilizar nossa template string, vamos colocar aqui: console. log('Nosso valor é o $(num)') vamos executar, F8, "Nosso valor é o" e está vazio lá, vamos colocar valores aqui 5, 8, 2, 9 e 3 viu? Já coloquei vários valores não só um, vamos executar, "Nosso vetor é 5, 8, 2, 9 e 3" e já colocou os valores aqui separados por vírgula, se por acaso você só colocar o num sem template string, na hora de executar ele ainda acrescenta os colchetes [5, 8, 2, 9 e 3] sem problema nenhum, acabei de criar meu vetor mas você pode me perguntar: "tá Guanabara e se eu quiser acrescentar um valor, por exemplo, eu não quero perder os valores que estão lá e eu quero acrescentar um valor dá pra fazer isso?
" e eu te respondo dá sim e é muito fácil, vamos voltar pra nossa tela com o gráfico desenhado. Então estamos aqui exatamente onde a gente parou, está o vetor aqui com 5, 8 e 4 e você percebe que os índices são 0, 1 e 2, se eu quiser acrescentar a vaga 3, se eu quiser acrescentar mais um espaço é muito simples, é só fazer assim: num[3] = 6 quando eu coloco num e entre colchetes eu coloco 3, eu estou dizendo assim para o JavaScript: coloque o valor 6 na posição 3, só que a posição 3 se você olhar um gráfico não existe, o JavaScript percebe isso e cria pra você. Então essa linha que apareceu num[3] = 6, eu vou ler num 3 só que você não vai escrever num 3 sem o colchete, não pode esquecer o colchete, quando eu digito essa linha ele vai criar mais um elemento, vai colocar o índice 3 e vai colocar o valor que está ali, o valor 6, vai colocar dentro do elemento.
Essa é uma maneira automatizada do JavaScript mas se você quiser colocar explicitamente olha eu quero que você coloque na última posição, eu não quero saber qual é a posição, não quero ficar preocupado com isso, é só você usar um comando muito fácil que é: num. push(7) que é um método interno que vai acrescentar valores a um array, então estou tentando acrescentar o valor 7 é só olhar aquele comando que está escrito ali, com isso o JavaScript já vai criar mais um elemento já vai automaticamente decidir que o índice, que a chave é 4 e vai colocar lá dentro o valor 7 exatamente como acabou de aparecer na animação e se por acaso você está vendo o vídeo em outra aba e não viu a animação, cara vou até pra outra câmera para falar contigo, não faça isso! Depois você vai falar que array é difícil e na verdade estava com duas abas, três abas, vendo televisão, estava fazendo outras coisas, quando você está aprendendo a programar você não pode ter distrações, se você estava fazendo isso, volta pro início do vídeo e assiste direito, faz esse favor pra você mesmo.
Outra coisa que a gente pode fazer também arrays, que a gente pode utilizar os comandos aqui é saber o comprimento dele como que eu vou saber o comprimento? Simples, num. length cuidado anota em um papel como se escreve a palavra length muita gente se confunde e coloca length confunde bastante principalmente pra gente que o inglês não é a primeira língua e outra confusão muito grande é que do lado de length não tem parênteses para o JavaScript, em outras linguagens têm, pro Javascript não tem, length não é um método, length é um atributo e pra que ele serve?
Simples, é só você olhar o desenho está aqui embaixo, quantas casas, quantos elementos existem no array num, se você respondeu que tem 5 elementos você bem observador e é exatamente esse valor 5 que é o num. length que é o comprimento do meu vetor e pra gente voltar lá para o Visual Studio Code e fazer alguns exemplos eu vou te ensinar mais um comando, um método interno também de todo vetor que é muito útil que é o método sort, então quando eu coloco num. sort, ele vai simplesmente pegar todos esses valores, olha nesse momento como está meu vetor, os elementos são: 5, 8, 4, 6 e 7 nas posições 0, 1, 2, 3 e 4 quando eu uso o num.
sort, olha o que ele vai fazer, ele vai pegar todos os elementos e colocar em ordem crescente sendo assim eu tenho agora 4, 5, 6, 7 e 8 ordenados, vamos voltar lá para o Visual Studio Code e fazer alguns exemplos. Então já estou com os elementos aqui e eu quero mostrar no lugar do vetor quero colocar: ('O vetor tem $ ( ) posições'), eu quero mostrar quantas posições têm um vetor, se eu mostrar consolo. log('O vetor tem ${num.
length} posições'), ele já até ajuda para você não escrever errado, não tem parênteses no final, vou apertar F8, o vetor tem cinco posições, realmente ele tem cinco posições, se você quiser você pode mostrar isoladamente posso fazer por exemplo que ele me mostre o num na posição 0, se ele me mostrar o num na posição 0, quem é o num na posição 0? O num na posição 0 é o 5, executei, ele mostrou o 5 que é a primeira posição mas posso colocar assim: console. log('O primeiro valor do vetor é ${num[1]}') tem gente que confunde num [1] a primeira posição, o primeiro valor é num [1], quando eu executar "O primeiro valor do vetor é 8", 8 não é o primeiro valor, não é o primeiro elemento.
O primeiro elemento é 5 porque eu botei num [1] e como a gente começa no 0, agora consertando ele mostra "O primeiro valor do vetor é 5", se por acaso a gente antes de mostrar na tela vou colocar aqui para mostrar também o console. log(num), fazendo tudo mostrou o vetor, "O vetor tem 5 posições", "O primeiro valor do vetor é 5", sem problema nenhum, se você quiser você pode vir aqui em cima e colocar por exemplo: num. sort ( ) e aqui tem parênteses, se você não colocar vai dar problema, num.
sort é um método interno de todo elemento que é um vetor e ele vai colocar em ordem, então eu tenho: 5, 8, 2, 9 e 3 e quando eu executar vai ficar 2, 3, 5, 8 e 9 que foi o meu vetor colocado em ordem, vamos adicionar um elemento de valor 1: num. push(1), isso é, ele vai pegar vai colocar um no final aqui então ficaria 5, 8, 2, 9, 3 e 1 e logo em seguida ele coloca em ordem, colocando em ordem o 1 já vai pra cá pra frente, se por acaso você mudar essa linha aqui, tirar ela daqui e colocar aqui embaixo você vai ver que ele vai colocar o vetor em ordem e depois vai adicionar 1 no final. Sendo assim olha lá "O primeiro valor do vetor é 2" e 1 ficou realmente no final e você vai falar: "porque não ficou em ordem?
", porque você colocou em ordem, ele ordenou tudo e logo em seguida você adicionou o valor 1 no final do vetor, então tem que tomar cuidado com isso, a ordem daqui vai influenciar muito, faz uns testes na sua casa e você vai ver sobre o que estou falando. Outra coisa que é muito comum da gente fazer com o vetor é mostrar ele na tela sem a formatação padrão porque geralmente ele mostra que aquela formatação padrão com colchetes é bem bagunçado, se você quiser mostrar do seu jeito, da maneira que você preferir, tem um jeito sim, tem que ter, toda linguagem tem e eu vou te mostrar como fazer isso, vamos voltar lá pra aquela tela, para o nosso quadro de explicação. Estamos aqui de volta e aqui na tela está o vetor que a gente criou anteriormente, ele tem 5 elementos de 0 a 4 e ele está lá com 4, 5, 6, 7 e 8 já está ordenado porque a gente deu sort nele, para eu escrever esse vetor como a gente acabou de ver, a gente pode fazer isso por exemplo eu coloco: console.
log(num [0]), quando eu colocar num[0], ele vai mostrar o valor 4 que é o primeiro elemento, se eu quiser mostrar o segundo é só colocar lá: console. log(num[1]) e eu posso fazer a mesma coisa pra todos os elementos, eu dou um console. log para cada um deles e dentro de cada um dos parentes eu coloco num[2], num[3], num[4] e assim sucessivamente.
Dá só uma olhada no tamanho do código que eu gerei só pra mostrar um vetor de 5 posições, imagina agora se ele tivesse por exemplo 200 posições, seria um grande trabalho de código e não é assim que a gente trabalha, mas a solução para isso é muito simples e a resposta está nas aulas anteriores, por isso que eu perguntei no início você praticou o suficiente o uso wille, do. . wille e do for, principalmente o do for?
Pois esse conhecimento vai ser extremamente útil para você agora porque dá uma analisada nessas linhas que estão aqui console. log(num[0]) e etc, dá uma olhada o que tem de diferente dentro de cada uma dessas linhas? A única diferença entre elas é isso aqui que eu acabei de marcar, são os índices, então tenho 0 na primeira, 1 na segunda, 2 na terceira e assim sucessivamente.
Pois esses números que estão marcados aqui são exatamente as minhas chaves, elas indicam a posição dentro de cada vetor, agora você imagina que eu possa utilizar, criar uma variável chamada "pos" e essa variável pos começar valendo 0 e for valendo até 4 que é exatamente o limite do meu vetor, se eu fizer uma repetição para isso eu escrevo essas linhas de console. log apenas uma vez e coloco dentro de uma estrutura de repetição e se por acaso você tem problemas em estruturas repetição, clica aqui em cima, vai para as aulas 12, 13 e 14, principalmente na 14 mas a 12 e a 13 são importantes também para você e ter a construção do seu aprendizado, vai aqui em cima e estuda direito, pratica direito as estruturas de repetição, porque a grande dificuldade dos vetores não é o vetor, é a estrutura de repetição. Sendo assim, eu vou substituir esse código todo que está aqui em cima, esse monte de linha console.
log por apenas duas linhas, eu vou criar uma estrutura chamada for (que a gente já viu nas aulas anteriores), vou fazer um for aqui, você viu durante a aula que está bem do lado da minha cabeça, que o for tem 3 elementos, o primeiro elemento é a inicialização, o segundo teste lógico e o terceiro incremento. Vou colocar aqui dentro do for o console. log e vou escrever alguma coisa ali dentro e vamos começar a preencher aqui o nosso for: em primeiro lugar a inicialização, como eu disse há alguns segundos atrás, eu vou criar uma variável chamada pos, então eu vou colocar lá: for(let pos = 0; que ela vai se inicializar, variável pos vai se inicializar com 0, o meu teste lógico é fazer o pos chegar até 4, só que chegar até 4 pra um vetor de 4 posições e se o vento tiver 200?
E se o vetor tiver 50? Tem como eu saber quantas as posições têm? Tem, eu acabei de ensinar!
É só fazer isso aqui: pos<num. length; isso é enquanto ele não chega no final do meu vetor, que é o comprimento dele, eu vou fazer: pos++ pra ele adicionar um cada vez que ele fizer um looping. Eu não vou ficar explicando o looping de novo porque eu já expliquei isso na aula 14, então acabamos de montar for aqui do lado, sendo assim eu tenho uma variável pos que vai começar com 0 e vai até o tamanho do vetor.
Então eu vou ter 0, 1, 2, 3, 4 e 5 até chegar no final do vetor, para escrever na tela é só substituir aquele pedaço do console. log por num[pos], em vez de num [0], num [1] e num [2], eu coloco num no índice pos, na chave pos, vamos testar esse código aqui pra ver se ele funciona? Então eu vou criar um novo elemento, vou criar dentro da aula 15 eu vou criar um novo "New File" e eu vou chamar de: "vetor na tela.
js", já estou aqui com ele e nós vamos criar um vetor que é o seguinte: vamos criar aqui, vou chamar de "valores" e esses valores vão ser um vetor, vou colocar: let valores = [8, 1, 7, 4, 2, 9], coloquei aqui e eu posso escrever na tela utilizando: console. log(valores[0]), para mostrar primeiro elemento e ai você deve estar pensando assim: "ah Guanabara deixa de ser bobo, seleciona aqui e CTRL+C e CTRL+V e vai substituindo os valores", se você está achando isso fácil, você está muito errado na sua vida. Olha lá 0, 1, 2, 3, 4 e 5 se eu executar na tela, ele mostrou a 8, 1, 7, 4, 2 e 9 se por acaso você quiser mostrar eles sem muita formatação você vai colocar assim: console.
log(valores), essa é a primeira maneira de fazer que a gente já viu, ele vai mostrar o vetor primeiro, esse aqui é o resultado desse primeiro comando só que eu não quero dessa maneira, coloquei como comentário, essa outra aqui é a maneira meio burra de fazer, vou colocar isso aqui como um comentário também, comentário de várias linhas (a gente já viu isso também em JavaScript) e nós vamos fazer agora desse modo um pouco mais inteligente que é vamos criar: for(let pos=0; pos < valores. length; pos++) tenho aqui meu bloco e vou escrever na tela e ainda vou fazer bonitinho aqui: console. log('A posição $ {pos} tem o valor $ {valores [pos]}') não esquece os colchetes, dá uma pausa, faz no seu próprio computador, testa utilizando o Node.
js e vamos fazer, vou apertar F8: "Aposição 0 tem o valor 8", "A posição 1 tem o valor 1" está vendo? Essa forma aqui de cima (vou montar essa parte de cima pra rodar), essa é a forma padrão de executar que não é bonita para um produto final mas aqui você consegue personalizar totalmente a saída mostrando dessa maneira, não se esquece pausa o seu vídeo digita essa solução vê ela funcionando, a única maneira de você dizer que aprendeu é você mesmo colocar a mão na massa, pausa esse vídeo agora e faz na sua casa. Fez na sua casa?
Eu espero que sim e eu tenho uma ótima notícia para te dar essa não é a única maneira de fazer, tem uma um pouquinho mais simples e é que a gente gosta mais utilizar! Esse código que está aqui do lado é o código tradicional do percurso em vetores, isso é o que a gente chama de percurso para exibição no vetor e o JavaScript a partir das versões mais recentes do ECMAScripit tem um jeito mais fácil, mais simplificado para fazer. Lembra no início da aula que eu te prometi simplificar seu código?
Pois agora a gente vai continuar simplificando, dá uma olhadinha aqui: eu vou criar uma estrutura que a gente chama de for só que utilizando o in dentro, então vou utilizar o for. . in e ele não tem 3 elementos como está aqui no for do lado da minha cabeça, ele é um for pouco mais simplificado e ele é otimizado para variáveis compostas e objetos, isso porque vetores e objetos são muito importantes para a linguagem JavaScript.
Vou colocar aqui dentro o mesmo console. log exatamente como está aqui em cima e olha como vai ficar pequenininho: a primeira coisa que vou botar aqui dentro do for é o meu índice, é a variável que eu criei aqui em cima let pos =0, eu só vou colocar let pos ou var pos e do lado do in basta colocar o nome da variável composta, olha que simples, no nosso caso aqui a minha variável composta se chama num, então eu vou colocar: para cada posição dentro de num, é assim que a gente vai ler, o for a gente lê para, o in a gente lê dentro ou "em" em português. Então vamos ler essa frase em português: para cada posição em num, para cada posição na variável composta, eu vou mostrar o num pos, simples assim, olha que simplicidade!
Lembrando que essa sintaxe do for ela só funciona para arrays e objetos, que na verdade são a mesma coisa porque todo array em JavaScript é um object. Vamos treinar isso no nosso computador, então olha vou colocar isso aqui como comentário também, na verdade eu vou tirar isso daqui e vou colocar aqui embaixo tudo aqui é comentário e eu vou fazer da maneira mais simplificada: for(let pos in num), olha que simples, é muito mais simples do que esse for aqui os dois funcionam sem problema nenhum, não está errado, você não é um péssimo programador, uma péssima programadora por fazer isso, eu estou te explicando uma maneira mais simplificada que está nas versões mais recentes da ECMScript, vamos lá: console. log('A posição ${pos} tem valor ${valores [pos]}') você viu?
O comando daqui é exatamente o comando daqui, só que esse for recebeu uma grande simplificada, rodei, ele deu erro porque não se chama num e sim valores, rodei de novo está lá, ele mostrou da forma tradicional que eu nem queria e aqui ele mostrou "Aposição 0 tem o valor 8", "A posição 1 tem o valor 1", sem problema nenhum, olha isso, olha a simplificação, vou mostrar aqui, esse código e esse código tem exatamente a mesma funcionalidade, se eu rodar, ele vai escrever a mesma coisa 2 vezes, acabou ficando confuso aqui, deixa eu colocar é essa aqui como o comentário. Uma coisa que eu posso fazer por exemplo, está tudo fora de ordem vir aqui e colocar: valores. sort, quando eu rodar 1, 2, 4, 7, 8 e 9 foram os valores eu digitei só que agora eles estão ordenados.
E você está vendo que dá pra fazer um monte de coisas utilizando vetores em JavaScript, se eu tivesse que te explicar tudo sobre vetores, não daria pra fazer isso em uma, duas, três, quatro aulas esse é um curso introdutório e para a introdução vou te mostrar mais uma funcionalidade, a última funcionalidade que é buscar valores dentro de um vetor e dá pra fazer isso com comandos bem simples dá uma olhadinha. Coloquei aqui mais uma vez o mesmo vetor que a gente estava trabalhando aqui como exemplo, o nosso vetor num que eu até errei ali na frente e eu vou fazer o seguinte: eu quero buscar o valor lá dentro, eu vou utilizar o método indexOf, lembrando anota isso aqui, Of com letra maiúscula senão não vai funcionar. O que é indexOf(7)?
Ele vai procurar lá no vetor lá embaixo onde está o valor 7, se você é observador(a) você percebeu que o 7 está ali, essa função então vai me retornar a chave onde esse valor se encontra, então por exemplo mandei aqui com esse comando num. indexOf(7) pesquisar "JavaScript tem o valor 7 dentro do vetor? " Ele vai me responder "tem e está na posição 3", então é exatamente dessa maneira que o indexOf funciona e você pode estar perguntando: "tá Guanabara e se eu der um num.
indexOf(3)? ", dá procurada ali existe 3? E se você está dizendo que existe presta atenção, não é o número vermelho lá debaixo é o valor, não é a chave, não existe o valor 3, ele vai procurar e vai falar: "3 não tem", ele deu uma olhada no vetor e não tem, sendo assim ele retorna o valor - 1, - 1 significa para o JavaScript que ele pesquisou dentro do vetor e não encontrou nenhuma ocorrência, vamos esses comandos para a gente finalizar dentro do nosso ambiente.
Então voltar aqui no ambiente, esse vetor na tela vou guardar ele para a posteridade ele é importante, vou vir aqui no ambiente e vou procurar vou colocar aqui: console. log e eu vou criar aqui uma variável chamada pos, let pos = e essa pos aqui ela vai receber o num. indexOf (Of com letra maiúscula) e eu tenho lá o valor 8, estou procurando o valor 8, em que posição o 8 foi parar?
E eu vou colocar aqui: ('O valor 8 está na posição ${pos}') e você vai pensar assim: "O valor 8 está na posição 1", na hora que eu rodo ele vai dizer "O valor 8 está na posição 3", porque ele foi parar na posição 3? Ele foi parar na posição 3 porque usei um sort está vendo? Vou jogar até esse sort para baixo pra ele primeiro colocar o valor e depois ordenar, então está lá agora o 8 está na posição 4, porque tem na posição 4?
Porque ele ordenou esses valores incluindo o valor 1, o meu vetor ficou assim e o 8 está aqui na posição 4, se por acaso for buscar um valor que não existe, por exemplo o valor 4, se você olhar aqui no vetor não tem o valor 4, na hora que eu executar "O valor 4 está na posição -1", isso significa que ele não foi encontrado e você vai falar que era melhor eu ter dito que o valor 4 não foi encontrado, é só você fazer isso aqui: if (pos == -1) ele vai mostrar console. log('O valor 4 não foi encontrado! '), se não abre aqui e vamos colocar esse código aqui dentro, então eu vou buscar o valor 4, "O valor não foi encontrado!
", seu buscar o valor 8, que existe, "O valor está na posição 4". Então você pode começar a utilizar dos nossos conhecimentos que a gente vai trazendo de aula após a aula, pra gente poder fazer programas cada vez mais completos. ♫ Então é isso chegamos ao final de mais uma aula aula, essa aula foi bem grandinha, inclusive eu vou te dar um grande conselho, aulas grandes, aulas importantes como essa de array, elas precisam ser vistas mais de uma vez, elas precisam mais do que tudo ser praticadas, você precisa praticar todos esses conceitos que a gente viu.
Eu me despeço por aqui deixando o conselho de praticar muito, estudar muito e assistir esse vídeo mais uma vez, se por acaso você sentiu qualquer dificuldade no uso do if, no uso do for aprende de novo vai lá na aula do if, aqui em cima você acessa o curso completo de JavaScript lá tem as aulas que você precisa para tirar essas dúvidas. Não adianta você cair de paraquedas aqui, se você foi buscar uma aula de utilizar vetores em JavaScript e chegou a essa, seja muito bem-vindo(a) mas você tem um curso inteiro para poder assistir, então vai com paciência, vai com calma faz todas as aulas, faz todas as práticas para você aprender a linguagem Javascript. Eu me despeço por aqui e no próximo vídeo a gente continua os estudos em linguagem JavaScript.
Um grande abraço, boas práticas e até a próxima!
