Tutorial de Javascript e ES6 completo: incluindo ES7 e React (2/2)

1. Como apresentar cursos: classes em JavaScript permite construir modelos de objetos baseados em dados relevantes e comportamento de objetos do mundo real. Isso introduz um sistema de herança entre classes relacionadas. Isso nos ajuda a encontrar semelhança entre objetos. Os programas descrevem como esses objetos estavam latentes, interagem uns com os outros para calcular dados e avaliar condições. Para definir uma classe, usamos a palavra-chave classe e dar a uma classe os dados atribuídos usando uma função de construtor especial que o construtor cria e inicializa é um objeto para essa classe com base nas informações únicas que gostaríamos de dar-lhe. Se você quiser criar novas classes com base nas existentes, agora podemos usar a palavra-chave extends, a fim de fazer subclasses e Filhos de classes pai . Vamos explorar as aulas com um exemplo, e continuaremos com o tema com o qual você pode estar familiarizado e algo que você possa gostar. O Rei Leão. Agora todo mundo em O Rei Leão de Simba tis como você é um animal então na própria base terá em classe animal. Este animal terá então alguns dados de objetos muito básicos, como um nome e hype. Ele ainda terá um método dentro dele chamado Olá. Isso diz uma mensagem de qual é o seu nome e de onde vem. Outras classes serão capazes de estender sobre esta classe baseada em animais. Então vamos supor que temos uma classe mentirosa que estende animais. Ele vai herdar o nome e esperar dados de Animal, mas nós poderíamos modificar seus dados um pouco para uma linha. Poderíamos dar ainda mais dados, como a cor do seu para e atualizar o hello metanfetamit, a fim de dizer seu nome e que é do Pride Rock. Excelente. Agora essa lógica pode se estender a uma infinidade de classes e também herdar de animais. E você pode imaginar o grande número de objetos que poderíamos apresentar. Afinal, na terra temos girafas, pássaros, javalis e muito mais classes potenciais para criar com base nesta classe animal. Vamos passar a ver essas classes em ação 2. Como definir cursos: vamos criar nossa situação de primeira classe seguindo essa linha. Exemplo Rei. Primeiro queremos uma classe animal, então use uma palavra-chave de classe e chamaremos de animal. E então para o corpo da classe, é apenas um par de chaves como qualquer outro escopo ou função. Agora, dentro dessa classe para inicializar os dados do objeto, usamos o trabalho de chave de construtor especial. O construtor pode tomar qualquer número de parâmetros. Decidimos dependendo dos dados relevantes para esta classe específica. Então lembre-se que queremos um nome e altura para todos os nossos animais Agora, dentro do construtor, podemos começar a modificar o objeto que é criado para a classe com a palavra-chave this. Então precisamos especificar isso. São este para o animal agora tem uma chave de nome um sinal do nome que passamos dentro da lista de argumentos construtores. Então diga que este nome de parada é igual ao nome. Da mesma forma, isso para a classe precisa de um chá alto um sinais da altura que passamos como um segundo parâmetro. Esta altura do Saad é a nossa altura. Agora não se confunda com o fato de que temos um nome à esquerda e à direita. A variável name que você vê à direita se refere ao nome que está passando pelo construtor. Da mesma forma, a altura que está à direita está se referindo à variável altura que é passada através do construtor. E nós poderíamos realmente chamar isso de qualquer coisa que quisermos, como A ou B, desde que você especificou que este nome não é agora igual a um neste, que altura é igual a ser. Vamos reverter essas mudanças. Tudo parece bem para o animal construído. Podemos ilustrar melhor como esta classe funciona criando uma nova instância da classe animal . Então crie uma nova variável rei deixar Rei igual e atribuí-lo à nova palavra-chave, seguido de animal e um par de parênteses. As novas palavras-chave significam para JavaScript toe procurar uma classe ou tipo de objeto. Agora olhe para o animal e seus parênteses. Você percebe que ele parece muito semelhante a uma função bem dentro desses parênteses. Como uma função. Nós podemos especificar o que queremos passar como parâmetros para o construído agora, então vamos dar-lhe mover fossa para o seu nome mais Fatah e, em seguida, 4.5 para a sua altura porque meu chefe é uma linha muito alta como nós salvar. Devemos agora ter uma variável de classe rei. E então vamos em frente e Conselho Dot Log King e checar Be Constants. Vamos salvar e Boom. Temos uma nova classe animal com o nome de Move fossa e uma altura ajustada para 4,5. Muito legal. Agora, que tal adicionar um método especial? A classe chamada HeLa que nos dá uma boa saudação do nome dos animais e de onde vem ? Vamos ver o construtor às oito. Olá, Method. Logo após construtor, Diga olá e, em seguida, esta saudação vai dizer algo como alto no nome repentino do reino Animal. Então, usamos uma string de tablet para conseguir isso. Será que o Cônsul vai registrar uma temperatura de lixo alto? Eu sou esse nome de ponto, e para acessar esse nome filho, vamos usar o cifrão e par de chaves. Então podemos apenas dizer o nome do estoque porque temos o nosso objeto dentro da classe animal . Agora havia apenas, digamos, do reino animal, Grande e não usar este método. Vamos tirar este registro constante e, como um objeto, acessá-lo com o ponto rei período Olá, como salvamos. Oi, sou Mufasa do Reino Animal e prazer em conhecê-lo. Mova a Fossa. Ótima. Acabamos de ver nossa primeira classe de animais em ação. Vamos avançar para estender essa classe para criar uma criança e estender nosso conhecimento sobre seis classes e herança dos EUA em geral. 3. Herde cursos: Vamos criar uma classe filho da classe animal para mostrar herança trabalhando em JavaScript. Lembre-se que herança refere-se a esta idéia de que podemos criar cláusulas fora de uma classe base e receber todas essas propriedades da classe pai. Digamos que queríamos definir uma classe mentirosa. Começamos a relação clássica normalmente, mas então, a fim de herdar do animal, sabemos especificar que esta classe de leão se estende sobre o animal. Então vamos dizer que o leão da classe estende animal grande. Desde linha estende animal, já podemos criar instâncias da classe de linha e dar-lhe alguns dados. Vamos criar um filho Grable em um sinal em uma nova classe e dar-lhe alguns dados dentro dos parâmetros. Então vamos filho igual a um novo leão era um Simba, e sua altura é, também, porque ele ainda é muito jovem, bem aconselhado filho log, e verificar a cláusula solar ou a classe de linha em vez e boom. Temos uma linha cujo nome é Simba, e altura é dois. Excelente. Agora a linha ainda é tão geral quanto a nossa classe animal. Como torná-lo mais específico leões e permitir-nos dar-lhe informações Mawr na declaração de instância. Bem, nós daríamos novamente uma linha de construtor. Havia dois parâmetros de nome e altura mais uma vez. Mas depois da altura, podemos começar a especificar campos adicionais para dar mais dados a esta linha. Uma vez que as linhas às vezes têm cores diferentes para, vamos dar-lhe esse campo adicional. Então a cor é a 3ª 1 na nossa lista de construtores. Antes que possamos começar a acessar este objeto, no entanto, precisamos chamar para uma palavra-chave especial para esta classe, vez que se estende animal em classes criança antes que possamos começar a usar esse objeto para modificar dados de classe, você precisa usar uma palavra-chave super para reconhecer o construtor de um pai. Isso vai chamar o construtor da classe pai com o nome e altura que especificamos primeiro, Então fazê-lo assim como super nome e altura, em seguida, dentro do construtor. Depois de usar o Super para chamar o construtor pais, podemos mais uma vez acessar através deste objeto. Então agora temos a liberdade de dizer que essa cor de estoque é igual a uma cor que argumentamos dentro do construtor, e agora podemos especificar símbolos cor em sua instância. Então a cor é dourada e bang. Nós nomeamos Simba. Altura para você e sua cor é dourada. Tudo bem agora e se ainda quisermos usar esse método hello para linhas, mas queremos registrar uma mensagem completamente diferente. Felizmente, em classes infantis, podemos simplesmente substituir métodos de classes pais por re declará-los. Vamos personalizar uma saudação de saudação na classe de linha para dizer oi, eu não sou esse nome de Pride Rock. Então agora em um bolinho Olá logo após o construtor deles um registro de ponto cônsul Oi, eu sou este nome ponto de Pride Rock e, em seguida, na parte inferior em vez de conselho. Não registre, filho. Podemos apenas chamar filho não olá para ver que saudação em ação e alta Simba é ótimo para conhecer alguém da família real. Em seguida, várias classes normalmente existirão em módulos separados. Vamos extrair esta classe animal base em um arquivo separado chamado Animal Dodgy s. Então, primeiro, criar a nova bola novo arquivo animal ponto Js Agora tirar a classe irá cortá-la, ritmo dentro do ducado animal s, e então adicionar um padrão de exportação de animal para o ponto animal Js cinco e no topo do nosso ponto índice Js Não podemos importar animal de animal Dodge s, a fim de agarrar são extraídos classe animal, Digamos E lá vemos nossa mensagem SIMA ainda registrando para o cônsul Importar e exportar trabalhou para nós para esses módulos para as classes. Tudo bem, incrível. Acabamos de ver um exemplo de herança com classes e a palavra-chave extends no script Java Podemos realmente implementar tantas classes filho do animal como gostaríamos. Poderíamos criar hienas, pássaros, elefantes e qualquer coisa que você queira em todo o reino animal. Além disso, a classe criança leão em qualquer classe que pudéssemos criar poderia ser ainda mais estendida para criar ainda mais subclasses e netos da classe animal base. Tudo bem, vamos continuar explorando outro conceito dentro de classes, métodos estáticos. 4. Métodos estática em cursos: vamos começar com uma ficha limpa e discutir um novo tópico dentro das aulas. Método estático. Quando criamos um método estático dentro de uma classe, podemos acessar esses métodos sem declarar explicitamente uma instância da classe. Isso vem a calhar quando queremos criar aulas mais práticas como espaços nomeados para métodos em vez de manter dados. Por exemplo, vamos começar com uma ardósia em branco e definir uma nova classe de calculadora. É uma calculadora de classe, e seu corpo é um par de raças encaracoladas. Agora, com nesta classe, podemos escolher ter um construtor. No entanto, lembre-se, nós não estaremos usando essas classes para seus dados, mas sim seus métodos. Então vamos dar-lhe um método estático para fazer um método estático. É exatamente o mesmo que definir um método regular para uma classe, exceto que procedemos esse método com a palavra-chave static. Vamos definir nosso primeiro método estático para a classe calculadora agora e dar-lhe um chamado Multiply. Tão estática. Multiplique um retorno B por vezes B. E como você pode ver, este é completamente idêntico ao método de multiplicação que criamos anteriormente quando exploramos módulos. Muito bem, agora que temos este método estático. Podemos começar a usar a classe calculadora como utilitário para acessar rapidamente a multiplicação. Então vamos definir uma variável e disse que é um vez igual a calculadora. Não multiplique cinco e sete. Bem confiante. Log a e o que você espera ver se você disse 35? Você está certo. Legal. Então, como você pode ver calculadora ponto multiplicar agora é um método estático. Nós não criamos uma nova instância de calculadora, mas a palavra-chave estática nos permite acessar. Multiplicar imediatamente. Ótima. Vamos adicionar mais um método estático para a classe calculadora, a fim de reforçar este conceito no método de adição extático. E assim como antes de nossos módulos, exemplo retornará um plus B Se mudarmos calculadora, não multiplicar para calculadora ponto Adicionar cinco e sete. O que você acha que vai aparecer? Nós vemos 12 como você provavelmente adivinhou, aparecendo em nosso cônsul. Nós vemos 12 como você provavelmente adivinhou, Tudo bem agora podemos começar a ver a utilidade da palavra-chave estática nas classes. Calculadora agora se torna uma maneira que podemos acessar rapidamente toda uma coleção de métodos a partir de apenas uma importação classe. A nova palavra t calculadora neste caso não é um objeto segurando dados, mas um homônimo para manter métodos relevantes como adicionar e multiplicar. E poderíamos dividir, subtrair valor absoluto, todas as coisas boas. Tudo bem, vamos continuar explorando até mesmo Mawr es seis com classes e protótipos. 5. Como de destaque entre cursos e protótipos: vamos discutir a diferença entre classes e protótipos em JavaScript. Aqueles de vocês familiarizados com programação ou que já fizeram uma aula de ciência da computação antes podem estar familiarizados com este paradigma ou conceito chamado programação orientada a objetos. Programação orientada a objetos refere-se a este conceito em ciência da computação que modela objetos baseados em objetos do mundo real. Esses objetos contêm dados relevantes, e um programa irá projetar ao redor, fazendo com que esses objetos interajam uns com os outros. Muitas das principais linguagens de programação, como C, Java e Ruby, fornecem suporte pesado para modelos de programação orientados a objetos em torno de sistemas de classes e herança. Então a questão é, os trabalhos são bons baseados em um modelo de programação orientado a objetos? Afinal, as classes de empregos E seis que acabamos de explorar parecem apontar para a resposta. Sim, no entanto, a verdadeira resposta é não. JavaScript é baseado em um protótipo todos os modelos de herança. É um pouco diferente das aulas sob o capô. Classes na verdade são apenas extrações de protótipos de script de trabalho, então não estamos realmente criando classes de dados da mesma forma que Java e Ruby faz com seu modelo de programação orientada a objetos. Mas a sintaxe da classe E seis nos permite criar protótipos JavaScript muito rapidamente de uma maneira mais compreensível. Então a próxima pergunta é, o que é um protótipo? Um protótipo é uma característica que cada objeto em JavaScript tem, e que nos diz uma característica muito específica sobre esse objeto, e essa característica é seu pai ou o objeto que herdou suas propriedades de See . Cada objeto em JavaScript tem um protótipo e, na verdade, herda propriedades e métodos de seu protótipo pai. Isso cria uma cadeia de protótipos ou até mesmo uma estrutura de dados como uma data ou uma taxa em JavaScript herda de protótipos acima deles. No topo desta cadeia está o próprio protótipo de objeto. Agora que exploramos como os protótipos funcionam em JavaScript, esclarecemos também a diferença entre protótipos e classes em outros modelos de programação orientados a objetos . Agora temos uma melhor compreensão do fato de que as aulas não são classes, mas protótipos sob o capô. No geral, toda a história começa a se tornar muito menos abstrata quando realmente vemos protótipos em ação 6. Protótipos: Vamos cagar nosso primeiro protótipo de objeto JavaScript. Para fazer isso, usamos a função construtor de objeto no script de trabalho, então use uma função de palavra-chave e, em seguida, siga com o nome do protótipo. Vamos criar um protótipo assistente para assistente função eo corpo é um par de chaves como de costume. Agora, a palavra-chave function neste caso não está sendo usada para criar uma função real que atinge alguma expressão lógica, mas sim ela será usada para hospedar dados neste protótipo de objeto, um protótipo que tem dados de acordo com o número de parâmetros que passamos para ele. Primeiro, vamos dar a este protótipo reserva o campo de nome Ah, campo de casa e um campo de estimação. Então função assistente nome House Pet. Ótimo. Agora podemos acessar o objeto do protótipo com a palavra-chave this e seguindo o mesmo padrão que não fizemos classes. Nós dissemos que as chaves sobre isso para os valores que passamos na lista de funções de parâmetros. Então esse nome de dublê é igual a nome. Isto não é altura ou isto de casa, mas sim igual a casa. Sr. Pet é igual a animal de estimação. Excelente. Agora vamos fazer nossa primeira instância do Feiticeiro o nome será Harry Potter. A casa será Griffin Door e seu animal de estimação estará fora. Não podemos pretender protótipos de objeto agora com a nova palavra-chave, assim como uma classe e atribuí-la a uma variável. Então deixe Harry a variável igualar um novo protótipo de feiticeiro com Harry Potter como o nome sua casa será Griffin Door e seu animal de estimação será nosso e então vamos registrar Harry confiante e salvar. Agora temos um protótipo de feiticeiro aparecendo em nosso cônsul que mostra que são relevantes. Data Griffin Door, Harry Potter e Out Awesome. Também podemos adicionar métodos para o protótipo que lhe dá alguma funcionalidade com base em seus dados . Vamos adicionar um método que descreve em uma saudação chamada Greep ao protótipo O que este assistente é. Então vamos dizer que este estoque ceifa é igual a uma função de seta. O dis retorna. Eu sou esse nome de ponto em um lixo temporário desta casa de ponto. Note que nesta função era, eu não tenho que especificar a palavra-chave de retorno, na verdade, que possamos tirar esta chave, tirar a palavra-chave de retorno, e agora isso retorna a expressão à direita por padrão da sintaxe da função de seta porque estamos omitindo as chaves atualmente. Agora vamos esclarecer uma coisa. Ao contrário das declarações de função normais, as funções de seta não criam seu próprio objeto para o escopo local da função por padrão. Em vez disso, seu escopo ainda fará referência que isso fora da função papagaio externo. Isso nos beneficia muito ao criar funções e protótipos mais avançados, porque suas inter-funções fazem referência aos dados no escopo pais. Tudo bem, em um registro de Harry Dot Greek para o conselho. Então vamos emendar isto para dizer, Harry Dockery enquanto salvamos nós notamos que eu sou Harry Potter de Griffin Door. Prazer em conhecê-lo a seguir. Suponha que ele quisesse adicionar mais dados a este protótipo. Bem, poderíamos facilmente atualizar a declaração do protótipo. Mas cada protótipo também vem a propriedade de palavra-chave prototype, que representa seus dados de objeto. Podemos então aproveitar essa palavra-chave protótipo toe Adam ou propriedades para o protótipo assistente muito facilmente. Então suponha que você queira adicionar outro campo, como nome do animal de estimação, por exemplo, sem ter que voltar e alterar o construtor real. Poderíamos usar uma palavra-chave protótipo assim acima do Harry. Diga o nome do animal de estimação do protótipo do bruxo. E esta linha como uma propriedade de nome de animal de estimação. Veja o protótipo como se realmente fizéssemos isso na declaração do protótipo. Próximo para adicionar o nome real do animal de estimação. Dizemos que o nome do animal de estimação Harry Dot é igual a Hedwig. Notei que o nosso instante permanece o mesmo. Mas se você se aconselhar, não registre Harry agora vamos descobrir que o apelido de Harry é Hedwig. Incrível. Agora vamos revisitar esta discussão que começamos mais cedo sobre suas funções, não criando seu próprio objeto em seu escopo de função. Suponha que eu queira adicionar um método ao nosso protótipo agora. Bem, vamos usar um protótipo. Ele era como antes de podermos dizer feiticeiro, não protótipo informação de ponto, então esta função nos dará algumas informações sobre o animal de estimação dos Wizards. Então vamos tentar adicionar essa função com uma função de seta. Eu diria Wizard up protótipo informação ponto é igual a anel de temperatura de retorno que diz que eu tenho um esta parada Ele nomeou este início que ao vivo. Foi dito um conselho. Não registre informações de Harry Dot agora, e como pode ver nossas reclamações de concertos, isso não tem como lidar com isso, e a informação é indefinida. A razão pela qual esse código não funciona é que a função de seta não cria um objeto deste para o protótipo da função referenciar. Agora, uma função de ar funciona dentro do protótipo de função real porque ele tem um exterior isto para se referir assim como uma solução ao usar a palavra-chave protect para definir um método. Como não podemos nos referir a esse escopo local este objeto dentro do protótipo, nós realmente não usamos uma função de seta. Usamos a declaração de função normal. Isso irá recriar este objeto e nos permitirá fazer referência às propriedades mantidas dentro deste objeto do nosso protótipo. Então, em vez disso, dizemos assistente ponto prototype dot info é igual a função sem o retorno de seta. Eu não tenho este animal de estimação chamado este nome ponto. Enquanto economizamos, descobrimos que não tenho nosso chamado Hedwig trabalhando e registrando no conselho Excelente com uma simples operação de função Js que vemos serem relevantes. Os dados aparecem Então isso mostra que as funções aéreas, embora insanamente úteis e concisas encurtadas, na verdade não são a melhor solução em todos os casos. Desta vez, precisávamos de uma palavra-chave de função para criar um objeto para o nosso protótipo. Agora que vimos protótipos em ação, deve ficar um pouco mais claro que classe é simplesmente extrair sua lógica e envolvê-lo para fazer protótipos olhar agradável para codificadores com um fundo de programação orientado a objeto. Mas quando se resume a isso, lembre-se que as aulas estão acabadas. Protótipos e protótipos são simplesmente funções. Lembre-se, cada objeto em JavaScript descende de outro protótipo e herda essas propriedades começando desde o início da cadeia. O protótipo do objeto em si. Tudo bem, vamos continuar aprendendo “E “, seis. 7. Como apresentar as estruturas de dados no ES6: no domínio das estruturas de dados de ciência da computação referem-se ao armazenamento programático de dados para uma utilização eficiente. Cada aplicativo no nível do setor aproveita uma estrutura de dados para gerenciar seus dados de forma mais eficiente. Primeiro, off, algoritmos sofisticados usaram estruturas de dados para realizar cálculos avançados, como pesquisa ou classificação no CS. Podemos quantificar determinados algoritmos com base no seu tempo de execução ou na rapidez com que resolvem um problema. Além disso, podemos classificar algoritmos com base na quantidade de memória ou dados que eles usam. Em outras palavras, o recurso é que eles exigem agora em Essex, recebeu algumas estruturas de dados mais limpos atualizados dentro da versão. Vamos explorar a primeira estrutura de dados nessa coleção. O conjunto seis nos permite armazenar valores únicos. É semelhante a uma matriz, mas você não pode ter duplicatas o recurso específico de nenhum valor duplicado. Coloca define como uma estrutura de dados vantajosa sobre uma corrida. Suponha, por exemplo, que estivéssemos organizando um evento, e cada indivíduo recebe um sorteio. Toda vez que um visitante único vem para um presente, nós o damos para ele ou ela, e no indivíduo para o nosso conjunto de pessoas que receberam um presente. Agora suponha que o indivíduo voltou para um segundo presente com uma matriz, teríamos que implementar um algoritmo ou função auxiliar personalizada própria, para verificar se a nossa lista continha esse indivíduo já que não damos a essa pessoa um segundo presente. No entanto, se usarmos um conjunto para rastrear nossos convidados com presentes, saberemos imediatamente se esse indivíduo já recebeu um presente usando os métodos que a estrutura de dados do conjunto Javascript fornece. Esses métodos incluem o método de exclusão do método de anúncio e tem método com verificações para a presença de dados dentro de um conjunto. Muito bem, vamos começar a implementar um conjunto a nossa primeira estrutura de dados Essex. 8. Como escrever um conjunto: Vamos saltar para a nossa estrutura de dados 1º 6 e implementa um conjunto sob o capô. Todos os conjuntos herdam do protótipo conjunto, então declaramos um conjunto com a nova palavra-chave. Declarado um novo conjunto chamado A Em um sinal que e nova instância da declaração de protótipo conjunto Deixe um novo conjunto igual. Neste conjunto, podemos adicionar qualquer coisa a partir de valores primitivos. Objetos dos dedos. Tudo o que temos a fazer é dados passados para o método set dot Add. Vamos adicionar alguns novos números um ponto adicionar cinco, por exemplo, e um ponto adicionar 43. Excelente. Agora, que tal adicionar uma força? Isso vai funcionar? ADA anúncio bem e parece que está tudo bem com o nosso conjunto. Agora vamos tentar adicionar no objeto apenas para uma boa medida cujo valor X será 50 e por que o valor será 200. Vá em frente e guarde isso. Tudo parece estar bem. E finalmente, vamos Cônsul, não registre um e confira o set de uma vez por todas. À medida que economizamos, vemos nossos números de cinco e 43 estão diminuindo, bem como nosso valor de objeto. Excelente. Vamos explorar os métodos que o protótipo de conjunto agora fornece para nós para descobrir algumas informações sobre este conjunto. Para começar, todos os lados têm uma propriedade de tamanho que podemos acessar para determinar quantos elementos existem dentro do set conselho ponto log um ponto de tamanho e boom. Vemos quatro, como você deve ter adivinhado, porque adicionamos quatro elementos ao nosso conjunto. Agora, aqui vem uma função altamente útil. Vamos verificar se este conjunto contém dados irá verificar se ele contém o número cinco. Então, em vez de um tamanho de ponto, vamos registrar confidente que um ponto tem cinco. E o que você acha que vai aparecer? Bem, é verdade, como você deve ter adivinhado, já que adicionamos cinco mais cedo, vamos verificar se tem sete então e lá vamos nós, ficamos falsos. Portanto, é um valor verdadeiro ou falso, dependendo se o parâmetro existe dentro do conjunto. Muito bem, vamos ver algo muito útil. Podemos converter conjuntos de apagamentos inteiros muito facilmente. Nós só temos que passar um array para o construtor set. Vamos fazer uma série de números e começar com uma ficha limpa. Deixe que os números sejam iguais. Você pode ter os números que quiser, então eu vou fazer 578 13 e 17 e agora estou dormente. Set será um novo conjunto passando na matriz de números para o construtor. Eu vou em frente Conselho não registre o conjunto de Numb. E agora vemos um protótipo de conjunto com 578 13 e 17 que é o que tínhamos no nosso original, certo? Próximo. Como imprimimos cada um desses elementos de conjunto individualmente? Bem, precisamos de alguma forma de gerar através destes dados no conjunto e imprimir cada elemento um vez. Felizmente, o conjunto JavaScript fornece para nós um método de valores que nos permite fazer exatamente isso. Ele retorna um objeto iterado que contém todos os valores configurados para atravessar ao longo. Agora, a fim de lidar com isso iterado corretamente irá usar uma variação do loop quatro chamado Enhanced for Loop. Então vamos declarar que quatro loop agora para deixar elemento de valores de conjunto entorpecido. E nesta linha, estamos vendo um loop de quatro com em missão dentro dele. O que está acontecendo é que a variável elemento será definido para o valor atual em valores de configuração entorpecido em cada adoração do loop. Então, porque entorpecido disse, valores de ponto contém essencialmente uma lista honrosa de valores do conjunto original, este reforço para loop assenta os elementos cada um desses valores um de cada vez. Como cancelamos o elemento log, devemos ver cada geração. Então temos 578 13 e sete. Incrível. Agora vamos aplicar o conjunto a um problema relevante que podemos encontrar em um aplicativo corporativo ou projeto pessoal. Considere uma longa sequência de caracteres aleatórios. Como poderíamos dizer rapidamente quais caracteres aparecem na string? Bem, como uma solução, poderíamos converter todo o raio de atum de corda, então convertê-lo em um conjunto e bang. De repente, temos todos os elementos únicos naquele psiquiatra original. Vamos tentar agora. Crie um encolhimento de caracteres aleatórios por enlouquecer em seu teclado. Então, deixe caracteres iguais ao que você quiser nesta seqüência incrível. Agora vamos dividir esta lista de caracteres em uma matriz de todos os seus caracteres chamando a palavra-chave split especial no deslizado. Deixe os caracteres são iguais. Chars ponto dividido na string vazia para dividir cada caractere dentro do encolhimento original, e eu vou fazer um conjunto de carga que é um novo conjunto passando na carga são então vamos frente e registro constante o conjunto de carga e verificá-lo. E como vemos, agora temos um conjunto de cada elemento único que incluímos em nossa string aleatória original e que só conseguiu digitar 10 caracteres como eu enlouqueci no meu teclado. Tudo bem, isso cobre um conjunto em E s seis. Vamos passar a aprender ainda mais e seis estruturas de dados. 9. Como apresentar os mapas: próximo explorará um segundo. Sim, seis mapas de estrutura de dados. O mapa tem pares de chaves e valores. Para essas chaves e valores, podemos usar valores primitivos e objetos dentro de um Essex atendido. Cada T é único. Não é possível duplicar a mesma chave dentro de um mapa. Para entender como isso funciona, poderíamos pensar neles como quase idênticos a objetos tanto objetos como cochilos. Vamos atribuir valores de chaves. Podemos recuperar as chaves, apagá-las e mudar o que está guardado para o chá. No entanto, existem algumas diferenças importantes entre o objeto JavaScript regular e a estrutura de dados do mapa que s seis fornece para nós. E essas diferenças realmente fazem do mapa uma coleção muito melhor de dados. Como os objetos têm um protótipo, existem certas chaves padrão que colidem com as chaves que queremos se não formos cuidadosos. No entanto, no mapa ES seis, podemos usar qualquer TV que queira sem se preocupar. Além disso, as chaves de um objeto são primariamente encolhidas, enquanto que com um mapa, estas podem ser qualquer coisa de primitivos, objetos e até mesmo funções. Finalmente, podemos obter o tamanho de um tapete muito facilmente chamando a propriedade tamanho bem, temos que descobrir isso o longo caminho manualmente com um objeto JavaScript regular. Ok, vamos mergulhar no mapa es seis estrutura de dados e olhar para alguns exemplos úteis com código. 10. Como escrever um mapa: Vamos criar nossa primeira instância do mapa ES seis, semelhante ao conjunto que bronzeado instantâneo. Ela comeu o mapa usando a nova palavra-chave. Criar uma variável A e atribuí-lo a On que deixar um igual sabia que grande. fim de dar aos mapas, hum, pares de chaves e valores, usamos o método de conjunto de pontos do mapa. O mapa. Esse método conjunto para mapas leva dois parâmetros uma chave e um valor. Muito simplesmente, vamos definir uma chave para este mapa, e este será um psiquiatra como T um igual a Shrinky. Então vamos chamar o método definido deste um mapa. E vamos argumentar no primeiro parâmetro, a chave que acabamos de criar para o segundo parâmetro, apenas uma string que diz Return value para uma chave de tensão. Então, mais uma vez, uma chave de conjunto de pontos, um para o primeiro parâmetro da arte um mapa e, em seguida, retornar o valor para a chave de emissão. Isso é constante. Registre um e confira. Aqui vemos que temos um mapeamento encolhido agora para o nosso valor de retorno para aquele encolhimento. Incrível. Vamos adicionar chaves adicionais. Desta vez. Nós vamos ter uma chave para vamos chave para igualar um objeto e este vai dizer uma chave, que é apenas alguns dados fictícios, mas vamos em frente e definir o valor da chave para retornar valor para a chave objeto. Mas tendo Bata boom, temos um valor de retorno chave para um objeto. Ele Então aqui nós concebemos que temos objetos como uma chave real dentro da nossa estrutura de dados do mapa E Essex . Muito legal te conhece outro, e podemos ter funções como chaves também. É como T três função igual, e nós vamos ter apenas uma função vazia que não retorna nada. Mas a distinção chave é que consentimos chave 32 um valor de retorno para uma chave de função. E como salvamos, vemos função válida como uma chave para a estrutura de dados E seis retornando valor de retorno para uma chave de função para que pudéssemos ter facilidade de encolhimento. Objeto. Ele é teclas de função, qualquer coisa que gostamos dentro do nosso mapa, a fim de mapear um par de chaves e valores. Agora vamos pensar sobre como iterar através de mapas, a fim de imprimir chaves e valores, assim como um conjunto que pode levar em uma matriz de elementos e convertido. Da mesma forma, um mapa pode levar uma matriz de comprimento para matrizes. Converta isso em um mapa. Vamos criar um mapa rápido desta forma. Então primeiro declarar um novo par de valor de chave para Numb são, que vai ser uma matriz regular. Seu primeiro elemento será um Array, que tem um e, em seguida, um. Teremos mais dois array de dois para então, finalmente, finalmente, outra matriz de dois comprimentos de três e três. Agora podemos converter isso facilmente em um mapa E seis. Assim como, deixe Val mapa igual novo mapa, então vamos passar neles são para o construtor tapete. Vamos salvar a cultura. Não registre o mapa da Val. E como você pode ver, temos um novo mapa com um mapeamento 212 mapeamento para dois e três mapeamento para três, como esperado, convertendo o Numb original são incríveis. Agora, para colocar esses valores um de cada vez em vez de de uma só vez, precisamos de alguma forma gerar através disso. O mapa estruturando Essex tem o método de ajuda de valores, assim como a estrutura de conjunto. Mas este Onley retorna esses segundos elementos, que são os valores para nossas chaves imprimir. Da mesma forma, se usarmos um método de teclas paralelas, nós só encontraríamos as chaves para o nosso mapa e disse Queremos usar um método auxiliar para mapas chamados entradas Novamente usará o aprimorado para Luke ou o quatro de Loop, como também é chamado para mapear cada par de chaves e valores um de cada vez e imprimi-los. Então, tire o log do console para Let He Value Now ele teria um para vincular matriz de entradas de pontos do mapa Val . Vamos Cônsul, não registre uma string de modelo, que diz que temos uma chave que aponta para o nosso valor enquanto salvamos. Certo, um ponto alguém dois pontos dois e três pontos de três. Ótima. Tudo bem. Agora vamos explorar seus seis mapas ainda mais profundamente. Com o problema relevante, vamos rever essa contagem de cartas em um encolhimento aleatório que introduzimos na discussão sobre ES seis conjuntos. Desta vez, temos uma capacidade extra dentro desses pares de chaves e valores. Agora podemos usar mapas para garantir novamente que nossas entradas de letras são únicas e não entrar mais de uma vez porque este mapa nos impede de duplicar chaves. No entanto, desta vez, quando nos aproximamos de uma carta, já adicionamos à estrutura que não vamos simplesmente pular mais. Desta vez teremos um contador para cada letra, e no final, saberemos exatamente quantas vezes cada personagem apareceu em nosso psiquiatra. Mais uma vez, comece com uma ficha limpa, declare um novo encolhimento e, em seguida, ataque o teclado. São todos os Oh, e quem sabe o que são línguas, mas contaremos as letras, e talvez isso nos dê uma pista. Primeiro, declarar uma nova matéria de letras, mas letras são iguais a novo mapa. E então vamos implementar um loop de quatro que gera sobre a string um caractere de cada vez para Let I Igual a zero. Olhos ouviram encolher o comprimento do ponto, cinco mais, e então vamos enviar uma variável de letra para o personagem atual de acordo com nossas vidas. Valor para o personagem que eu tenho no psiquiatra deixar a letra igual encolher. E aqui a diversão começa para implementar a lógica de contagem real. Neste ponto, precisamos pensar em dois casos possíveis que podem acontecer quando encontramos uma carta ou que não tem a carta ainda ou já a tem. Então o mapa não tem. A letra irá definir o valor das letras para um no mapa para contar essa letra. Caso contrário, ele tem a letra e podemos atualizar seu valor e adicionar um a ele. No início de tudo isso vai significar se declaração que verifica de que não tem a carta ainda. Digamos que se letras que tem letra é igual a quedas. Faça alguma coisa agora. Podemos encurtar essa condição para dizer se as letras bang dot tem letras. que diz a mesma coisa. Não, o uso deste estrondo como mencionado anteriormente ou ponto de exclamação Tudo isso faz é mudar um valor de vaiagem para o seu oposto. Então poderíamos ter verificado se letras que tem letra é igual a quedas. Mas você vê franjas em todos os lugares no JavaScript para encurtar declarações e expressões assim . Então, se o mapa não tem uma carta, lembre-se, nós enviamos seu valor para um para reconhecer a primeira aparição dessa carta. Então dizemos letras ponto definir letra um, caso contrário, no bloco else irá atualizar o valor da letra. Desde que sabemos que o mapa de letras já tem a nossa letra letra letra ponto set letra, vamos obter o valor atual fora da letra e, em seguida, vamos adicionar um doce. Com este código, vai encher o nosso mapa com um monte de cartas. Tudo o que resta a fazer é verificar este eurodeputado completo. Vamos conselho não registre cartas no final. Iremos em frente e salvaremos. E eu só tive um pequeno erro de digitação. Vamos dizer letras ponto set e boom. Lá vamos nós. Eu digitei um cinco vezes 04 vezes qualquer coisa interessante que eu falei muito. Nós também temos um P quatro vezes tão legal que temos um par de valor chave impressionante do número de vezes um personagem apareceu em nossa string, um caso muito útil para a estrutura de dados do mapa em E. seis. Fantástico. Acabamos de passar por mapas Essex, que são melhores coleções de pares de valor chave do que objetos. Mas você ainda verá objetos em todos os lugares no código Essex. Portanto, não basta substituir todos os objetos agora por um mapa onde os mapas realmente são úteis. Não é coleções onde precisamos de chaves além de apenas strings ou o valor da chave? Os pares são frequentemente adicionados, removidos ou atualizados. Excelente trabalho, e vamos continuar aprendendo 11. Como apresentar fechos: irá agora examinar um conceito significativo dentro de JavaScript e E S seis fechamentos. Closers referem-se a funções que se lembram do ambiente em que foram criadas e poderiam fazer referência às variáveis independentes dentro desse ambiente. Desta forma, o fechamento combina uma função no ambiente em que declaramos que os fechadores de funções nos permitem fazer pensamentos intrincados como a criação de fábricas de funções. Em outras palavras, podemos criar funções que retornam outras funções para tornar métodos mais adaptáveis para os mais fechos nos permitem declarar métodos de uma forma que mantém dados privados em JavaScript Não podemos fazer isso automaticamente como em linguagens como Java. . Mas não podemos emular esse tipo de comportamento de variáveis privadas vistas em tantas outras línguas. Use gabinetes ok, vamos esperar para responder a pergunta básica do que não são fechamentos e como eles funcionam à medida que os exploramos nos próximos exemplos 12. Fechamentos e as sombras: vamos explorar este conceito de fechamentos com mais detalhes. Lembre-se que com fechamentos irá criar funções que podem se referir às variáveis dentro seu ambiente e manter o controle do ambiente de sua criação. Primeiro, vamos definir uma nova função chamada. Vamos chamar igual a uma função de seta com um corpo vazio. E nesta função, vamos dar alguns dados locais secretos. Vamos segredo é igual a seis rochas, mesmo que isso não seja um grande segredo. Agora, se tentarmos acessar a variável secreta fora do escopo da função de chamada, encontraríamos um ar para que o conselho não registasse segredo e viu que o segredo não está definido no escopo global. No entanto, podemos ter acesso a esses dados se seu fechamento de função tem um método que revela os dados . Vamos adicionar esse método agora vamos revelar igual outra função de seta. , Simplesmente, Cônsul, não registre segredo. Agora vamos chamar “Revelar” dentro do seu verdadeiro encerramento. E então vamos chamar o fechamento com um comentário e boom, vemos EEA seis rochas, mesmo que nossa variável secreta esteja em Lee, dentro do escopo desta chamada, fechamento ainda estava acessando de alguma forma no escopo global Incrível. Vimos nosso primeiro encerramento em ação. Você vai ouvir frequentemente este conceito de inter funções acessando os valores em escopos pais como lexical, escopo, lexical. Escopo simplesmente se refere à idéia de que JavaScript e nosso programa mantém o controle da localização de uma variável para entender onde ela pode ser acessada. Vamos encontrar este exemplo de encerramento e explorar ainda mais Skube lexical em vez de chamar revisão dentro do nosso encerramento. Vamos retornar a função de revelação completamente agora. Esta declaração de retorno nos permite definir uma variável e atribuí-la ao resultado de nosso fechamento. Então, em vez de chamar, chamar, deixar revelar chamada igual e então vamos em frente e chamar desvelar. E à medida que fazemos isso, vemos que nosso fechamento ainda tem acesso a essa variável secreta interna. Agora, para aqueles de vocês com experiência em outras programações, linguagens podem achar isso um pouco contra-intuitivo. Afinal, variáveis locais dentro de uma função geralmente só duram lá a execução da função. Portanto, pode parecer que não podemos acessar a variável secreta uma vez que nossa função termina de completar . A variável secreta não deveria ser indefinida assim que tentarmos chamar a revelação? Bem, isso aponta para o poder de fechamentos dentro do JavaScript. Sua ideia de escoamento lexical o fechamento mantém uma referência ao ambiente lexical que foi criado e nos permite acessar dados dentro de escopos de funções mesmo após a conclusão da função. Portanto, nossa variável Annville recebe o valor do que eles chamam de retornos de fechamento. Assim, temos acesso ao segredo dentro do fechamento, mesmo depois de terminar. Tudo bem, não se preocupe. Se os encerramentos ainda parecerem um pouco abstratos, vamos aprofundar mais o conceito com exemplos mais práticos para mostrar como você pode aproveitar os fechamentos já para melhorar seus programas E A seis. 13. Factores de função: em script Java em Essex. Fechamentos nos permitem criar fábricas de função, fábricas de função, tomar um ou mais argumentos e retornar novas funções baseadas nesses argumentos, vamos criar nossa primeira fábrica de função com uma função que adiciona um assunto a uma força. Vai levar um parâmetro os assuntos que esperávamos em então Const adicionar algumas picaretas igual a X, que serão nossos eventuais assuntos. Vamos retornar algo dentro deste escopo do corpo dentro do escopo de adicionar alguma correção. Vamos adicionar uma função inter chamada can Cat que tem um argumento de sua própria e retorna um resultado de adicionar o argumento do ad Suffolk e seu próprio argumento de concatenação. Então Const não poderia ser igual a gatos. Por que o resultado de retorno de adicionar Por que mais X Porque X são Celtics. Então queríamos seguir o quê? Finalmente, esta função de sufixo de anúncio agora retorna o inter fechamento. Então, em uma declaração que retorna pode gato excelente, nós criamos uma fábrica de funções. O primeiro toma um argumento, define um fechamento e retorna com capacidade variável. Dependendo do nosso argumento inicial, vamos explorar como isso funciona com algumas chamadas. Adicione algumas picaretas. Primeiro para cima. Suponha que eu quisesse uma função que acrescentasse um sufixo a qualquer palavra que argumentamos. Então vamos adicionar nous igual ao resultado de chamar Adicionar algumas fotos discutindo ness Nós vamos em frente e conselho não registrar Adn s para ver o que isso parece Então, como você pode ver, o resultado é uma função retorna Por que e por que mais x Então vamos e chamar essa função agora com um prefixo adn s r prefixo será feliz E vamos nos certificar de que definir isso para uma variável h igual adn s feliz Vamos em frente e confidente log h junto com maldade e boom Obtemos felicidade como resultado Então vemos o resultado de nossa fábrica função primeiro argumentamos bagunça para a função de anúncios Suffolk que é exceto parâmetro olha para a função con cat no interior que não é um fechamento que se lembra de um ambiente lexical de ad Suffolk e retorna seu próprio argumento de por que mais X E então finalmente ele iria retornar esse fechamento buraco para adicionar algumas fotos. Nós agora criamos toda essa função em uma fábrica para bagunça de anúncios e então podemos usar adicionar bagunça E você está feliz? E lá vamos nós. Somos o Cônsul Dot Loging Felicidade. Como resultado, vamos mostrar isso outra vez com outro sufixo. Vamos adicionar total igual. Adicione algumas picaretas. Telefone. Deixe f igual. Advil vai argumentar sobre frutas. Agora vamos em frente e confidente log f e ficamos frutíferos como resultado. Que legal. Tudo bem, vamos tentar este conceito de fábricas de função casa com um segundo exemplo. Desta vez vamos lidar com uma fábrica de funções mais orientada para matemática. Vamos definir nossa segunda fábrica de função, que transforma uma função que multiplica duas variáveis. Ele seguirá uma estrutura semelhante à função e fechamento do nosso anúncio Suffolk para encontrar um produto de função que leva um parâmetro. Em última análise, isso se tornará nossa fábrica de funções que retorna uma inter função que multiplica nosso parâmetro original do produto com parâmetro inter funções. Vamos adicionar que inter função agora, exceto que desta vez vamos encurtar o fechamento e retornar a função imediatamente para que possamos apenas retornar por que e em troca. Por que Times X como de costume. Ótimo. Vamos chamar essa função de produto de fábrica e criar algumas funções que virou o resultado da multiplicação de números personalizados. Então deixe Multi cinco igual a uma função de retorno de fábrica função do produto e cinco aqui estamos criando uma nova função com nossa fábrica de função chamada Multi Five que faz uma função com um parâmetro para uma variável e retorna essa variável multiplicada por Cinco. Como argumentamos originalmente, isso é confidente. Registre uma chamada de multi cinco e molde 53 Aqui encontramos 15 como esperado. Muito legal. Não, vamos fazer de novo com um produto legal duplo para o conselho. Não registre o resultado da duplicação de nove como você salva. Encontramos agora 18 no conselho e grandes fábricas de funções nazistas trabalhando totalmente com seus ex encerramentos, que nos dá grande funcionalidade personalizada. Agora, antes de seguirmos em frente, podemos mais uma vez aproveitar alguns passos para reduzir esta fábrica de funções. Lembre-se com funções de seta que podemos remover a palavra-chave de retorno e retornar a expressão à direita automaticamente. Então vamos encurtar a função inter. Tire o aparelho, semi cólon, a palavra chave de retorno e depois temos um retorno. Por seta y Times X agora notar que tudo funciona como eu salvar. Ainda temos 18, mas você vai notar que ainda podemos encurtar isso de novo. Vamos tirar esta chave encaracolada esta palavra-chave de retorno também é esta chave, e como resultado, temos uma declaração muito concisa, que é uma fábrica de função completamente válida. À medida que economizamos e recarregamos. Boom, ainda temos 18 incríveis. Você verá métodos reduzidos como este mostrar-se em apenas uma linha mais do que muitas vezes Índia seis casaco. Mas a fábrica de funções anteriormente na sintaxe expandida da versão anterior, pode ser mais compreensível. Cabe a você implementar de que maneira você gostaria, desde que você seja internamente consistente ao criar seus programas E seis. Certo, vamos continuar explorando encerramentos em Essex. 14. Métodos de privada: muitas linguagens, como Java, suportam a capacidade de criar métodos privados para habilitar o encapsulamento de dados. Estes métodos privados têm acesso restrito apenas a outros métodos dentro da mesma classe. Agora, em JavaScript, não podemos fazer isso nativamente com a classe Essex, por exemplo, mas podemos emular o comportamento de métodos privados usando fechamentos. Vamos explorar este conceito de criação de métodos com fechamentos, um exemplo de uma função que mantém o controle de um orçamento com dados privados. Primeiro declarou uma nova função chamada budget e atribui-lo em uma função de seta ameaçadora. Contras. Orçamento é igual a função de seta R com um escopo de corpo. Em seguida, vamos dar a este orçamento alguns dados privados. Primeiro, uma variável de saldo. A banda é igual a zero número. Crie um método privado chamado change Bow. Vamos mudar sobre igual a uma função com um parâmetro, que acabou de retornar ao saldo de retorno mais igual a isso, e isso irá em frente. Atualize o saldo para adicionar o que discutimos dentro da mudança agora, vamos adicionar alguns fechamentos a esta função de orçamento para dar maneiras ao usuário e manipular esses dados de saldo privado. Esses fechamentos na função usarão o ambiente de funções e nos darão maneiras de manipular seu escopo lexical para nosso primeiro método acessível ou fechamento. Vamos criar um método de depósito 20 que utiliza uma alteração sobre o método privado e nos permite atualizar o saldo adicionando 20 ao nosso orçamento. Então chama-lhe depósito. 20 é igual a uma função de seta que apenas as voltas o arco de mudança de 20. Lá vamos nós agora para dar ao usuário acesso a este depósito. 20. Método. Vamos devolver um objeto, que está segurando um depósito. Mapeamento de 20 chaves para o nosso depósito. 20. Método Vamos e instantâneo 10. Ela comeu uma carteira agora igual orçamento e vamos Conselho ponto log O quê? Que enquanto ele realmente parece como nós salvamos, vemos um objeto com apenas uma função. Um depósito, 20 função. Vamos em frente e chamar o depósito 20. Vamos economizar e depositar 20. Parece que funcionou, mas não podemos dizer o que realmente aconteceu. Então, para verificar nosso saldo, vamos adicionar um fechamento de função de verificação agora ao orçamento. Portanto, a verificação CONST equivale a retornar o que o saldo é atualmente. E agora vamos adicionar isso à nossa lista de funções, então verificar mapas para verificar iria salvar, e depois de depositar 20 nós não podemos constituir log um cheque da carteira e boom, você está multado em 20. Retorne ao nosso cônsul, que é atualizado após zero. Ótimo. Então a pergunta é, por que não podemos apenas verificar a carteira ponto bounce? Vamos tentar o equilíbrio da carteira. Vamos tímido cônsul registrá-lo logo após o cheque. Vamos salvar e temos indefinido. Isso é porque não estamos devolvendo o equilíbrio dentro do nosso retorno. Objeto para o orçamento real eram apenas métodos de retorno que têm acesso ao orçamento, mas não o saldo real do orçamento em si. Esta não é uma variável privada em termos de uso de fechamentos e a função muito legal. Então isso é incrível. Temos que encerrar nossa função orçamentária. Agora vamos adicionar 1/3 1 agora ao ambiente lexical. Retirar 20. Isso mudará o saldo em 20 negativos. Então Const retirar 20 é igual a função de seta que apenas altera o arco por 20 negativo que irá subtrair 20 do orçamento geral que irá adicionar uma retirada. 20 Chamada retirar 20 e qualquer coisa sobre objetos é que quando chaves e valores são exatamente os mesmos, Índia seis. Nem precisamos especificar a sintaxe dos dois pontos. Podemos apenas especificar uma palavra-chave imediatamente e retornar os métodos relevantes. Belo truque de sintaxe abreviado de Essex que faz as coisas parecerem muito agradáveis. Então agora vamos retirar 20 antes do nosso orçamento cheque Draw. 20. O que há em mais algumas chamadas para depositar? 20. Tire este penugem extra. Vamos verificar o saldo após este primeiro depósito, 20 é mais 20. Retirar 20. Volte ao zero e mais uns 20 anos de depósito. Devemos obter de 40 enquanto economizamos. O que vemos? 40 dólares pela sopa da nossa carteira. Sem fim. Nós apenas usamos fechamentos para definir métodos acessíveis publicamente que acessam métodos privados dentro de nossa variável de orçamento geral. O uso de fechamentos para alcançar esse efeito é chamado de padrão de módulo em JavaScript e E Essex. Os encerramentos gerais, em combinação com métodos privados, têm grandes benefícios. Os métodos privados não apenas restringem o acesso, mas também melhoraram significativamente os programas e tornam devido mais gerenciável, mantendo as funções essenciais separadas das funções, particularmente a um determinado espaço de nome local. Como resultado, o espaço de nomes global para todo o nosso programa parece Pierre e limpo. Excelente. Vamos seguir em frente. 15. Como apresentar os geradores: Vamos discutir um recurso que trouxe muita emoção. E um seis geradores eles podem se sentir estranho para trabalhar com no início, mas com alguns exemplos. E depois de mergulhar no código, você verá por que os geradores são tão úteis no E A. Seis. Em primeiro lugar, os geradores quebram o típico executa um modelo de conclusão para funções normais, ou seja, sempre que executamos, uma função que esperávamos concluir antes de seguir em frente no programa. Portanto, outras expressões e instruções só podem acontecer depois que uma função tiver terminado. Geradores como um tipo diferente de função pode pausar no meio ou em várias vezes e retomar novamente a função de depósito mais tarde em um gerador, usamos um rendimento de palavra-chave especial, e para retomar a função, fazemos uma chamada para o ponto especial próximo método. Geradores, então, permite construir coisas muito úteis, como funções com fluxo controlado e versões simplificadas de geradores. Tudo bem, vamos colocar essas engrenagens de codificação girando e começar a trabalhar com geradores 16. Como definir um gerador: Vamos pular. Está a criar o nosso primeiro gerador. Essa sintaxe para um gerador usa a palavra-chave de função seguida de um asterisco. Nosso primeiro gerador será chamado de criador de cartas. Vamos defini-lo agora, então função fabricante de letras asterisco. É uma função por isso terá um corpo denotado por chaves. Tudo bem, lembrou a idéia de um gerador que o gerador introduz. fluxo controlado para as funções é executado. Então, em vez de seguir as execuções para o modelo de conclusão, podemos criar funções com capacidade de pausa e retomada. Então, novamente, como fazemos uma função que faz uma pausa? Ele retorna seu valor atual quando pausado. Bem, nós usamos um U de palavra-chave em três rendimentos para o fabricante de letras, e nós vamos apenas produzir uma lista de caracteres um de cada vez. Primeiro produzirá o personagem A, em seguida, produzirá o personagem. Ser, então, irá render o personagem. Veja Ok, agora que temos um gerador muito básico, vamos criar uma instância deste gerador e descobrir como acessar suas patas Valores um rendimento de cada vez. Primeiro declaramos uma nova instância deste criador de cartas e vamos chamá-lo de carta. Jen deixar a letra Jen igual fabricante de letras notar que não usamos a nova palavra-chave ao definir instâncias de geradores. Ótima. Agora podemos finalmente revelar como acessar o estado produtivo em cada rendimento dentro do nosso gerador para acessar o rendimento ou pausar dentro da função gerador. Nós usamos o ponto próximo método, dá um passo dentro do nosso gerador e retorna o estado atual desse gerador. E então podemos acessar esse estado de retorno usando o valor. Certo, então vamos chamar Sadat Log uma chamada da letra James Dot próximo método letra Jane Dot Próximo, e então vamos em frente e acessar o valor de retorno. Mas salve e boom. Temos um aparecendo no nosso cônsul Incrível em mais alguns registros idênticos do cônsul, e encontraremos cada rendimento. Tão bom. Copie e cole isso algumas vezes e devemos pegar o ABC. Lá vamos nós, ABC. Vamos ver o que acontece se tentarmos acessar o próximo valor após ABC. Ficamos indefinidos porque não temos rendimento definido e atingimos o limite do nosso gerador. Ok, vamos trabalhar com um exemplo mais prático, um gerador que produz um contador um de cada vez, por exemplo, por exemplo, Imagine que este gerador mantém o controle de clientes em sua loja de tecnologia. Cada vez que alguém entra pela porta, o gerador retornará o próximo valor. A coisa boa sobre este gerador em comparação com outros métodos será que não importa quantas vezes você chamá-lo, quantas vezes você chamá-lo ou a que horas você chamá-lo. Ele sempre retornará o próximo valor assim definido o gerador como contagem, fabricante, função, asterisco, fabricante de contagem, corpo de chaves e dentro do fabricante de contagem irá definir variável de conta. Deixe contar igual a zero em. A ideia com este gerador será produzir três contagens. Temos um limite de três lojas, e uma vez que a conta é superior a três, o gerador não retornará mais um valor. Para fazer isso, adicionaremos uma condição à contagem valiosa e, enquanto for menor que três, produzirá nossa variável de contagem adicionando um a si mesmo. Então, enquanto a contagem ainda é menor do que três vai produzir contagem mais é igual a um. À medida que salvamos. Vamos fazer uma nova instância deste gerador de contagem. Então deixe Count Gen Equal Contagem fabricante. Vamos em frente e conselho não registrar um monte de chamadas para a contagem n ponto Próximo, acessando o método de valor. Então 123 e quatro à medida que economizamos, obtemos 123 e indefinido como esperado. Ótima. Agora podemos ir em frente e produzir quatro se você quiser depois de três por apenas aumentar o limite de contagem é menor que quatro e nós temos um dedo contra o pé. 1234 Incrível. Vimos algumas implementações fundamentais do novo gerador ES seis, e são casos de uso práticos. Por exemplo, o que acabamos de ver com o gerador Count Maker também pode ser estendido para um sistema para fazer I DS. Em outras palavras, o gerador continuará gerando novas ideias para os usuários, um de cada vez, garantindo que eles sejam sempre únicos. Mas em um formato muito controlado e provisório, não importa quando um novo usuário se inscreve onde os dois minutos após o último usuário, duas horas ou até duas semanas, este gerador retornará o próximo i d para o novo usuário e um número adequado. Agora que vimos este caso de uso, vamos continuar e mergulhar em alguns ou envolvidos usos do gerador em E s seis 17. Como controlar o fluxo com os geradores: agora funcionará com os geradores envolvidos MAWR. Continue explorando o conceito de rebanho controlado. Vamos descobrir como adicionar uma capacidade recente aos nossos geradores. Primeiro, vamos criar um novo gerador que lista os números pares, começando com dois para encontrar um novo gerador e chamá-lo de função evens. Asterisco equilibra o corpo da função como chaves. Como de costume. Vamos inicializar a variável contábil agora e defini-la para contagem zero igual a zero. E agora vamos fazer algo considerado quase blasfêmia. No domínio da programação irá adicionar um loop que nunca pode parar enquanto verdadeiro, o que sempre será verdade. contagem mais é igual a dois. Então vamos em frente e contagem de rendimento agora, o loop while Untrue nunca pode quebrar em um executa um modelo de conclusão. Isso nunca sairia e causaria um loop infinito. Isto é, na verdade, um pedaço de código notório. Um professor de ciência da computação pode dizer para você nunca escrever em um de seus cursos introdutórios , mas com geradores nós gostamos de viver no limite. Nós desconsideramos esse conselho e usa loop perigoso para nossa vantagem. Então vamos vê-lo em ação, criando uma nova instância de arte equitativa gerador deixar seqüência igual igual Vamos em frente e chamar o log de pontos de uma primeira chamada do estado de produção, então o ponto de seqüência próximo acessando o valor. Vamos continuar e copiar isso mais algumas vezes. Vamos economizar e chegar a 46 como esperado. E isso enquanto loop não está quebrando o nosso programa agora, você pode estar se perguntando como exatamente re variável conta definida não parece que podemos fazer muito dentro aqui. Bem lembrou que ponto próximo método especial para geradores que estavam usando aqui. Bem, ele tem um parâmetro opcional que podemos usar o estado passado para o nosso gerador. O que quer que tenhamos passado como um parâmetro para a próxima função pode modificar o estado interno e comportamento do nosso gerador. Então atualize o gerador da mesma forma, defina a contagem de rendimento para uma variável de reset. Aqui, o reset parece de tudo o que é passado para o gerador e verifica para ele em uma instrução yield . Tudo bem, e então, se o reset for verdadeiro, então é igual ao verdadeiro. Mas podemos apenas dizer que se um reset em si é verdadeiro, que irá em frente e definir a contagem de volta para zero. Como visto, a instrução yield não só retorna o estado atual, mas também verifica o estado passado para o próprio gerador. Então temos uma declaração se simples que define a conta de volta a zero se essa declaração de rendimento alguma vez avalia a verdade. Muito bem, vamos ver isto em acção. Vamos manter esses logs de seqüência iniciar o próximo valor de parada. Mas depois, vamos contar a seqüência de log adulto ponto próximo valor de ponto verdadeiro e então vamos conselho não registrar outra chamada para seqüência ponto próximo valor de ponto e vamos verificar os valores retornados aqui como salvamos Boom, nós Receba 246 Mas depois passamos. Fiel à função evens, conjunto Serie torna-se verdadeiro. Você está definido de volta a zero e produz uma vantagem na conta. Incrível. +246 para 4. Agora descobrimos como redefinir nossos geradores. Nunca se recuperou. Reiniciar. Vamos avançar para ainda mais maneiras que podemos aproveitar os geradores E S seis 18. Geradores de e a: Vamos discutir geradores em comparação com geradores em JavaScript e ES seis e gerador em qualquer linguagem de programação irá acessar itens de uma coleção ou matriz um de cada vez, e ele mantém o controle de sua posição como ele faz isso em JavaScript. Assim como o gerador, podemos definir nosso próprio integrador com o próximo método que retorna o próximo valor de um passado para a direita. Vamos criar nosso próprio gerador agora, que não será um gerador, mas nosso próprio gerador artesanal a partir do zero. Defina um conceito chamado Gerador de matriz, que será uma função de seta com uma matriz de parâmetros. Const. Classificado. Aerador é igual a matriz. Aqui está a nossa função de seta e grande. Agora, dentro deste gerador, precisamos definir o ponto de partida. Atribuída uma nova variável de índice 20 com o escopo do array inter avaliador. Deixe o índice igual a zero. Em seguida, retornará um objeto para este gerador com a próxima palavra-chave que mapeia para um ar de função. Volte em seguida e teremos uma função de seta. Ótimo. Agora tudo o que nos resta é o anúncio da lógica real. Próximo para retornar o próximo item na matriz e aumentar o índice em um cada vez. Primeiro queremos verificar se o índice é menos coisa, a vida do terreno. Dessa forma, nosso gerador sabe parar uma vez que o índice excede os limites de arrays, e então vamos armazenar temporariamente o valor atual dentro da matriz. Index, em seguida, irá aumentar o índice em um e finalmente retornou essa variável temporária. Então vamos adicioná-lo, lógica dentro do próximo escopo do corpo. Portanto, se o índice for menor que o comprimento do ponto da matriz, certifique-se de que tudo está formatado corretamente. Deixe próximo igual ao índice de matriz atual. Será que aumentar o índice por um, e eles vão cabeça e rendimento e retornar em vez que próxima variável. Agora vamos trabalhar com a nossa própria função iterada personalizada, criando uma instância e passando-a matriz de 123 Então vamos dizer que eu t é igual a matriz que aerador passando em 123 que é apenas uma matriz para usar por agora e então vamos em frente e conselho ponto log alguns Próximas chamadas. Então vamos registrar. Eu criei o próximo e confira. Vamos salvar e boom em nosso consulado, nós temos um, que é o primeiro valor que passamos em nosso er iterado. Vamos fazer isso. Um par mais vezes devemos obter 123 Vamos fazê-lo mais uma vez e vemos que ele finalmente retorna indefinido uma vez que passa a vida do ponto da matriz. Muito legal. Agora este gerador trabalha para passar pela matriz um elemento de cada vez, mas com geradores, temos uma alternativa poderosa saindo do código gerador. Apenas um tê-lo como uma referência. É uma boa barra de comando. Em seguida, vamos criar agora no gerador ES seis. Então função, asterisco uma taxa e mais vermelho, que agora é um gerador dentro do gerador. Temos acesso especial a uma palavra-chave chamada Arguments, que verifica o que quer que passamos quando chamamos nosso integrador de matriz. Tudo bem, então está em um retorno para os argumentos reais. Palavra-chave. Eles vão fazer uma instância de arejador com classificação R e passá-lo em valores de 123 Até agora, I t é igual ao aerador com classificação R. 123 Vamos entrar confiante registrar uma chamada de i t ponto Em seguida, encontrar o valor atual que você salvar. Temos matriz de 1 a 3. Tudo bem. Muito legal, exceto que queremos produzir esses valores um de cada vez em vez de como no conjunto de pneus. Então, irá emular o comportamento do nosso gerador original, mas adicionando reforçada quatro loop que passa por cada argumento individualmente e produz aqueles assim, em vez de seus argumentos melhorar quatro loop para Deixe nosso de argumentos, em seguida, em cada instância produzirá Argh em si. Vamos salvar boom! Obtemos o valor atual de apenas um. Vamos adicionar mais alguns e devemos obter 123 Awesome. Saiba que usamos essencialmente uma palavra-chave yield três vezes neste loop. Bem, é seis fornece um atalho para nós. Sempre que usamos rendimento mais de uma vez em uma fileira, podemos apenas usar um asterisco de rendimento, sintaxe e reformar o loop de quatro em uma linha com argumentos de asterisco de rendimento, argumentos Como salvamos, temos um terno três. Assim como antes. Ótimo. Temos agora um gerador muito reduzido que imita totalmente o er personalizado ou reiterar que recriou originalmente impressionante. Este tópico abordou, hum, ou avançado dentro de JavaScript e Es seis em geral. E se você planeja codificar em idiomas em mais do que apenas Js e ele é seis, então aeradores irá aparecer em todos os lugares com e seis, embora geradores lhe permitirá abordar programas de avanço MAWR e criar mais eficazes Aerators. Lembre-se, os geradores têm que iniciar a pausa e redefinir a funcionalidade com o rendimento prático, palavra-chave e o próximo método. Tudo bem, vamos continuar aprendendo seis. 19. Como apresentar a programação de as promessas de Asynchronous: Vamos mergulhar no conceito de uma programação síncrona em JavaScript e E. seis First Off definirá programação assíncrona, mas primeiro esclarecendo as diferenças entre programas síncronos e programas síncronos . Quando nos referimos a programas síncronos, nos referimos àqueles que são executados em sequência de cima para baixo. Esses programas podem ou não enfrentar operações de bloqueio que afetam seu tempo de execução. Por outro lado, programas assíncronos se referem a aqueles que são executados em um mecanismo em loop, ou seja, quando ocorre uma operação de bloqueio, como uma solicitação de rede para um servidor que pode levar algum tempo para ser executado. O segredo A é Código Morre. Burt é a operação de um manipulador diferente. Portanto, isso mantém um programa em execução sem que um bloco nunca aconteça. Então, vamos para a questão importante em questão. Por que você precisa saber sobre um segredo? É programação, e por que isso importa? Primeiro, as interfaces e os navegadores fora do usuário são assíncronos por natureza. Afinal, o U. N. N. Browsers lida com eventos como cliques de botão, movimentos em massa e envios de dados de forma síncrona. Pense no fato de que esses eventos acontecem em momentos imprevisíveis no tempo. Portanto, em um modelo síncrono Isso causaria bloqueio constante para o usuário sempre que o motor teria que lidar com cada novo pedido e esperar que ele terminasse com uma programação síncrona , no entanto, Este problema é um saco. Se o usuário envia uma nova solicitação de função, essa função é desviada para um manipulador. Bem, o usuário vê uma resposta, e a resposta é processada em segundo plano. Desta forma, um segredo é a programação nos permite interagir com bancos de dados, servidores e olhos de AP públicos, porque as operações com essas tecnologias podem levar algum tempo para completar a Índia. Seis. Podemos seguir um modelo de um segredo é programação e lidar com funções que levam tempo para completar com promessas. As promessas nos permitem lidar com processos assíncronos, representando valores que em algum momento retornarão no futuro. As promessas podem existir em um dos três estados seguintes pendentes, cumpridos e rejeitados, que , respectivamente, indicam o status atual das promessas no cumprimento da função. Em última análise, promessas introduziu uma ótima maneira de lidar com programação assíncrona no Essex e definitivamente aparecerá em todos os programas e projetos Essex que você codificar no futuro. Então vamos começar a explorar promessas e programação assíncrona 20. Promises: vamos começar com a sintaxe básica para uma promessa em ES seis. Primeiro, declarar nova variável e um sinal de que o resultado de chamar um novo construtor promessa dentro do construtor terá uma função estreita. Com dois parâmetros, o 1º 1 será resolvido e o próximo será rejeitado. Ambos resolvem e rejeitam representam manipuladores na promessa que dão uma função para atualizar o estado da promessa. Resolver tratado, bem sucedida promessa Calls rejeitará pedais, promessas que não podem determinar o valor. Vamos primeiro explorar essa promessa resolvendo um valor futuro. Primeiro, vamos resolver uma string que acabou de resolver a promessa. Date me. Agora precisamos de uma maneira de determinar como acessar esses dados de promessa. Muitas vezes você ouve o conceito de acesso a dados de promessas como consumindo o processo. Para fazer isso. Reutilização de promessas ponto, em seguida, método, que aceita uma função que recebe um valor de retorno promessas uma vez que é cumprido. Neste caso, vamos chamar essa função que obtém a resposta de valor de promessa de retorno eventual. Então, em uma chamada para p dot, então teremos uma resposta com uma função de seta. E vamos simplesmente o Cônsul registar essa resposta. Vamos em frente e salvar e a resposta é resolvida. Promessa dados. Muito legal. Tudo bem, tal uma promessa que não retorna dados com sucesso, mas em vez disso rejeita? Como poderíamos criar esse tipo de promessa e lidar com isso? Além disso, vamos modificar a promessa de rejeitar um valor padrão para a promessa em vez de retornar um resolvido. Então, em vez de resolvido, vamos usar a função de rejeição para rejeitar dados de promessa rejeitados. Observe que agora vemos no ar com nosso cônsul que temos dados prometidos não capturados de nossa declaração então. Isso nos dá uma pista de exatamente qual função manipulador chamar para ver os dados rejeitados . Então, ao lado de então, podemos adicionar uma declaração ponto catch para pegar esse valor. Então ponto catch e este leva uma função de seta interna também. Então fazemos ar e conselho não registram esse ar específico enquanto economizamos. Percebemos que rejeitamos dados prometidos agora em nosso cônsul tão grande aviso que temos uma cadeia de funções agora o primeiro, em seguida, verificações de declaração para dados resolvidos na promessa e quando ele encontra nenhum passa o fluxo de controle para nossa declaração de captura. Isso tem o efeito de encontrar a promessa, ar e consumir são prometidos dados. Vamos fazer mais uma distinção importante com promessas. Lembre-se, as promessas representam valores para os dados, no entanto, as promessas geralmente podem levar tempo para processar. Isso inclui as funções que lidam com servidores AP olhares ou redes que podem precisar de tempo para processar os dados antes de retorná-los. Então vamos examinar os efeitos de um segredo. A programação com uma promessa que não necessariamente resolve imediatamente mais uma vez modifica a promessa? Desta vez, usamos uma função de tempo limite definido, e vamos resolver alguns dados de promessa. Então, em uma chamada para resolver os dados prometidos. E então nós vamos garantir que isso não é retorno até 3000 milissegundos ou três segundos se passaram. Vamos salvar, mas depois de três segundos. Mas, uh, boom resolveu dados prometidos. Legal. Agora vamos fazer uma distinção. E se ele adicionou log de pontos cônsul após o consumo de promessa depois da declaração real então ? O que você espera aparecer primeiro, o consumo pós-promessa ou a nossa promessa? Bem, enquanto economizamos, vemos após a concepção da promessa e três segundos depois resolvemos os dados da Promessa. Bem, esse comportamento imita o que podemos esperar de promessas que interagem com olhos AP para redes, a promessa pode levar tempo para ser concluída, mas ainda temos que executar o casaco fora da função de promessa como é em execução em segundo plano. Em última análise promete, permite e ordenadamente lidar com processos assíncronos em segundo plano como executamos outro revestimento. Ótimo. Acabamos de cobrir o básico da criação de promessas em Essex. Vamos continuar explorando promessas com um exemplo mais prático e aprofundado, a fim ilustrar sua verdadeira utilidade e poder. 21. Como apresentar os métodos de solicitação de de HTa em HTa HTa e a que a: E vocês seis. Nós temos o início de um novo A P I chamado Fetch, que nos permite interagir com a Internet Resource é através de programas Js para estabelecer uma base sólida para este tipo de programação. Vamos abordar outro conceito fundamental no desenvolvimento web e na World Wide Web. Em geral, http http. Ou o protocolo de transferência de hipertexto define uma base para a forma como os dados se comunicam através da Internet. Por exemplo, observe que em um navegador no início de um u.L. u.L. você sempre verá as letras Http. Bem, este Http está especificando um esquema para o site para uma mensagem de solicitação específica para enviar para um servidor. O servidor, em seguida, fornece recurso é baseado na solicitação http, como arquivos HTML e outros conteúdos como imagens para o navegador para Sirte. Podemos usar vários tipos de métodos de solicitação http, a fim de especificar exatamente quais ações, em seguida, para executar Primeiro de tudo, o mais comum o método get representa solicitação http que só recupera dados e não tem efeito secundário. Normalmente, o método get. Vamos transformar html como um recurso ou outros dados, como um objeto JavaScript Jason. Como resultado, não, não, esse Jason é um formato de arquivo alternativo para JavaScript que basicamente hospeda objetos de script de trabalho grandes como um arquivo grande. Em seguida, o método post realmente envia dados para um servidor para que ele adicionar um recurso é ou atualizar os existentes. Isso varia de qualquer coisa destruindo um e-mail dentro de uma lista ou atualizando comentários em um quadro de mensagens ou adicionando novos valores a bancos de dados. Outros exemplos de métodos http incluem o head, que a partir de meta-informações, como o título de um recurso, o método delete, que remove um recurso especificado. E o método de patch, que modifica apenas parcialmente o recurso que você vê mais frequentemente obter e postar em ação. No entanto, ao lidar com nossos próprios bancos de dados e servidores, bem como ao interagir com um P s. Ok, vamos nos preparar para rumble e codificar com olhos AP e buscar 22. APIs e a pesquisa de as de de 6 e a: em JavaScript. Temos uma nova tecnologia chamada Fetch, que fornece acesso ao uso de métodos de solicitação http para usar fetch. Passamos pelo método fetch, o caminho do recurso. Queremos dados de, incluindo quaisquer especificações. Em seguida, esta função retorna são promessa contendo os resultados dessa chamada. Este é os fundos podem retornar um ar rejeitado ou um sucesso resultado, como visto anteriormente na exploração de promessas. A promessa de consumo, em seguida, mantém todos os dados relevantes que queremos do recurso. Em uma nota rápida, o Fetch a p I ainda é considerado atualmente em tecnologia experimental e não suporta todas as versões do navegador. No entanto, se você estiver usando versões mais recentes do chrome, Firefox ou safari , você deve ficar bem. Está bem. Para executar uma busca vai precisar de um recurso de primeira captura de dados de Had to Jason espaço reservado ponto digite um código ponto com aqui. Aqui temos uma ferramenta que simula um A P I para fins de teste e prototipagem. É totalmente funcional e nos permitirá visitar Resource is e pegar pseudo dados como uma forma aprender. Isso ilustrará perfeitamente a capacidade do método fetch porque você não precisa comprar nenhum chás de autenticação para isso, um p I ou mesmo se registrar como um usuário para começar a interagir com ele. Está completamente livre agora. Depois de ouvir, role um pouco para baixo e você encontrará uma lista de recursos e rotas disponíveis. Clique na estrada que diz pós barra um. Isto irá levá-lo para uma página onde você vai encontrar alguns dados de retorno Jason contendo coisas não consequenciais como um usuário i d. Um título e um componente de corpo. Para ir para nós será usar um buscar um p I para ver este objeto Jason dentro do nosso programa. Certo, então primeiro passo, vamos copiar o U. R L em um sinal de constante chamada rota dentro da nossa função. Defina para que você é assim é Jason espaço reservado ponto tepco dot com barra postagens barra um. Então raiz const é igual a que você estava l em uma força. Agora vamos usar o método fetch. Ele leva a nossa rota para o primeiro parâmetro, e então podemos especificar quaisquer especificações com um objeto como seu segundo parâmetro. E nossas especificações especificamente para este será um método que é o método http get em todas as maiúsculas. Tudo bem agora, como uma função. Nós consumimos o resultado com uma declaração então porque é uma promessa. Então ponto, em seguida, resposta. E vamos em frente e o Conselho não registre essa resposta por enquanto. Eu vou fazer uma escapadela. Vamos salvar. Volte para a nossa aplicação e boom! Recebemos uma resposta cujo status é 200 em última análise. Ok, vamos ver a chave pro Doe aqui dentro. Observe que temos um monte de métodos úteis dentro do protótipo de objeto para a resposta . O que estava mais interessado é o Método Jason. A função Jason, por sua vez, retorna. Outra promessa que retornará são Jason Data puro. Agora, quando voltarmos, isso introduzirá o conceito de promessas de encadeamento, cada resposta de retorno que Jason poderíamos lidar. O retorno Jason desta promessa com outra declaração do que. Então modifique e assim, em vez de registro de pontos do conselho, a resposta retornará ponto de resposta Jason e agora dentro de outra declaração em seguida com esta promessa em cadeia podemos lidar com o Jason que encontramos e simplesmente conselho. Não registre isso enquanto economizamos boom, encontramos todo o objeto que vimos mais cedo online. Temos o corpo do I D o título e o usuário I d Muito legal. Então buscar nos permite usar Resource está online diretamente dentro do nosso programa. Imagine se usarmos outro Ap I que publicou dados meteorológicos ou relatórios da cidade. Por exemplo. Poderíamos usar esses olhos AP realmente complexos para construir aplicativos realmente complexos, e podemos trabalhar com eles muito facilmente usando o Fetch A P I e promessas. Vamos usar um AP I mais dinâmico agora e continuar explorando buscar com outro exemplo Usamos outro AP gratuito raro que eu realmente hospedado pelo Google para retornar Jason Data sobre livros. Agora tenha paciência comigo enquanto escrevemos este u R l, mas valerá a pena. Confie em mim. Então o seu URL é http como quais dias para seguro w w dot google 80 IES dot com Nós vamos encontrar o recurso livros. Estamos olhando para a versão um do FBI, então v um encontrar volumes. Começamos a consulta com um ponto de interrogação. Dizemos Q é igual a spn. E finalmente temos um monte de números para representar nosso gelo. BNC 0747532699 Tudo bem, Então esta é a cadeia inteira. Você pode pausar o vídeo e olhar para ele para ter certeza de que você tem tudo digitado . Mas eu vou em frente e salvar, e enquanto o fazemos, encontramos novos dados do Jason dentro do nosso cônsul. Ótima. Então podemos olhar para itens, encontrar o objeto dentro daqui nós confinamos informações de volume e ver um monte de informações sobre este livro, que é Harry Potter e a Pedra do Feiticeiro. Muito legal. Então nós exploramos solicitações http o JavaScript buscar um p I e encadeamento promessas em ação todos juntos, trabalhar com um olhos P e lidar com eles com promessas nos dará o poder de construir es verdadeiramente significativos seis projetos. Muito bem, vamos passar para mais tópicos em E S. Seis 23. Como apresentar o ES7 e mais no EcmaScript: Bem-vindo ao Acma Script 2016. A próxima versão do script Atma depois es seis. Esta versão é chamada E s sete. Embora muito pequena atualização sobre o idioma, ainda é necessário rever os novos recursos que a atualização inclui também irá explorar algumas propostas muito bem desenvolver para recursos em javascript que têm uma grande chance de aparecer e comer. S oito. Primeiro ele tem sete tem um novo operador para exponencialmente ação substituindo o pensamento matemática Pau Helper. Este operador explicação torna muito mais simples para lidar com o aumento de números por um poder. Em seguida, há sete versões de suporte para um novo método dentro de uma corrida. Este ponto método inclui torna muito mais fácil verificar se um elemento já existe dentro de uma estrutura após a exploração das novas sete feições. Vamos repassar algumas novas possibilidades que você pode colocar suas apostas em ver um E S A e a publicação de Atma Script 2017 um estágio muito alto s. Uma proposta inclui melhor suporte para acessar os elementos de objetos. Mapas hash e script de trabalho incluem métodos para acessar os valores, chaves e entrada. Especificamente, no entanto, eu só tenho atualmente suporte para o método de chaves de ponto de objeto. Então vamos esperar que isso é um desperta para fora. Ele faz manipulação de objeto com um método de valores de ponto e entradas de ponto. Em seguida, aqui vem uma enorme proposta que quase fez o seu caminho em E s seis e S sete, respectivamente. Um dissipador funções uma pia funções ainda mais, suporte a programação assíncrona em javascript. Eles lidam e retornam bem as promessas, permitindo que o código seja executado em segundo plano sem bloquear nunca acontecer ao programa. Como você verá uma pia funções introduzidas. Ainda melhor controlar o fluxo além das promessas quando se trata de programação assíncrona. Então, explorar a proposta de uma pia e aguardar palavra-chave será divertido e valioso. Tudo bem, vamos aprender tudo sobre nós sete e mais além. 24. ES7: novos recursos: para começar a explorar o S sete, precisamos fazer algumas alterações em nossa configuração de compilação. Não é nada muito drástico. Apenas um NPM em sal e outra corda em nosso pacote ponto Jason Fox. Então, em seu terminal, encontrar o seu projeto e executar NPM instalar babble preset é 2016. Salve a morte. Assim que eu terminar, volte para o ponto do pacote Jason em seu projeto. Vamos encontrar o ponto do pacote Jason e certifique-se de que é 2016 é especificado como uma das predefinições , tudo bem, com o projeto e figurado. Vamos explorar os novos recursos do S sete ou oito como 2016. Primeiro fora. A fim de trabalhar com expoentes, tradicionalmente fazemos uma chamada para a biblioteca de matemática e usamos uma função de poder exatamente como essa. Deixe uma metanfetamina igual. Como 25 E como cancelamos o Log A. Vemos 32 que é dois para o quinto poder. No entanto, em seus sete, temos um tempo muito mais fácil alcançar esse comportamento com o X Mulheres ela operador asiático. Inspirado por outras línguas como Ruby, os expoentes tem um novo operador apenas parece multiplicar. Os sinais interrompem, então mude esse pensamento, amigo. Chamada para vezes cinco como confidente log A. Nós notamos que ainda temos 32. Vamos explorar o próximo novo recurso ES sete que você pode estar ciente. O DOT inclui método suportado por shrinks em JavaScript, criado assim que deixe ser igual shrink. Maravilhoso ponto inclui maravilha como nós log constante ser, devemos ver um verdadeiro valor. Então nos tornamos verdadeiros. Vamos testar se inclui manteiga, então você economiza. Não , não inclui manteiga. Tudo bem, então a string inclui Método simplesmente verifica. Se o que discutimos com ele inclui está incluído dentro do psiquiatra real. Sim, sete estende esse tipo de funcionalidade para uma corrida suportada por seu próprio ponto Inclui mudança de método . Seja para uma matriz e conselho não registrar se inclui um determinado valor. Então vamos fazer também. 345 e seis. Vamos verificar se esta taxa inclui para enquanto economizamos. Sim, nossa matriz inclui quatro. Que tal sete? Então salvamos as quedas? No Are Ray não inclui sete. Tudo bem. Depois de cobrir o operador expoentes, qualquer ponto de matriz inclui método. Na verdade, terminamos de explorar todos os novos recursos. Índia sete. Agora é preciso muito para incluir um novo recurso em uma atualização para JavaScript. E só porque sim sete era relativamente pequeno não significa que não há muitas idéias sobre como melhorar a linguagem. Na verdade, havia muitas propostas para a linguagem para S sete. No entanto, ainda não está totalmente desenvolvido e existe em certos estágios de experimentação e implementação. Muitos deles, no entanto, admitem que está perto de se tornar parte de um lançamento e poderia muito bem fazê-lo para o próximo . Só leva tempo. Bem, vamos explorar algumas das propostas mais tardias, no entanto, e verificar esses recursos. Dessa forma, vamos nos preparar para S A e o futuro do JavaScript. 25. Proposto de ES8: mais a de objeto: nosso primeiro s. Uma proposta torna uma manipulação de objetos muito mais simples. A fim de trabalhar com esses novos recursos, no entanto, precisamos insultar outro preset que pode lidar com este novo casaco. Volte para o terminal e execute o NPM. Instalar babble preset sim, 2017 Salvar morte. E então nós vamos precisar fazer a alteração necessária para o ponto do pacote Jason, mas adicionando a predefinição ES 27 à nossa lista de predefinições, então certifique-se em pacotes fora Jason, você tem isso exatamente assim. Sim, 2017 em sua lista de predefinições. Ótima. Com isso, vamos passar por cima de uma função que já tem suporte generalizado dentro do objeto. Prototype dot keys, que transforma todas as chaves para um método para encontrar um objeto chamado OBS e vai dar-lhe alguns dados rápidos apenas para ter algumas chaves e valores. Deixe AJ igual a um que é um ser, que é para e ver qual será três. Então vamos definir uma variável chamada keys e atribuí-la ao resultado de chamar os protótipos de objeto . Chaves funcionam sobre nosso objeto objeto como se ele fosse igual objeto ponto chaves acima, e como você aconselhou chaves fora-da-lei Presto, nós temos uma matriz de todas as nossas chaves, ABC Fantastic. Agora, antes desta proposta de atualização para o ensaio, nós só tínhamos acesso a este método de teclas de ponto para o protótipo de objeto. No entanto, isso parece um pouco incompleto. E se eu só quiser olhar para os valores bem, Felizmente, este proposto ele s um recurso fornece para nós um método de valores de ponto que apenas vender, modificar o código para o seguinte. Deixe valores iguais objeto acima valores em OBS e, em seguida, vamos confidante registrar nossos valores. E voilá! Temos uma matriz de nossos valores 12 e três. Finalmente, juntamente com a função de chaves e valores, temos outro método chamado entradas, que nos dá pares de chaves e valores. Em Honore. Vamos examiná-lo. Deixe entradas iguais entradas de objetos, proprietário para cima e conselho pontos lesões log como nós salvar matriz boom para cada um é um par de nosso valor e chave. Então aqui está um valor e chave e valor. Ótima. Agora você pode se perguntar, por que isso é útil? Afinal, temos os métodos de chaves e valores, que nos dá formas mais limitadas matrizes sobre as partes específicas do objeto que queremos. Vamos considerar a iteração através da matriz para imprimir chaves e valores. Essas entradas atendidas que o torna mais direto e fazê-lo com as chaves DOT ou método de valores de ponto . Vamos adicionar um loop simples os loops para fazer raise em entradas, a fim de imprimir. Nosso objeto vai usar e melhorar para loop neste caso, então para deixar entrada de entradas, então vamos simplesmente chamar Sadat. Registre o anel de temperatura, que é nossa chave é a entrada atual. Vamos acessar o primeiro elemento com uma entrada. Em seguida, vamos salvar o valor é o segundo elemento com uma entrada para que um vamos salvar e boom ta valor. Uma chave ser valor para na chave ver valor três EUA graças a esta proposta ES oito terá um tempo mais fácil manipular objetos em JavaScript no futuro com os valores DOT e, uh, uh, entradas método além de apenas chaves de ponto. Agora há uma grande chance de que esses métodos apareçam na próxima versão do script Atma, por isso é bom saber sobre eles mesmo antes de seus recursos oficiais. Vamos explorar outro s uma proposta próxima 26. Proposto de ES8: Assincronia: em seguida, vamos passar por uma enorme proposta de ensaio algo que realmente quase fez seu caminho para ES seis e sete e tem enorme possibilidade de aparecer na próxima versão do script ECMO. Isso vai realmente continuar nossa discussão de promessas e programação assíncrona bem Explorar funções enfrentando nesta é uma proposta. As funções de pia têm um propósito subjacente para simplificar ainda mais uma programação de circo para o trabalho, desenvolvedor de script e programador. Primeiro, você pode lembrar essa tensão entre uma programação síncrona ou simultânea e programação síncrona ou sequencial. Em um caso, o primeiro, temos a possibilidade de executar vários processos ao mesmo tempo, a fim de acelerar o revestimento em programação sequencial. No entanto, temos um modelo de cima para baixo. O deve executar cada passo método ignorantemente, mesmo que isso signifique que certas funções vão demorar muito tempo. Isso significa operações que poderiam levar um curto período de tempo para o usuário, acabam recebendo o atraso de espera para o segredo, este programa para terminar, portanto, um segredo. Seus programas resolvem esse problema enviando essa função de atraso para o fundo e terminando o resto das declarações. Uma nova proposta C implementa este tipo de programação com novas funções que usam uma nova palavra de especialidade. Uma pia, que é abreviação para você adivinhou um síncrono. Tudo bem. Com essa discussão, vamos criar nossa primeira função básica chamada uma pia, que simplesmente retornará uma string. O que é uma função de pia? Um lavatório. Que retorna? O que agora? Como uma promessa. Nós consumimos os dados de retorno desta função enfrentando com uma instrução então, então vá e escreva um dissipador. Um. Chame o ponto da função e acharemos a resposta e a dívida do cônsul. Registre essa resposta e boom! Recebemos um no retorno do cônsul da função assíncrona. Ótima. Não vamos examinar a função de frente que rejeita dados desta vez irá definir e um coletor para o qual apenas lança um erro. É uma função de pia, uma pia para lançar um novo objeto de ar que diz problema com uma pia. Oh, não. E, como antes, com promessas, pegamos quaisquer erros com uma declaração catch, uma pia para chamar a função. Vamos em frente e pegar qualquer erro e aconselhados. Registre o que esse ar parece como nós salvamos quem temos problema de ar com uma pia e nós temos um bom rastreamento de pilha para ver onde realmente aconteceu de Great. Vamos explorar o último estado de uma promessa pendente além disso, resolvido e rejeitado e examinar como lidar com funções de processamento atualmente com a palavra-chave aguarwait. Primeiro, vamos modificar. Estão correndo para funcionar toe realmente resolver alguns dados? Vamos apenas ir em frente e voltar para agora. E se ele quisesse combinar a nossa pia A 1 e enfrentar duas funções? Bem, nós poderíamos fazer isso com outra função de dissipador que espera pelo valor de ambos com a palavra-chave await, a palavra-chave await coloca uma pausa na função de corrida. Ele não permite que ele continue até que a promessa tenha alguns dados de retorno. É altamente útil para introduzir o fluxo controlado de volta na função, especialmente se você não quiser que o código seja executado até que você tenha o resultado de sua promessa. Vamos explorar esta nova capacidade de despertar em uma função chamada dissipador três. Ele vai remover esta chamada e dizer, uma função de pia uma pia três. Primeiro declaramos uma primeira constante de uma que se diz esperar palavra-chave em chamar uma pia que é confidente. Registrar o que se parece, e para const a nós vamos fazer a mesma coisa, mas vamos esperar pela chamada de uma pia para e, em seguida, vamos em frente e conselho ponto log para. E finalmente, vamos adicionar uma chamada de sua função assíncrona um Sink três como nós salvamos. E eu só tive um pequeno erro de ortografia. Então vá e conserte isso. Se você cometeu o mesmo erro, embora você provavelmente tenha me visto fazer isso e tipo Oh, não , certo, eles acham que é Nick. Então lá vamos nós. Temos um no nosso cônsul. Portanto, observe os dois usos da palavra-chave await. Na primeira instância, a variável é definida como o resultado da promessa de resultado, aguardando seu valor. Não importa quanto tempo essa promessa possa levar para resolver, o mesmo vale para nossa constante. Ele espera que a corrida funcione para completar, mesmo que isso signifique demorar um pouco para fazê-lo. É quase como fazer um gateway dentro do nosso programa assíncrono. Ele garante que outro código além da promessa esperada não corre para os retornos prometidos de valor. Desta forma, podemos realmente escrever código que é dependente do resultado da promessa. Afinal, temos a palavra-chave await para garantir que nossas variáveis estão definidas para uma promessa que não será indefinida. Agora, esta lógica extensa funções que interagem com um A p i ou servidor. Muitas vezes não queremos que a lógica continue até encontrarmos dados relevantes em nossas funções. Portanto, a palavra-chave U A garante que não manipulamos dados que não são realmente válidos, que é muito útil para olhos AP que só podem retornar dados depois de algum tempo ter passado . Ainda assim, o uso de múltiplas palavras-chave de espera desta forma introduz um fluxo síncrono e sequencial de lógica Voltar para nossas funções de pia A. Qual é o propósito do ás na palavra-chave? Então? Se isso não vai introduzir quaisquer acelerações com todas essas chamadas enfrentadas e esperar causa e, portanto, negar a chance de simultaneidade, essa é uma ótima pergunta. E a resposta é, é importante usar a palavra-chave Wait a seu critério não adicionar muitos porque realmente tirar a grandeza da programação assíncrona em primeiro lugar. Para colocar funções de tomada de tempo em segundo plano ainda aguardam. No geral vem muito a calhar quando queremos escrever código que novamente depende do resultado de uma promessa. Vamos explorar um último recurso nesta proposta básica. A função básica também é fornecida com um recurso de ponto de promessa, que lida com várias chamadas para funções assíncronas de uma forma paralela. Vamos declarar a nossa quarta e última disfunção secreta uma função de pia uma pia para uma pia. Vamos usar a tarefa de estruturação para definir ambos presos um e prisão para variável de uma só vez . Vamos defini-la igual à espera em Prometido em tudo, que podemos usar para passar uma matriz de funções assíncronas que prometem que todos chamarão simultaneamente civil chamada doente primeiro e, em seguida, uma pia para e, em seguida, finalmente, definirá raise um e vermelhos para dentro de um confidente. Adoraria verificar as constantes. E então, finalmente, vamos uma pia. Quatro. Ligue para o fundo do nosso programa e confira e boom! Recebemos um para você como esperado, porque prometemos que tudo corre ambos simultaneamente. Incrível. Esta proposta de recurso de uma pia e um peso tem sido em torno de um pouco de tempo, e quase entrou em Essex, mas os engenheiros atrás de uma pia queriam torná-lo perfeito para que ele simplesmente não tenha encontrado seu lugar em um lançamento ainda. Você definitivamente Seymour da pia A e aguarda funcionalidades no futuro do JavaScript , embora felizmente, embora felizmente, você estará preparado para usar essas funções e começar a tirar proveito delas, a fim tornar seu trabalho mais fácil com métodos assíncronos como desenvolvedor e programador JavaScript. Então, felizmente, você estará na vanguarda, sabendo tudo sobre uma pia e um peso mesmo antes de ser lançado oficialmente. 27. Pré-visualização do aplicativo de reagem: Bem-vindo ao Explorador de Livros. Criaremos esse aplicativo juntos muito rapidamente, apresentaremos, reagiremos e reuniremos muitos dos conceitos que analisamos e Essex para ver como ele pode funcionar na escala de um aplicativo corporativo. Funciona assim. Vá para o campo de pesquisa e encontre um título de livro para o que quiser. Por exemplo, vamos procurar Harry Potter. Em seguida, vem uma galeria de títulos de livros com sua imagem é relevante para a consulta que procuramos com Awesome. Cada título que tem um componente clicável que irá nos navegar para sua página inicial, onde podemos encontrar mais informações para que possamos ir. Encontramos sua página inicial no Google, que recebemos do aplicativo dinamicamente. Ao criar este aplicativo, aprenderemos tudo sobre JSX e Mawr Essential reagir ideias nesta seção e trabalharemos com o Google Books, um P I, a fim de pegar nossos dados. Felizmente, você se diverte muito enquanto aprende reagir e reunindo muitos dos seis conceitos ES que aprendemos neste curso. Vamos pegar revestimento. 28. Como configurar e de em em em que a: Vamos começar a construir o livro explorar para começar. Precisamos insultar alguns novos pacotes NPM dentro do nosso projeto. Volte para o seu terminal e pasta do projeto e executar NPM Install que irá reagir predefinido, reagir, reagir burro, reagir, bootstrap e, em seguida, fazer uma morte salvar. Tudo bem. Isso instalará as predefinições que informam o nosso arquivo de configuração do pacote Web para transpire. Reaja Fox. Ele vai insultar reagir e reagir, Hum, Hum, que lida com renderização reagir componentes na interface do usuário do navegador. E também nos dará o pacote React Bush, que facilita a venda em projetos de reagir. Primeiro, vamos ter certeza que nosso Jason Paquistão está completamente configurado corretamente. Volte para o ponto do pacote Jason e certifique-se de incluir reagir dentro de suas predefinições. Assim como agora volte para indexar tais es e vamos começar a trabalhar com reagir. Primeiro importar, reagir a partir da biblioteca Reagir, e então nós vamos importar o reagir mudo de reagir despejo e notar que estes são módulos padrão Me. Agora vamos rapidamente obter algo de renderização na tela com reagir. Primeiro, porém, vamos precisar ir para indexar dot html e fazer uma alteração muito pequena, então vá para construir índice dot html Precisamos de uma nova div logo acima do script que simplesmente diz que o I d é rota. Agora vamos definir essa idéia para rotear, e este dia será realmente usado por reagir para renderizar todo o nosso componente e aplicação . Ótima. Agora nós podemos realmente usar esta tag para renderizar componentes reagir e para renderizar componentes reagir que usamos de reagir para baixo pacote em Index Duchy s. Vamos renderizar uma div rápida que apenas diz reagir aplicação. Vamos usar um método de renderização braços que leva dois parâmetros o componente vermelho que queremos renderizar e onde renderizá-lo no HTML. Então, vamos dizer reagir burro, não renderizar bem aditivo que só diz reagir aplicação E, em seguida, para o segundo parâmetro, nós especificar onde vamos obter que i d então documento ponto get elemento, mas eu d vai acessar o um de raiz muito facilmente. Agora, você também percebe que parece que estamos usando HTML em nosso fop JavaScript. No entanto, isso não é realmente html. É chamado J s ex JSX em Essex em XML como ou html como marcação de sintaxe para JavaScript, a fim de Mary componentes de uma tela. JSX é uma estrutura que usamos dentro reagir para criar nossos componentes como nós salvar aviso de que nossa aplicação reagir def aparece no zoom no índice real R. J s clique aqui e boom, Lá vamos nós. Reagir aplicação. Tudo bem, próximo. Vamos exportar esta lógica para outro módulo vai começar reagir para mostrar-se de fora deste arquivo Js ponto índice de um componente externo. 29. Crie um componente global: Vamos criar um componente externo O host do JSX para o aplicativo primeiro, crie uma nova pasta de componentes e dentro disso, crie um arquivo chamado Global Daja. Sim, então dentro do aplicativo, criar uma nova pasta, componentes e, em seguida, dentro de componentes irá criar um novo arquivo chamado ponto global Js. Agora, dentro do Ducado Global s irá criar um componente de reação. Componentes e reagir refere-se a partes independentes reutilizáveis de código que quer alcançou uma função específica ou representam parte da interface do usuário. Neste caso, nosso componente global servirá como um componente para toda a nossa aplicação de reação. Então, dentro Global Duchy s no topo Adaline que as importações reagem como era ele componente característica de reagir grande agora iria criar uma classe e transformá-lo em um componente reagir. Então classe global estende componente e nosso bloco de chaves. Agora, antes de esquecer, vamos nos certificar de exportar este componente global como um componente padrão para este módulo que outros arquivos possam trabalhar facilmente com ele. Portanto, exportação padrão, global incrível. Estendendo essa classe como um componente de reagir agora nos dá um monte de métodos úteis que reagem fornece, a fim de lidar com componentes de renderização na interface. Nossa primeira função especial de reagir será o método de renderização que retornou alguns Js x. nosso JSX irá retornar um feito que diz o componente APP por enquanto. Então, adicione um método de renderização retornou alguns JSX Um erro comum é omitir a palavra-chave de retorno e ter apenas o JSX dentro do método de renderização. Então certifique-se de que você tem que retorno e aditivo que diz o componente aplicativo global. Ótimo. Então é isso para configurar nosso componente Js ponto global Agora com um ponto de índice Sim, vamos importar esse componente global que acabamos de criar. Então, indo importar global do diretório atual, encontrar componentes e, em seguida, encontrar global. Agora precisamos substituir um JSX em pé pelo nosso componente global e, em seguida, ele será uma tag auto-envolvente porque ele não tem nenhum Children, nem atributos vão e salvar e boom. Encontramos o componente aplicativo global Grande. Agora que vemos o componente global do aplicativo na tela, podemos continuar desenvolvendo esse componente global do aplicativo e criar os recursos do livro explore 30. Como criar um componente de entrada: para começar a estender sobre este componente global irá criar um campo de entrada para este aplicativo que nos permite pesquisar livros para renderizar nosso campo de pesquisa vai tirar proveito de reagir boo eixos. Campos de entrada muito bons na parte superior do arquivo. Vamos importar alguns componentes úteis de reagir. Bootstrap. Então, sob importante componente reativo de Reagir e Importar. O Grupo de Formulários para o Grupo de Entrada de Controle e componentes de pecan glib de React. Bootstrap. Ótima. Agora vamos atualizar o campo de renderização. Vamos nos livrar do nosso texto em pé e dar-lhe um tipo. Aproveitaremos a idade para o cabeçalho para a tag Element e o título. Basta ser livro, ovo explorar. Vamos dizer isso e bang, nós temos um grande título agora. Reserve explorar. Deixe-me ver o tamanho normal dele e nunca ir. Nosso cabeçalho para está muito bonito. Agora vamos em frente e configurar nosso componente de entrada. Ajudado por reagir. Bootstrap no topo irá criar um grupo de formulários, mas shells estilo bootstrapped. Esta seção como um formulário, em seguida, dentro do grupo quatro irá adicionar um grupo de entrada, que faz um estilo em linha entre um controle inter formulário, que lida com a entrada do usuário e um grupo de entrada adicionar em, que faz um clique de um botão para manipular A apresentação do formulário. Então, vamos adicionar um boom de grupo de formulários dentro do formulário Grupo terá uma rota de entrada de grupo, e então teremos o nosso componente de controle de formulário. Teremos o formulário real onde o usuário pode digitar suas informações a partir do campo para que este tipo será texto. E então poderíamos dar-lhe um espaço reservado para que nós, o usuário, saibamos o que digitar. Procure por um livro. E agora este controle de formulário realmente não terá nenhum Children, então nós poderíamos torná-lo um auto na tag de fechamento apenas fazendo barra e a tag de fechamento. E, em seguida, dentro deste grupo de entrada, vamos adicionar e adicionar em para ponto de grupo. Adicione e este será o nosso pequeno botão, que será uma falha, pecan ou ícone penhasco quem é bons atributos será pesquisa. Tudo bem, vamos salvar todo esse novo JSX. E então temos um novo componente de campo de entrada, que diz: “ Procure por um livro para que possamos fazer Harry Potter. E enquanto cozinhamos o botão, nada acontece ainda. Então, mesmo que isso pareça muito bom, precisamos adicionar algumas funcionalidades a essa entrada. Vamos criar novo método auxiliar dentro de uma classe de reação chamada Pesquisar disse Fazê-lo logo antes do método de renderização. Vamos adicionar uma pesquisa. Vamos ser. Coloque-o acima aqui e, em seguida, na busca. Vamos apenas uma busca constante de registros por enquanto. Em seguida, vamos adicionar no manipulador clique para o grupo de entrada ponto Adicionar em, e, em seguida, o manipulador leva uma função anônima, que aponta para o método auxiliar que queremos chamar, que será pesquisa. Então, em um clique do grupo de entrada, vamos ter uma função de ar, que aponta para esta pesquisa de ponto. Não, quando salvarmos, certifique-se que é assim dito. Acrescente. E enquanto economizamos, vamos clicar em busca algumas vezes e boom, estamos sendo revistados aparecendo no nosso cônsul agora. Este método de pesquisa, embora trabalhando, precisa de um pouco mais para ele seria limpo se você pudesse dizer o que mais fácil digitado no campo de entrada. É claro que, para isso, precisaremos ter dados mais dinâmicos para nosso componente de reação que represente o que o usuário digita nos quatro para encontrar uma solução e aguarda. Adicione dados dinâmicos. Vamos passar para o tópico de estado dentro de aplicativos reagir 31. Como introduzir o estado: vamos estado de cabeça para este componente, a fim de que nossa função de pesquisa reconheça com os tipos de usuário no componente de controle de formulário. Lembre-se, Estado simplesmente se refere a essa ideia. Esses dados são específicos para um componente de reação. À medida que o usuário interage com seu componente, o estado atualiza e mostra as alterações relevantes do componente com base nesse estado de atualização e dados recebidos. Tudo bem, é no componente de passeio marítimo. Precisamos usar este construtor de classes dentro do construtor. Passamos um adereços, palavra-chave e fazemos uma chamada para super adereços, a fim de reconhecer quaisquer dados recebidos para este componente. Então, depois de chamar Super Props Semana inicializar estado com desta palavra-chave da classe e criar um objeto de estado, disse que o topo, vamos chamar construtor, vamos passar adereços chamados Super Props. Então eu disse que poderíamos inicializar um objeto de estado sobre isso dentro do objeto de estado. Vamos ter uma chave por enquanto, quais cubas do valor de uma força de piscar de modo que ele vai simplesmente ser uma chave de consulta, que mapas se adequam a uma força de piscar impressionante. Agora sob campo de controle de formulário, podemos adicionar alguma lógica que chama atualizar este estado para qualquer tipo de usuário assim adicionando no manipulador de alteração para o componente de controle de formulário, que leva um evento que aponta para uma função específica, são específicas. Função será reagir este método de estado conjunto ponto, a fim de atualizar o nosso estado para o valor relevante que estamos recebendo a partir da variável evento. Então vamos chamar isso de pensamento. Estado bem, passando um novo objeto. Vejamos nossa consulta original e, em seguida, mapearemos isso para o valor de destino de ponto de evento, que será uma string representando o que o usuário digita dentro do componente de controle de formulário. Vamos salvar como fazemos. Então vamos digitar alguns novos dados. Então Harry Potter e parece que está funcionando. Só não temos como verificar se funcionou por enquanto. Então vamos atualizar o registro ponto do conselho no dedo de busca. Além disso, não registre esta consulta de ponto de estado de ponto. Vamos poupar porque o fazemos, precisamos aposentar Harry Potter. Mas uma vez que nós fazemos e re clique boom busca, nós temos busca. Harry Potter em nosso cônsul grande estão atualizando recurso estado trabalhou com este estado conjunto de pontos e um manipulador inalterado controle informado. Certo, antes de seguirmos em frente, vamos adicionar outro manipulador de eventos ao campo de entrada. Isso torna mais fácil para o usuário interagir com o aplicativo simplesmente pressionando a palavra-chave de retorno. Este manipulador será chamado em Key Press e, em seguida, a pressão de botão real registra uma chave de ponto de evento e tudo o que temos a fazer é verificar o evento. Daki é igual dedo do pé entrar. Então leia depois da mudança. Vamos adicionar em T pressione novamente. Vamos ver o evento, mas desta vez vamos verificar. Se o evento dot Key é igual a entrar, e então, em caso afirmativo, vamos em frente e chamar este ponto de busca. Vamos salvar mais uma vez. Como seria desta vez? Vamos revistar o Senhor dos Anéis e reparar. Não vou clicar no botão de busca, mas pressione Enter e boom! Temos uma busca pelo Senhor dos Anéis. Tudo bem, agora isso está funcionando. Passará para algum estilo e realmente tornando as funções de pesquisa mais inteligentes conectando um A p I e buscando alguns dados para todo este aplicativo 32. Estilo com CSS: vamos fazer este aplicativo parecer bom para fazer, então vamos adicionar algum estilo CSS para o yep, voltar para o índice HTM ponto. Oh, e em primeiro lugar, vamos adicionar loja de inicialização, uma biblioteca CSS muito popular para qualquer um usar, que vai dar um monte de melhorias estilísticas desde o começo. Precisamos de um link do tipo de folha de estilo, que apontará para o CSS on-line arquivado para bootstrap. Então navegue até você começar no bootstrap dot com. Então obter bush f dot com tal começar e você encontrar um link para o mais recente on-line compilado em homens. Se eu CSS fop bom, copiar esse link e simplesmente acelerá-lo para a cabeça do seu componente html ponto índice. Então tire este comentário. Certifique-se de que esta é uma linha corretamente. Depois, à medida que guardamos, deverá ver a actualização das suas viagens na aplicação. Dê-nos esse fundo alternativo, o que é muito bom para nós. Legal. Então, usando este link bootstrap fará nossa interface de usuário olhar muito mais limpo por causa dos estilos bootstrap que ainda quer em seus próprios estilos personalizados. Em cima disso, assim criar outra solução, Klink e apontou para um arquivo CSS ponto índice dentro do diretório atual. Súbita New Link Quem é o estilo rela? Ela no h ref estará no diretório atual encontrando índice CSS. Agora precisamos fazer o arquivo CSS ponto índice você arquivo índice dot CSS dentro da nossa pasta de construção no primeiro estilo vai ser geral, Globalstar dizer dot global bem alinhado tudo para o centro para o texto. Também lhe daremos um pouco de estofamento. Assim não está tocando nas bordas. Agora dentro da Duquesa global, precisamos adicionar nomes de cláusula que div geral e defini-la como Global. Então volte para o Global Dodgy s que dará ao nosso div geral o nome da classe igual a global. E como nós economizamos boom como recarga notar que as coisas não estão mais tocando as bordas. E o nosso título está agora no meio do aviso que não usamos uma palavra-chave classe como todos os arquivos HTML porque as classes já reservaram palavra-chave em JavaScript. Então reagir nos permite especificar classes sem interferência com a palavra-chave classe de javascript usando os atributos de classe e nome. Tudo bem, vamos continuar conectando este aplicativo adicionando o Google Books um P I ao nosso método de pesquisa e realmente buscar alguns dados 33. Como fazer livros: para o livro Explorer aproveitará o livro gratuito A P I do Google, que era uma enorme coleção de livros e informações de livros que podemos acessar com consultas de pesquisa simples . Aqui está o A P I que vamos usar e sua documentação estavam interessados nesse recurso que nos permite realizar pesquisas de texto completo e recuperar informações do livro. Em seguida, Aqui está um exemplo do endpoint real que vamos estar atingindo. Ele retorna um grande formato Jason arquivado com o tipo de livro que pesquisa os itens que estavam recebendo em um monte de descrições baseadas em cada livro. - Legal. Tudo bem. Agora vamos realmente chegar ao código cabeça de volta para a função auxiliar de pesquisa. E primeiro, vamos limpar uma nova constante, que será a nossa base. Você estava fora. Diga, base const você é l é igual a uma string vazia. Por enquanto, vamos começar a preparar o link. Então, primeiro é um recurso http, Http, em um seguro. Então é Golin barra barra Nós vamos ter o site real, que é Google ap eyes. Encontraremos o recurso de livros. Estamos usando o número da primeira versão. Estamos olhando para volumes. interrogação começa uma consulta e Q igual nos permite especificar uma consulta. Então, mais uma vez é https. Google F.B.B.B.I., agora precisamos buscar os dados de uma pesquisa específica nesta base. Você estava fora e notou que eu uso a palavra “buscar”. Você acha que foram usados A buscar um p eu vou buscar no anel de temperatura que combina base aérea aqui. L ea consulta que os tipos de usuário adicionar uma busca na string modelo com a nossa base, você Earl adicionando este estado atual de consulta Agora precisamos simplesmente especificado que isso vai ser um método get http. Então vamos dizer que seu método é ficar incrível. Lembre-se, nós consumimos a promessa com uma declaração então. Então, responda. Vamos retornar a resposta que Jason, porque estamos interessados na resposta que Jason e então vamos consumir essa promessa com outra. Então, Jason e por agora, mas simplesmente confidente registrar como Jason se parece. Vamos continuar e salvar nossas atualizações de aplicativos. Vamos procurar Harry Potter e ver se conseguimos algum Jason e Awesome. Temos um objeto enorme . E isso é exatamente o que nosso exemplo atual que vimos anteriormente parecia com esse objeto enorme . Agora temos isso dentro do nosso cônsul. Fantástico. Agora vamos usar esses itens de livro que estamos recebendo em nosso programa toe realmente atualizar nossa interface de usuário. 34. Como adicionar um componente da galeria e introduzir os materiais e de introdução.: para representar nossa lista de itens de livro, vamos criar um componente de galeria que hospedará todos os nossos itens de livro buscados. Primeiro, assim como a forma como o usuário atualiza um estado de consulta com a entrada. Vamos atualizar alguns digamos, para refletir novos dados dentro de nossa aplicação na chave de um item para o objeto de estado e configurá-lo para uma matriz vazia. Bem, digamos itens, é uma matriz vazia dividida em seguida dentro do Jason Handler. Vamos pegar a chave itens a partir deste Jason e atribuições até mesmo itens variável. Observe que vamos usar a atribuição de estruturação em objetos para atribuir a variável itens diretamente para a chave de itens dentro de Jason. Em seguida, usamos a atribuição de estruturação novamente para definir o estado de sua matriz de itens para este item. Variável. Vamos criar um bloco de código. Bem, deixe os itens dentro das atribuições de estruturação igualarem Jason. Em seguida, usamos é uma atribuição estruturação abreviada em objetos no imposto para definir itens, itens do pé dentro do nosso estado. Tudo bem, agora que cuidamos de atualizar o estado para nossos itens buscados, vamos adicionar um componente de galeria ao nosso aplicativo que lida com renderização desses itens criar um novo arquivo dentro da pasta Componentes chamado ponto de galeria Sim, seus componentes novo arquivo galeria dot jess agora dentro Gallery Duchy s irá configurá-lo para ser um componente reagir. Então importar reagir componente de reagir especificado nesta galeria de classe estende o componente para agarrar todas as coisas de reagir para renderização que irá renderizar e retornar um diferente básico . Agora que diz simplesmente componente de galeria. Então componente da galeria. Não se esqueça de exportar por padrão. A galeria é ótima. Agora é importante galeria dentro do nosso componente global e fazer com que ele apareça ao lado nosso campo de pesquisa. Então importe Galeria de Galeria em Global Dodges, percebendo que este deve ser Gallery Dodge como assim Vamos apenas ir em frente e ler Nome que galeria toca. Vocês provavelmente pegaram esse erro. Vou colocar isso aqui para pegar a pasta. Tudo bem, agora que você cuidou, parece que as galerias estão funcionando. Vamos ao componente da galeria agora ao lado do campo de busca. Então, logo após a busca em uma simples chamada para a galeria nunca ir. Vemos um componente básico de galeria por enquanto. Tudo bem. Agora, nosso componente de galeria precisa saber sobre esses itens de busca do livro No entanto, não queremos ter que adicionar nossa função de pesquisa à galeria também. Então, como fazemos com que esse componente filho do nosso global reconheça seu estado e itens mantidos? Bem, é aqui que adereços entram. Em reagir. Props é muito semelhante ao estado, mas refere-se ao estado pai em vez do estado local do aplicativo Componentes recebidos adereços de componentes de par, passando-os através de atributos para que possamos especificar que irá passar sobre o adereço de um item para o nosso componente de galeria com o valor desses itens de ponto de estado de ponto de ponto. Então, na galeria, digamos que não tem itens atributos iguais a isso que ST ponto itens Agora dentro da galeria, podemos reconhecer que eu era uma taxa e configurar alguma lógica de renderização, a fim de lidar com a aparência de novos livros, já que estamos conseguindo através de nossos adereços. Então volte para a função de renderização. Vamos adicionar alguma lógica que lida com mapeamento sob Ray para que possamos apenas criar o número relevante de componentes JSX. Não importa quantos recebemos, vai mapear sobre cada item. Dentro desta parada adereça itens um item de cada vez. Está bem aqui. Vamos adicionar um novo suporte, um pequeno bloco de código. Vamos pô-lo nestas linhas para torná-lo formatado muito bem. Então vamos dizer que este ponto adereça que os itens ponto líquido um item de cada vez. Você percebe que, em uma chamada de pesquisa, cada objeto de livro dentro de itens terá um volume no Foky. As informações de volume contêm um monte de dados úteis, mas queremos o título em particular. Por enquanto, usaremos a atribuição de estruturação para pegar o título do volume Info. Então, deixe o título igual a informação do volume do item, e isso vai pegar nosso título. Então vamos devolvê-lo se apenas exibir o título de cada um desses livros. Então vamos retornar uma div que diz Título e certifique-se de não esquecer que retorno palavra chave. Está chegando erro esquecer isso, que introduzirá erros em sua aplicação. Se omitirmos, ótimo. Vamos continuar e salvar e realizar uma nova busca. Então é como um par. Você Potter pode procurar o que quiser, no entanto, e boom, lá vamos nós. Recebemos uma lista de itens. Agora dê uma olhada no nosso cônsul avisando que cada item em nossa taxa precisa de uma propriedade de manutenção distinta em reagir. Isto é para distinguir componentes irmãos uns dos outros. Felizmente, a função de mapa vem com um segundo parâmetro opcional que mantém o controle do índice de cada criança dentro da função de mapa. Então reformá-los essa função para incluir esse segundo parâmetro, e vamos chamá-lo de Índice e especificar que cada uma dessas dips o título tem um atributo chave definido para esse índice. Então, mais uma vez, em um segundo parâmetro de índice, a chave para esta div será índice. À medida que salvarmos, teremos que fazer outra busca. Que tal “Senhor dos Anéis e Boom “? São aviso vai embora agora que cada fez tem uma propriedade de índice de chave. Tudo bem, nós temos uma lista muito legal, mas vamos torná-la muito melhor e interativa aproveitando Mawr dos dados dentro de informações de volume para construir itens de galeria ainda mais detalhados. 35. Detalhes da galeria: Vamos fazer o nosso componente de galeria parecer melhor usando mais dados da propriedade de informações de volume . Primeiro, aproveitaremos os links de imagem fornecidos pelas informações de volume e, mais tarde, faremos a transição dessa queda para um componente clicável que nos envia para a página inicial cada livro. Vamos definir links de imagem e links de informações do item informações de volume de pontos junto com o título para que nós vamos pegar ou links de imagem e nosso link de informações de volume de pontos do item informações. Tudo bem. Agora vamos modificar nossa dip para incluir a imagem em miniatura de cada livro, e a miniatura é uma chave nos links de imagem dentro do DIV. Adicionar uma imagem de direita acima do texto e irá especificar que fonte é imagem links ponto miniatura acima do título em uma imagem com um auto na tag de fechamento cuja fonte será links imagem ponto da prisão. Então vamos dar toda a propriedade que todas as imagens precisam, e vamos apenas dizer imagem do livro. Agora precisamos fazer uma pequena verificação e links de imagem Alguns livros no Google Books AP. Ainda não tenho imagens ou miniaturas, então os links de imagem serão retornados como indefinidos. Precisamos verificar isso porque se tentarmos renderizar uma imagem indefinida, nosso aplicativo não vai definir a matriz de itens e atualizar nossa pesquisa. O que podemos fazer, no entanto, é ignorar qualquer imagem indefinida como o Ault. Assim, só mostra um livro. Então vamos adicionar eternamente expressão, que é basicamente uma declaração se else encurtada para se certificar de que renderizamos algo para imagem como então digamos que seus links de imagem indefinidos. E vamos formatar isso corretamente primeiro, para que sua imagem não seja igual a indefinido. E se não estiver definido, vamos em frente e renderizar a miniatura. Mas se for indefinido, irá tornar uma força vazia. Então primeiro ele verifica essa condição. Se ele for avaliado como True, vamos para a primeira condição. Se não, vamos para a segunda condição especificada após o cólon. Agora, enquanto economizamos, vamos em frente e verificar isso. Vamos procurar o Senhor dos Anéis e, de fato, temos um monte de imagens. Eles só não são formato e bem ainda, então vamos olhar de game of Thrones porque eu sei que um dos livros para eles certamente não tem uma imagem ainda e viu que temos imagem livro quando a imagem é unr entrou. Agora, em vez desta propriedade de imagem do livro, podemos especificar uma imagem alternativa. Vá e procure uma foto faltando ou um ícone que você gostaria. Em seguida, entramos em um método de renderização especificar de variável. Isso diz Alternate é igual à imagem que você hospedou online. Vamos especificar a alternativa em vez de uma string em branco. Dessa forma, sempre mostramos uma foto independentemente do estado atual do Google Books, um P I para essa imagem. Então, mais uma vez, se eu fizer Game of Thrones agora, boom, nós temos uma enorme foto alternativa. Tudo bem. Agora, se fizermos uma busca, certamente obteremos imagens. Mas nós definitivamente queremos adicionar um pouco de estilo para fazer este olhar agradável. Primeiro, vamos adicionar um nome de classe ao relativo sobre, a Imagem e o título. Componentes do Dave. Então vamos chamar a classe geral Div livro Nome é Livro. O componente título será uma div que agora diz texto do livro. É um nome de classe é texto do livro e, em seguida, a nossa imagem terá um nome de classe da imagem do livro. O nome da classe é Book Dash. Eu sou G e incrível. Agora precisamos mergulhar nos estilos para esses componentes, e há um pouco deles. Com CSS. Pode levar mais do que algumas alterações para que sua interface pareça correta. Mas tudo vale a pena no final, em um novo componente de estilos de galeria para nos dizer que estamos mudando, a galeria vende. Vamos vender o livro, livro, imagem e título do livro, então cabeças índice CSS. Vamos especificar que vamos mudar alguns estilos de galeria apenas para que nosso CSS seja bem separado. Primeiro para o nosso livro, vamos adicionar uma tela para torná-lo em bloco de linha, mas para torná-los lado a lado, mas não em cima um do outro. Vamos dar-lhe um com de 220 pixels, que é grande o suficiente para ser visto, mas não pequeno o suficiente onde não pode ser visto. Eu daria uma margem de 10 pixels, para que eles não se toquem. Vamos dar-lhe uma linha têxtil de esquerda. Vamos fazer o ponteiro do cursor. Assim, quando você pairava sobre ele, parece que é clicável. A posição será então relativa aos outros livros ao lado dele. Agora, dentro da imagem do livro, será semelhante. Teremos um com 220 pixels, bem como uma altura de 220 pixels. Vamos dar-lhe uma borda agora de quatro pixels sólidos 000 que será preto, um raio de borda de quatro pixels para arredondar para fora as bordas e os cantos objeto ajuste de tampa. Certifique-se de que as imagens parecem agradáveis como imagens de fundo. Vamos dar-lhe uma posição de absoluta, de modo que ele se torne bem no topo do nosso componente de livro. Tudo bem, último texto do livro. Isso é o que parece muito legal. Vamos dar-lhe uma cor de fundo de preto, o que lhe daria um campo de sobreposição. Vamos dar-lhe uma cor de F F F F F. opacidade será 7,5, modo que é um pouco desbotada sobre a imagem que está com será 214 pixels, e logo depois vamos dar-lhe uma margem esquerda de três pixels. Assim, não passa da fronteira. Vamos dar o texto on-line do centro, bem no meio da imagem. Sua posição também será absoluta vamos certificar-se de linha têxtil é escrito corretamente. Nada sobre editores é que quando você cometer um erro com erros de digitação, ele geralmente diz imediatamente que a parte inferior será zero passo caminho vai todo o caminho para a parte inferior do nosso componente de imagem. Seu preenchimento será de 10 pixels. Tudo bem, então recarregue. Vamos tentar verificar as mudanças. Procure Harry Potter ou qualquer coisa que você gosta e boom, nós temos muito bom Dave. A questão não está aparecendo ainda porque eu tenho que dizer Pointer. Então vamos salvar recarga mais uma vez. Busca de Harry Potter novamente. Boom! Nós temos um bom ponteiro do cursor, e agora ele não está clicando em nada ainda. Então, agora que temos tudo isso bonito, vamos adicionar o último pedaço de funcionalidade que nos leva para a página inicial de cada um desses livros. Então voltar para a galeria ponto Js vai mudar a div geral para uma tag âncora para mudar isso para um então o que podemos fazer agora é com esta tag âncora, configurar uma propriedade de rascunho definida para o link Info que poderíamos dar-lhe um alvo de branco para dessa forma e navega para uma nova página em vez de nos tirar de nosso aplicativo. Vamos salvar é recarregar? Procure Harry Potter mais uma vez. O que quer que você procure por último e Boom, ele vai nos levar para New Page, que será a nossa página inicial para o livro real. Eu não incrível recriou um aplicativo reagir completo e teve um gostinho de Essex, em vigor no nível da indústria. Excelente trabalho. Espero que ele tenha se divertido construindo esta aplicação. Há uma parte do desafio na visão geral da seção caso você queira estender sobre isso e continuar explorando. Reagir. Além disso, vale a pena mencionar que eu não tenho todo o curso dedicado a reagir. Sim, assim como Redux. Se você quiser adicionar essa estrutura ao seu conjunto de habilidades e compreendê-la mais profundamente, é realmente exigente habilidade. Então eu recomendo esse curso. Eu tenho um link de desconto para qualquer pessoa neste curso, e você pode encontrar que na visão geral da seção com isso sendo dito novamente, grande trabalho e vamos continuar revestimento