*ATUALIZADO* Série completa do JavaScript 2023 — Parte 12: funções do JavaScript

1. Apresentação do curso: Bem-vindo, bem-vindo, bem-vindo meus alunos disco Kielce para arrancar 12 e série JavaScript. E neste enredo, vamos discutir um termo vital quando se trata de JavaScript. E esse termo é funções. O que são funções? Ou funções permitem que você em suas cenas muito básicas, para executar código uma e outra vez e outra vez sem reescrever o código. Então, por exemplo, se você tem que se inscrever botões na página da Web e quando um usuário clica em um botão, você quer que a mesma coisa aconteça. Você não quer duplicar o código. Você prefere escrever um bloco de código rapidamente dentro uma função e executar essa função toda vez que o botão Cadastre-se é clicado. Isso é apenas um exemplo. Então, o que vamos cobrir nesta aula em particular? Nós vamos falar sobre o que funciona fora. Vamos olhar para a diferença entre declarações de função e expressões de função. Nós vamos estar olhando para a vinculação da palavra-chave this em JavaScript. Vamos olhar para a sintaxe das flechas. Nós até vamos estar olhando em volts funções JavaScript, como a função matemática, que vai ser super, super interessante. Então, quem é este último outono? A boa notícia é que é para todos os níveis. Se você é um desenvolvedor experiente, tenho certeza que você vai aprender algo novo se você está apenas começando. Não se estresse, você sabe, meu estilo já começou o básico e eu puxei para cima e eu continuo recebendo mais e mais pensamentos. Estou super entusiasmada. Mal posso esperar para te ver nos primeiros dados. Adiós. 2. O que é uma função?: Bem-vindo à primeira palestra sobre funções. E como nós meio que vimos a analogia de direção que eu dei a todos uma função é como um bloco de código que você pode salvar e reutilizar mais tarde sempre que quiser. E como mencionei anteriormente, as funções são o pão e a manteiga da programação. Você tem que saber como lidar com funções porque você não quer duplicar código toda vez que você deseja executar uma tarefa repetitiva. Então o que isso significa é que você escreve uma função uma vez e você pode usá-la quantas vezes no futuro. E apenas como um FYI ao lado, lembre-se de ponto-e-vírgula, fizemos isso em uma seção de sintaxe. Geralmente, ponto-e-vírgula são usados para separar instruções JavaScript executáveis. Mas uma vez que uma função não é uma instrução executável, e por isso eu só quero dizer que não é executado automaticamente. Você tem que realmente chamá-lo vai invocar isso, vamos ver isso em breve. E por causa disso, não é comum terminar funções com ponto-e-vírgula, embora às vezes você até me pegar fazendo isso por engano e outros desenvolvedores. Então não é o fim do mundo, mas tenha em mente, você não precisa terminar uma função com um ponto-e-vírgula. E como acabamos de dizer, as funções não são executadas imediatamente, é que você obtém IFIS imediatamente invocado expressões de função, mas não estamos entrando nisso agora. Em geral, as funções não são executadas imediatamente. Então, como é que uma função se parece? Como é que escrevemos? Bem, em primeiro lugar, você precisa dizer ao JavaScript que você está criando uma função. Como você faz isso? Bem, a resposta simples é que nós apenas usamos a palavra-chave function. Agora, antes de ir mais longe, existem algumas maneiras de criar uma função em JavaScript. Vamos olhar para eles. Mas não importa qual maneira você usa, seja o método que você usa para criar uma função, esses conceitos gerais que estou ensinando em nosso aplicaram-se a cada método diferente. Então, se você entende o que estou ensinando agora, você pode aplicar isso a qualquer método de criação de uma função e você vai buscá-la muito mais rápido. Então aqui vamos apenas usar uma declaração de função. A fim de declarar função, temos a palavra-chave função, grande, sonar JavaScript sabe que queremos criar uma função. Mas você vai concordar comigo que provavelmente vamos querer criar centenas, se não milhares, de funções em nossa aplicação. Por exemplo, ele pode querer criar uma função que cumprimente seu usuário quando ele entra em sua página, você pode querer criar outra função que determine se ele é um membro ou não. Você pode querer criar outra função para determinar se ele está desativando sua conta ou não. E se ele o fizer, você quer dar-lhe outra mensagem ou um alerta. Estas são funções diferentes e por causa disso, você precisa distinguir entre uma função de outra. Você precisa saber qual função chamar qual função você deseja executar. E como fazemos isso? Bem, isso mesmo. Precisamos dar a nossa função um nome que saibamos qual função executar quando você precisar dela. E vamos chamar nosso teste de função por causa do argumento. Qual é a próxima coisa que precisamos? Bem, quando você começar a desenvolver, você vai querer passar argumentos para esta função. Por exemplo, e se quiséssemos dar um usuário toalha alerta de boas-vindas? Não queremos que o alerta diga “oi, usuário aleatório”. Gostaríamos que o alerta dissesse algo como oi John, alta 10x. E o que nos permite fazer isso como temos que passar em argumentos, temos que passar em variáveis. E para passar variáveis, você precisa ter parênteses. E isso é um gás. Você tem uma palavra-chave de função. Chamamos o nosso gosto de função no cliente. Podemos chamar-lhe o que quisermos. E então você tem que ter os parênteses. Mas agora digamos que queremos passar o nome do usuário. Então vamos apenas colocar isso em uma variável chamada nome. E sim, entra entre parênteses. E qual é a última coisa que precisamos fazer? Bem, se você apenas levantá-lo assim, então.. JavaScript não saberia o que fazer. Ótima. Definimos a função, chamaríamos de gosto. O que é que isso vai fazer? No momento em que não faz nada. E é aqui que as chaves encaracoladas entram e não se confundem com objetos. Este não é um objeto quando JavaScript vê na palavra-chave função, ele vai saber que essas chaves, ou apenas um lugar onde definimos o nosso código. E na programação, esse lugar entre as chaves é chamado de bloco, chamado de bloco de código. E isso é com a carne e o coração do nosso código JavaScript vai viver. Continuando com o nosso exemplo. Vamos apenas alertar oi para o usuário. E aqui vamos usar literais de modelo, que vimos na seção Sintaxe. E é isso. É literalmente assim que se escreve uma função. Não é assim tão difícil. É intuitivo, é fácil. E o melhor de tudo, faz muito sentido. Mas neste momento, só definimos uma função. Nós não executá-lo, nós não chamá-lo um em linguagens de programação para executar uma função é conhecida como invocar ou chamar essa função. Novamente, não se intimide com estas palavras. Isso é tudo invocar meios. Mas vamos entrar e ver como nós realmente invocamos essa função. Então, como mencionei, invocar uma função significa apenas executá-la ou executá-la. Vamos olhar para a nossa função novamente, teste de função, onde nós apenas alertar nome oi para lembrá-lo que gosto é apenas um nome personalizado que demos para a nossa função. Podemos chamar-lhe o que quisermos. E como executamos essa função? Vamos tomar o nosso nome, neste caso, gosto? Tudo o que fazemos é segui-lo por parênteses. É assim tão simples. Você não está dizendo ao mecanismo JavaScript para ir e executar esta função. Mas aguente firme. Nós definimos que esta função precisa de uma variável chamada nome, um argumento chamado nome. Então vamos fazer isso. Vamos colocar os homens. E é isso. Isso é tudo que você faz para invocar uma função. Ótimo, cobrimos a teoria de que agora, como sempre, vamos ver alguns exemplos. 3. Invocando com o retorno de uma função: Antes de seguirmos em frente, apenas um exemplo muito rápido, Lembre-se de como acabamos de dizer que para invocar uma função, você precisa fazer os parênteses duplos. Ou o que acontece se você não incluir os parênteses duplos? Deixa-me mostrar-te. Solidificar agora função chamada lobo. E tudo o que Wolff faz como logs de console para a tela. Agora, se não incluirmos os parênteses, o que vai acontecer? Instâncias Linux não vão executar a função, ele irá literalmente retornar a função em si para você. Portanto, basta ter isso em mente se você quiser criar instâncias desta função e colocá-lo em variáveis, certifique-se de que você não colocar os parênteses atrás porque assim que você colocar os parênteses atrás, ele executa o comando função. Deixa-me mostrar-te. Se sairmos e colocarmos entre parênteses, o que vai acontecer? Bem, vamos fazer o registro do console na tela, como eles fazem sentido. Mas há muito mais para ir. Vamos continuar com isso. 4. Introdução ao clock - clique e altere texto: Funções, veremos alguns exemplos. Na verdade, quero mostrar-lhe dois exemplos. Agora, um será relativamente simples, o outro vai ser um pouco mais complexo porque agora eu meio que sinto você entrando nisso. Eu sinto que você realmente e eu vou estar estruturando arquivos como nós faríamos em um site real. Então você também pode ter uma idéia de como nós vinculamos JavaScript com nosso HTML. Ok, exemplo número um, eu só queria ter um texto simples. Quando clicamos nesse texto, eu quero que ele seja substituído por outro texto e eu quero fazer isso escrevendo uma função. Então, sim, acabei de receber um documento em branco do Visual Studio Code. Tudo o que precisamos fazer agora é criar uma pasta e vamos chamá-la de nosso projeto. Digamos que são quatro J sob nenhuma função. Porque as coisas antigas, Função do projeto no nome, vamos ter um arquivo HTML ponto índice porque é assim que apóstolo começa. Temos que começar aqui. E isso é criar um modelo HTML padrão em nosso corpo que é cria um cabeçalho. Vamos chamá-lo de exemplo de função. Vamos fazer um parágrafo. Este é um exemplo de alteração de texto através de uma função. Alterando texto usando uma função créditos. E se clicarmos em OK. Ir servidor Live, em seguida, nós exibir isso em um site. Isto é o que vemos exemplo de função. Este é um exemplo de alteração de texto. Ótimo, que se eu clicar de qualquer maneira, nada acontece. Então, voltando ao nosso editor de texto, o que precisamos fazer agora vai precisar criar um arquivo JavaScript. E digamos que dentro desta grande estrutura de pastas, temos outra pasta chamada public. E dentro dessa pasta, você tem seu arquivo de script. Nós, nós escrevemos todo o nosso JavaScript. E agora quero que criemos uma função que substitua o gosto. E lembre-se, o que precisamos para criar uma função? Vamos guaxinins dizer JavaScript que estamos escrevendo uma função, então usamos a palavra-chave função. Agora precisamos nomear nossa função. É só legal mostrar porque queremos mostrar as tomadas. Lembre-se que precisamos dos parênteses após o nome, apenas no caso de querermos analisar através de argumentos. E então nós temos que realmente escrever nosso código entre parênteses. E tudo o que queremos fazer é que queremos documentar a função ISL. Como foi invocado. O Walden. E ele é uma função que, novamente, se voltarmos aqui, não vai funcionar porque ainda não fizemos o link entre nossa página HTML índice, clicando neste parágrafo, em nosso arquivo JavaScript. Então vamos fazer isso. Vamos voltar. Sim, é bom. Nosso arquivo de índice. E assim que a massa passar por todo o nosso HDL e tudo isso é carregado na tela. Em seguida, ele vai acertar esta tag script. E a tag de script vai fazer referência ao nosso arquivo JavaScript. Então está na pasta pública e dentro da pasta pública e um arquivo chamado script.js. Então, o que é ótimo sobre isso é que se vamos ao nosso site e atualizamos o clique em stall não faz nada porque não dissemos ao navegador que quando clicamos, queremos que essa função seja executada. Uma galinha. Isto, isto é fixe. Se inspecionarmos este documento, vá para a guia Rede e atualizaremos. Você pode ver que nosso arquivo de script está sendo carregado. Se você clicar no arquivo de script ainda função GCF que temos escrito dentro dele em rabanetes. Um pouco de informação interessante para você. Agora, vamos fazer a ligação entre marcar este texto e isso requer mudança. Então, se voltarmos para o nosso editor e olharmos para este texto de parágrafo, este parágrafo é onde saímos JavaScript para ser acionado. Dentro daqui, podemos definir um evento on click e lista apenas executar nossa função show. Tenha em mente que com um evento onclick, qualquer coisa entre aspas agradáveis é JavaScript. Então nem precisamos atualizar o show. Por exemplo, vamos apenas fazer um alerta. Nós podemos, nós podemos escrever JavaScript diretamente dentro dessas aspas. E se voltarmos aqui e clicarmos aqui, estão alertas. Então está funcionando. Se voltarmos ao nosso arquivo, não executamos o alerta. Nós realmente queremos executar nossa própria função personalizada chamada show, que está em nosso arquivo JavaScript aqui. E se formos aqui e clicarmos, lá vamos nós. Documento.Write. Todo o texto foi substituído pela nossa função, foi invocado, bem feito. Espero que isto esteja a fazer cenas. Começamos com um arquivo HTML de índice. Nós definimos nosso parágrafo, nós referenciamos agora. 5. Diversão - exibindo uma citação aleatória: E se quisermos um botão e cada vez que você apertar esse botão, você quer que o texto do parágrafo mude. Então digamos que temos quatro ou cinco citações. Toda vez que você apertar esse botão, espessura, selecione aleatoriamente uma dessas aspas e exiba-a na tela. Como faríamos isso? Vamos fazer isso juntos. Então, o primeiro passo é criar uma nova pasta. E é chamado de função de projeto avançado. Ok, dentro, sim, vamos ter um arquivo index.html. Já passamos por isso, sabemos que é aqui que temos que começar a criar um modelo padrão. E aqui vamos ter um botão. E vamos chamar isso de “Botão Show Citação”. E agora quer um recipiente onde podemos mostrar as aspas n. Então vamos apenas ter uma tag de parágrafo por enquanto. Vemos isto online. Vamos dar uma olhada no que parece. Devemos ver um botão vazio que não faz nada quando clicamos. Então, citação, nada acontece. Ainda não definimos nada, mas sabemos que temos um botão abaixo do botão. Vamos ter uma tag de parágrafo que agora está vazia, mas que vai mostrar nossas citações. Vamos voltar para o nosso editor e vamos trabalhar na nossa citação. Então vamos criar novamente. Digamos que temos uma pasta pública. E dentro da pasta pública, digamos que temos o seu script, o seu JavaScript, onde chocalhamos o nosso JavaScript. E aqui queremos aparecer bastante, então vamos definir uma função. Começamos com a palavra-chave function, chamamos, agora o que quisermos. Vamos chamá-lo de mostrar citação n dentro das chaves. É onde temos todo o nosso código, a nossa carne. E é assim que vamos usar diferentes tipos de dados que aprendemos? É por isso que é importante aprendermos essas coisas anteriormente desconhecidas agora. Então o primeiro passo é precisamos de um lugar para armazenar todas as nossas cotações. Nós faríamos isso? Como faríamos isso? Lembre-se, aspas são apenas strings. Tipo de dados de string. Como podemos parar várias aspas é em uma matriz, porque uma matriz armazena vários valores. Então vamos chamar nossas aspas de matriz. E começa deixando a nossa nova matriz vazia. Nós não temos nenhuma citação no puro. E agora vamos adicionar nossas citações. Como adicionamos cotações? Vamos chamar a nossa matriz? Nós afirmamos que o primeiro item na matriz, e lembre-se, ele começa com o índice 0 porque ele faz referência onde na memória nós vamos acessar isso de um agora ele é 0, nós vamos acessá-lo diretamente de seu ponto de partida, que é branco 0. primeira citação é, quando chegar ao fim da corda, amarre um nó nela. E vamos adicionar outra citação. Em outra citação, acessamos nosso novo array, que agora tem um item nele. E agora queremos que seja o segundo item na matriz. E esta citação pode ser, não é nada permanente senão mudança? Não é nada permanente. Mas vamos acrescentar outra citação. Nós acessamos nossa matriz. Agora está dizendo que queremos que seja o terceiro elemento. E deixe esta citação por outra coisa. Diga que a sorte é um dividendo de doce. E vamos apenas fazer mais um eixo, nosso array. Queremos que este seja o quarto elemento na matriz. E esta citação pode ser, é, requer tanta energia para desejar quanto para plana. Então lá vamos nós. Temos nossas citações, temos quatro aspas dentro desta matriz. Agora o que nós queremos que ele faça é que nós apenas queremos exibi-los aleatoriamente quando esta função show quote é executada, quando ela é chamada. Como você faz isso? Bem, precisamos criar um número aleatório entre 03 para acessar cada uma dessas citações. Como eles fazem isso vai me deixar anotar primeiro, então eu vou explicar para você o que nós fizemos imagens, me livrar deste ano. Então tudo o que vamos fazer é definir uma variável aleatória que continua mudando. E esta variável aleatória será a que chama nossa matriz de aspas. Então, na verdade, é, este rand vai substituir esses números, 012 ou três, que aleatoriamente um número que continua mudando. É tudo o que estamos a tentar fazer. Podemos acessar o objeto de matemática do JavaScript. E nós vamos acessar o método completo sobre ele, que apenas torna em torno de número inteiro. Caso contrário, ele irá produzir números aleatórios que não são um número inteiro e não seremos capazes de acessá-lo em nossa matriz. Isso é tudo o que esta função de piso faz. Então vamos fazer a função aleatória de matemática do JavaScript em excesso. E porque o ponto matemático aleatório produz número entre 01, precisamos multiplicar pelo nosso comprimento de matriz, a fim de permitir que esta variável aleatória tome valores. O mesmo comprimento é a nossa matriz. Então é por isso que vamos multiplicar pelo comprimento das aspas. E é isso. Nós literalmente definimos nossa variável aleatória. Agora, qual é o último passo? Deixe-me apenas comentar isto. Sabe o que está acontecendo? Crie um número aleatório entre 03 e agora. O que temos que fazer? Bem, agora temos um XY é o nosso parágrafo. Lembra-se daquela etiqueta de parágrafo? Mostrar novamente no arquivo de índice, nós temos essa tag de parágrafo. Queremos exibir a citação nessa tag de parágrafo. Senhor. Sim, temos que identificar a etiqueta de parágrafo e inserir a nossa citação dentro dela. Certo, ótimo, então como identificamos a etiqueta do parágrafo? Fizemos isso em uma das palestras anteriores. Mas apenas para lembrá-lo, JavaScript tem um método getElementsBytagName embutido, e esse método pode ser acessado no objeto de documento. Então getElementsBytagName. Queremos pegar o parágrafo. E lembre-se do que eu disse antes, isso produz uma lista de nós. Então nós temos, nós temos que realmente acessar o primeiro item nesta lista. Em seguida, queremos alterar o atributo HTML interno deste parágrafo. E queremos que isso seja igual a quê? Isso é certo. Nós acessamos nossa matriz de aspas e passamos nesta variável aleatória. E isso deve ser no deve funcionar. Deixe-me explicar tudo, na verdade, primeiro, vamos ver se funciona e então eu vou explicar como toda essa coisa matemática Matemática Floor funciona. Então vamos para a nossa página de índice. Se voltarmos ao nosso site e clicarmos nisso, nada vai acontecer porque não desenhamos um link entre clicar neste botão para executar essa função, é por isso que temos que voltar para nossa página de índice. A primeira coisa que precisamos fazer é referenciar nosso arquivo de script. E isso está na pasta pública, e está em um arquivo chamado script.js. Agora, tudo o que temos que fazer é definir quando a função é chamada e vamos fazer isso sempre que o botão for clicado. Então, inserimos um evento onclick neste botão. E agora precisamos executar nossa função. O que chamamos de nossa função terá um olhar. Chamamos essa função de mostrar peculiaridade. Então precisamos voltar ao nosso arquivo de índice e precisamos executar. Claro, demita-se. Sempre que esse botão for clicado. Mas veja se isso funciona. Vamos ao site. Refresque. Clique no show estranho. No parágrafo ego recebe a citação inserida nele. Nada permanente além de mudança. E toda vez que eu clico nesta citação, ele muda. Quão incrível é isso? Para entender nossas poderosas funções não temos que reescrever código cada vez que você clica em um botão. É apenas executar essa função de novo e de novo e de novo. Ok, então você provavelmente está se perguntando como esta função matemática funcionou aqui. Aluguel, Math.Floor, matemático ponto aleatório. O que faz tudo isso? 6. Math.random: Certo, então mostra o que é o método aleatório. Vamos apenas criar um novo arquivo muito rapidamente. E agora esta é uma longa palestra, então eu não vou ser OMP muito tempo. Vamos chamá-lo de Meteor.js. Vamos fechar tudo o resto. Expliquei o conceito geral do que fizemos. Quero começar a co-ocorrer. E agora deixa-me mostrar-te o que fizemos. Em primeiro lugar, o que faz matemática ponto cara aleatório, é embutido em JavaScript. Então tivemos acesso a este objeto automaticamente. Vamos apenas dizer número tardio igual a math.pi, número de modo aleatório e tardio console. O Yeager e ele leram Tommy, salvem o arquivo, e temos um novo número aleatório. Mas você notará que esses números estão entre 01. Então, quando temos nossa matriz, e é simplesmente delicioso, digamos matriz LIT é igual a 135. Para acessar estes, temos que usar 01 ou dois. Por exemplo, se eu quisesse um console, sair do primeiro elemento dentro, dentro dos colchetes, colchetes, eu tenho que ter inteiros inteiros. Neste caso, ou eu tenho que ter 0. Um serviria. E isso recupera o valor dessa matriz. Então você concorda comigo já com número de uso consciente porque o número e manutenção economizando agora, assim você pode ver que é sempre entre 01. Então é precisamente por isso que multiplicamos o Math.pi aleatório por número. E por qual número devemos multiplicar? Bem, nós tínhamos quatro aspas, então nós multiplicamos por quatro. Nós console log array.length. Aqui temos três, mas para mantê-lo semelhante ao exemplo anterior, vou mostrar-lhe isso. Basta colocar mais um. Agora temos cheio. Então nós multiplicamos isso por quatro, mas em vez de escrever o número quatro, nós apenas dizemos isso novamente. Bem, vamos multiplicá-lo pelo seu comprimento. Agora sabemos que o maior número, este pode ser tão cheio, um menor número, este pode ser um 0. Você está comigo tão maior. Mas agora, você pode ver como eles produzem números tão aleatórios? Se tentarmos ir array e tentarmos acessar um número como este, não conseguimos, não existe. Tem que ser um número inteiro. E é por isso que usamos Math.Floor. E o Math.Floor sempre retorna o maior número inteiro menor ou igual a como um número. Assim, por exemplo, na tela no momento vemos números 2.940 usando metanfetamina apenas retornar para sustentar para fazer cenas. Então tudo o que fizemos foi incluir uma função Math.Floor na frente de uma descrição inteira aqui. E a UGA. Então agora a variável numérica estará sempre entre 03. Quão incrível é isso? Isso é exatamente o que fizemos, o que nos permitiu acessar todos os elementos na matriz. A esperança está a fazer sentido. Vamos seguir em frente. 7. O que é a palavra-chave REVOLTA: A palavra-chave return é importante para entender. Mas por quê? Vamos dar uma olhada. Vamos criar uma função que apenas adiciona a e b. Lembre-se de função de crédito, precisamos da palavra-chave função. Agora precisamos dar um nome. Vamos chamar isso de adicionar. E vamos adicionar dois números, a e b que passarão para a função. E olha para isto. Eu vou voltar. Javascript entende o que isso significa e eu vou explicar em breve o que isso significa. E vamos retornar a mais b. E se executarmos esta função, é ponto co-ocorrer. E vamos adicionar 510. E seu console é alto, log do console. Eles consideram. Ele vem com uma resposta de 15, como seria de esperar. Mas o que essa palavra-chave return realmente significa? Vamos dar uma olhada. Há virado palavra-chave simplesmente visa execução e você adivinhou que retorna um valor. E se estes estreitam para invadir nesse caso, indefinido como retornado, não agora, indefinido. E outra coisa a ter em mente é que a instrução return é afetada pela inserção automática de ponto e vírgula. O que quero dizer, vamos tomar nosso exemplo de função onde ele retorna um plus B. Se tivéssemos que escrever retorno e em uma nova linha, escrevemos um plus B. O que vai acontecer? Será que o analisador vai interpretar que é retornado ponto-e-vírgula e nomear um mais b e vírgula. E o ponto importante a perceber com isso é que o a mais b neste caso seria um alcançável. Então, como podemos devolver algo que se espalhou por várias linhas? Bem, nesse caso, você só precisa colocar entre parênteses. Isso funcionaria. Vamos dar uma olhada em outro exemplo rapidamente. Certo, mais alguns exemplos sobre a palavra-chave de retorno. Lembre-se de como dissemos que quando você usar a palavra-chave return em pára a execução da função. O que isso significa? Bem, isso primeiro significa que se nós temos outras variáveis, nós definimos sem pêlos igual a dez, d igual a 20, e nós console log c mais d. Você pode realmente ver que meu IDE está meio acinzentado essas declarações. E a razão pela qual são grandes desastres que estes não vão ser executados. Se adicionarmos 510 novamente na tenda mostra-nos 15. Se quiséssemos ver ambos, teríamos que reposicioná-los acima da declaração de retorno. Só agora ele console log c mais d e retorna 15. E você deve sempre ter cuidado com a palavra-chave return. Porque se você não tiver, pode causar coisas estranhas. O que quero dizer, vamos pegar uma prancha. Lembre-se, Clunker, não usamos isso há algum tempo. Apenas na página inicial e remix clicando neste novo botão aqui. E podemos apenas padrão para um arquivo HTML, CSS e JavaScript vazio padrão . E o que é bom sobre Planck é que à esquerda você pode tipo de ver o layout do arquivo do projeto. Você pode ver você se sentar, você tem seu arquivo de índice. E se clicarmos em nosso arquivo de índice, você pode ver que ele faz referência ao arquivo JavaScript dentro da pasta lib. É só uma boa visão geral para você. É bom ver como tudo se encaixa. Mas agora o que eu quero fazer é criar no arquivo de índice, vamos apenas criar um parágrafo com demonstração de ID. Então, tudo o que eu quero fazer, e em nosso arquivo JavaScript, que sabemos já está referenciado em nosso arquivo de índice. Então sabemos que isto vai ser executado. Vamos definir uma função chamada teste. E no gosto vamos passar em um nome de variável um argumento. Lembra como vimos esse exemplo antes? E aqui tudo o que quero fazer é escrever naquele parágrafo Hello Neighbor. Era tudo o que queríamos fazer. Então agora definimos nossa função. Tudo o que precisamos fazer agora é acessar sua tag de parágrafo e inserir este texto nele. Então, como acessamos uma tag de parágrafo? Lembramos, começamos com o documento porque esse é o aplicativo abrangente. Nós acessamos um método embutido em que get elemento por ID. E então podemos escrever o que quisermos dentro dele. Então aqui vamos começar com o documento. Obter elemento por ID, neste caso, a demonstração ID Decebalus. E aí nós nos perguntamos diretamente dentro de seu HTML interno, queremos executar essa função e digamos Wally do usuário. Agora tudo o que precisamos fazer é visualizar isso. Você pode ver é olá clunker. Não foi inserido no arquivo index.HTML, e lá vamos encontrar. É outra razão pela qual se você não tem a palavra-chave de retorno, lembra o que eu disse? Ele retorna indefinido. Acabei de provar dois anos e isso é estranho. Você acha que Ys e não retornando Olá 10x. E a razão é, como você adivinhou, você precisa da palavra-chave de retorno. Então, se agora devolvermos o nome do Olá e ele se refrescar, devemos receber o “Olá Dolly “e fazer o ansioso. E mais um exemplo. Vamos abrir o console do Chrome. E ele tem outro exemplo é a função criativa. Vamos chamar nossa função de gosto pela falta de uma palavra melhor. E em, sim, vamos definir um cão. E digamos que o nome dele é cachorrinho. Ok. Agora, se eu executar esta função, o que você espera ser devolvido? Que não incluímos a palavra-chave return. Então, sim, eu esperaria que o indefinido fosse lançado. E foi exatamente o que aconteceu. Então, e se criarmos outra função? E vamos chamar isso de gosto também. E eu não estou sendo muito criativo aqui com os nomes. E é altamente dopado para o mesmo valor. Agora, em vez de fechar e terminar a função, vamos colocar nessa palavra-chave de retorno. E o que queremos? Voltar vai, vamos apenas dizer que queremos que o cão volte aqui D2, que é o seu nome. Então, quando eu correr gosto para o que você acha que deve acontecer agora? Está certo, devemos ver que estamos em quarto lugar. Th, dois serão quarto. Então, estes foram apenas três exemplos rápidos de como a palavra-chave return pode afetar o resultado da execução da sua função para a velocidade em uma mina. É um ponto muito importante a observar. Vamos seguir em frente. 8. 2 tipos de funções - Declaração de expressão de expressão: Agora, antes de seguirmos em frente, que vai ter uma rápida olhada nos tipos de funções. Lembre-se que objetos havia diferentes maneiras de criar um objeto. Tínhamos literais, tínhamos construtores, tínhamos o método de criação, tínhamos a classe, ou o mesmo com funções. Temos maneiras diferentes de criar uma função. Mas o que é bom é que está aqui. É um pouco mais simples porque existem apenas duas maneiras de definir uma função em JavaScript. Temos uma declaração e uma expressão. A declaração que temos visto muitas vezes através nossos exemplos de que quando temos a palavra-chave function, então temos o nome da nossa função ainda dizer oi, temos os índices PR onde passamos em um parâmetro. E então temos as chaves onde realmente definimos nossa função aqui. Nós apenas definimos Hai Nan usando literais modelo. Então essa é uma declaração de função. Bem, como escreveríamos a mesma função, mas usando uma expressão de função? Bem, sim, você pode ver como é semelhante. Nós apenas definir uma variável chamada sayHi e nós atribuir net a função. Você pode ver em ambos os casos, temos que usar a palavra-chave função é esta sintaxe seta que vamos chegar em você. Mas antes de chegarmos a isso, você pode ver a maneira tradicional de criar ambas as funções significa que tivemos que usar a palavra-chave function. Então vamos mergulhar neles em um pouco mais de detalhes. Temos uma declaração de função no elevador e expressão de função melódica à direita. E o significado de ambas as funções é exatamente o mesmo. E com isso, eu só quero dizer que ambos criado função e eles roubaram função em uma variável chamada variável. Diga oi. Então você provavelmente está perguntando, bem, então por que ter um método sobre o outro? E a resposta é que há uma diferença mais sutil. E essa diferença é o tempo de quando a função é criada. E uma função pode ser criada imediatamente ou mais tarde. E com uma declaração de função, ela é criada imediatamente. E com uma expressão de função, ela só é criada, é chamada. E vou mostrar-vos exemplos do que isto significa na próxima palestra. Então não se preocupe se você não entender completamente o que isso significa agora que apenas em um nível muito, muito alto, isso significa apenas que a declaração de função, você pode realmente chamar a função mesmo que você definiu mais tarde em seu código. Ok, mas agora vamos olhar para expressões de função com um pouco mais de detalhes. A primeira coisa que você vai notar é que você pode armazenar a função em uma variável. Como chamamos, diga oi. E a outra coisa a ter em mente é x_k com expressões de função. Você percebe como nós não damos a função real e m? Olhe para a declaração de função onde dizemos função e seguimos isso pelo nome da função chamado SayHi. Sim, só definimos uma função. Bem, no jargão de programação, isso é conhecido como uma função anônima, é apenas uma função sem um nome. Nós meio que lhe demos um nome porque nós colocamos em uma variável que não demos diretamente à função um nome como temos para a declaração de função. E uma das outras vantagens enormes com uma expressão de função é um duvidoso. E mais uma vez, não se intimide com essas palavras estranhas. Tudo o que significa é que quando você deseja usar uma função uma vez, você muitas vezes fazê-lo através do método chamado iffy imediatamente invocado expressão de função. Isso é o que significa. E eu não quero entrar em expressões de função imediatamente invocadas agora. Se você é como eu, você não quer ficar curioso sobre o que isso realmente significa para coçar cada um. Deixe-me dar um exemplo rápido. Digamos que temos um elemento parágrafo com um ID de gosto em nosso HTML. E tudo o que queremos fazer é que queremos JavaScript para executar código que coloque uma string chamada Yj em seu parágrafo. Como vamos fazer isso? Bem, é claro, primeiro precisamos começar com a tag do script. Dean Leeds, defina uma expressão de função. Não estamos aqui a fazer uma declaração. Estamos fazendo uma expressão de função. Vamos acessar o objeto de documento do JavaScript, que é sua página geral da Web. E no documento UNEP, nós automaticamente obter acesso a um elemento get pelo método ID. O ID, queremos um bom gosto, e então queremos mudar seu HTML interno para sim. Então lá vai você. Estes são expressão de função. Fechamos a tag de script e terminamos. Mas o problema com isso é que não chamamos essa função de pesada. Nós agora apenas definimos uma expressão de função. Assim, com uma expressão de função chamada imediatamente, queremos dizer ao mecanismo para executar isso imediatamente, automaticamente. Como vamos fazer isso, tudo que você tem que fazer é colocar seu código entre parênteses. E então você vai, você disse ao JavaScript que isso é um duvidoso e executar uma função. Lembra o que tínhamos que fazer? Eles rastreiam, tivemos que seguir essa função por parênteses. E é a mesma coisa com um duvidoso. Você segue a função com parênteses e Bob é seu tio. Você acabou de criar sua primeira função de auto-invocação. Então deixe-me mostrar alguns exemplos agora, exemplos práticos das diferenças entre uma expressão e uma declaração de função. 9. Declarações de função de função de expressões de função de função: Expressões de função, por um lado, declarações de função por outro, Johann, isso pode ficar bastante confuso. Então eu só pensei que limitasse exemplos ressonantes em você. Vamos primeiro olhar para uma declaração de função porque isso é o que usamos para declaração de função. E vamos apenas ter uma função chamada cão, que o console registra o som. Qual é o primeiro passo com a declaração de função? Temos que dizer ao JavaScript que estamos prestes a definir uma função no. Precisamos chamar uma função de algo. Então vamos chamar isso de conversa. Precisamos dos parênteses porque podemos querer passar argumentos para uma letra. E então definimos nosso código dentro das chaves, digamos que o som é igual. E então tudo o que queremos fazer é conectar o som para a tela. E para executar ou invocar esta função, o que precisamos fazer? Isso mesmo, precisamos usar nosso mesmo nome, um parêntese incluído. E então você vai para os logs do console. Então essa é a declaração da função. Temos visto muitas declarações de funções. Devemos nos sentir confortáveis com isso. Bonobo, que tal uma expressão de função? Vamos dar uma olhada. Função. Expressão de função irá, a maior diferença sintática em como ele parece é que nós colocá-la em uma variável e é uma função anônima, que é sempre sorte. Então vamos definir ket. E pode haver uma função. Mas agora, neste caso, tenha em mente, nós não chamamos nossa função de nada, e é por isso que ela é chamada de função anônima. Na declaração de função acima, adicionamos função e chamamos nosso cão função. Sim, nós só temos uma função que estamos atribuindo a uma variável chamada gato. Então é quase a mesma coisa. É estruturado de forma diferente. E vamos fazer a mesma coisa mais tarde. Soe miau. E queremos consolar o sul. Nada de novo lá em executar uma expressão de função. Novamente, usamos apenas o nome da nossa variável e colocamos entre parênteses. Miao, Hou. Então ele provavelmente está pensando: “Tudo bem, legal, ambos parecem parecidos. Eles sentem o mesmo. Por que ter que desperdiçar para declarar uma função? Isso não é mais confusão? Will, não é como não é. Depende do que você deseja fazer com essas funções. E como acabamos de dizer na palestra, a principal diferença é o momento de quando você pode usar essas funções. Deixa-me mostrar-te. Então vamos rolar para baixo. E deixe-me dizer que o tempo é a principal diferença. Assim, declarações de função podem ser usadas em todo o escopo. E o que quero dizer com isso é, vamos apenas dizer que a função Declaração pode ser usada em todo o seu escopo. E sim, nós só vamos estar lidando com o escopo global. E eu vou te mostrar um exemplo. Isso acabou de voltar para nós dizer oi função e disse que se queremos passar no nome do usuário e apenas console log uma mensagem de boas-vindas. Assim, o primeiro passo da declaração de função é dizer JavaScript recriando uma função pela palavra-chave function. Chamamos-lhe, dizemos olá, chamamos-lhe o que quisermos. Neste caso, queremos passar um nome e, em seguida, escrevemos nosso código entre essas chaves. E tudo o que queremos fazer aqui é o registro do console. E vamos usar literais de modelo. E nós só vamos dizer oi, nome, função razoável. E vamos invocar a função. Vamos ver o que acontece. Diga oi e passamos em Tang. E sim, ele vai fazer o registro do console. Oi, Tom. Mas deixe-me perguntar, o que acontece se executarmos essa função? Os quatro até declararam a função? O que vai acontecer? Bem, olhe para as declarações de função cômico pode ser usado em todo o seu escopo. Ela tinha global. Então, se movermos o digam oi Tom para o topo, ele vai funcionar porque o analisador, quando ele atinge essa função, quando ele está passando o arquivo, mesmo antes de ser executado e renderizado para a tela. Já vai ter guardado a função de dizer oi. Isso vai saber exatamente qual é a função. Então, quando você ir e chamá-lo, mesmo antes de termos definido em nosso código, ele será código válido, o que acontece com expressões de função? Funciona expressões. As expressões de função são acessíveis e utilizáveis quando são definidas. E o que eu quero dizer com isso, bem, vamos criar exatamente a mesma função. Em vez de dizer oi, vamos ligar, dizer adeus. Então, vamos dizer, por função igual, uma função anônima, porque agora não nomeamos essa função. Vai ser pausado no nome. E aqui nós só queremos console log usando literais modelo por. E eles nomeiam. Mais uma vez uma função muito simples. E se quiser executar, diga adeus com a palavra Tom, funciona. Tudo neste momento funciona. E você não teria qualquer preferência para usar um ou outro neste cenário. Mas o que acontece se executarmos isso? Tentamos executar, digamos comprar antes de declararmos a variável, antes de declararmos a função. Vamos dar uma olhada. Vamos mover isso para cima e bater que estamos sendo jogados no Iraque. Digamos que bi não está definido. E esse é o ponto que estou tentando fazer com isso. Não é possível acessar expressões de função antes de ser declarado. Apenas, deixe-nos acontecer. Eu não sei. Só não ia lidar com isso. Legal. E vamos continuar. 10. Funções são como valores: Vai ser uma palestra rápida esta noite. Eu queria mencionar a rede é funções em JavaScript estão disponíveis. E o que significa é que podemos lidar com eles. E isso soa estranho, mas podemos lidar com ele como um valor. E tudo o que quero dizer com isso é que você pode jogar funções ao redor, você pode passá-las para outras funções. Você pode atribuí-lo a variáveis. E isso torna as funções em JavaScript incrível uma inigualável com suas outras linguagens não são tão flexíveis. Você não pode fazer isso com funções. Deixa-me mostrar-te o que quero dizer. Vou apenas dar-lhe um exemplo de atribuição de uma função em uma variável. Podemos definir qualquer função que fomos. Então vamos apenas trabalhar com uma declaração de função porque é muito fácil e intuitivo para fazer isso e exclui cão função. E isso só vai para o registro do console. Bem, nada de novo, então. Mas agora podemos tratar esta função como um valor e atribuí-la a outra variável. Que coisas incríveis. Então podemos literalmente ir deixar salsicha cão, cão. E agora, neste momento, cabeças de salsicha receberam o valor dessa função. Então, para executar este Voc, eu funcionarei. Usamos os parênteses normais. Cell, é o X's são salsicha cão. E executado. O console do ego registra riqueza. E, claro, temos o cão da salsicha, mas também temos a função do cão que podemos executar. E que também é executado com para o console e eles têm isso. Eu só queria mostrar isso antes de seguirmos em frente porque eu sei que isso pode parecer simples, mas tem impactos profundos em você e eu como desenvolvedores porque JavaScript é incrível como nós, ele nos permite muita flexibilidade para trabalhar com funções jogá-los ao redor e colocá-los em variáveis realmente é ótimo. Então, antes de passarmos a coisas mais complicadas, eu só queria compartilhar isso com vocês. 11. A nova sintaxe de seta: Esta seção sobre funções não estaria completa se não discutimos as funções de seta. As funções de erro são apenas uma maneira concisa, uma maneira rápida de definir expressões de função. E é uma das mudanças mais práticas introduzidas pelo ES6 ou ES 2015. E a maneira que eu gosto de ver é que ele introduz dois grandes benefícios. Benefício número um, que é o mais intuitivo e óbvio, É apenas mais curto para escrever, nos leva menos tempo e é mais fácil. Vamos tomar nossa expressão de função say oi. Sabemos como está escrito. Já vimos isso antes. Então você pode ver com a sintaxe de seta, nós pegamos parênteses duplos e colocamos todos os nossos argumentos em NY, usamos a sintaxe de seta. E então definimos nosso código nas chaves. Então, é muito parecido com a maneira antiga. É só um pouco mais rápido. Mas dependendo do que queremos fazer com nosso código, podemos até simplificá-lo ainda mais. Por exemplo, se você não tem parâmetros, que significa que não queremos passar variáveis ou argumentos, então você pode fazer isso. Deixe-me mostrar-lhe um exemplo. Se você não tem perímetros, criar expressões de função através da sintaxe de seta é super simples. Vamos dar uma olhada. Vamos definir uma variável chamada SayHi. E agora normalmente, nós teríamos que agora incluir a função de palavra-chave. Sim, não iríamos? Não com sintaxe de erro. Isso é o que é tão legal. Podemos ter apenas parênteses de abertura e fechamento. Agora temos que incluir a sintaxe de seta. E então temos abertura e fechamento de colchetes mais uma vez. E isso vai apenas para o log do console altamente. E agora, o que eu fiz de errado aqui? Para os colchetes, log de console, dizer alto ego, e se eu executar, diga oi, ele logs console, oi lá. Não há problema com isso. Mas nem temos que ter os suportes de abertura, Dewey. Podemos apenas ter o sublinhado e outros exemplos. Vamos dizer por igual. E sim, você pode apenas ter o sublinhado. Não pode ser muito mais simples. Net não pode ter a sintaxe de seta, os colchetes de abertura e fechamento. E sim, nós estamos indo apenas para o log do console pelo. E isso é, se executarmos esta expressão de função, obtemos pi Day. Ou se você tiver um parâmetro nos colchetes de abertura ou mesmo opcional, você nem precisa ter colchetes de abertura. Deixe-me mostrar-lhe outro exemplo. Okey-dokey. E se você tiver apenas um parâmetro? Bem, é muito simples. É definida uma variável novamente chamada SayHi. Lembre-se normalmente agora nós precisaríamos da palavra-chave function, mas porque estamos usando sintaxe de erro, estamos substituindo isso pelo erro. Então, o que fazemos? Bem, quando você tem um parâmetro, você nem precisa abrir e fechar parênteses. Você pode apenas escrever o argumento, Use a sintaxe de seta. E novamente, nossa opinião fechando colchetes. E agora tudo o que queremos fazer é o login do console usará literais de modelo. Alto. Nomeado. Lá vai você. Nós literalmente fizemos isso. Substituímos toda a forma complicada e pesada expressões de função em uma linha. E podemos consolar isto para ver se funciona. E diz, oi, indefinido. Esquecemos de passar um nome. Passamos em nome da rodovia da NSA. Então sabemos que funciona. E a maneira mais simples que podemos desenhá-lo como se estivéssemos apenas retornando uma expressão. Nem precisamos ter o aparelho encaracolado. Vamos dar uma olhada em um exemplo rápido de como isso se parece. E agora, se você está girando apenas uma expressão, você nem precisa de colchetes. Quão insano é isso? Deixe-me dar-lhe outro exemplo. Então vamos dizer que temos uma expressão de função e temos um, vamos colocar isso em uma variável poderia adicionar. Agora normalmente precisaria colocar a função. Nós não temos que colocar função poderia estar usando sintaxe de seta. Digamos que temos dois argumentos, num1 e num2. E tudo o que quer fazer agora é que queríamos devolver a adição destes dois. Então, ambos sabemos que normalmente o colocávamos entre parênteses e podemos. Mas o ponto é que com a sintaxe de seta, podemos acabar com isso porque agora estamos apenas retornando uma expressão. Estamos retornando nulo m1 mais m2. E quero dizer, isso é tão elegante, não é? É lindo. É como arte. E se executarmos esta função e passarmos em 12, recuperamos três, o ego, o hábito, o índice de aerossol é muito, muito mais fácil de usar. Ok, então essas são algumas diferenças sintáticas com a sintaxe das flechas, mas agora algo um pouco mais significativo. Benefício número dois, não há vinculação desta palavra-chave. Isto é tão crucial. A função de erro não se vincula. Assim. E, claro, isso é teoria. Deixe-me mostrar exatamente o que isso significa. 12. O que significa a ligação de ESTE significa?: Sobre o que é esta palavra-chave will? O que nós, o que estamos fazendo? Como funciona, e o que a alma sintaxe de erro para nós? O que significa quando diz que não há nenhuma ligação para isso? Vamos dar uma olhada no que tudo isso significa. Mas vamos começar com uma função de construtor muito simples. Lembre-se, com uma função de extractor, o valor deste é vinculado ao objeto recém-criado que está sendo criado. E isso faz sentido, certo? Bem, vamos criar uma função construtor Pessoa onde sentamos este nome igual. E lembre-se qual foi o segundo passo com uma função construtora. Era para usar a nova palavra-chave, aquela tribo. E quando fazemos isso, quando dizemos let user é igual a nova pessoa, o que estamos realmente fazendo é o valor deste está sendo vinculado ao objeto recém-criado para que significa que quando nos referimos a isso em nossa chamada de função, isso está se referindo ao usuário, o objeto recém-criado. E se nós consola logout usuário, podemos ver que agora definimos esta propriedade nome, que é nome do usuário para Molly. Então isso faz sentido, você sabe disso. Mas agora vamos cavar mais fundo. Vamos agora sentar um temporizador usando intervalo definido e intervalos de sentar na função JavaScript em massa. Vamos ver como funciona agora. Então vamos comentar isso para que não tenhamos nomes de variáveis conflitantes. E novamente, vamos definir a função Harrison. E digamos que este FirstName está fervendo. E agora o que quero fazer é dizer para ir e usar o quê? Eu só quero console log oi, cada 1 segundo para o console. Como faríamos isso? Vamos apenas definir um método chamado display. E vamos fazer isso igual a JavaScript no intervalo de sentados Bolt. E você pode ver que meu IDE realmente pegou para mim. Estou definido intervalo. Então como o intervalo doente funciona como você tem que ter parênteses e você pode ver meus IDs já dizendo que o primeiro argumento tem que ser o nosso manipulador. Em outras palavras, vai ser a nossa função. Chama-se destinatário. Os tecidos têm uma função chamada xerife. Podemos chamar-lhe o que quisermos. Na verdade, não importa neste caso. E fomos para o console, registramos na tela. Oi, então vamos fazer por enquanto. E o segundo argumento nesta função de intervalo definido. E se eu colocar uma vírgula ID já me diz que é o tempo limite. Isso é quantos segundos dominantes laboratórios antes que esta função seja chamada novamente. E isso é em milissegundos. 100 milissegundos é 1 segundo. E eles têm. Ele tem a nossa função. O que vai acontecer quando criarmos um novo objeto e executarmos isso, vamos dar uma olhada. Então deixe o usuário é igual a pessoa mu. E o que eu vou fazer agora na verdade é que eu quero colocar isso no console do Google Chrome, apenas vai ser mais fácil para nós ver os resultados de nós. Então, sim, ioga, ele tem o nosso console. Então tudo o que quero fazer é copiar esta função. Vamos para o nosso console e está colado aqui. E o que vai acontecer agora é cada segundo de altura será exibido para o console. E você pode ver que é exatamente o que está acontecendo. É o que esperaríamos. Mas o que acontece se quisermos exibir? O primeiro nome, Wally, todos os segredos. Acha que podemos fazer isso? Sim. A propósito, caso esteja se perguntando por que isso foi executado a cada segundo, basta dar um passo atrás e pensar no que fizemos. Definimos uma função construtora. Nós definimos um novo usuário, e nós executamos esta função construtor. O problema é que com o intervalo SEC é como quando o pacote passa por ele e executado, ele nunca pára. Nós nem definimos para parar com Sue vai continuar indefinidamente. De qualquer forma. Voltando ao ponto em questão, o que acontece se quiséssemos exibir volume não alto, mas alto? Então queríamos acessar o primeiro nome. Bem, seu primeiro pensamento pode ser OK, legal. Vamos usar literais de modelo e ir no log do console e ir alto. E nós registramos este primeiro nome, certo? Meio que fazer cenas que pareciam vamos copiar esta função. Isso é bom. Nosso console novamente nos parou em limpar o console. Agora vamos colar nossa função recém-criada. O que vai acontecer? Oi, indefinido. E este é o ponto que estou tentando fazer com expressões de função. Este método de intervalo de assento é apenas uma função normal. Não há nada de especial nisso. Mas o que está acontecendo é que esta palavra-chave está sendo definida para o objeto global, não está sendo enviada para o objeto recém-criado em quase ignora o escopo atual em que ele está. E ele apenas faz referência a isso como ao objeto global. E deixe-me provar isso para você, não o que deu uma palestra no topo. E agora lembre-se de como eu disse que dentro desta expressão de função, que esta palavra-chave, quando usamos uma expressão de função que está referenciando o objeto global, vai me deixar provar isso para você. E para provar isso a você, ou precisamos fazer, é nos livrar dele. Ela acabou de se livrar de todo o barco de console e apenas controlar isso. Então estamos fazendo. E vamos copiar essa expressão e ela é colada no Google Chrome. Agora o que vai acontecer? O ego, este é o objeto da janela que está sendo consolado a cada segundo para a tela. Novamente, de volta ao console. Então, estamos de volta ao console e sabemos qual é o problema. Não queremos que isso fique ligado ao objeto global. Nós quase queremos isso. Mulheres, quase queremos que isso fique vinculado ao contexto original. Não queremos substituí-lo precisando de nós. E isso é exatamente o que queremos dizer quando dizemos que a sintaxe de seta não vincula isso. Então digamos agora que queríamos que isso fosse vinculado em seu contexto original. Este é o ponto inteiro de uma sintaxe de seta. Então deixe-me mostrar a vocês, em vez de ter essa função de sintaxe mostrar, vamos substituí-la por sintaxe de seta. Então não precisamos da função e nem precisamos nomeá-la. Tudo. Precisamos abrir e fechar parênteses e o erro. É a única mudança que precisamos fazer. Agora, se copiarmos essa função e colarmos isso no navegador, ainda vamos do nosso exemplo anterior. Vamos atualizar a página. Limpe o console, cole a disfunção na necessidade. O que vai acontecer agora? Isso é perfeito porque agora temos console registrando o objeto de usuário recém-criado. E vamos parar com isso de novo. Deixe-me atualizar a página. Limpe o console. Voltamos aqui. Agora somos capazes de usar sintaxe literal. E podemos dizer, oi, este FirstName. E nós copiamos isso, colamos em nosso navegador. Devíamos receber o “oi “, Wally, a cada segundo. Como incrível como nós e espero que afundou em que isso é o que a sintaxe de erro está fazendo. Se voltarmos para a consola é só mais uma coisa que quero mostrar. Outra maneira de provar que isso está apontando para o objeto pessoa está dentro de nossa expressão de função. Sim, depois de definirmos o primeiro Nemo, mesmo antes que não importe, podemos dizer que o escopo tardio é igual a isso. E o que podemos fazer é que podemos console log escopo igual ao, esta palavra-chave. Faça estes dois iguais. E novamente, vamos copiar isso. Cole no nosso console. Será pratos claro no início, colado em nosso console. E devemos ser verdadeiros. E nós fazemos. Então lá vai você, lá está. Temos ido em profundidade sobre o que isso significa e a sintaxe de seta e como isso afeta a palavra-chave this. Espero que tenha se divertido. 13. Tempo de Recap: Que, senhor, aprendemos uma quantidade incrível em um curto espaço de tempo. E às vezes é bom dar um passo para trás e descobrir onde tudo se encaixa. Então foi isso que pensei que seria uma recapitulação muito rápida. Muitas vezes as pessoas ficam confusas entre variáveis, objetos e funções. Vamos ver o que lhes oferecem. Variáveis membro, dissemos que deveríamos estar usando constante. Deixe-o, esta é a nova sintaxe introduzida pelo ES6, const e late ou variáveis. E tudo que uma variável é, é um recipiente para armazenar um pedaço de informação. Pense na sua despensa. Você coloca comida em um recipiente. Você rotula o recipiente e coloca na prateleira. Isso é tudo uma variável, é apenas um contêiner. Quando usamos const, sabemos que não queremos que isso nunca mude, por exemplo, meu nome. Mas quando você usa a palavra-chave let, você declara que você realmente pode reatribuir essa variável se quiser. Então, por exemplo, todos os anos sua idade vai mudar. Variável de estatísticas, você tem isso coberto. Que tal um objeto? Ou um objeto também é como um recipiente. Mas ele não apenas armazena um valor que armazena um monte de pares de valor de nome e você separa cada par de valor de nome por comum. Já vimos isto. E para definir um objeto, você tem que usar esses colchetes. Isso é o que diz JavaScript, hey, este é um objeto tratado como um objeto. E finalmente temos funções que acabamos de passar. E uma função e eu gosto de pensar como uma palavra de fazer que faz alguma coisa. E aprendemos sobre a nova sintaxe de seta. E nós aprendemos que as diferentes maneiras de definir uma função você está olhando agora onde nós dizemos deixe com e nós usamos a sintaxe de seta, que é uma expressão de função. E vimos que devemos estar usando a palavra-chave return visa a execução da função. E como invocamos uma função? Como é que lhe chamamos? Como executamos isso? Você pode ver que todos esses nomes são apenas palavras extravagantes, mas todos eles significam a mesma coisa. Bem, para invocar a função com, temos que usar o nome off porque temos que dizer JavaScript qual função queremos chamar. E então nós apenas seguimos isso por parênteses. E é isso. Então dê um passo para trás, olhe para isso em um pedaço de papel. Tenha uma visão de pássaro. E então você pode começar a sentir por que precisamos dos três. Não podemos acabar com um. Espero que esta seção tenha sido muito, muito legal. E espero que tenha gostado do curso. Eu tive uma tremenda quantidade de diversão montando tudo. Adoro as coisas. E a boa notícia é que ainda não terminamos. Vejo-te em breve. 14. Método de toLowerCase () - introdução: Quem eu acho que o que eu ouvi esta manhã da nossa primeira vez, eu fiz uma sessão de ioga e estou despedaçado. Fizemos uma coisa chamada, acho que se chamava “Pássaro do Paraíso”. Piras explodiram minha mente. Então, de qualquer forma, estou com muita dor agora. Mas isso não deve nos impedir de aprender sobre JavaScript. E, muito especificamente, quero que aprendamos sobre esse método chamado dois minúsculos. Parece simples, mas eu só quero que você entenda exatamente como ele funciona porque é um método muito, muito útil fornecido a nós diretamente fora da caixa pelo JavaScript. Agora, embora não precise de argumentos, é um método super prático. Por quê? Bem, em muitos casos, você quer que seu texto ou você quer que suas strings sejam insensíveis a maiúsculas e minúsculas. Também conhecido como, você não quer maiúsculas para uma farsa, seja lá o que for que você está fazendo. Por exemplo, se você tiver uma lista e um usuário digitar em uma determinada palavra, às vezes você deseja ver ou comparar se essa palavra está na lista e você não quer que maiúsculas arruínem suas fórmulas. Nesse caso, por que não converter tudo em minúsculas? E para fazer isso, se usarmos as duas minúsculas emitidas. Então, sem mais delongas, vamos saltar para a apresentação rapidamente e vamos começar a falar sobre os dois métodos minúsculos desfrutando. Então, o que exatamente é esse método ToLowerCase? Muito simplisticamente tudo o que faz, e é muito intuitivo. Converte todo o seu gosto em minúsculas. Em outras palavras, o método toLowerCase retorna a string de chamada, a string que você chamou. Ele converte esse valor strings tudo em minúsculas. E eu poderia parar aqui, mas eu quero que você saiba um pouco mais sobre o método ToLowerCase. Em primeiro lugar, é uma função JavaScript que nos é fornecida pela linguagem JavaScript. Seconds QI não aceita quaisquer argumentos, mas não deixe que isso te engane. Ainda é um método muito poderoso. E o que eu realmente quero que você entenda ainda, e eu quero pausar sobre este ponto, é que o método ToLowerCase não altera a string original. Em vez disso, ele gera a nova string modificada. Levedura era todas letras minúsculas. Deixe-me pular para o console e deixe-me mostrar o que quero dizer com isso. Ok, então sabemos que o método em minúsculas não afeta a string original. Eu só quero provar isso para você agora, como eu vou fazer então? Vamos, vamos criar uma string e vamos chamá-la de uma frase original. E isso só diz, fazer isso igual a sapos loucos ou apenas, bem, você sabe, louco. Como é que isso? E então vamos criar uma nova frase. Então essa frase legal é mais baixa. E sim, quero que acessemos nossa frase original. E isso é o que eu quero que façamos a seguir em um eixo, o método de dois minúsculos. E o que é realmente incrível é que, porque temos uma string e esta frase original é corda esticada, nós automaticamente temos acesso ao método JavaScripts ToLowerCase. Como é que o acedemos? Vamos sair com a notação de pontos? E, claro, podemos começar a digitar toLowerCase e nosso IDE já pega esse método. Então eu posso apenas clicar em Tab. Parênteses abertas e fechadas para executar esse método. E estamos acabados e espanados. Agora, eu posso abrir um navegador e podemos conectar as coisas para a tela. Mas quero usar algo chamado Crocker. Vamos para a minha conta de extinções aqui. E eu comecei a digitar Crocker. E você pode ver que eu instalei co-ocorrem no meu IDE. É muito, muito útil, tão altamente recomendado. E tudo o que precisamos fazer para comandar Crocker é chamar a caixa de busca aqui. Pressionei a tecla Control Shift no teclado e quero iniciar um relógio ou no arquivo atual. É apenas um plug-in extra e permite executar JavaScript em tempo real neste arquivo. É tudo o que faz. Então aqui vamos nós e tudo o que eu quero fazer é anotar a frase original. E você pode ver que o azul leva dados. Isso é o que está sendo consolado, pernas o que está sendo devolvido para nós pelo JavaScript. E este é Crocker trabalhando. Ele só nos permite ver nossos efeitos em tempo real para o seu muito útil. Agora, o que você acha que vai acontecer quando retornarmos a sentença mais baixa? Bem, eu tenho certeza que você provavelmente já adivinhou. - Tudo. Vai acontecer é que teremos exatamente a mesma coisa que tudo em minúsculas. Mas o que eu consegui provar para você é que a nossa frase original, frase original que escrevemos juntos é inalterada. Este método ToLowerCase não altera essa string original. Ok, fazer santos são observados. Vamos continuar. Está bem, fixe. Então nós vimos que ele não altera a string original. Infectado gera um novo. Mas neste momento, você ainda pode estar coçando sua cabeça. Você pode estar sendo pego e ruído fornecido pelo JavaScript. Mas nós exatamente isso vem de. E a resposta para isso é rolo de bateria, por favor. Isso vem do objeto string em JavaScript. E lembre-se de que o objeto string é um objeto global para todas as strings. Mais uma vez, deixe-me saltar para o console e as imagens mostram onde podemos encontrá-lo. Vamos continuar exatamente de onde paramos. Lembre-se que escrevemos a frase, nós a convertemos em minúsculas. Agora, eu só quero provar para você que tem que ser em uma corda. Então, uma maneira de fazer isso é usar o tipo de operador. Então vamos fazer o registro do console. E vamos lá e tipo de. E queremos ver qual é a nossa hora original. E podemos ver o que é retornado para nós pelo JavaScript é um tipo de string. Então, sabemos nossos sintomas string variável original, e é por isso que poderíamos executar este método ToLowerCase. Mas você provavelmente se perguntando como é este método exato de um como você vê isso? Will, é muito, muito simples. Vamos abrir um navegador. Vou clicar com o botão direito do mouse no meu Chrome mu chamado Nieto. E vamos para o cookie do console. Vamos subir e subir o console. O museu Índia, para que você possa ver o que está acontecendo. E é muito simples. Tudo o que eu quero fazer é que eu quero console e fazer, a propósito, é diferente do registro do console. Isso nos dá o que queremos fazer quente. Mas no formato JSON como, em um formato de árvore. E, claro, o que eu quero fazer é que eu quero obter o objeto de string JavaScript. Porque lembre-se que sabemos que nossa frase original é uma corda. Então sabemos que é do tipo string. E se abrirmos uma corda, e de novo não é muito aqui. Temos ligações, temos nome. Mas o que queremos ver é este protótipo porque herda muitos métodos e propriedades. E porque é uma string, é um protótipo como uma string aqui, temos muitos métodos e propriedades do tipo string. E se rolarmos para baixo, devemos encontrar para minúsculas. E aí está ele. E nós literalmente o encontramos, você sabe, exatamente de onde ele vem. Fazendo parece que ainda não terminamos. Então vamos voltar para a palestra. Vimos que ele vem de um objeto string e um caso alto, é bastante intuitivo que só funciona com strings. Se você tentar analisar em outros tipos filha, como nulo indefinido, nós mesmo um número que parede analisador JavaScript jogá-lo um erro. Na verdade, você receberá um erro de tipo. Então, apenas certifique-se de pegar o tipo antes de analisá-lo nesta função. Caso contrário, seu aplicativo falhará. Do que é que estou a falar? Bem, deixe-me saltar para o console mais uma vez e leva para codificar juntos só para ver isso em ação. Uma última coisa antes de terminarmos isso, lembre-se que dizemos que ele só pode ser usado em um tipo de string. Então vamos rolar para cima com realmente acabado fora vai estar pegando exatamente onde paramos. Está limpando o console. Então, o que isso significa? Bem, isto significa que se tivermos um número, digamos apenas 85 e tentamos aceder a minúsculas. O que acha que vai acontecer? Bem, recebemos um erro de sintaxe, token inválido ou inesperado. Não podemos chamá-lo de método ToLowerCase em um número. Faz sentido. Que tal uma espécie de matriz? Digamos que temos uma morena só com um item chamado BU. E tentamos ter acesso a minúsculas como econômico. Não, recebemos um erro de tipo. Não podemos chamar essa função nisso. E quanto ao indefinido? Bem, se tentarmos acessar novamente a minúscula no indefinido, novamente, não vai funcionar. E agora se tentarmos nulo? Acho que vai funcionar. Então este é o ponto que estou tentando fazer. Nós só podemos acessar o método ToLowerCase em strings. Espero que esteja se divertindo e tenha discutido muito. Então, este é apenas um pouco mais de detalhes sobre ToLowerCase método que você pode não ter conhecido anteriormente. Chaveiro fique motivado e te vejo na próxima palestra. 15. Método de array.from() - Introdução: Espero que esteja se divertindo muito neste curso. Tanto quanto eu sou. Adoro juntar essas coisas e saí ensinando o que aprendi ao longo de muitos, muitos anos. De qualquer forma, a próxima coisa que eu queria que nós discutissemos muito brevemente é outra cama muito útil, uma função pouco avançada em JavaScript chamado array de. E o que esse método faz? O que o nível muito, muito, muito básico, tudo o que ele faz é criar um array, mas não de um array, porque eles seriam inúteis. Ele cria uma matriz de dois tipos de coisas diferentes. Cria uma matriz a partir de um objeto semelhante à matriz. E tudo o que quero dizer com isso é que é um objeto que tem uma propriedade length. E dois, você pode criar uma matriz a partir de um objeto iterável. Obrigado Doc conheceu pulsate. De qualquer forma, isso não é importante agora. A coisa importante a entender é que o array from método toma algo e converte-o em uma matriz. Então por que queremos fazer isso? Will, se pudermos criá-lo em algo como uma matriz, podemos ter certos métodos e propriedades disponíveis para nós que podemos usar naquele objeto recém-criado, uma matriz inteira criada por Tetraedro. Então, digamos meio que fazer santos. Não se preocupe se não é a primeira coisa que eu quero que você entenda o que o array from método é, que ele está na matriz em si. O que eu quero dizer com este limite, saltar para o console e rapidamente mostrar-lhe. Tenho o meu console aberto. Sim, e a única coisa que quero mostrar-te é uma maneira de encontrares isto do acasalamento. E como eu mencionei, ele está no objeto array dentro do próprio JavaScript. Como posso provar isso? Bem, primeiro, vamos apenas consolar a matriz. E se fizermos isso como a matriz fornecida a nós pelo JavaScript, abrimos isso. Deslocaremos para baixo. E aí está ele. O, é o de torna muito simples, certo? Então lá vamos nós. Sabemos que a matriz do método como encontrado no objeto matriz do JavaScript meio que faz sentido, certo? Mas ainda não terminamos. Deixe-me saltar para a palestra e vamos falar sobre esse método com um pouco mais de detalhes. 16. Array.from() - como funciona?: Então, o que exatamente é o subarray do método tudo sobre? Vamos muito intuitivamente, e basicamente tudo o que ele faz é que ele cria uma matriz a partir de um objeto tipo array em objeto iterável. Mas não vou entrar nisso agora. Da mesma forma, assim como o método ToLowerCase, a matriz da metodologia é uma função JavaScript pura. Na verdade, ele foi introduzido como parte do ES6. Es6, a propósito, foi apenas uma grande revisão e atualização para ES cinco. E você provavelmente não está coçando a cabeça, mas você pode já ter esquecido de onde ela vem. E acabamos de ver que vem do próprio objeto de matriz. Mas estas são todas coisas que você já sabe. Então, como funciona? Bem, é muito fácil acessar esse método. Começamos acessando o objeto matriz do JavaScript dentro de xi's, o método from. E o método front leva um argumento e seu argumento é um objeto de matriz. Mas antes de falarmos mais sobre o que ele faz, ele chega ao editor de codificação e leva a ver como ele funciona em ação. Antes de começarmos a entrar em mais detalhes sobre a matriz do método, eu só quero que você entenda como ele funciona. Então lembre-se do que eu disse. Ele tem que ser um objeto de matriz em objeto iterável, a fim de que possamos usar esta matriz a partir do método. Então, como funciona? Bem, vamos definir um objeto tipo array. E isto é muito, muito simples aqui. Vamos dizer o quê? Ok, então sabemos que é uma corda neste caso. Como é a matriz do Luke? Bem, em primeiro lugar, eu só quero dizer Aflac Corker, fogão aberto só nos permite executar JavaScript em tempo real dentro do nosso editor de texto. Então não temos que continuar pulando para o navegador. É muito mais rápido subir o seu código. É muito útil. De qualquer forma. Como funciona? Bem, vamos registrar algo no console e vamos acessar o objeto de matriz do JavaScript no nome. Sabemos que há um método chamado de. E nós queremos passar em nossa matriz como e como você pode ver, ele leva nosso objeto tipo array valem a pena e ele converte em uma matriz, que é realmente, realmente incrível. E vocês podem ver aqui, nossa matriz consiste apenas de cada litro nessa corda. E é tudo, está feito. A parte de cima volta para a palestra. Esfria e faz coisas. Olhamos para um exemplo muito simples. Mas tenha em mente que o que significa esse objeto semelhante a uma matriz? Apenas significa que o objeto precisa ter uma propriedade length e elementos indexados. O que eu quero dizer com isso? Bem, vamos saltar para o console novamente neste basta olhar exatamente para o que eu estou falando. Fluoreto. Então nós olhamos para este exemplo aqui, mas como e por que ele funciona? Lembre-se, a matriz do método não funcionará em tudo. Na verdade, como a descrição meio temporada, como falamos, ele só funciona em matriz como objetos. E o que isso significa é que o objeto precisa ter uma propriedade length e elementos de índice D4. O que eu quero dizer? Bem, tem uma consola. Então deixe-me clicar com o botão direito do mouse no Google Chrome aqui. Novo IMRT incógnito. Deixe-me ir a um console. E meio que fazendo cenas. Você pode ver isso? E lembre-se do que dissemos. Vamos apenas definir cão ou objeto como matriz como valor. E sabemos que a matriz do método funciona em nós. Acabamos de ver um exemplo disso. Bem, para mostrar a vocês, vamos fazer essa matriz como objeto e eu quero olhar para seu próton. Bem, para mostrar a vocês, vamos fazer E se carregarmos isso para fora, sabemos que é do tipo string. E se abrirmos o método string, o que é incrível é que temos essa propriedade link. Isso é o que eu quero dizer com um ID de objeto semelhante a matriz tem que ter essa propriedade link para que a matriz de faz funcionar. Lá vai você. Hope está fazendo cenas. Vamos voltar para a palestra ou probabilidades. Espero que esteja começando a fazer mais sentido para você. E lembre-se do que eu disse antes que é preciso mais de um argumento. Na verdade, pode levar até três argumentos, pode pegar um mapa, e pode levar o que você quer que isso se refira. E tenha em mente, esses argumentos são opcionais. Você não tem que colocá-los nesta função em tudo. E muitas pessoas realmente combinam o, este argumento opcional na função do mapa em si. Então muitas vezes você vai ver apenas dois argumentos na matriz do método. De qualquer forma, eu não quero entrar em muitos detalhes sobre isso. Posso mostrar-lhe rapidamente sobre o que é o mapa. Então, no topo para o editor de texto novamente. E vamos dar uma olhada em como isso funcionaria. Por último, mas não menos importante, vamos ver como o segundo argumento para a matriz da função funciona. Sobre o que é tudo isso? Bem, vamos apagar tudo o que tínhamos na tela anteriormente. E isso define uma matriz é apenas dizer que a nossa matriz tem um cão e você adivinhou. Um gato. Auto-estrada, simples. Agora o que eu quero fazer é definir uma função manipuladora. Eu quero levar tudo dentro desta matriz e eu quero fazer logout para a tela para que ele é usado palavra-chave de função do JavaScript. Isso é legal. Ele manipulador, podemos chamá-lo do que quisermos. A mão vai levar um animal em cada caso. E tudo o que eu quero fazer é que eu só quero retornar uma declaração e eu vou estar usando literais modelo aqui. E o que eu vou dizer é que eu vou dizer que eu vou dizer um animal andando, andando. Então lá vai você. Isso não é nada muito profundo. É uma função muito, muito simples. Agora o que eu quero fazer? Bem, vamos log console existe o array from método. Sabemos que queremos acessar esse tipo de array. Uma mão tem, você pode ver aqui, se nós apenas mantê-lo com um argumento, literalmente não faz sentido para nós fazê-lo porque ele é um array já. Portanto, não há nenhum ponto de criar uma matriz a partir de uma matriz. Mas é o segundo argumento desse mapa que quero que entendamos. E o segundo argumento é o que definimos como essa função manipuladora. E lá vamos nós. Voltou para nós. Na tela é um cão andando e uma caminhada cacarejada. Este é um novo array. Agora, ele criou um novo array, e ele é tomado, cada item na matriz original custa através de uma função de mapa, e ele retornou para nós uma nova matriz. Isso faz sentido? E é disso que se trata. Espero que esteja se divertindo. E eu acho que agora você tem uma boa sensação intuitiva. Segue trabalhos. Tão bem feito. Estou muito, muito impressionado. Espero que esteja morrendo de vontade de fazer um pouco mais de cenas. E não se preocupe, à medida que você se deparar com eles em sua carreira de codificação, você começará a usá-lo cada vez mais e isso se tornará muito mais intuitivo. Eu só queria que você soubesse sobre o array de MRD porque é um, ele pode ser extremamente útil, que me traz para o próximo tópico. E é por isso que precisamos saber sobre a matriz de MTD. Por que eu sequer discuti isso neste curso? Vamos às vezes queremos trabalhar com métodos que estão disponíveis a partir do objeto matriz. Por exemplo, o para cada método só está disponível no objeto de matriz. E para acessar esse método, às vezes temos que converter o que estamos trabalhando dentro do nosso código em uma matriz. Isso faz sentido? E acima disso, o array from método é extremamente útil. Ele permite que você faça muitas outras coisas, como clonar arrays, remover duplicatas, até mesmo preencher um array, etc, etc., que são muitas coisas que você pode fazer. E, com certeza, você vai usar menos ao trabalhar com coleções DOM. E isso me traz de volta a isso primeiro, às vezes queremos usar métodos que só estão disponíveis no objeto array. Então, quando você está trabalhando com uma coleção DOM, por exemplo, e HTMLCollection. Às vezes precisamos converter isso em um objeto array, a fim de acessar os métodos que queremos. Então eu acho que o que eu estou tentando dizer é que ele vem a calhar quando você encontrar e trabalhar com um objeto de matriz. Ele está fornecendo um pouco mais de clareza sobre o que este método faz. Não se preocupe, só estamos entrando nisso. Então não entre em pânico se você não entender completamente. Gh, ele virá através do tempo. Espero que você tenha gostado deste legal até agora Huike, ficando motivado e eu vou vê-lo na próxima palestra. 17. Método de indexOf() - introdução: Outra função muito incrível em JavaScript é conhecido como este índice de função. E o que é que ele faz? Bem, em nível muito básico, que lhe diz se um dado item pode ser encontrado em uma matriz ou uma string. O índice do método foi adicionado ao 8ma 262º padrão na quinta edição. O, o que isso significa é dito a Eleusis adicionado em terceiro de dezembro de 2009. Então o que estou tentando dizer é que você não precisa se preocupar com navegadores que não incorporam esse método. Cada navegador hoje permitirá que você use o índice de método. Ótimo cliente, navegadores antigos podem aceitar um cachorro. O que parece quando começamos a usá-lo? Em primeiro lugar, você chamar o índice de método digitando suas palavras, é índice de palavras-chave off. Aquele Dean aceita dois argumentos. O primeiro argumento é o item de pesquisa e também conhecido como o item que você deseja procurar. E o segundo argumento é opcional. É o ponto de partida da sua pesquisa. Não se preocupe, vamos ver exemplos disso em breve. Então o ego, isso é o que parece, alto nível. E como eu mencionei, nós vamos estar olhando para exemplos. Mas antes disso, isso é algo muito importante que você precisa entender. E esse é o método IndexOf só existe para dois tipos filhas em JavaScript. O primeiro tipo de filha que existe ao apagar. O que é um array? Em JavaScript? E array é apenas uma única variável que é usada para armazenar diferentes elementos e ter em mente, a matriz JavaScript é um objeto global, que significa que você pode tipo de acessá-lo de qualquer maneira que você gosta. Mas chega de conversa. Na verdade, quero pular para o editor de texto e começar a codificar um aumento com você. E eu quero começar a olhar para este índice de método, especificamente em arrays. Vamos saltar para a consola e ainda está a brincar. 18. Como usar indexOf() com matrizes: Certo, então aqui estamos. E quero que comecemos a codificar juntos, mas quero que façamos passo a passo, lentamente, pegamos um macaco. A primeira coisa que mencionamos é que este índice de existe em $2 tipos em JavaScript. E o primeiro top automático que estamos olhando é o array. Então deixe-me provar para você antes de ir mais longe em nossa codificação, eu fui para o registro do console. Tudo o que é apenas console fazer fora do objeto matriz. Se abrirmos isto e olharmos para o seu protótipo é um índice de método, eles, vamos, consegues ver-nos? Então agora eu acabei de provar a vocês que ele existe na matriz, esse objeto array global em JavaScript. É assim que vem. Tudo bem, então agora vamos para a nossa codificação. É, é para cima. Eu só tenho um arquivo app.js vazio aberto aqui, e eu estou executando coca caucus. Muito útil, a propósito, varia. Muito útil. Continuo dizendo isso, mas é muito bom. Ok, a primeira coisa que eu quero chegar até você é um como um array, Will 50. Vamos criar uma matriz e usá-la pelos colchetes. Sim, e eu só quero dizer, eu sou o primeiro elemento. O segundo elemento. E você adivinhou, eu sou o terceiro elemento, C. Aqui vamos nós, criamos uma matriz. Usamos esses colchetes. E como acessamos arrays? A primeira coisa que quero mencionar é que matrizes JavaScript ou Sarah. O que eu quero dizer com isso? Eu só quero dizer que o primeiro elemento de uma matriz é sempre índice em 0. E o último elemento sempre pode ser encontrado no índice que é igual ao valor da propriedade length da matriz minus1. Deixa-me mostrar-te o que quero dizer. Então vamos registrar nosso array no console. E lembre-se como eu disse que é 0 indexado x é o primeiro item na matriz. Nós digitamos 0. Sou o primeiro elemento. E é claro que não fizemos isso para os próximos itens, certo? Podemos ir 012 no primeiro, no segundo e no terceiro elemento. Faz sentido? E a outra coisa que eu quero mencionar é que cada array tem uma propriedade length. Então, se nós consola logout nossa matriz e acessamos esta propriedade chamada links, sabemos que nossa matriz tem três itens. Então, uma dica muito útil quando se trata de codificação. E eu até vou entrar aqui, podemos sempre Xs o último item na NRA como este. E isso é muito, muito útil. Portanto, lembre-se disso para digitar a solução. Pense no que acabamos de fazer. Sabemos que o comprimento da matriz é três. E se você olhar para o log do console logo acima, sabemos que acessamos o último item, eu usando array e o índice dois. E lembre-se, matrizes JavaScript são sempre indexados em 0. Então sabemos que o último item na matriz é o comprimento da matriz, que é três menos um, o que nos leva a dois. Então, tudo o que estou tentando dizer é acessar o último item na matriz. Tudo o que temos que fazer é acessar nossa matriz. E agora, se você não sabe qual é o link, é muito útil acessar a propriedade link, que neste caso é indefinida porque não há quarto item na matriz. Então você sempre menos1. Faz sentido? Espero que sim. E os herbicidas têm uma sensação mais intuitiva sobre como as matrizes funcionam. A outra coisa que quero mencionar, líderes logísticos. Homens odeiam apagar coisas às vezes. Passamos tanto tempo para tentar obter pontos e eu apenas deletei, é um pouco triste, homem até o flúor, mas de qualquer maneira, vamos criar uma nova matriz, 123. A outra coisa que eu quero apenas mencionar com arrays que são bastante peculiares é que você não pode usar a notação de pontos para acessar itens. Este é um ponto importante. Então, por exemplo, nós consola log nossa matriz e tentamos obter o primeiro item. Não nos vai deixar fazer isso. Na verdade, recebemos um erro de sintaxe. Então tenha isso em mente. E não é, você sabe, há nada de especial nisso. Infectar. As propriedades Javascript que começam com um dígito nunca podem ser referenciadas com documentação devem sempre existir ao usar a notação de colchetes. A nuance do JavaScript, não se preocupe. Ok, mas você provavelmente está se perguntando cliente, Eu não quero aprender sobre arrays. Estamos no tema do índice de n. Você está 100% correto. Eu só queria que você se familiarizasse com matrizes antes de entrarmos nela. Ok? O ponto que eu quero fazer com index falls é que ele retorna o primeiro índice no qual um determinado elemento pode ser encontrado na matriz ou não existe na matriz. Minus1 é retornado. O que eu quero dizer? Vamos definir uma matriz chamada animais. E tem um javali que tem uma girafa. E diz que tem um búfalo. E diz que tem uma linha. Como funciona? Bem, vamos olhar. Vamos registrar o console para que possamos realmente ver o resultado do que estamos produzindo. A primeira coisa a fim de acessar nosso índice de é acessar um array. E a matriz que vamos acessar é a nossa matriz de animais. Queremos agora acessar o índice de método que tem embutido em todas as matrizes. E vamos procurar conversa. O que esperavas ver? Onde estão os javalis? Isso mesmo, está localizado no índice 0. Lembre-se matrizes JavaScript são sempre indexados no Bass Sarah. Então, se tentarmos encontrar javalis, podemos ver que voltou para nós é 0. Isso faz muito sentido. E eu vou apenas duplicar este código. Vamos procurar por Buffalo. Qual você acha que o número do índice que será? Vamos escrever o número esperado para ver se está certo. Agora o que eu quero fazer é, vamos procurar um cão. O que achas que vai acontecer com o cão? Bem, como eu mencionei, se não for encontrado, um negativo é devolvido para nós como um mixins. Então lembre-se, negativo significa que não foi encontrado. E a última coisa que eu quero mencionar pouco antes de seguirmos em frente é que o índice de método compara elementos em sua matriz usando igualdade estrita. Em outras palavras, usando o mesmo método usado pelo sinal de igual triplo. Apenas lembre-se disso. Ok, Clyde, isso está tudo bem, mas estamos usando apenas um argumento neste índice de matriz. Eu quero usar ambos e eu quero entender isso mais detalhes enquanto é bom ouvir meu colega estudante. Vamos apagar todos esses consoles. Vamos agora procurar este animal devastado pela guerra. Mas vamos dizer o nosso índice de método. Nós só queremos começar no segundo item em nossa matriz, um de índice um em diante. O que você acha que vai acontecer então? Vamos para o nosso segundo argumento neste método. E digamos que queríamos começar a partir do segundo item na matriz. Bem, é claro que não existe porque sabemos que estamos olhando de girafa em diante e que não há rebocador de parede. Este olhar para outro exemplo que é agora olhar para Mozilla. E vamos dizer ao nosso índice de acasalamento para procurar, digamos, o terceiro item na matriz número dois. E neste caso, ele retorna nosso número de índice. Então é muito, muito legal. E sabemos que existe. É assim que funciona um segundo argumento. Zai Kai, fazendo sentido. Espero que assim temos trabalhado muito com arrays, mas agora eu vou saltar de volta para o canal tardio um é olhar para o segundo tipo filha, onde podemos começar a usar este índice de método. 19. Como usar indexOf() com strings: Estou me divertindo muito. Espero que tenha aprendido muito. Vamos voltar para onde começamos. Lembra-te que dissemos que só existe em duas filhas. Este índice de método, o topo de primeira ordem que vimos como matrizes. O que acha das fraldas de segunda ordem? Bem, está desenrolado, por favor. Então este slide que você está olhando aqui é um muito importante, dá-lhe uma visão geral muito alto deste índice de método. Analisamos uma tonelada de exemplos com matrizes. Eu quero terminar esta palestra agora olhando exemplos com a gente trabalhando com cordas, eles começam a ver como isso funciona. Vai ser muito divertido. Confie em mim. Ei, uau, isso é muito legal. Acabámos de fazer matrizes, mas agora quero que fiquemos em cordas. Como é que isso funciona? E é realmente excitante. Você não vai ver. Então vamos pular para isso. Cou, tudo bem, por onde começamos? A primeira coisa que eu quero mostrar aqui é se nós temos nosso console, nós console, o array, é apenas realmente limpar um console e vamos fazer o mesmo com os pontos fortes. Bastante direto. Temos sido uma corda. Olhamos para o seu protótipo. Nós rolamos para baixo e eles, meus queridos alunos é índice deste é uma segunda conversa filha e JavaScript que nos dá acesso a este método útil incrível. Então você vai, eu só queria provar para você que ele é encontrado neste tipo pontilhado também. Se voltarmos para o nosso editor de codificação, LETE ponto olhando para isso em ação. Então vamos deletar nossa Eurásia. Nós olhamos para as matrizes. Agora cria, não sei, uma frase. E é só dizer “Olá, mundo”. O universo. Muitas vezes sei o que há de errado com o meu tópico hoje. Te dá as boas-vindas. Hoje vou sentenciar, sabemos que este é do tipo string. Como é que sabemos isso? Todo o seu tipo de frase de log de console. E é bastante óbvio que sabemos que é uma corda. Porque sabemos que é uma corda. Sabemos que temos acesso a este índice de método. Então vamos definir uma variável chamada AIM, que é excesso de sentença al. E vamos procurar alguma coisa. Vamos procurar pequenas palavras bem-vindas. Vamos ver como mortes, de que maneira você acha que isso seria? console entra na tela e temos um número 26. Por que 26? Will? Não está contando juntos. Sabemos que este é o índice 012345678910111213141516 17181920. Vinte e um, vinte e dois, vinte e três, vinte e quatro, vinte e cinco. E, claro, 26 é maneira bem-vinda começa. Muito, muito útil. Método é definir uma constante chamada sentença adenoma. Novamente, e digamos apenas, hey, você está aprendendo muito neste curso? Espero continuar aprendendo. Vamos começar a usar este ponto de lista de índice. Obtendo campo mais intuitivo, vamos definir uma nova variável JavaScript chamada palavra de pesquisa. Isto é o que queremos procurar. E digamos que queremos procurar o aprendizado de palavras. Podemos ver em primeiro lugar, direto do bastão, temos duas palavras, não é? Aprendizagem e aprendizagem. Então, tenha isso em mente. Vamos definir uma nova variável chamada primeira vez. E vamos acessar nossa constante frase. Isso é acessar este índice de método. E vamos procurar a palavra. Vamos registrar o primeiro tempo limite do console. São oito, e sabemos que são oito porque é o oitavo personagem desde o início é esta primeira palavra aprendendo. Mas agora, como acessamos a segunda palavra de aprendizagem? Como vamos fazer isso? Deixa-me dar-te uma pista. Vamos utilizar o segundo argumento no método OLS índice. Então tudo o que temos que fazer é definir uma nova variável chamada segunda vez. Vamos sair da nossa sentença. Acabei de perceber uma frase impecável incorretamente. Então vamos excesso de índice fora. O que queremos fazer agora é procurar por todas as palavras de busca. Não se preocupe. Desta vez, queremos utilizar o ponto de partida. E por onde queremos começar? Vamos começar o, é fundado primeiro item, que é a primeira vez, mais um. Então agora sabemos que ele vai procurar através de nossa matriz, mas apenas começando depois que passamos a primeira palavra de aprendizagem. Espero que isso esteja fazendo sentido. Se sairmos do console, chegaremos ao 44, que é exatamente o que esperaríamos. Usar probabilidades de índice desta forma pode ser muito útil em seu código e você pode fazer muitas coisas com ele. Eu não sei. Vamos dar-lhe um exemplo. Vamos definir uma solução legal variável, vamos usar literais de modelo e digamos o índice do primeiro. E usaremos a palavra de pesquisa variável. A palavra desde o início é: E vai ser a primeira vez. E se retornarmos isso à tela, literalmente obtemos console.log para nós. O índice da primeira Palavra de aprendizagem desde o início é 80. Quão incrível é isso? Nós combinamos um monte de coisas que combinamos literais modelo, combinando o sinal de dólar chaves para incorporar expressões e variáveis com em nosso modelo literal. É muito, muito legal e vai te ajudar muito ao longo do caminho. Claro, podemos fazer o mesmo para solução para solução para. O que acabamos de copiar isso em vez de fazer tudo de novo. Sabemos que esta é a segunda busca onde desde o início não é a primeira vez, a segunda vez. E se devolvermos isso, teremos exatamente a mesma coisa. Mas agora estamos fazendo referência à segunda palavra de aprendizagem. Porque eu sei que às vezes nos empolgamos e talvez eu esteja indo um pouco mais avançado do que você precisa saber agora. Mas confie em mim, isto vai ajudar-te a codificar a Coreia. E eu quero que você se torne um mestre em todas as coisas. Espero que seja hora de fazer sentido. A outra coisa que quero mostrar é que vamos apagar tudo. Quero mostrar-lhe que o caminho do índice é sensível a maiúsculas e minúsculas. Então, o que eu quero dizer? Will, se tivermos uma palavra e a palavra for “cão violado”. Se agora consola log e acessamos nossa string de palavras, acessamos o método de índice e procuramos por cão. Sabemos que existe. Novamente, isso faria sentido, mas e se fizéssemos o mesmo? Mas sim, fomos procurar a palavra vermelho. Como você pode ver, é sensível a maiúsculas e minúsculas. Tínhamos devolvido um negativo, também conhecido como não existe. Se mudarmos o pequeno r para grande R, ele existe. É infantum, o primeiro item em nossa matriz. Espero que o seu aprendizado no momento. A última coisa que eu quero passar é que 0 não avalia como verdadeiro e negativo não avalia como falso. Lembre-se se temos um pequeno r, é um negativo que não coage a falso. É uma nuance estranha quando se trata deste método. Então, como é que te vou provar isto? Vai me deixar prová-lo para você usando JavaScripts if declaração. E o que eu quero transmitir aqui, eu quero dizer se é uma palavra, certo, contém, digamos, taxa. Se denso for avaliado como falso, então vamos executar este código. Digamos que o registro do console. Este é o início correto. Início. Senão log console, este é o início errado. E agora você verá um problema. Você verá que por causa da cloaca, o que nos é devolvido é a resposta errada. Sabemos que o pequeno r não deve existir em nossa cadeia porque ele só tem o capital em nosso radar. Então, por que estamos batendo o segundo log de console em nossa declaração se? A razão é, é que o negativo não é avaliado como falso. Eles caem, vamos bater este início e é a resposta errada. Portanto, o ponto que estou tentando fazer é que ao verificar se uma string específica existe dentro de outra string, a maneira correta é usar minus1. Por exemplo, se substituirmos false por minus1 mentiras, não está funcionando. Menos 1 d vamos, temos a resposta correta desta vez. Pontos muito, muito importantes que acabei de compartilhar com você. Por favor, tenha isso em mente. Então z você tem. Acabamos de usar o índice sobre os raios. Só usávamos com cordas. Nós discutimos várias maneiras que você pode usar a. Sabemos que como k cenas que têm janela que você não pode tipo de coerciva negativo para falso. E estes são tópicos muito avançados. Então, não tome isso como garantido. Celebre as pequenas vitórias. De qualquer forma, vamos seguir em frente e te vejo na próxima palestra.