Transcrições
1. Apresentação: Bem-vindo ao meu curso, perguntas de entrevista em
JavaScript
com tarefas práticas. Neste curso,
resolveremos juntos 59 perguntas de
entrevista mais populares que eles receberam ou foram feitas
nos últimos dez anos, e eles cobrirão todo o
conhecimento do JavaScript. Este curso está totalmente focado
nas tarefas de coordenadas. É por isso que eu
recomendo que você tente implementar
cada tarefa sozinho. Primeiro, depois disso, vamos
implementá-lo juntos de maneiras diferentes para diferentes
níveis de conhecimento. No final deste curso, você estará muito
melhor preparado para sua
entrevista em JavaScript conseguir um emprego. Quem sou eu? Meu nome é
Alexander cohered hint, e eu sou desenvolvedor web, tinha mais de dez
anos de experiência. Ele, bem como um
instrutor profissional com vários cursos sobre tecnologias
da web. Fiz o meu melhor para colocar
todo o meu conhecimento dentro deste curso e
queria compartilhá-lo com você. Então, seja bem-vindo a bordo
e vamos começar.
2. Tipos de entrevistas: Existem três tipos
diferentes de entrevistas que você pode obter. Primeiro de tudo, é pai
teórico. Você acabou de receber algumas
perguntas sobre seu trabalho e
experiência e assim por diante. Este é um tipo normal
de entrevista para desenvolvedores
mais avançados, onde eles desenvolvedores
mais avançados, onde eles
já têm muitos anos de experiência porque o
entrevistador entende, ok, esse cara estava trabalhando
no desenvolvimento web, por exemplo, com
JavaScript nos últimos cinco anos, o que realmente significa que ele tem conhecimento
suficiente e não faz sentido
verificar suas habilidades de programação. O segundo tipo popular de entrevista é a entrevista
coordenada. E, na verdade, eu diria que esse é o
tipo de entrevista mais popular. As pessoas muitas vezes misturavam entrevistas
teóricas
com desafios de codificação, o que realmente significa que
você está recebendo algumas perguntas teóricas e então você deve codificar algo. Na maioria das vezes você está usando caneta e papel e não computador. Neste curso,
resolveremos juntos 59
desafios JavaScript diferentes que você pode obter. Esses desafios são abordados em quase todo o JavaScript que ele encontrará nas entrevistas. E o último tipo de entrevista
é a entrevista de check-in do projeto. Normalmente, o entrevistador
queria ver seu código. Então, se você tem
algo para mostrar, é muito mais fácil
para você, porque você não deve responder
apenas a perguntas aleatórias, mas você pode falar
sobre seu projeto, sobre seu código e assim por diante. que realmente significa que eu
recomendo a entrevista implemente algum projeto porque
antes de tudo, você terá algo para
mostrar ao entrevistador. E em segundo lugar, você
terá algo para falar sobre o que
você pelo menos sabe.
3. Entrevista e trabalho são coisas completamente diferentes: Então, normalmente, para conseguir um emprego, você deve passar por uma entrevista. E é assim que ele está funcionando
em quase todas as empresas. Mas o principal problema com isso, sua entrevista nem sempre está
relacionada ao seu trabalho, que realmente significa que algumas
das entrevistas podem ser feitas perguntas difíceis, não
do mundo real, mas você deve
respondê-las para conseguir um emprego, mas você nunca
usará esse conhecimento mais tarde em seu trabalho diário. Aqui está o problema. Existem algumas semelhanças
entre introduzir e trabalhar, mas na verdade elas são diferentes. E no mundo perfeito, sua entrevista deve ser um espelho do seu trabalho real
na empresa. Mas, infelizmente,
nem sempre é assim. É por isso que você deve conhecer os dois. Você deve saber como passar na entrevista e você
deve saber como trabalhar. Neste curso, a maioria
dos desafios é conhecimento
completamente real que você deve conhecer e que você precisa tanto em sua entrevista quanto
na vida cotidiana. Mas ele também incluiu
neste curso algumas perguntas que
não estão relacionadas à sua programação
diária, mas você precisa conhecê-las
apenas para sua apresentação.
4. Mapeando usuários para obter nomes de usuário: A primeira tarefa que queremos olhar é soar assim. Você precisa escrever
um código para se livrar de nomes de uma matriz de usuários. E como você pode ver aqui,
temos uma variedade de usuários. E, na verdade, é apenas
uma variedade de objetos. Vemos esse nome e
essa propriedade ativa. E, na verdade, essa é uma tarefa
relativamente fácil, mas é muito bom começar
a entrevista. E
entrevistadores experientes
saberão que você está sob estresse, o que significa que
você deve receber vários exercícios fáceis apenas para relaxar
um pouco e você pode ser mais focado
e mais produtivo. E, na verdade, até mesmo um exercício
fácil pode dizer entrevista bastante qual estilo de
código você está usando, como você nomeia suas variáveis e como você está
escrevendo seu código para ele possa entender em
que nível você e quais perguntas
ele precisa fazer a você? Então, agora eu
recomendo que você publique este vídeo e tente
implementá-lo sozinho. Se você
quiser apenas acompanhar, então vamos codificar isso. E, na verdade, existem
várias maneiras de implementá-lo. Normalmente, os iniciantes
começarão com
loop for porque é a
abordagem mais fácil do que eles sabem. Por exemplo, aqui
depois do nosso usuário três, podemos escrever aqui para loop. Portanto, temos aqui para o índice
let de zero
para o usuário inclinado. Então, aqui temos um comprimento menor
do que o usuário e aqui
temos oito plus plus. Agora, dentro do nosso loop for, queremos acessar
cada nome e empurrá-lo em alguma glória. É por isso que antes de
queremos criar uma matriz, vamos nomear nomes e ele
será um array vazio. Agora, dentro de um
loop for, podemos escrever nomes para saída
e aqui dentro do acesso em nossos usuários com eu
vi que este é o nosso nome de ponto de usuário
atual. Nesse caso, colocamos um nome online desse
usuário neste direito. E depois do nosso
loop for, podemos apenas console.log nosso em seus nomes
e verificá-lo e navegá-lo. Estou relacionado na página
e, como você pode ver, nosso resultado é Chegg. John Mike Isso é exatamente o que precisamos implementar e sim, resolvemos nossa tarefa. E se você é um iniciante, essa solução é totalmente boa. Mas você pode fazer melhor
porque toda vez que você tenta codificar
melhor uma entrevista, você mostra que é um
desenvolvedor melhor. É por isso. Vamos contar esse
código e tentar novamente. Então, o que podemos usar
aqui em vez de
loop for é para uma
função rica para nossa matriz. É aqui que podemos
simplesmente escrever os usuários ponto para rich e, dentro, devemos
fornecer uma função de retorno de chamada. O que é mais importante, temos um acesso aqui
a cada uso e agora dentro de uma
lata fazer o que quisermos. E como você pode ver aqui, não
temos índices e nosso código está muito melhor. Então, o que queremos fazer aqui é exatamente a mesma coisa
como fizemos anteriormente. Criamos aqui nos nomes
reais e agora dentro do nosso loop para cada loop
queremos empurrar para dentro de nossos nomes, nosso nome de ponto de usuário. E, como você pode ver em
comparação com nosso código antigo, esse código é muito
mais fácil de ler. Vamos um pouco comum aqui nosso console.log e verificar
se ele está funcionando. Como você pode ver, estamos obtendo
exatamente o mesmo resultado. Portanto, este é o nível
dois de gravação no código, mas na verdade a
melhor maneira de resolver essa tarefa é usar a função de mapa
adicional. E, na verdade, isso tornará
seu código o mais simples só porque você está usando a ferramenta certa para
a tarefa certa. Neste caso aqui, podemos escrever que queremos
recuperar nossa
matriz de nomes e aqui queremos
percorrer nossos usuários com
a função map. E se você não sabe o que
o mapa está fazendo bem, percorrendo
cada elemento dentro de nossa matriz e
retornará alguns de seus dados para
cada elemento em nossas chaves em vez
de nosso objeto, queremos retornar um único nome. É aqui que? Aqui podemos
escrever que temos um usuário e queremos retornar
seu nome de ponto de usuário. Vamos verificar se está funcionando. Como você pode ver no navegador, estamos recebendo exatamente
a mesma saída. Mas esta é a melhor variante para essa tarefa e
mostra que você sabe, o que você está fazendo para solução é quase
sempre de baixo nível, o que significa que você
precisa exatamente implementar
o que você estão fazendo. Neste caso aqui, precisamos
dizer que estamos empurrando elementos para nossos novos nomes de array. E também o que você pode ver aqui, criamos a matriz de nomes
antes de usar o loop for, o que realmente
significa que
nossa lógica e nossa variável adicional não
têm nada juntos. No nosso caso, aqui estamos
escrevendo o resultado diretamente para nossos novos nomes de
variáveis. Então você resolveu
essa tarefa com sucesso e agora está
recebendo a próxima. Precisamos voltar
aos usuários ativos, o que significa que nosso primeiro
ponto aqui é válido, mas isso deve ser
todos usuários ativos. E, na verdade, poderíamos usar qualquer método que quisermos
aqui para resolver isso. Por exemplo,
poderíamos usar aqui para loop e escrever mais simples
dentro do que se condição. E podemos verificar
aqui se nosso usuário está ativo e se essa
propriedade é verdadeira,
então, dentro, queremos empurrar nosso elemento para o nosso.
E você está certo. E, como você pode ver no navegador, estamos recebendo aqui
apenas dois usuários porque nosso último
usuário está inativo. Isso é totalmente bom, mas temos aqui dois problemas. Primeiro de tudo, nosso
código é de baixo nível. E em segundo lugar, misturamos
aqui a lógica junto com filtros e elementos
e os mapeamos. E isso é ruim porque quando
seu código é mais complexo, então é mais
difícil dividi-lo. E, na verdade, a
solução para cada um será exatamente a mesma. Mas vamos dar uma olhada na
solução desse mapa. Na verdade, o que
queremos fazer aqui. Queremos, em primeiro lugar, filtrar nossa matriz e
entrar em contato com os usuários ativos. E depois disso, queremos aplicar nosso mapa para que possamos aqui
mesmo filtro de pontos. E temos exatamente a mesma
lógica que temos aqui acesso ao nosso usuário e devemos retornar aqui um predicado
com verdadeiro ou falso. No nosso caso, será o ponto
do usuário ativo,
portanto, se nosso usuário
estiver ativo ,
deixaremos dentro de nossa matriz. Em ambos os casos,
vamos jogá-lo fora e depois desse trabalho chamar
nosso mapa para mapear nomes. O que é importante
neste código aqui quando não misturar merkin e
filtrar juntos, o que significa que é mais
fácil suportar esse código. Agora temos outra tarefa. Você está recebendo
certos usuários por idade decrescente e, claro,
as primeiras regras também colocam. que significa que nós, em primeiro lugar, devemos resolver o Ray
e depois precisamos
filtrar nossa taxa
e mapear nossos nomes. E como você pode ver aqui agora, além disso, estamos
recebendo propriedade de idade. Esta é a nossa propriedade pela
qual classificaremos nossa taxa. E, na verdade, em JavaScript, se você quiser pesquisar algo, você deve usar apenas uma única função
JavaScript e ela não é classificada. Você não pode fazer
isso de forma diferente se não souber como uma
função de resort está funcionando. Você pode ir para os desenvolvedores
mozilla orig para este URL e aqui está um site de protótipo
real. A ideia principal é que
são a
função de pesquisa colin em nossa
matriz e dentro
passamos um comparador de funções
com A e B e, no nosso caso,
será o primeiro usuário e o
segundo usuário e , em seguida, o segundo
usuário e terceiro usuário, o que significa que ele está comparando
elementos um por um. E aqui devemos
devolver alguma coisa. Como você pode ver por dentro,
podemos retornar menos um. Se A for menor que B A, então vamos auditar. Agora devemos retornar de
um se A for
maior que B e estivessem retornando
zero se forem iguais. E isso é
exatamente o que devemos fazer aqui. Então, em todos os três casos, devemos escrever o mesmo código, mas nas duas primeiras variantes
será meio fugly porque na verdade devemos fazer a classificação antes do nosso código aqui. Então, vamos comentar
nosso código aqui e queremos aplicar
certo e aqui queremos escrever o
tipo armazenado do usuário e estamos recebendo
aqui nosso comparador. Então, temos aqui o
usuário um e o usuário dois e queremos
compará-los por idade. É por isso que podemos escrever aqui. A idade de um ponto do usuário é
menor que o usuário nessa idade. E se for verdade
, então aqui temos um operador ternário dois
que queremos retornar menos um. Em outro caso,
queremos devolver um. Vamos salvar isso e
verificar se está funcionando. Estou pulando para o navegador para carregar a página e estamos
pegando John e verificamos. Vamos verificar o sal no topo. John é 18 e Jack é 20, o que significa que com os
nossos dados ordenados corretamente, mas em ordem
decrescente, como você pode ver aqui de deve ordenado
em ordem decrescente, o
que significa que queremos
trocar aqui não menos um, mas um, e aqui
será menos um. Vamos verificar o
resultado que estamos recebendo, primeiro lugar, Jack
e depois John. E esta é a
classificação correta também você deve se lembrar dessa operação de classificação em JavaScript mutações e array. Este é o caminho aqui com a classificação de código regular e
não atribuímos nosso resultado a alguma propriedade porque
ela simplesmente muda nossa matriz de usuários e, em seguida, estamos fazendo outras
coisas com ela. Mas, como você pode ver
aqui, esse código é realmente separado do nosso loop completo porque devemos
fazê-lo antes de nossas operações internas. Agora vamos comentar
esse código e
tentar usá-lo com nosso
mapa e filtro. E aqui é muito mais fácil de fazer porque simplesmente
queremos aqui depois nossos usuários chamem ponto de classificação e, depois disso,
chamar filtro e mapa. Como você pode ver aqui,
quando sou
comentado, está muito bonito. Temos aqui nossos usuários
estavam fazendo nossa classificação. Depois disso, fazemos nossa
filtragem e, em seguida, mapeamos. E antes de tudo, esse código
é muito mais fácil de ler. Você tem aqui encadeamento
e você está obtendo seu resultado nesta
única propriedade. Além disso, é importante
que
não estejamos misturando operações diferentes. Primeira palavra a ser inserida, depois filtre e depois mapeie. E se precisarmos
ajustar um deles, não
precisamos mudar
a lógica de outro. Vamos verificar se está
funcionando e inundando a página e estamos obtendo
exatamente o mesmo resultado. Então, como você pode ver, você pode resolver até mesmo a tarefa simples de
maneiras diferentes. Se você quiser mostrar
na entrevista que é um desenvolvedor
avançado, você deve usar uma ferramenta específica
para sua tarefa específica. É aqui que a
cadeia de pensamento, mapeamento e filtro aqui é muito melhor do que usar o loop for.
5. Diferença entre nulo e indefinido: Você pode ter uma
pergunta como essa. O que fará logado
no primeiro exemplo e
no segundo exemplo? Para responder ao cisalhamento corretamente, você deve entender
a diferença entre nulo e indefinido
dentro do JavaScript. Como você pode ver aqui,
temos dois exemplos. Primeiro exemplo, não atribuímos
nada à nossa variável, o que significa que essa variável ainda não
está definida. É por isso que quando aqui nós o
console registramos essa variável, ela será igual, indefinida aqui
depois disso, estamos no login
do
console o tipo dessa variável, o nome do título também será indefinido aqui
temos nosso segundo exemplo. Estamos dentro da nossa variável dois
foram atribuídos valor nulo. Aqui estamos o login do console var2. E isso você pode entender
aqui nós temos nosso valor. Agora, isso é o que
veremos na tela. Mas o tipo de variável dois será um objeto porque não
existe esse tipo como agora, é por
isso que o tipo de variável é um objeto. Vamos
verificar isso. Estou recarregando a página e estamos chegando aqui indefinida. Esta é a nossa variável um aqui. Portanto, o valor dele é indefinido. É o tipo de indefinido
é indefinido como string. Agora, após esse registro do console trabalho
e trabalhar por
aqui, estamos recebendo agora esse é o nosso valor e o tipo
de variável é um objeto. Você realmente deve distinguir em JavaScript entre
nulo e indefinido. Ele é indefinido. Isso significa que a
variável é declarada, mas o valor
ainda não foi atribuído dentro dessa variável. Isso é exatamente o que
temos aqui na linha três. E agora em JavaScript
há um valor de atribuição, o que significa que é um valor que
podemos atribuir dentro da variável. No nosso caso aqui estamos assinando
agora dentro da variável para. E mesmo que você tenha respondido
corretamente aqui, entrevistador pode perguntar, mas qual é realmente
a diferença entre agora e depois
defini-la quando precisamos usar agora e quando precisamos
usar indefinido. E, na verdade, é complicado porque normalmente em idiomas
normais, temos apenas uma única propriedade, que significa que o
venerável não existe. Por exemplo,
botão Novo JavaScript. Temos duas coisas diferentes. Nós o
indefinimos e agora temos. E, na verdade, isso realmente
depende do estilo do
seu código e da sua equipe porque você pode usar os dois dentro do projeto. Mas, por exemplo,
prefiro usar sempre online e tentar ter o mínimo indefinido
e assim possível. Mas, obviamente, se
você está tentando encontrar um valor dentro da matriz, você obterá o
indefinido e não agora porque
não encontramos nada. Então, a resposta aqui de que
é bom usar os dois. Não há realmente algo
melhor em um ou outro.
6. A piscar: Você pode ser perguntado
na entrevista a
pergunta como esta, o que será
registrado no console aqui? E como você pode ver aqui,
temos o log do console cheio e, em seguida, foo é igual a um. E, na verdade, esta é
uma questão típica sobre içamento. Erro de elevação
significa que a declaração da sua variável irá bolha para a
parte superior do arquivo. E é assim que funciona
em JavaScript quando você está usando a palavra-chave var ou a palavra-chave de
função. Então a questão é
o que veremos aqui, temos aqui console log
f2 e f2 é uma variável, mas como você pode ver, não
é declarado. E na segunda linha
temos foo é igual a um. Na verdade,
chegaremos aqui e estreitaremos. Vamos verificar
isso. Estou recarregando a página e estamos recebendo foo não é definido por
isso acontecer porque sim, a primeira linha que
é executada é log
do console e foo não está
definido dentro de um arquivo. É por isso que temos esse erro. Então, a resposta correta aqui, teremos um erro porque
foo não está definido. O principal problema é aqui que normalmente você
terá algumas chances apenas de responder no papel sem qualquer uso de computador. Porque, obviamente,
os programadores
não estão usando computadores todos os dias. É por isso que você
realmente não pode testá-lo no navegador. E você precisa entender como tudo isso está
funcionando de antemão. Depois de uma transferência correta, você provavelmente será perguntado
algo assim. A próxima pergunta,
então, ficaremos bem, estamos aqui para o login do console, mas depois disso temos
var foo é igual a dois. E, na verdade, aqui
a enorme diferença
porque a primeira
pergunta que tivemos aqui, f2 é igual a uma, mas não
tivemos uma criação da variável. Mas aqui temos var2, que na verdade é uma
criação da variável. Mas você pode pensar, ok, nós deveríamos acontecer
após o log do console, que significa que ainda teremos um
erro que foo
não está definido porque o
Y2 acontece mais tarde. Mas, na verdade, esta é uma
resposta errada porque a ideia principal é que enquanto a declaração está borbulhando para o
topo do arquivo, o
que significa que é exatamente mesmo código como aqui, var foo, e aqui estamos
apenas atribuindo f2 para sintonizar. Este é exatamente o mesmo código. É assim que o JavaScript
interpreta esse código. É por isso que se
abrirmos um navegador, você pode ver que estamos
ficando indefinidos, por que está acontecendo, porque na verdade aqui temos var foo e, neste caso, estamos f2 é indefinido porque não atribuímos nenhum
valor depois disso, temos um log de console para, estamos ficando indefinidos. E só depois disso estamos
atribuindo a forma incitar, o que significa que
não será um erro, não será
verdade, será indefinido. É. Esse processo é chamado de içamento. Se você respondeu corretamente, você pode obter mais uma
pergunta sobre içamento. Como você pode ver aqui,
é a pergunta três. Temos aqui total igual a três, depois console log foo
e, em seguida, var foo. E acho que agora você
saberá a resposta. Sim, temos aqui Portanto, e ele borbulha para
o topo do arquivo, o
que significa que, na verdade, este fu é exatamente como
está escrito aqui, o
que significa que na primeira
linha estamos definindo completo propriedade no próximo slide onde o pé de entrada ou três. E depois deste formulário de login
do console de trabalho, o que significa que
será igual a três. E não
importa que guerra esteja acontecendo no final. Ele será borbulhado até o
topo. Vamos verificar isso. Estou recarregando a página
e estamos recebendo três e isso é exatamente
o que estávamos esperando. Você pode obter exatamente
a mesma pergunta, mas não com palavras, mas com palavra-chave de função, se você tiver algum lugar em sua função de código e, em seguida,
o nome da sua função, e então dentro de você está
certo, em alguma lógica, essa definição específica
vai bolhar para o topo, que realmente significa
que realmente não
importa em que linha do
seu código você é, certo? E função foo, será a primeira linha que
será executada em JavaScript, o que realmente significa que se aqui
antes de eu chamar
foo, está totalmente bem. Como você pode ver no navegador, não
estamos recebendo nenhum erro
porque esta função foo é borbulhada para o topo e
funciona exatamente da mesma forma como var. E aqui está mais uma coisa
importante que você dominou
para sua resposta. Você deve mencionar que
podemos usar const e lead, e não temos
problemas com eles porque tanto CONST quanto lead e
não borbulhando. O que significa que se fornecer
aqui const um igual a um, ele não borbulhará em nenhum lugar. Se for definido
na 17ª linha, então ele existirá
no 17º voo, o que significa que não temos
problemas com o Constant LED. E a forma como o JavaScript
interpreta nosso código é exatamente da mesma forma que estamos vendo na tela. Então você pode simplesmente dizer
que você está usando CONST e lidera em
cada projeto e você não tem
nenhum problema com borbulhamento da variável
ou com o içamento.
7. Fechamentos: Essa é com certeza uma
pergunta que eles ouvem em cada entrevista
JavaScript. É por isso que você deve
entender o fechamento de água. Como você pode ver aqui,
temos uma tarefa, criamos uma função de contador que tenha incremento e obtenha funcionalidade
válida. E, na verdade, você pode não
obtê-lo dessa tarefa, mas essa é uma tarefa em relação às cláusulas porque devemos criar uma função onde dentro restaure algum valor e temos
dois métodos públicos. É assim que você normalmente
precisa implementá-lo. Queremos criar nossa função de contador privado, por exemplo. E isso é privado porque estamos iniciando o lado contábil, que não está disponível fora. E, na verdade, isso
é apenas uma função. Mas se você ouvir em
entrevistas que você deve ou algo
dentro da função, depois de chamar essa função, então você tem uma pergunta
sobre o fechamento. O que queremos fazer aqui, queremos que
criemos nosso contador. Vamos nomear a contagem
e, por padrão, será 0. Agora devemos retornar
nossa API pública, esses dois métodos aumentam
e obtêm uma funcionalidade justa. É por isso que estamos
fazendo aqui voltar e por dentro queremos
devolver duas coisas. Primeiro de tudo, é uma função de
incremento. Esta é apenas uma propriedade onde estamos passando dentro do nosso valor. E o que queremos
fazer, queremos mudar essa contagem que
temos no topo aqui. Estamos bem aqui,
contamos mais iguais, e aqui está o nosso valor
que queremos aumentar. E, na verdade, pode
ser que queremos aumentá-lo por
padrão, apenas por um. É por isso que faz sentido
passar aqui um, neste caso, podemos simplesmente chamar incremento e funcionará fora da caixa. E o próximo método
estará aqui, GetValue porque
queremos recuperar nossa contagem. E, na verdade, aqui esta é apenas uma função que
retornará nossa contagem. E a ideia principal é que
essa é nossa API pública. Isso é o que está disponível dentro dessa função
depois de chamá-la, vamos verificar isso. Vamos criar aqui nosso contador
e estamos dois pontos aqui, nossa função de contador privado. E, na verdade, o que
eu quero fazer aqui, quero consolar o
log antes de tudo, nosso ponto contador GetValue. Este é um método para
obter nosso contador. E em segundo lugar, queremos
chamar o ponto do contador, e aqui está o incremento para
incrementar o valor R e depois
contabilizar mais uma vez
para verificar o valor. Mais uma vez, vamos
verificar se está funcionando. Estou recarregando a página,
estamos recebendo 01. Mas o mais interessado
na ideia do que
temos dentro deste balcão
privado, se estivermos aqui, balcão
privado, você pode
ver que esta é uma função e, na verdade, não temos nenhuma acesso a essa contagem de
propriedades. Esta contagem de propriedades
neste caso é privada. E dado se eu estiver aqui contador, você pode ver que estamos recebendo
um objeto com dois valores, obter valor e incremento, e não temos acesso à nossa propriedade de contador dentro. Esse código está funcionando, mas é realmente complicado e complexo porque
isso é um fechamento. O que significa closure ever? Encerramento significa que
acessamos dentro de uma função para o escopo externo, que realmente significa
aqui, por exemplo, dentro do incremento que
estamos usando count e não temos um desconto
dentro disso função. Nós o temos lá fora aqui
no topo e exatamente o
mesmo em relação a obter valor. Temos este contador
aqui na parte superior, não dentro desta função, o que significa que colagem ou função tem acesso
a todas as propriedades dentro de si e todas as propriedades que foram definidas antes. Por que é importante porque eles na verdade, com este único forro, contador de
contras é igual a balcão
privado, estamos criando um fechamento porque agora
estamos contador existe. Temos um encerramento e temos essa referência a este contador. É por isso que
toda vez que estamos chamando GetValue e incremento, ele está funcionando e está referenciando essa
contagem no topo. E você pode dizer, ok, mas está soando como mágica. Eu não entendo como ele está se
parecendo em JavaScript. E é aqui que o Console
Directory pode
nos ajudar se escrevermos
dentro do console, não no log do console, mas no diretório
do console. E por dentro eu
quero passar uma função. No nosso caso, ele é contrariado GetValue e
oculto aqui, insira. Aqui não vemos um corpo,
mas, em vez disso, nossa
função é um objeto. E estamos interessados aqui em
parte que se chama escopos. E isso é
exatamente o que estamos interessados depois
abrimos aqui escopos, temos aqui um fechamento de propriedade, e este é exatamente o nosso fechamento, como você pode ver aqui, temos um balcão privado de
fechamento. Aqui, contagem é igual a um, o que significa que exatamente nós
temos essa contagem de leads igual a 0, e agora é fechamento interno. É por isso que ele está disponível
para nós dentro do JavaScript. E as perguntas mais antigas sobre cláusulas eu exatamente o mesmo. Por exemplo, você pode
ser feita a pergunta, você precisa criar
uma função que armazenará dentro da string secreta, e nós apenas a retornaremos quando chamarmos essa
função novamente, ela irá parece
algo assim. Por exemplo, vamos criar
um segredo privado de função. Aqui não passamos
nada para dentro, mas queremos fazer por dentro é
criar nossa cadeia secreta. Então, vamos apenas criar um
segredo e ele é igual a quatro. Então esse segredo é
exatamente nosso fechamento. Para que ele esteja disponível fora, devemos retornar aqui uma função. Simplesmente retornamos
aqui uma função, e essa função
retornará um segredo. Isso significa que
quando estamos criando fora de uma função
que podemos nomear, por
exemplo, obter segredo, ela deve chamar aqui nossa função secreta
privada. A ideia principal é que a função secreta
privada
devolva uma função. Nesse caso, r obtém
Secret é uma função. E agora podemos console log hour fica secreto e simplesmente chamamos isso. E, na verdade, como você
pode vê-lo console, estamos recebendo essa tela
cheia de volta. É por isso que nossa string secreta é realmente um fechamento
e está disponível fora após restaurar
esse segredo privado dentro da propriedade adicional. Nesse caso, estamos iniciando divulgação depois que nossa
função foi executada. E o fechamento é um
padrão super popular dentro do JavaScript. É por isso que você deve saber
como usar fechamentos.
8. Currying: Você pode ter uma
pergunta como essa. Escreva uma função que
ajuda a conseguir multiplicar e b e retorna
produto de a e B. E, como você pode ver aqui, temos essa notação estranha. Multiplique-os a e B, não como dois argumentos, mas esta é a primeira
chamada da função, e esta é uma segunda
cor da função. E, na verdade, se você está
recebendo essa pergunta, isso significa que você está indo
na direção da corrente. E atual é uma possibilidade
especial em JavaScript de
carregar uma função. E então podemos
chamá-lo assim. E, na verdade, aqui
podemos implementar essas coisas com corrente
super básica. Vamos experimentar isso agora. O que eu quero fazer, quero
criar a função de multiplicação. E aqui estamos recebendo nosso a, então será o número
um, por exemplo. Aqui queremos retornar uma função porque, como você
pode ver aqui no topo, estamos chamando o
resultado da multiplicação a, b, o que significa que estamos multiplicando master
return a função. Então aqui podemos escrever que estamos recebendo uma função
que obterá B. Este é o número dois, por exemplo. E aqui dentro queremos
multiplicar nosso número 1 e num2. Nesse caso, nossa segunda
função
nos proporcionará multiplicação do
número um e do número dois. E é assim que podemos usá-lo. Podemos escrever aqui o log do console. Queremos chamar aqui, multiplicarei a função e estamos passando um, por exemplo, dois. E depois disso estamos chamando b. Esta é a nossa segunda função
e estamos passando no S3. Vamos dar uma olhada no navegador. Estou recarregando a página
e estamos recebendo seis, o que significa que esse
código está funcionando. E, na verdade, você pode escrever essa função
de multiplicação de maneira melhor. Você pode simplesmente omitir aqui os retornos e, em seguida, será um
simples forro único. Temos aqui a função multiplicar e estamos ficando entorpecidos aqui. Então queremos retornar
aqui uma função, e estamos chegando aqui num2. E queremos multiplicar nosso
número um, multiplicando o número 2. Essa é exatamente a mesma lógica, mas está raciocinando
a única linha. Agora, eu virei e
disse o código anterior. E vamos verificar, como você pode ver, estamos obtendo exatamente
o mesmo resultado, mas isso não é realmente atual. Se você resolver essa tarefa, normalmente você será perguntado, ok, mas o que
você escreveu aqui? O que isso significa? Por que precisamos de uma notação tão
estranha? E, na verdade, você
deve dizer que estamos falando aqui sobre o atual, há uma próxima
pergunta que você pode obter é criar um
tipo de função. E esta é, na verdade,
uma pergunta difícil. E se você não
tiver nenhuma experiência as funções atuais, provavelmente não será inseguro. É por isso que aqui
veremos como
podemos criar um tipo de
função e por que
precisamos delas e realmente carregamos funções funcionam exatamente
como eu multiplico aqui. Então, podemos escrever no
navegador, por exemplo, Kyrie, e essa é a nossa função. Devemos sempre passar para dentro da função que
queremos cobri-la. Neste caso,
temos, por exemplo, uma função com a, B
e C. Então, temos
três argumentos e
queremos apenas somar
um mais B mais C. O ponto principal é que
o resultado do cardi é um função e vamos
nomear isso carregou alguns. É assim que estamos usando o atual, o que podemos fazer com o
carro em alguns mais tarde, podemos escrever aqui nossos argumentos. Temos três argumentos, como queremos, por exemplo, podemos escrever aqui 123, assim como três argumentos
normais. Também podemos chamá-lo com 123, o que significa que
não estamos obtendo um resultado até que estejamos recebendo
três argumentos. Por exemplo, temos apenas
um argumento aqui, um, então ele retornará a função
parcialmente aplicada, que significa que estamos
recuperando uma função. E então, se chamarmos essa função e
passarmos dois argumentos, então estamos recebendo argumentos
suficientes e retornaremos um resultado. E, claro, também deve ser possível chamar a
função assim. Primeiro de tudo, estamos
chamando isso com um e depois estamos
chamando com 23. É assim que a função normalmente
carregada está funcionando e nós a
criaremos agora. O que queremos fazer aqui, queremos criar uma função
curried. E como eu disse, isso é algo
mais avançado e na verdade, é uma boa ideia
escrever essa função
era o arquivo de script ECMO. Então, essas palavras-chave de função, só porque estamos escrevendo algo que
será usado como uma biblioteca. É aqui que eu quero
escrever uma função, e aqui estamos
recebendo uma função. E, na verdade, aqui no
topo, vamos tentar, nosso uso, então entendemos do
que estamos falando. Dissemos aqui que
queremos que nós carregamos alguns. Estamos chamando aqui
nossa função atual. E dentro estamos passando uma
função com a, B e C.
E aqui queremos
somar a, B e C.
E, na verdade, não
consigo nem escrevê-la aqui na parte inferior
após nossa consulta. Assim, podemos testar se está funcionando, na verdade, como você pode ver aqui, como nossa função atual. E estamos
entrando na função. Este é o nosso Fn, este abc e a mais b mais
c é nossa função aqui. Mas queremos fazer agora queremos
saber quantos argumentos
temos aqui. É aqui que
eu quero criar uma propriedade que
se chama arity. Aqui podemos apenas escrever comprimento
da função e
obteremos a quantidade
de argumentos aqui. Vamos verificar isso. do registro do console. E aqui está nossa aridade. Estou procurando no navegador
e estamos recebendo três, porque aqui temos três
argumentos, a, B e C. Agora queremos retornar aqui
uma função porque
sabemos que a função atual
é sempre uma função. Isso é y aqui Vamos
escrever a função, vamos nomeá-la, por exemplo, f1. E aqui eu quero espalhar nossos argumentos e vamos verificar
o que temos aqui dentro, console log F1 aqui
nossos argumentos. E, na verdade, quando eu
recarrego a página, como você pode ver, não
recebemos nada porque não chamamos esse carro em algum. O que devemos fazer depois, devemos chamar soma desencorajada como uma função e podemos
passar para dentro de algo. No nosso caso, podemos passar 123. Esses são nossos três parâmetros. Estou recarregando a página e
estamos chegando aqui f1, 123. Então, estamos recebendo todos os
argumentos como uma matriz. Essa é nossa ideia. E, obviamente, também podemos chamar essa função
apenas com uma. Em seguida, obteremos uma matriz
com apenas um argumento. O que eu quero fazer dentro, quero verificar
quantos argumentos
recebemos ou se temos
argumentos suficientes ou não. É aqui que aqui
dentro do retorno
podemos comparar o comprimento dos argumentos, este é o comprimento de nossa matriz
é maior ou igual aridade. Isso significa que estamos recebendo argumentos
suficientes para
sair da função. Então, aqui eu quero consolar o
registro de argumentos suficientes. Nesse caso, eu só
quero retornar aqui nossa função e
chamá-la com nossos argumentos. Estou espalhado em nossos
argumentos novamente, e isso colocará aqui todos os argumentos assim como
eram anteriormente. Vamos verificar
isso. Estou recarregando a página e temos uma
mensagem de argumentos suficientes. E, na verdade, aqui
podemos registrar o que
estamos recebendo de volta. Nesse caso,
devemos obter nosso resultado. Estou recarregando a página,
estamos recebendo seis. Está funcionando corretamente, o que significa que nosso
código já funciona quando estamos passando
três argumentos ao mesmo tempo. Mas não funcionará quando estamos
passando menos do que isso. É aqui que devemos escrever aqui L Condição e
dentro podemos escrever, por
exemplo, o
login do console precisa de mais argumentos. E agora, depois que este livro
queria retornar uma função, como eu já disse,
se passarmos, por
exemplo, incentive
apenas um argumento. Ele deve retornar uma função onde podemos passar argumentos
adicionais. É por isso que aqui devemos retornar uma função e podemos
nomeá-la, por exemplo, F2. E por dentro
passaremos mais argumentos, o que realmente significa que
este é o nosso primeiro carvão, esta é a nossa segunda cooperativa. Por exemplo, aqui quando
passamos a soma atual, essa também é uma função atual. Vamos nomear isso parcialmente
carregou alguns. Aqui chamamos carregou alguns. Agora aqui eu quero construir uma soma
parcialmente correta para que
possamos verificar o que ela faz. Como você pode ver aqui, nós
não precisamos de argumentos, e aqui está nossa função
era mais argumentos. E, na verdade, aqui
queremos passar alguns argumentos. Por exemplo,
podemos passar aqui 23, e serão exatamente
esses mais argumentos que escrevemos aqui. O que queremos fazer agora, queremos concatenar
nossos argumentos com mais argumentos para colocar todos os nossos argumentos dentro
da chamada da função. É por isso que aqui
podemos criar uma variável, novos argumentos, e
queremos concatenar
aqui nossos argumentos. E estou chamando aqui concat e estou passando insight
mais argumentos. Agora, aqui não precisamos chamar nossa função fn
como fizemos aqui, mas devemos chamar nossa função F1 porque queremos essa verificação para argumentos
suficientes
repetidas vezes, que significa que nós estão
chamando isso recursivamente. É por isso que aqui
eu quero retornar a função
F1 e eles querem
espalhar todos os nossos novos argumentos. Aqui é onde aqui três
pontos e novos argumentos. Vamos verificar isso. Estou recarregando a página aqui. Estamos conseguindo atender meus
argumentos e argumentos suficientes. O que isso tem um meio? Aqui está a nossa soma atual. Passamos aqui um argumento, estamos entrando em células. Este é o nosso log do console precisa mais argumentos e aqui está
nossa função adicional. É aqui que estamos
chamando essa função e estamos passando aqui
são mais argumentos. Essa é essa variável. Agora aqui nós o
concatenamos, nosso. Isto é o que
passamos aqui e 23, e chamamos de nossa F1. Estamos chegando aqui novamente, temos argumentos suficientes, e aqui estamos chamando nossa função e
estamos recebendo seis. Agora vamos remover todos
os registros do console e verificar como ele está funcionando. O que eu quero tentar aqui é o nosso correto como podemos chamá-lo, podemos chamá-lo com 123
e estamos recebendo seis. Está funcionando. Agora podemos chamá-lo com um. Como você pode ver,
estamos recebendo de volta uma função e agora podemos chamá-la com 23 é que você pode
ver que estamos recebendo seis também, o que significa que está funcionando. E agora podemos chamá-lo
aqui com fezes e depois disso com três
e estamos recebendo seis, o que realmente
significa que está funcionando corretamente com qualquer
quantidade de argumentos. E aqui nós carregamos alguma função em que
temos dez argumentos. Então aqui estamos fazendo alguma
operação com argumentos Stan. Então aqui
chamaremos essa função recursivamente até obtermos
todos os argumentos necessários. Como você pode ver, escrever a
função de carreira não é o TGA. E se você nunca fez isso antes, é difícil escrever isso
diretamente na entrevista, especialmente apenas
no pedaço de papel. A última pergunta que
você pode obter aqui, ok, mas por que
precisamos da função curry? E o que sua
função atual pode fazer? É por isso que aqui
queremos agora usar nossa função de carreira
em nosso projeto real. E o que podemos fazer aqui, podemos chamá-lo de duas
funções, obter e mapear. Vamos experimentar isso. Eu quero criar uma função get
e eles querem carregar. É por isso que estou chamando
esse tipo de função. E por dentro estou passando uma
função com duas propriedades. Primeiro de tudo,
será propriedade
e, em segundo lugar,
será um objeto. E o que queremos retornar aqui, só
queremos pegar um objeto por chave e ele será propriedade. Vamos verificar como ele funciona. Como você pode ver aqui temos nosso get e aqui estamos
passando dois argumentos. Primeiro de tudo propriedade,
por exemplo, AD
e, em segundo lugar, nosso objeto, por exemplo, um D1. Nesse caso, estamos
recebendo um de volta. O que podemos fazer aqui, agora
podemos porque é carregado, basta chamá-lo com um
argumento, apenas com AD. Isso, você pode ver
que estamos recebendo de volta uma função atual agora podemos armazená-la em algum lugar e reutilizar. Por exemplo, podemos criar
aqui uma função adicional, obter ID, e estamos chamando aqui
get com apenas ID de propriedade. Agora, como você pode ver
no navegador, podemos usar a função GetId em todos
os lugares em seu aplicativo em qualquer objeto para obter o ID apropriado dele. Agora podemos fazer exatamente
o mesmo com o mapa. Por exemplo, aqui
eu quero criar um mapa e eles querem
carregar uma função de mapa. Aqui estamos recebendo uma
função que é um argumento do mapa e dos valores
que é uma matriz. Aqui eu quero apenas chamar valores JavaScript simples que mapeiam e, em seguida, passar
nossa função para dentro. Mas agora nosso mapa é carregado, o que significa que podemos usá-lo
em todos os lugares como mapa de cenoura, por exemplo, podemos passar
dentro de um mapa, obter ID. E agora aqui como o
segundo argumento, podemos passar uma matriz e apenas
ter aqui id igual a um. Como você pode ver aqui,
temos diretamente uma matriz de IDs com
a ajuda do mapa. E, na verdade, aqui boop
passa dois argumentos, mas também podemos cobri-lo. Por exemplo, podemos nomear
uma função aqui, const, obter IDs, e aqui nascemos
para chamar nosso mapa no GetID. Nesse caso, temos uma função aplicada
parcial, obtemos um d e podemos usá-la para obter ideias de muitos array. Por exemplo, aqui estamos
certos e temos ideias. E estamos chamando
essa função
na matriz com objetos dentro. E temos aqui um D1. E como você pode ver,
está funcionando. Essa é exatamente a necessidade da corrente para escrever JavaScript
e forma funcional. E aqui está, esse é um tópico
bastante avançado. É por isso que é
completamente bom se você não conhece esse
tópico como iniciante, mas pelo menos você deve ter
algum entendimento básico do
que é atual e por que você precisa dele?
9. Adicionar elementos à matriz: Você pode obter uma
pergunta como essa e apresentar sobre a adição de
elementos à matriz. Como você pode ver aqui, devemos
tentar funcionar que obtém uma matriz e um elemento e retorna uma matriz
com o acordo. Isso, na verdade,
parece muito fácil, mas você pode resolvê-lo de
maneiras diferentes. É por isso que você deve
resolvê-lo corretamente e pelo menos dizer ao
entrevistador da maneira correta. Então, normalmente, os iniciantes
usarão aqui array push, e então estamos construindo
algo assim. Portanto, temos uma função,
por exemplo, anexar, e estamos
entrando em argumentos, array e nosso novo elemento. E o que estamos fazendo aqui, estamos usando o array push e
estamos passando para dentro R, L. E depois disso estamos
retornando esse novo array. Então nós apenas escrevemos aqui o log do
console anexar, e aqui estamos verificando, ok ,
Por exemplo,
temos nossa matriz 12, e aqui nosso terceiro
elemento três. Agora vamos verificar
se está funcionando onde recarregar a página e
estamos recebendo 123, e você acha que você constrói
essa função corretamente. Mas aqui está o problema. Na verdade, quero
escrever aqui nossa matriz. Vamos nomeá-lo, por exemplo, números, e
não salvamos 12. Agora aqui dentro depende, eu quero apenas passar nossos números. Mas depois disso eu
quero consolar números de log, estava recarregando a página
e estamos recebendo 123123. O que isso significa? Temos essa função append e estamos retornando
aqui a matriz. E a maioria das pessoas pensará que quando estamos
usando essa função, estamos criando uma nova matriz. É aqui que normalmente eles
podem escrever novos números. Aqui estamos chamando
nossa função de anexação e pensamos, ok, não
modificamos nosso raio mais antigo, mas apenas obtemos novos
números porque função
append retorna
para nós uma matriz. Mas, como você pode ver,
esses dois arrays são completamente iguais porque push
real do array modifica o raio mais antigo e
não cria uma nova matriz. E isso geralmente é
um bom exemplo de código ruim no aplicativo. Por que isso? Imagine
que você tem uma parte do seu aplicativo e você
tem o array desse número e
, em algum momento, sua função
disciplinada de coluna para obter novos números. Mas então, do nada, sua matriz de números
antiga modificada, o que você não pretendia fazer. É por isso que você acha
que em sua aplicação alguma mágica pode
acontecer apenas porque os dois pontos dessa função modificam alguns dados
fora dessa função, essa é uma abordagem ruim. Como podemos corrigi-lo
e torná-lo melhor. Não devemos usar
aqui array push. Não é seguro. O que queremos
usar aqui, por
exemplo, operador spread, podemos escrever aqui
que queremos
retornar uma nova matriz
e queremos
espalhar todos os elementos da nossa matriz que estamos
recebendo como argumento. E se você não sabe
qual é o spread, este é um operador ECMO
Script seis, esses são três pontos. E o que estamos fazendo aqui, estamos espalhados em todos os elementos
dessa matriz dentro de nossa nova matriz, o que
significa essencialmente que estamos criando uma cópia dessa matriz. Agora mova um para adicionar esse
elemento no QRA a seguir. É por isso que acabamos de
tentar o elemento coma. Vamos verificar isso agora. Estou recarregando a página e aqui estamos recebendo outra resposta. Estamos chegando aqui
123 e aqui 12, o que realmente significa que
esta única linha que retornará para nós nova função de matriz é
completamente segura porque não
estamos modificando nenhum dado
fora dessa função. É por isso que essa
implementação é muito melhor se você for perguntado mesmo
algo tão trivial, como empurrar elementos
para o array também tem o executivo o
mesmo comportamento com objetos. Se estivermos passando para
dentro de
uma função, um objeto e quando
mutados lá, então estamos mutando objetos
fora de nossa função, e isso é ruim. E você também pode usar spread com um objeto para criar
um novo objeto. Nesse caso, estamos
no lado seguro. Se você não soubesse que essa
função como aqui é chamada pura
porque antes de tudo, essa função retornará
o mesmo
resultado toda vez quando a
chamarmos com os mesmos argumentos. E, em segundo lugar, não modifica nenhuma variável fora
da função. Isso é y, esta é uma função
segura e pura.
10. Arrays Concatenating: Já falamos
sobre elementos ocultos para
a matriz e por que Bush nem
sempre é a melhor abordagem. Mas você também pode ter
uma pergunta semelhante. Por exemplo, aqui
temos uma tarefa, escreva uma função que
concatenará dois arrays. E, na verdade, você pode usar aqui push e
será uma resposta errada. É por isso que aqui você
pode realmente escrever as matrizes de mesclagem de função. Aqui estamos recebendo dois arrays, por exemplo, array
um e array para. E aqui você pode
escrever o array um, Bush, e aqui você
se espalhou da matriz dois. E depois disso, você pode
simplesmente retornar o array um. E, na verdade, muitas
pessoas não vão escrever código assim porque aqui você está usando push e então você está
espalhado em array para, mas você pode pensar
sobre essa abordagem. Agora, para ver o problema,
devemos criar, primeiro lugar, nosso resultado. Aqui dentro do resultado,
precisamos usar dois arrays. Array 1, por exemplo, será apenas
um e nosso array dois aqui será,
por exemplo, 23. Agora queremos chamar nossa corrida de
fusão e passar e disse antes de tudo array um
e segundo array dois. E vamos verificar e
bloquear o console o que estamos recebendo. Então, antes de tudo, resultado, depois array um e matriz dois. Estou recarregando a página e
estamos recebendo 12312323. Esse é exatamente o problema, como se não fosse o vídeo anterior. Bush mutate array. Este é o caminho aqui,
estamos mudando o array um, mesmo se não
quisermos alterá-lo. É por isso que empurrar neste caso não
é a melhor abordagem. O que podemos usar aqui
é eu, o concat de matriz, que tem toda a abordagem de JavaScript ou apenas
um operador de spread, assim como fizemos anteriormente. Então, em vez desse retorno
e do impulso real, podemos escrever aqui antes de tudo, array one dot concat, e temos
função concatenar na matriz. E aqui estamos espalhados
em nossa matriz dois, vamos verificar o Sul
onde recarregar a página aqui é o nosso resultado 123 e aqui matriz um
e matriz de dois a três. Essa é exatamente a abordagem
correta porque concatenar não
muda uma matriz. Nesse caso, ele
retornará para nós em uma nova matriz. É por isso que está tudo bem. Se você não quiser
usar re concat, você sempre pode
usar apenas um operador de spread. Aqui usaremos o array
um como um spread. Aqui estamos espalhando
nosso tubo de raios. E, na verdade, o resultado será exatamente o mesmo
em que obter 123. E, na verdade, eu realmente gosto dessa abordagem porque ela é mais flexível e você pode mesclar não apenas raça, mas também objetos. Você pode adicionar novos elementos aqui e é mais moderno. Se você, por exemplo, tiver uma pergunta para concatenar
três matrizes ou mais, também é
possível,
na verdade, até mesmo o array concat
pode trabalhar com vários arrays, como você pode ver aqui na documentação aqui
temos três matrizes diferentes. Você pode escrever primeiro concat de ponto de
matriz
e, em seguida, você tem uma matriz
secundária e terceira. E, na verdade,
funcionará corretamente, mas na verdade você pode
fazer exatamente o mesmo com spread aqui você está
espalhado na matriz um, matriz dois, matriz três. Se você precisar. Ambas as variantes são possíveis.
11. Verifique se o usuário com esse nome existe: Você pode ter uma pergunta. Verifique se o usuário com esse nome
existe na matriz de objeto. Obviamente,
não pode ser nome ou não usuário. Mas a ideia é que
você precisa verificar uma propriedade do
objeto dentro de uma matriz. Na verdade, existem diferentes
maneiras de implementar isso. E a pior maneira possível
é usando for-loop. Porque, como eu disse anteriormente, for-loop é de nível super
baixo e
não é uma ferramenta certa para
essa tarefa específica. Vamos ver como se
parece com o loop for. Então, aqui queremos
criar uma função, por exemplo, se o nome existe. E aqui devemos
passar dois argumentos. Primeiro de tudo, é um nome
e, em segundo lugar, é um
conjunto de nossos usuários. Agora, dentro da propriedade
criativa de máscara, que será booleana, e isso nos mostrará que
temos esse usuário dentro de uma matriz. Aqui podemos fazer um lead existir e, por padrão
, ele será falso. Agora devemos escrever um loop for. Então aqui temos
nosso lead I de 0, eu menos que o comprimento dos usuários. E aqui estamos
fazendo I plus plus. Agora, o que queremos fazer dentro
de cada elemento, devemos verificar seu nome. É aqui que estamos
verificando os usuários. nome do ponto é igual ao nosso nome. E se for igual,
então queremos
atribuir por dentro existe. Após nosso loop for, queremos retornar
nossa propriedade exists. Sim, esse código funcionará. Vamos verificar isso, mas
é um nível super baixo, como você pode ver, temos, por
exemplo, chamado John. Vamos tentar aqui, Jon e ouvir coma nossos usuários. Como você pode ver, estamos
passando porque ouvimos esse usuário com esse
nome dentro da matriz. Se eu estou escrevendo aqui
completamente, estamos ficando falsos. Mas o problema com esse código, ele não mostrará que você é
um desenvolvedor avançado. É por isso que eu queria mostrar a vocês três outras possibilidades de
escrever esse código. E, na verdade, todas essas três possibilidades
são ocasiões. Meu favorito será
uma única linha aqui, para que possamos criar uma
função é que o nome existe, e aqui estamos recebendo
nome e array. E como você pode ver aqui, eu não tentei aos
usuários butter ray, porque agora podemos usar
essa função em qualquer dado. Agora, o que eu quero chamar
aqui é a soma de pontos da matriz. E se você não sabe
o que Sam está fazendo, você pode chamar alguns sobre o raio
dado alguns predicados. Então você quer verificar
algo lá dentro. No nosso caso, alguns
retornarão um canudo se tivermos pelo
menos um único elemento
que atenda a nossa condição. Dentro de alguns, podemos
conduzir o elemento. E queremos verificar aqui, nome do
elemento é igual aos nossos nomes
que foram passados para dentro. E este é literalmente
o mesmo código que escrevemos aqui,
mas muito menor. Vamos verificar o som. Estou
recarregando a página e só estou digitando o nome dele existe como você
pode ver onde se tornar verdade. Então, na verdade, algumas são a melhor
solução para essa questão, mas também é possível
usar outras soluções. Então, vamos
comentar isso e tentar novamente. Temos aqui novamente dois
argumentos, nome, matriz. Agora, dentro, podemos tentar encontrar o elemento com esse nome. É aqui que aqui vamos criar um elemento e estamos usando aqui array dot find onde
obter nosso elemento. E aqui queremos verificar o nome do ponto do
elemento é igual ao
nosso nome a partir do topo. Mas, neste caso, nosso elemento
é, na verdade, um objeto. Não é um booleano. É aqui que ele vai
cervejar o elemento wrapper em booleano para retornar
booleano e não um objeto. Nesse caso, ele
funcionará corretamente. Estou recarregando a
página, pois você pode vê-la como funciona
exatamente assim. Então, as principais
diferenças que foram dominam um pouco mais de código porque devemos
convertê-lo em booleano. E a última coisa que
podemos usar aqui não
está bem,
mas encontrar índice. E se você não sabe
o que acha que o índice está fazendo é exatamente a mesma lógica, mas estamos encontrando o
índice desse elemento. Se pudermos encontrar o objeto com esse
nome dentro da nossa matriz. Aqui não estamos recebendo
nosso índice de botão Element. E depois disso, saberemos que se esse índice for menor que 0, esse item
não foi encontrado. Aqui. Podemos tentar retornar
índice maior que 0. Neste caso, sabemos ou
K É maior que 0. Temos esse elemento
dentro da matriz. E, como você pode ver, esse código está funcionando exatamente da mesma forma. Minha abordagem seria
soma, a próxima abordagem ficaremos bem. A busca do índice também está boa, mas você não deve usar
for-loop porque
é altamente ineficiente
para essa tarefa.
12. Remova todos os duplicados na matriz: Você também pode obter
uma tarefa como essa. Remova todas as duplicatas
no array. que basicamente
significa que se você tiver uma matriz de números
e você tiver, por exemplo, 112, você
precisa viver no 12. Vejo aqui três
maneiras diferentes de resolver nosso problema. Vamos tentar com a
melhor solução. Por exemplo, podemos criar
aqui uma matriz exclusiva de função. Estamos recebendo aqui nosso array
para remoção de duplicatas. Aqui o que queremos
fazer cupom para retornar uma matriz e queremos
espalhar dentro do novo conjunto e
onde o bisão dentro da matriz, se você não sabe o que é o
conjunto em JavaScript,
é um objeto
que permite que você armazena valores exclusivos de qualquer tipo. Isso significa que se estivermos
bem aqui e você disse que estamos passando dentro
da matriz, por exemplo 112, onde o Enter oculto,
como você pode ver, temos o conjunto apenas de 12 porque dentro do nosso conjunto
os elementos podem ser duplicado. É por isso que, como você pode ver, se nos espalharmos no seu conjunto e colocá-lo
na nova matriz. Para converter revés em array, obteremos nossos elementos exclusivos. E, na verdade, muitas
pessoas não sabem sobre essa solução, mas essa é a melhor
solução porque é, primeiro lugar, um único forro. Em segundo lugar, raramente é
desempenho se você fizer não, essa solução, não é ruim. Você sempre pode construir
essa lógica por conta própria. A parte mais importante
que mesmo o FOR loop aqui, se você estiver usando a
incursão forEach não é tão ruim. Vamos verificar
isso. Por exemplo, temos aqui a mesma função, matriz
exclusiva, e queremos
escrever aqui um loop. E, claro, precisamos armazenar nosso resultado em propriedades
adicionais. Então, vamos fazer aqui o resultado que
será o nosso array exclusivo. Agora, aqui eu quero percorrer cada elemento do nosso
array com a função forEach. Aqui estamos recebendo nosso item como todos os elementos da nossa matriz. Agora, o que queremos verificar aqui, se já tivermos esse
item dentro do nosso resultado, podemos verificar aqui o
resultado inclui pontos. E se você não sabe,
inclua, verifique se temos o
acordo dentro uma matriz e queremos
passar para dentro do nosso item. Portanto, isso retornará
verdadeiro se for incluído. Mas, na verdade, devemos colocar aqui
banco para ter uma negação. Se ele não incluir esse
elemento dentro da matriz
, queremos
empurrá-lo para o nosso resultado. Então resulte Bush e
aqui com o item. Então, como você pode ver,
mesmo para cada loop aqui não é tão
ruim porque está isolado dentro de uma função onde mais simples percorre cada elemento
e estamos empurrando nosso resultado diretamente
no novo array. E, claro, no final,
devemos retornar nossos resultados. Então, aqui vamos retornar o resultado e verificar
se ele está funcionando. Aqui está nossa função matriz
exclusiva 112. E como você pode ver,
estamos recebendo 12 de volta. Mas, obviamente, nossa função não funcionará com objetos
ou matrizes dentro, e isso é completamente normal. Então, se você tem aqui um
objeto com um igual a um, e aqui você tem mais um
objeto com um igual a um. Como você pode ver, estamos recebendo dois elementos e
isso é totalmente bom porque são dois objetos
diferentes e não podemos compará-los. E, na verdade, podemos derivar
isso para ricos usando Reduce. Desta forma, escreveremos exatamente o mesmo botão de código
da maneira mais funcional. Então, aqui vamos criar nossa matriz exclusiva de
função. Estamos recebendo aqui
nossa matriz e queremos diretamente retornar um re, reduzir. E aqui dentro devemos passar nossa função com acumulador
e cada elemento. Aqui temos uma função
e, como argumento padrão,
temos aqui uma matriz vazia, exatamente como
tínhamos aqui onde
escrevemos resultado é igual a matriz vazia. Agora, o que queremos fazer dentro, queremos verificar nosso
acumulador inclui, então estamos verificando nosso resultado. Se tivermos nesta
matriz resultante nosso elemento. Então, se o tivermos,
simplesmente retornamos acumulador para
não mudarmos nada. Em outros casos, queremos
empurrar esse elemento para o acumulador e
não estamos usando o array push, mas estamos usando spread. Aqui. Estou espalhado no acumulador e depois estou
adicionando nosso elemento. Dessa forma, esse código é
completamente funcional. É fácil de entender e não
teria esse impulso
desagradável aqui. Vamos preencher a página
e verificar se ela está funcionando. Como você pode ver, ainda
não funciona com assuntos, o que é totalmente bom. E funciona com
primitivas Porque aqui um foi removido
do nosso array. Como você pode ver, você tem
três variantes diferentes para implementar a
exclusividade no array. E, na verdade, todas
essas reversões estão completamente boas para
mostrar na entrevista.
13. Classificando o array: Já tivemos um
certo exercício quando
mapeamos nossos usuários em um
dos vídeos anteriores. Mas aqui eu quero falar sobre cirurgião, um
pouco diferente. Como você pode ver, você
pode obter a pergunta, classificar a matriz de números. O que realmente significa que
temos uma matriz, por exemplo, 351, e devemos classificar. Para isso, estamos usando determinada
função em JavaScript. Simplesmente escrevemos tipo. Aqui devemos passar uma função
e temos essas condições. Quando menos de b, estamos retornando aqui menos
um se maior que, maior que 10 se forem iguais. E anteriormente
escrevemos aqui a e B, e aqui podemos escrever
um menor que b, então estamos retornando menos um. Em outro caso, estamos
devolvendo um. Além disso, é importante
lembrar que certos retornos, o resultado do certo, que significa que podemos colocá-lo em variável, por exemplo, resultado, mas também mudará nossa
matriz que criamos. E, na verdade, não
faz sentido aqui porque isso gerou
array em tempo real. Mas se as pessoas
colocam na variável, então faz sentido. Aqui temos nossa matriz
e aqui estamos certamente, vamos dar uma olhada no exemplo. Sou login do console aqui,
array e resultado. E como você pode ver
no navegador aqui, estamos recebendo exatamente
a mesma matriz classificada. Isso está acontecendo
porque as mutações de classificação existem em uma matriz e
devemos nos lembrar disso. Além disso, há mais um ponto
importante a ser lembrado. Na função de comparação,
podemos retornar um número
maior que 0 e menor que 0, e será exatamente o mesmo. Será antes de a
e classificar a antes de B, que realmente significa que podemos
escrever nosso código um
pouco diferente e
não com menos 11, podemos simplesmente retornar
aqui um menos b. Por que isso? Porque temos
aqui dois números, por exemplo, três menos cinco. Neste caso,
será menor que 0. E então teremos essa
condição classificar um antes B. Vamos verificar isso. Estou recarregando a página. Estamos recebendo de um a
cinco como anteriormente, se as pessoas aqui, b menos a, então elas serão
classificadas em outra direção. Como você pode ver, estamos
recebendo cinco a um, o que realmente
significa para classificação, podemos classificá-lo
retornando menos 11 ou algo menor que
0 e maior que 0. Além disso, é importante
lembrar que
podemos usar a classificação nas primitivas
Louis. Se você estiver tentando
classificar aqui um objeto, ele não fará nada porque você não
pode realmente comparar objetos, mas pode classificar propriedades
e objetos do site. E temos uma tarefa de
classificar uma matriz de nossos livros pelo sobrenome do autor. Aqui podemos usar exatamente a
mesma função AND de pesquisa. Estamos escrevendo aqui,
livros classificam pontos, e aqui estamos recebendo
como argumento, livro um e livro dois. E agora devemos
compará-los corretamente. Então, antes de tudo,
devemos encontrar um sobrenome do primeiro autor e
do segundo autor. Aqui vamos escrever um sobrenome
incrível, um. E aqui pegamos
nosso livro one.org. E aqui queremos
dividir nosso nome com espaço e chegar
aqui primeiro argumento. Nesse caso, teremos o
sobrenome do nosso incrível. Agora vou copiar colar esta linha e aqui
também temos o LastName também, e aqui está o livro dois. E agora, após este fim de semana, compare essas duas cordas. É por isso que aqui podemos escrever ou LastName um menor que o ASO, ferramenta
LastName, então
queremos retornar menos um. No outro caso,
retornaremos um. E, na verdade, como
você pode ver aqui, devemos usar menos
11 porque
não são números em que o país
subtrai strings. E como você pode ver
aqui no navegador, não
registramos nada no console. Agora vamos registrar nossos livros no console porque, na verdade, quando
mudamos nossa matriz, vamos recarregar a página. E como você pode ver,
esses são nossos livros. Mas agora, em primeiro lugar,
temos Susan Collins. Como você pode ver, ele é classificado porque anteriormente
tínhamos aqui rolando, depois Mary Lou e
depois John jawline, o que realmente significa que
esse código está funcionando. E é assim que você
está classificando a matriz de objetos por alguma propriedade.
14. Entrevista Não É O Que Você Acha: Muitas pessoas,
especialmente iniciantes, não entendem o propósito
da entrevista corretamente. Eles acham que devem
ir à entrevista, responder a várias
perguntas e conseguir um emprego. E não é assim um alto porque o inteiro é, na verdade uma comunicação entre
várias pessoas onde quer que lado quisesse esclarecer algumas perguntas
sobre outra pessoa. Por exemplo, se estamos
falando de entrevistador, ele está interessado em
seu conhecimento e obviamente, como você
vai se encaixar em sua equipe. Não se trata apenas de
responder a perguntas. É mais como ping-pong. Você está fazendo uma pergunta e entrevistador
fazendo as perguntas. Não deve ser como
apenas entrevistador fazendo as perguntas e use simplesmente
responder porque neste caso, primeiro lugar, você pode obter
respostas sobre suas perguntas. E em segundo lugar, você não está
mostrando que está interessado nesta empresa ou
nessa posição específica. Quando você está falando
com o cara da tecnologia e o especial com cada um, você deve mostrar que
está interessado. Você deve fazer algumas perguntas sobre a empresa, sobre a equipe. Quantos dias úteis você tem? Tem horas extras aqui, frequência as pessoas estão
vivendo a empresa, quanto tempo as pessoas normalmente trabalham
na empresa e assim por diante. Porque antes de
tudo, você quer
saber quais são
as condições de trabalho
nesta empresa e
não apenas obter alguma empresa com más condições
de trabalho. E, obviamente, posso entender que, se
for a sua primeira loja, você quer ir a qualquer lugar, você simplesmente quer começar a trabalhar e eles
entendem isso totalmente. Mas se você não
quiser sofrer mais tarde, faz muito sentido
fazer essas perguntas. Além disso, você deve gostar de
líder de equipe ou entrevistador, e normalmente será seu futuro chefe
porque você
trabalhará muito com essa pessoa e isso vai o
mesmo com a equipe. É uma boa ideia
conhecer toda a equipe, pelo
menos para verificar qual é
o clima dentro do vapor? As pessoas são amigáveis umas
com as outras? Eles estão felizes com
as condições de trabalho e assim por diante? E o mesmo que posso dizer
sobre verificar o escritório. É muito estranho
às vezes quando você não tem permissão para
ver todo o escritório porque este será um lugar
onde você estará trabalhando e você deve estar satisfeito
com as condições de trabalho. Eu recomendo que você
peça o curto prazo
no escritório para que você possa
pelo menos ver as condições
de trabalho. Você tem luz suficiente lá, quais monitores você
tem e assim por diante.
15. Função de intervalo de escrita: Você pode obter um exercício de codificação
para implementar o intervalo. O que isso tem um meio? É uma função auxiliar
que se parece com isso. Por exemplo, se estamos
chamando o intervalo de um a 50, ele gerará para nós uma matriz 123456 e assim por diante até ser deslocada. E isso é
realmente muito bom ajudante quando você precisa
gerar alguns dados. Por exemplo, você deseja
gerar quinto usuários aleatórios. Nesse caso, seu assembler
gera esse array
e, em seguida, para
cada elemento que você está mapeando e novo usuário aleatório. É por isso que esse
ajudante existe em quase todas as bibliotecas auxiliares,
como por exemplo, um dash ou Lambda. E a diversidade é uma solução de pensamento de
resultados aqui
usando for-loop. É aqui que você pode escrever
essa função assim. Você tem aqui um intervalo de funções, e você tem aqui início e fim, por exemplo, de 150. E então, dentro, devemos escrever um for-loop do
ponto inicial até o endpoint. Este é y aqui,
deixe-me igualar estrelas. Portanto, não estamos começando de 0, mas do estilo aqui estamos
bem em eu menos ou igual, e aqui estamos
fazendo eu mais. Agora, dentro desse loop for-loop, devemos empurrar cada
índice para o nosso resultado. Isso é y. Vamos criar
aqui nosso resultado principal. Este é o nosso array. Agora, dentro, podemos escrever
impulso de resultados e estamos
empurrando aqui nosso eu. E agora apenas
retornamos nosso resultado. É assim que você pode criar uma função de intervalo
usando for-loop. Vamos verificar no navegador, estou escrevendo aqui
função range uma vírgula 15, e estamos recebendo nossa
matriz de um a 50, o que significa que nosso código
está completamente bom, mas é super baixo nível
e podemos fazê-lo melhor. Nível mais avançado é
alavancar nosso array. Podemos escrever na matriz do navegador e, em seguida, nosso fim,
por exemplo 15. E como você pode ver, isso retorna primeira matriz vazia onde
reservamos 50 elementos e o que podemos logo após
essas teclas de ponto. E agora estamos apenas
chamando essas chaves e estamos recebendo iterador de
matriz. Agora, se tentarmos espalhar esse iterador de matriz
dentro do array, como você pode ver, estamos recebendo nossas 50 chaves a
partir de 0 a 49. E depois disso,
simplesmente precisamos mapear cada elemento e
adicionar nosso ponto de partida a ele. Então aqui podemos escrever mapa de pontos, e aqui temos
cada elemento e estamos escrevendo elemento mais
estatísticas em nosso caso, por
exemplo, mais um, e estamos obtendo exatamente
o mesmo resultado. Este é um array de um a 50. É por isso que essa variante é
um pouco mais avançada. Aqui podemos criar nossa função de alcance e
estamos chegando aqui Stat. E agora, por dentro,
queremos retornar essa lógica. E como você pode ver, esta
é uma matriz onde estamos fornecendo e estamos fazendo chaves e estamos espalhados
neste rater de matriz
dentro de nossa nova matriz. E estamos mapeando
cada elemento. E onde eu não
ouvi nosso ponto de partida, vamos recarregar a página e
verificar se ela está funcionando. Então estou passando dentro da função
laranja 150 e estamos recebendo uma
boa matriz de um a 15. E é assim que as pessoas
normalmente escrevem essa função dentro das bibliotecas
auxiliares. Por exemplo, lambda,
embora traço.
16. Função de Shuffle de escrita: Você pode obter uma
pergunta na entrevista. Escreva uma função que
implemente o Shuffle. O que significa shuffle? Você simplesmente altera as posições dos elementos dentro de uma matriz. E, na verdade, não é tão
fácil implementá-lo com o uso, por exemplo, para cada um. Mas aqui podemos alavancar o método aleatório para classificar
elementos aleatoriamente. Isso é realmente o que
queremos ouvir. Vamos criar nossa função de itens
aleatórios. A ideia principal é
que aqui estamos recebendo nossa variedade de itens. E isso pode ser o que for. Pode ser, apenas um número, pode
ser um objeto ou
talvez até mesmo uma matriz de matrizes. Deve funcionar em qualquer caso, é por isso que o que
queremos fazer**** deseja percorrer
cada elemento e criar para cada elemento e um objeto com chave e valor. E, na verdade, eles estão lá dentro. Teremos alguma
chave aleatória gerada por aleatório. Também teremos o valor deles. Esse é exatamente o
valor do nosso elemento. Nesse caso, podemos
classificar por esse campo, nossa matriz e, em seguida, apenas
remover essa chave aleatória. Vamos fazer isso agora. Estou aqui diretamente
para devolver nossos itens. E antes de tudo,
estou chamando o mapa. E aqui temos acesso
a todos os elementos. Vamos nomeá-lo item alto. E o que queremos
fazer, queremos que
cada elemento retorne um objeto com duas propriedades. Vamos nomear esse tipo de propriedade porque, na verdade, isso é
apropriado para classificação. Aqui. Acabamos de tentar matemática aleatória. Aqui teremos
nossa propriedade aleatória e a próxima será valor. Dentro do valor,
estamos armazenando nosso item. Na verdade, quando verificamos
nosso código no navegador agora, estamos apenas chamando
nossos itens aleatórios, por exemplo, era 12. Como você pode ver de volta, estamos
entrando na classificação de objetos e aqui o número aleatório e o
valor são o valor do nosso item. E isso é realmente extremamente bom porque aqui
dentro do valor, podemos armazenar números,
objetos ou matrizes. Na verdade, não
importa para nós. Após nosso mapeamento,
queremos classificar nossos elementos dentro dessa matriz
por essa determinada propriedade. É por isso que aqui
podemos escrever tipo e estamos recebendo aqui o
item um e o item dois. Aqui. O que queremos fazer, queremos escrever o item
uma classificação de ponto menos o item dois pontos tipo e,
na verdade, saberemos esse tipo usando propriedade
numérica, o que realmente significa que
aqui podemos simplesmente usar substrato e não
escreva menos 11. Ele irá classificá-lo corretamente. Mas para nós, a água não
importa porque
só precisamos classificá-la
para mudar de posição. E depois de mudarmos de posição, queremos obter nossa especificação de valor. Para isso, devemos
experimentá-lo mais um mapa. E aqui temos, vamos citar um porque esse é nosso objeto e queremos
ler aqui um valor de ponto. E, na verdade, este é o nosso
item que foi armazenado aqui dentro de cada
objeto. Vamos verificar isso. Estou recarregando a página
aqui, itens embaralhados 12. Estamos chegando a um. Estou chamando de novo aqui
para um novamente aqui 12, o que significa que ele está trabalhando com qualquer elemento e ele
simplesmente embaralha. E, na verdade, esta é uma maneira
incrível de resolver isso porque estamos
aproveitando aqui matemática aleatória. E para cada
elemento estamos criando esse tipo em valor n. Simplesmente classificamos esses números
aleatórios e agora estão embaralhados. Depois disso, estamos
recebendo nossos itens de volta. Essa é a maneira mais fácil e correta de
embaralhar elementos
dentro da matriz.
17. Encontre o número de ocorrências de valor mínimo na lista: Você pode ter uma tarefa como essa. Encontre o número de moedas de valor mínimo na lista. que realmente significa que
temos uma matriz de números e, em primeiro lugar
, devemos encontrar o valor mínimo
dentro e depois calcular quantas vezes
temos esse valor. E, na verdade, se você
tentar usar aqui o loop FOR, então será realmente tedioso porque você
precisa usá-lo duas vezes. Primeiro de tudo, para encontrar o valor
mínimo dentro da matriz. E em segundo lugar, para
calcular quantas vezes temos esse valor dentro. É aqui que,
na verdade, devemos encontrar a função correta dentro do JavaScript para resolver com mais facilidade. E, na verdade
, temos essa função dentro do JavaScript e é
chamada de mínimo de matemática. Como você pode ver aqui,
estamos passando insights vários argumentos e isso
retornará para nós o menor. É por isso que podemos
usar essa função, mas ela não funciona com matrizes. O que podemos fazer em vez disso, podemos escrever o mínimo de matemática e não podemos passar
dentro da matriz, mas podemos usar um operador
spread aqui, e ele converterá nosso
array dois argumentos. Aqui podemos ter um array 123
e estamos recebendo de volta um. E isso é exatamente
o que queríamos. É por isso que, como você pode
ver em uma única linha, podemos substituir nosso for-loop, o que será muito mais
difícil de escrever. Primeiro de tudo, aqui vamos
nomear o valor médio. Aqui queremos
chamá-lo em nosso array. E vamos criar aqui nossa matriz, que será 123. E aqui queremos
espalhar nossa matriz. Encontramos nosso
valor mínimo na matriz. Agora, como podemos descobrir quantas vezes temos esse
valor dentro da matriz. E, na verdade, a variante mais fácil
aqui é usando filtro. Se filtrarmos nossa matriz
por este item mínimo, obteremos uma matriz
de nossos itens mínimos. E então simplesmente podemos obter
um comprimento dessa matriz. Vai parecer
algo assim. Podemos chegar aqui
nosso array mínimo. E o que queremos
fazer é filtro de matriz. E aqui temos acesso a cada elemento e apenas
comparamos se nosso elemento for
igual ao nosso valor mínimo. Neste caso, dentro de
mim, uma matriz, não, temos apenas nossos valores mínimos. Agora podemos escrever
aqui apenas o comprimento do ponto do array min do
log do console , e ele retornará para nós exatamente quantas ocorrências
desse valor mínimo
temos dentro da matriz. Vamos verificar esse tempo recarregando a página
por obtenção de uma. Se adicionarmos aqui 11 duas vezes, então aqui temos três deles. E como você pode ver,
nosso código está funcionando e as linhas de emoção não
foi resolvido nosso problema. É por isso que eu
recomendo que você sempre tente encontrar a ferramenta certa
para o salto certo.
18. - Este: Neste vídeo, analisaremos todas as
questões relacionadas a isso e ao
contexto dentro do JavaScript. Você pode adivinhar alguma
pergunta como esta. O que será bloqueado aqui? A primeira tarefa que
você está recebendo, você tem uma função
com palavra-chave function. Isso é importante. Agora, dentro, estamos apenas
escrevendo o log do console, e agora temos dois pontos para obter item. Então, a questão é o que
veremos dentro do nosso registro do console? E, na verdade, no navegador,
você pode ver que estamos vendo janela e você
pode pensar, ok, dentro de funções, isso
sempre é referenciado na janela, mas isso não está correto. Em vez disso, funções, isso está
fazendo referência ao objeto global. Pode ser janela, pode não ser defendida, pode ser outra coisa. Tudo depende do contexto. Mas se você definir
uma palavra-chave de função diretamente no
código JavaScript sem nenhum aninhamento, ela será janela. Agora você está recebendo
a pergunta número dois. O que será bloqueado
neste caso? Como você pode ver aqui,
temos um item de objeto com título e método getItems
dentro do método get item, console de
trabalho faça login aqui estamos chamando
item ponto get item. No caso de objetos, quando temos métodos
dentro de objetos, estamos sempre referenciando
esse objeto. Isso significa que quando estamos
recarregando a página, estamos recebendo isso e este é um objeto com
título e obter item. Nesse caso, podemos usar
todas as propriedades dentro do nosso objeto porque elas estão
disponíveis para nós dentro disso, quando estamos
falando de objetos, isso sempre faz referência ao
nosso objeto. Aqui está nossa tarefa número três, o que será registrado
neste caso? Como você pode ver aqui,
não temos um objeto, mas uma classe. E também temos dentro do
título e do método getItems, e também teremos isso dentro. Agora estamos criando a
instância de nossa classe e chamamos um
método getItems de nossa instância. Isso é importante
lembrar que métodos
internos em nossa classe, quando temos uma instância, temos uma referência
à nossa instância, como você pode ver no
navegador aqui temos isso e podemos veja
esta palavra item. Isso realmente significa
que esse objeto é uma instância da
nossa classe de itens. E por dentro temos
nossa bola título. Podemos usar todas as propriedades
dessa instância dentro disso. Mas agora estamos recebendo uma
pergunta sobre o que acontecerá se escolhermos uma função
dentro do nosso método? Então, na verdade, o que estamos
escrevendo aqui é função, por exemplo, alguma função. E dentro estamos bem
neste log do console. E depois disso estamos apenas
chamando nossa função de soma, que significa que
definimos a função com palavra-chave
function
dentro do nosso método e estamos
chamando-a aqui diretamente. A questão é o que
será o log do console dentro disso? Como você pode ver no navegador, isso é indefinido
porque, como eu disse, em vez disso funciona,
não estamos referenciando a janela, mas estamos referenciando objeto
global. E, na verdade, a palavra-chave window sempre está fazendo referência a objeto
global. Portanto, neste caso, nunca fará
referência à nossa instância. E isso é importante
lembrar, o que significa que se você tiver uma
função dentro da sua classe, esse interior não estará correto. Ele não fará referência à
nossa instância
da classe e não podemos
usar propriedades dela. E exatamente o mesmo
problema que você terá não apenas com a definição
da função assim, mas se você estiver
escrevendo, por exemplo, um mapa para matriz
dentro do seu item get, e aqui você tem uma função
para cada item. Agora, se escrevermos o log do
console dentro, ele também não estará correto. Como você pode ver no navegador,
estou recarregando a página. Estamos ficando indefinidos em três vezes porque
aqui estamos usando palavra-chave
function e, em seguida, definir função que ela está
referenciando indefinida. Ambas as variantes
são problemáticas. E agora a questão
é como podemos
corrigi-lo e obter a referência
às nossas teorias. E temos duas
soluções para isso. Em primeiro lugar, a solução
que é mais antiga, e também é usada quando estamos embutidos em JavaScript
toda a versão. Para isso, podemos simplesmente definir
antes disso, por exemplo, com um sublinhado e estamos atribuindo
referência auditiva à nossa lista. Isso estará correto porque
estamos dentro do nosso método. Agora podemos considerar aqui não isso porque aqui as
referências fortes, mas isso foi sublinhado. Aqui temos outra referência. Agora vamos recarregar a página. Como você pode ver, temos uma referência de caracteres para
nossa instância de como item. Essa é geralmente uma abordagem
mais antiga e é usada na
etapa de compilação do JavaScript que a melhor
abordagem será usar uma função de seta aqui
em vez da palavra-chave function. Então, podemos simplesmente usar aqui a função de seta do
magma Script seis. E agora, quando fizermos
login no console dentro
disso, ele terá a referência
correta. Como você pode ver, o resultado
é exatamente o mesmo Porque função de
seta está obtendo
o contexto do nosso pai. O que realmente significa
daqui que estamos recebendo contexto que temos
dentro do item de guitarra. Aqui temos uma referência
à nossa instância. É por isso que eu
recomendo que você sempre use
funções de seta e não palavras-chave de função
e, em seguida, você não terá
problemas com o contexto. Então, para resumir essa palavra-chave de
função interna, você sempre tem uma referência
a um objeto global. Dentro de objetos, você tem uma
referência ao objeto em si. Dentro das classes, você
tem uma referência a uma instância da classe
e função interna, dentro, por exemplo, método
ou diretamente dentro da classe, ela será referenciada
a indefinida. É.
19. Cursos: Uma das perguntas mais
populares na entrevista é,
claro, as aulas. Você pode ter uma
pergunta como essa. Projete uma classe para
funcionários que pegue um DNA chamado
construção de objetos de urina. E aqui está uma propriedade celular. Como você pode ver, não estamos recebendo requisitos super
rigorosos aqui e temos alguma
flexibilidade para implementá-lo. É por isso que
recomendo que você pense sobre isso e implementado
da melhor maneira possível. Primeiro de tudo aqui,
mas queria criar uma classe e vamos
nomeá-la de funcionário. E agora, como cabeça, precisamos ter um
construtor com o nome DNS dentro. Isso é y. Vamos criar um
construtor e estamos recebendo nosso AD e nome. E depois disso, vamos
atribuí-los à Sadie. Aqui está nosso AD e
esse nome é igual ao nome. Então, estamos recebendo
essas duas propriedades. Mas você pode fazer
melhor porque você deve mostrar que
você é um bom desenvolvedor. É por isso que é
muito bom verificar se passamos dentro
dessas duas propriedades. Então, podemos simplesmente adicionar, ok, se não passarmos o AD ou não
passarmos o nome, então queremos lançar um erro. É por isso que eu queria
jogar aqui na Nova Era. E aqui dentro podemos
escrever, por exemplo, nosso ID e
nome de funcionário são obrigatórios. Porque, na verdade, isso é
o que está dizendo na tarefa e é bom
cobrir esse recurso. Além disso, como você pode
ver, temos uma linha e ela tem uma propriedade salarial, o que realmente significa que
podemos definir o salário. Não é como se estivéssemos
conseguindo isso no construtor. Precisamos de
funções setter e getter para nosso salário. Primeiro de tudo, podemos definir esse salário definido e
será uma função, nossa configuração para o salário, e estamos passando
dentro do nosso salário e apenas o armazenamos dentro
disso. Portanto, esse salário de pontos
é igual ao nosso salário. Isso não é tudo porque também
queremos obter seu programa se o salário estiver
disponível dentro da nossa classe. Mas realmente queremos construir essa classe de maneira avançada, o que realmente significa
cupom para ter alguma API pública e alguns
métodos para obter nossas propriedades. É assim que eu
recomendo que você crie, ganhe salário e não
precisamos de nada aqui, e queremos retornar
aqui esse salário de pontos. E também faz
sentido criar dois getters para nosso ID e nome. Aqui podemos criar o método
GetId e dentro, estamos retornando
nossa ID de ponto. E também podemos criar
aqui o método getName, e ele retornará
nosso nome de ponto. Então, como você pode ver com um pensamento bastante sobre nossa classe, e ela é implementada
da melhor forma possível. Agora aqui podemos tentar usá-lo. Então, aqui estamos criando
nosso funcionário com novo funcionário e
estamos passando ID e o nome do
site porque
eles são obrigatórios. E, na verdade, podemos verificá-lo, podemos recarregar a página
e estamos recebendo ID do
funcionário e o
nome são obrigatórios. E isso é bom verificar. Aqui está nosso nome 81,
por exemplo, cheque. E agora nosso funcionário
não lançará um erro. O que podemos fazer agora podemos escrever salário conjunto de
funcionários
e estamos passando, por exemplo, 1000 dentro. E agora podemos verificá-lo. Então, vou recarregar a
página e aqui está nosso funcionário com um nome e salário
DNS, mas também teremos um
getters, por exemplo, salário retornará ao nosso salário e getName
retornará o nome. O que realmente significa que
implementamos nossa classe da melhor forma possível. Mas agora você está
recebendo uma segunda tarefa. Projetar uma classe para gerente, que é funcionário e pode
ter propriedade de departamento, o que realmente significa que aqui, seu entrevistador quer
ver a extensão da nossa classe porque podemos criar uma nova classe com base em
nossa classe de funcionários. Este é y aqui na parte inferior, podemos criar uma nova classe Manager. Aqui queremos usar
extensões para aproveitar
a funcionalidade de
nossa classe de funcionários. E, na verdade, isso
é quase t dt. Isso levará tudo
da nossa classe de funcionários, mas também precisamos
criar um departamento. É por isso que só precisamos de
um setter e getter, assim como fizemos anteriormente. Vamos criar aqui
conjunto departamento e aqui dentro estamos passando
departamento ou apenas nome. E aqui estamos salvando
nosso nome dentro
também precisará obter,
então obtenha o Departamento. E não precisamos de nenhum
argumento aqui e queremos retornar nosso departamento de
pontos de lista. E, na verdade, também é super importante ter
bons nomes em todos os lugares. Como você pode ver,
não estou nomeando coisas como set ou apenas em pleno terror. Normalmente, tento tornar
esses nomes o mais
prontos para a produção possível. Estamos usando aqui,
por exemplo, departamento de conjunto, departamentos para que fique
claro do que se trata. E isso realmente mostra na
entrevista que você é um bom desenvolvedor e pode
escrever código de alta qualidade. Aqui temos nosso
departamento de conjuntos e temos o Departamento. Agora vamos criar
nosso chip gerenciado. Então, apenas criamos um novo gerente e devemos passar para
dentro como sempre, ID e nome, por exemplo, John. E agora aqui podemos
verificar nosso gerente. Podemos fazer um
departamento definido e estamos passando por ele,
por exemplo, o desenvolvimento. Agora podemos verificar nosso gerente. Então não dissemos
departamento e há uma função de departamento GET que retornará para
nós o departamento. É assim que normalmente você
responderá a perguntas sobre aulas ou
extensão das aulas.
20. Protótipos: No vídeo anterior, falamos sobre as aulas e
como estendê-las. Mas a próxima questão do revisor de mudanças pode ser aulas
ocasionais. Mas temos aulas
realmente em JavaScript? Temos outra coisa porque não
temos nenhuma classe em JavaScript e elas são
criadas como um gatilho
para protótipos. É por isso que agora devemos projetar exatamente as mesmas classes apenas usando protótipos JavaScript
sem o uso de classes. E, na verdade, você
precisa fazer isso pelo menos uma vez. E então, você sabe, quais
são os problemas aqui? Primeiro de tudo, temos nosso funcionário da
classe e, em segundo lugar, gerenciamos o chip, e agora queremos
refletir isso para protótipos. Primeiro de tudo, devemos
mover todos esses métodos fora porque, na verdade,
podemos experimentá-los dentro
da função. E, na verdade, o que é um
protótipo? Esta é uma função. Não usamos a
palavra-chave class e usarei y aqui porque estamos
falando de protótipos. Portanto, esta é a
versão mais antiga do JavaScript. Então aqui eu tenho um funcionário var, e esta é apenas uma função
normal típica com palavra-chave de
função aqui,
estamos recebendo um nome DNS. E, na verdade, este
também é nosso construtor. Não precisamos de construtor aqui. Verificamos diretamente, ok, se tivermos ID e nome, então estamos lançando um erro. Mas se não, estamos sentados
aqui este AD e esse nome, o que realmente significa que esta é nossa classe típica quando estamos
fazendo isso com protótipo. Agora precisamos ajustar
todas as nossas funções. Como você pode ver aqui, eu
tenho essas funções e agora, em vez de apenas definir o
salário como um método, devemos experimentá-lo
dentro de um protótipo. Estamos dizendo
protótipo de ponto de empregado, salário conjunto de pontos. E isso será uma função. Aqui, simplesmente dizemos que
é igual a palavra de função, e aqui está nossa função. E precisamos fazer exatamente
o mesmo em todos os métodos. Portanto, protótipo de
ponto de empregado GetId é igual, e aqui está a nossa
função e a mesma com getName e também
com bom salário. Aqui está o protótipo,
getName é igual a função. palavra-chave aqui recebe salário também o mesmo protótipo de funcionário, obter salário igual a função. E agora
refatoramos com sucesso nossa
classe para protótipo. Não foi tão difícil
porque não nos estendemos. Por enquanto, quero
comentar o gerente, então não estamos recebendo nenhum erro. Agora vamos verificar e navegar por ele. Estou recarregando a página e agora
temos aqui nosso funcionário, como você pode ver, o código está
exatamente o mesmo. Esta é a instância
do funcionário. Aqui temos, por
exemplo, o método GetID. Estamos recebendo um. Aqui, temos salários para que possamos
ganhar e obter salário. E tudo está funcionando, o que significa que é assim que
você afeta sua classe. Dois protótipos. E agora temos um
gerente e estendemos, e será mais difícil. Então aqui temos um gerente, dissemos departamento
e pegamos o Departamento. E sim, também
deve ser uma função. Então, aqui podemos escrever var. Aqui temos nosso gerente e sabemos que
isso é uma função. Também não teremos dito departamento e levaremos o
Departamento para dentro. Nós os escreveremos depois. Mas aqui também, o problema, nosso gerente estende
nosso funcionário, mas estamos entrando nos mesmos parâmetros e, na verdade,
não queremos escrever
aqui ID e nome, mas podemos tentar
aqui, params. E nós só queríamos lançar
todos os campos que estamos recebendo e usando
aqui nosso funcionário. E para isso podemos
escrever código assim. Podemos escrevê-los jogar aplicar. Aqui dentro estamos passando
esses argumentos de coma. E o que isso essencialmente faz, ele usa argumentos
dessa função aqui, isso. E como você pode ver
aqui, também escrevi que programas não os
usavam por enquanto. Mas se você conseguir uma tarefa para estender o
gerenciador com algum campo, você pode escrever aqui
estes, por exemplo, imagem é igual a imagem de ponto de params. E neste caso, você
também deve passar seu
gerente e uma imagem. Isso é totalmente possível, mas não precisamos
disso para nossa tarefa. É por isso que simplesmente
usamos aqui empregado aplicar esses argumentos
e o que
ele faz, literalmente faz parte do nosso empregador. Como você pode ver aqui,
temos esse ID e nome, e na verdade estamos
chamando essa função, mas estamos dando a ela outro
contexto onde dado dentro do contexto do nosso gerente e argumentos
disso função. Mas aqui está uma enorme
diferença que eu quero
mostrar a vocês, na verdade, quando estamos
pulando para o navegador. E aqui no protótipo
do gerenciador, você pode ver aqui em uma função de
construtor. Mas aqui se eu escrever protótipo de
funcionário, você pode ver aqui
todas as funções que tínhamos anteriormente
aqui no topo, porque na verdade
esta única linha está apenas chamando o
construtor do funcionário . Não tem nada
a ver com esse protótipo, o que realmente significa que
essas funções IN, disse que protótipo de funcionário e
gerente não os obtém. E isso é super importante porque estamos
estendendo essa aula. Isso significa que queremos
tê-los diretamente dentro do nosso protótipo e
queremos copiá-los.
Como podemos fazer isso. Podemos escrever aqui protótipo de
ponto de gerente igual, e aqui queremos
usar a criação de objetos porque queremos clonar
nosso protótipo de funcionário. E por dentro estamos passando
nosso protótipo de ponto de empregado. Nesse caso, estamos clonando
todas essas funções de nosso funcionário para nosso
protótipo de gerente. Então, vamos verificar o que
estamos recebendo aqui. Estou recarregando a página e aqui , protótipo de ponto do gerente. E, como você pode ver,
agora é uma cópia do nosso funcionário. E podemos escrever aqui protótipo de ponto
gerenciador, ponto GetId, por exemplo. E estamos recebendo esse método. Obviamente, é
indefinido porque esta não é uma instância,
mas a classe, mas temos acesso a
esse método dentro. Mas aqui também está um grande
problema quando estamos escrevendo aqui o construtor de pontos
protótipo de ponto do gerenciador. Estamos recebendo o construtor do nosso funcionário e não
o gerenciamos e isso é errado. É por isso que o que
devemos escrever aqui também, construtor de pontos protótipo de
ponto
gerenciador. E queremos atribuir aqui
nossa função de gerente. Neste caso,
estará 100% correto. E como você pode ver
onde eu chego em referência ao nosso gerente, essas são duas linhas que
são super importantes quando você está fazendo
extensão com o protótipo. Porque antes de
tudo, você quer obter todos os métodos de nosso funcionário. E em segundo lugar, você
precisa substituir, construir uma volta para o nosso gerente. E agora podemos usar o
departamento SAT e obter o Departamento. Isso é exatamente o
mesmo que era anteriormente. É protótipo de ponto de gerente. E aqui estamos atribuindo
nosso departamento de conjunto e aqui gerente dot
prototype.js departamento. Aqui, é claro, precisamos escrever a palavra-chave function exatamente o mesmo deve
estar aqui no topo. Nesse caso,
implementamos o gerente com sucesso, assim como foi feito aulas
anteriores do Lucas. Vamos recarregar nossa página e verificar. Como você pode ver, estamos recebendo nosso gerente com ID e nome, mas também teremos um conjunto de
funções Departamento. Podemos escrever, por exemplo,
aqui desenvolvimento. E agora não dissemos
Gerente, também desenvolvimento. E temos uma boa função de
departamento GET. E, obviamente, podemos
usar a mesma função. Por exemplo, obtenha o ID do nosso pai e ele também
está funcionando. É isso que você normalmente
usará protótipos e implementará classes com protótipos
nativos
dentro do JavaScript.
21. Eu Falhei A Entrevista. O que é o próximo?: Pode ser que ele falhado na sua entrevista
e talvez tenha sido sua primeira entrevista
e você realmente queria
esse emprego e agora você está realmente deprimido.
O que você deve fazer? Primeiro de tudo, você
precisa entender que isso é completamente normal e você falhará em muitas
entrevistas durante sua vida, e eu falhei muitas delas, especialmente no começo. É por isso que o que você
precisa fazer, você quer, primeiro lugar, continuar. Você não deve parar logo após sua primeira entrevista e mesmo
após sua quinta entrevista, você não deve parar porque, mais
cedo ou mais tarde,
encontrará sua primeira empresa e
conseguirá seu primeiro emprego. Primeiro de tudo, você
não deve estar deprimido. E em segundo lugar, você deve usar as
entrevistas como uma
fonte adicional de conhecimento porque na verdade este é um
bom lugar para entender quais
perguntas foram feitas na entrevista. E também você pode entender o conhecimento que você está gostando. É aqui que há dois pontos
principais que você deve fazer. Depois de cada entrevista. Logo após a entrevista, você deve sentar e
escrever todas as perguntas que lhe foram feitas e você
não respondeu
corretamente, não respondeu A. Depois disso, você deve pesquisar
todas essas perguntas no Google e aprender. Obviamente, você não pode aprender
tudo em um dia, mas você pode dividir esse conhecimento e aprender algo novo para você. Isso é realmente importante para
fazê-lo diretamente depois, porque no outro
caso você esquecerá isso. O próximo ponto importante é
pedir a resposta
da empresa. E, na verdade, pode ser que
você não tenha recebido
uma carta ou um telefonema após sua entrevista
da empresa. E isso pode acontecer
em muitas empresas. É aqui que você deve
escrever seu gráfico com quem você falou
pelo menos duas vezes, pode estar no dia ou dois
após a entrevista
e, em seguida, talvez em três dias depois, porque você
deve obter alguma resposta. E se eles disserem que você
não passou na entrevista, você deve pedir a
revisão técnica de sua entrevista. Você pode simplesmente perguntar, ok, isso é PT, mas eles
realmente querem algum feedback. De que conhecimento estou gostando? Isso é completamente normal
e, na verdade, eles não fornecem nenhum
feedback técnico com muita frequência, mas às vezes eles podem fazê-lo. E isso também é
extremamente útil para você porque você
verá seu conhecimento da
perspectiva de outra pessoa. Seu entrevistador
pode escrever algo que é extremamente
importante para você aprender. É por isso que não
se desencoraja se você não passou
na entrevista, isso é completamente normal e
você deve continuar.
22. Módulos: Você também pode ter uma pergunta
sobre o sistema modular. Eles querem dizer com este EPMA Script seis módulos ou módulos js
comuns. Por exemplo, sua
pergunta pode ser criada um módulo de cripta seis atmosfera
com funções
getName, sobrenome e
especialista padrão obter nome completo. Para isso, você deve saber que Harmodius está trabalhando
em JavaScript só porque é o componente
principal do JavaScript e estamos
usando módulos em todos os lugares. Para usar as entradas, precisamos
criar mais um arquivo. Como você pode ver aqui,
eu tenho JS principal. Este é o nosso principal
arquivo e índice HTML. Então,
digamos que estamos criando um novo módulo e
queremos nomeá-lo. Por exemplo, por exemplo,
os scripts devem ponto js. Dentro, escreveremos alguns módulos
Atmos Script seis. Primeiro de tudo, aqui queremos
criar um método getName, e estamos escrevendo
com export const. Aqui está getName, e
aqui estamos recebendo como um nome de argumento e estamos
retornando nosso nome. Como você pode ver aqui, usamos o especialista em construção const, e essa é exatamente uma
das funções que
devemos criar. E como você pode ver, pegue o
nome e receba o nome dela. Só não nomeei funções. É por isso que estamos escrevendo
e somos especialistas
neles a partir deste módulo
foi export const. Vou copiar esta linha e colar
aqui e devemos nomeá-la. Obtenha um determinado nome. Aqui
estamos recebendo o nome certo e estamos apenas
devolvendo nosso sobrenome. A última coisa que
somos o grau de máscara é especialista
padrão, nome esquecido. E se você não souber como
criar um especialista padrão, isso é padrão de exportação. E aqui não precisamos
fornecer um nome, o que significa que aqui
temos diretamente uma função no nosso caso, pode ser que
possamos criá-la assim, nome e sobrenome e
apenas concatenamos. E aqui dentro temos uma cadeia de caracteres enigmática Atmos e apenas chamamos aqui nossas funções. Primeiro de tudo, getName e
estamos passando o nome interno. Depois disso, temos
um espaço aqui, temos uma segunda função, nome dela onde quer que o sobrenome de
bisão dentro. Agora, nosso arquivo script seis cadeiras é um módulo e está
completamente isolado. E no que somos especialistas,
aqui está disponível lá fora, então vamos usá-lo agora. Temos aqui três funções, biomassa pulando nossas cadeiras
principais aqui, devemos importá-las e estamos inserindo-as
assim, importante. Então temos colchetes e
dentro do que estamos inserindo, é GetName, Coleman
recebe o nome dela. E como você pode ver, o editor do
meu y mais velho a estrada daqui
no meu roteiro seis. E como você pode vê-lo
como é claro preto porque não estamos
usando essas funções. É aqui que
eu quero escrever getName e estamos passando. Então, por exemplo, JAK, então temos aqui o sobrenome, e aqui será pardal. É assim que estamos inserindo
e usando especialistas em nome. Estamos usando aqui a importação de palavras, depois colchetes e
dentro de funções nomeadas. No nosso caso, GetName, recebe o nome dela, e este é o caminho para nossos scripts ECMO de
arquivo dot js. Agora, a questão
é como podemos obter nosso especialista padrão e
para este fim de semana, certo,
logo após a entrada, obter o nome completo e depois vírgula. Nesse caso, obteremos
nosso especialista padrão primeiro e, em
seguida, nomeamos especialistas apenas
com colchetes depois. Agora, aqui dentro
do nosso log do console, podemos usar get FullName e estamos passando
no site duas strings. Primeiro de tudo Jack e
segundo menos paralelo. E agora podemos usar essas
funções assim como elas foram definidas
neste arquivo de posição. Agora, a questão
é como podemos usar o módulo
EKG prescript six dentro do nosso HTML. Para isso, devemos
pular dentro do nosso HTML. Aqui temos roteiro
com a fonte Manchester. Isso é totalmente bom, mas devemos escrever
aqui tipo módulo e em seguida, ele irá importá-lo como o módulo
Atmos Script seis. Agora vamos tentar
recarregar nossa página. Como você pode ver,
na verdade funcionou mas estamos recebendo
um erro restrito e estamos recebendo um erro de curso porque
esse país HTML índice realmente alto Xadrez principal
porque você não pode fazer
solicitações de origem cruzada do arquivo. E isso é realmente um problema
porque aqui estou usando esse arquivo de origem como o arquivo HTML de índice
normal. Se você estiver usando alguma estrutura
front-end como o reator angular, você não terá esse problema porque você tem sistemas de
módulo, eles estão fora da caixa. Mas exatamente para esse caso
específico em que eu joguei
um HTML de índice, devo servir esse
HTML de índice como um servidor web. E para isso, há um
pacote que é chamado de servir. Você pode instalá-lo
era conhecido xadrez
e, como você pode ver agora,
ele está disponível para mim apenas este HTML de índice no
localhost 3 mil. Agora, como você pode ver, não
temos um erro em relação ao curso, mas temos um problema para carregar nosso arquivo
crypt six atmosfera, porque na verdade
aqui devemos colocar dot js para carregar este arquivo. Agora não estamos recebendo a Sarah. E como você pode vê-lo console, essas funções antigas
estão disponíveis rapidamente. Aqui podemos ver Jack
Sparrow e Jack Sparrow. E isso significa que
inserimos com sucesso essas três
funções foi nomeada como especialista e exportação padrão do nosso módulo usando o grupo
Atmos seis módulos. Agora temos uma próxima pergunta. Devemos criar exatamente
as mesmas coisas com o módulo js comum. E se você não sabe, o modelo GIS
comum é normalmente usado
dentro de cadeiras conhecidas. É por isso que agora eu
queria escrever nosso arquivo
ATMOS Script six JS
com o uso de cadeiras comuns. É por isso que eu vou
copiar a tabulação de pasta e
criar aqui um novo arquivo, basta nomear ponto js comum. E vamos reescrever
tudo aqui. No módulo js comum, você pode fazer o mesmo. Você não pode ter especialistas em exportação e nome
padrão simultaneamente . E isso ocorre porque, em vez de exportar const, onde quer que
eu coloque aqui, module.exporta ponto getName, e estamos atribuindo
uma função aqui. O ponto principal é
se Book quiser
escrever um
especialista padrão onde ICT e em vez de exportar o
módulo padrão.exportações são iguais. E aqui está nossa função, o que significa que aqui temos um modelo padrão
para nossa função. Então, o que podemos fazer
neste caso é apenas deixar este getName
e obter o sobrenome como funções
privadas
porque controlamos o especialista simultaneamente
sem um especialista padrão. E, como você pode ver aqui, temos especialistas em Módulos apenas
para ter nosso especialista padrão. Agora podemos pular diretamente em Manchester e aqui importar
nossa função padrão. Mas, para fazer isso, devemos
usar a palavra-chave require. É por isso que aqui eu quero escrever const e estamos recebendo
grande obter nome completo. E aqui é necessário igual, e aqui está nosso caminho JS
comum ou apenas comum. Posso pular dentro do console
e do xadrez principal do nó direito. E, obviamente, estamos recebendo uma mensagem que o GetName não
está definido
porque aqui estamos tentando
consolar o log getName
e obter o sobrenome. Agora aqui
acabei de receber FullName. Vamos tentar novamente. Como você pode ver, não temos nenhum erro e estamos
recebendo cheques pais. Se realmente quisermos obter
todas as três funções, devemos pular aqui e
usar o
módulo em qualquer lugar . Exports dot e
aqui será o nosso GetName. Agora, aqui estará mais em seus especialistas em
pontos, o ponto recebe sobrenome. E aqui queremos mais especialistas em pontos de petróleo e
aqui será um bom nome completo. Nesse caso, funcionará e obteremos nossas
três funções. Agora temos três especialistas. Podemos saltar de volta em Manchester. E aqui, em vez
de obter o nome completo, podemos apenas destruir
e obter três funções. Getname, recebe o nome dela, e aqui obter FullName. E agora podemos descomentar
esses dois logs do console. Vamos verificar isso. Estou pulando para o console
e executo o Node Manager e ainda temos um
getName ágil não está definido. Mas, na verdade, o problema aqui
é que dentro dos js comuns, não
temos uma função
getName e obtemos sobrenome porque na verdade
os temos em especialistas em Módulo. É por isso que esse
código não funcionará. Berlim precisa
escrever, em primeiro lugar, constituir nome e depois deste módulo especialistas pontuarem getName
e aqui é igual a getName. Nesse caso, essa
função também pode funcionar. Devemos fazer exatamente o
mesmo pelo nosso sobrenome get. Aqui será const obter sobrenome e vamos movê-lo para o topo. E agora aqui estão nossos
especialistas GetName, e agora aqui
temos o sobrenome e estamos atribuindo aqui nossa
função recebe Ernie. Nesse caso, todas as funções
estão disponíveis para nós dentro deste arquivo e também fora por meio de especialistas em módulos.
Vamos verificar isso. Estou executando o xadrez principal do nó e não temos nenhum erro. Então, como você pode ver, temos duas variantes diferentes
no meu roteiro, seis e baú comum. E se você pegou
todas essas perguntas, então a próxima pergunta pode ser Qual é a diferença
entre os
seis módulos Atmos Script e os módulos js
comuns. E, na verdade, o SAL faz esse conjunto. módulos de xadrez comuns são normalmente usados
dentro do baú conhecido. Este é o sistema
modular padrão para caixas conhecidas ECMO Script seis
módulos que temos no navegador. Este é o JavaScript ECM Script
seis. E, na verdade, você pode
usar seis
módulos ECMO Script dentro de cadeiras de nós. E isso é apenas uma necessidade de
açúcar ao redor. É por isso que se você assumir um postscript seis módulos
dentro de não-xadrez, você sabe que dentro
você ainda precisa porque é
obrigatório para o NodeJS. Scripts de demonstração seis
módulos são antes de tudo mais recentes do que os módulos js
comuns
e, em segundo lugar, eles são estáticos, o que significa que você
pode empacotar isso exigir dentro se condição, por
exemplo, dentro do loop for . Mas você realmente não pode
fazer isso com a entrada porque a entrada deve estar
sempre no topo. E se a entrada não estiver na parte superior, ela irá borbulhar
automaticamente para o topo quando
o JavaScript a analisar. E isso é realmente
muito melhor, antes de tudo por segurança. E, em segundo lugar, implementar diferentes ferramentas integradas
na parte superior do Atmos
Script seis módulos.
23. Implementar a função de Debounce: Uma das perguntas que
estão aqui de tempos em tempos é escrever
a função dos ossos. E se você não sabe
quais são os ossos, isso significa que a
função será chamada somente após
determinado período de tempo, o que realmente significa que
cada chamada dessa função
será atrasada. Como podemos implementar
essa função? Primeiro de tudo, devemos criar uma função que
queremos para os ossos. Aqui eu quero
criar uma função, por exemplo, salvar a entrada. E aqui somos fornecidos
dentro do nosso nome. Então, a ideia é que, por dentro simplesmente
registraremos alguma coisa no console. E podemos ver que essa
função está funcionando. Aqui está salvar a entrada e o nome. E estamos usando a função de
títulos. Por exemplo, quando queremos
enviar algumas informações
para o back-end, usuário está digitando algo
no campo de entrada. E queremos
esperar, por exemplo, 200 milissegundos ou dois segundos após a pessoa parar de digitar
algo na entrada. Nesse caso, os alunos enviaram para o back-end apenas uma
única solicitação para verificar a validação e não
muitas solicitações após
cada letra. É exatamente por isso que
precisávamos dos ossos. Então, temos nossa função
de entrada de salvamento e agora queremos
chamá-la de ossos. Por exemplo, vamos nomear
a mudança do processo. Aqui queremos usar uma
função DBMS que
criaremos em um segundo dentro,
devemos fornecer antes de tudo,
nossa função, isso é
salvar entrada e, em segundo lugar, atrasar, por exemplo, dois segundos. Depois disso, podemos simplesmente chamar alteração do
processo com uma string. E, na verdade, não
importa quantas vezes chamaremos essa
função de ideia principal, ela será chamada naquelas. Depois de dois segundos. Aqui eu quero registrar
nova função, os ossos. E aqui estamos recebendo
como um argumento. Primeiro de tudo, alguma função, vamos nomear funk. E em segundo lugar nosso tempo limite. E é uma boa abordagem
para definir o tempo limite por padrão, por exemplo, para
300 milissegundos. Isso significa que não é
obrigatório fornecer. E agora dentro da nossa função de
descolagem deve retornar uma função. Porque, como você pode ver aqui, estamos chamando a função bones e a mudança de processo também é uma função onde
dentro podemos fornecer alguns dados para nossa função de entrada
salgada, que na verdade
significa que aqui devemos retornar e você funciona. Aqui queremos espalhar nossos args. E vamos verificar o que
estamos recebendo opostos. Então, aqui eu quero consolar arcos de vírgula de função de
login, e podemos ver em que
formato estamos recebendo. Estou recarregando a página. Como você pode ver, estamos recebendo
quatro vezes porque
chamamos essa função quatro
vezes em uma função. E aqui temos apenas
um único argumento foo. Mas esse spread com
args transformou nossos argumentos em
uma matriz porque para nós é mais fácil
trabalhar com a matriz. A segunda coisa que queremos
fazer é criar um temporizador e na verdade, um tempo de grupo deseja armazenar no fechamento
aqui no topo. Aqui podemos deixar temporizador
sem nenhum valor padrão. E agora dentro da nossa função
interna depois do
nosso console muito com apenas
queria escrever setTimeout. Aqui teremos uma
função e, na verdade o segundo parâmetro aqui
será nosso tempo limite. Depois de que horas
chamaremos esse código dentro. O que queremos fazer aqui
é func dot apply. Aqui estarão esses auroques de coma. O que isso tem um meio? Usamos aqui está
a função de vínculos e aqui estamos fornecendo
nossa contribuição do Salvador. É o nosso func. Aqui está nosso tempo limite. Então, neste momento, essa mudança de processo é
essa função interna. E depois de
chamarmos essa função, estamos chamando essa parte. Aqui, estamos recebendo
nossos argumentos. No nosso caso, isso
é um array com foo. Aqui temos nosso log de console e isso
gerará setTimeout, o que realmente significa que
cada linha aqui quando chamarmos essa função, gerará um setTimeout. Com esse tempo limite, o que
estamos fazendo dentro
onde chamamos func. Então, estamos chamando essa
entrada de salvamento com apply this args, o que realmente significa que
queremos chamar essa função após
o tempo limite com o contexto correto, com o contexto dessa
função, com esses argumentos. Mas aqui temos um problema
quando recarregamos a página. Como você pode ver,
estamos recebendo quatro vezes em uma função e depois de dois segundos, recebendo a entrada
salva cheia quatro vezes. E isso é errado, porque
aqui devemos obtê-lo sobre aqueles porque isso
está realmente nos ossos. Devemos limpar nosso temporizador
toda vez quando fazemos
uma chamada para a função, porque neste caso, nosso
tempo limite definido anterior deve ser ignorado exatamente para isso que
criamos aqui lead time. O que podemos fazer aqui, podemos atribuir setTimeout
ao temporizador. E, na verdade, se você
não conhece SetTimeout, devolva um
número e esse é nosso ID específico
que podemos limpar. É por isso que, antes do nosso temporizador, agora
podemos escrever um tempo limite claro e, dentro, podemos
fornecer nosso temporizador. Se estiver indefinido, não
importa, não fará nada. Mas se tivermos um AD, o setTimeout anterior
será destruído. Nesse caso, toda vez que chamamos essa
função novamente, todos os tempos limite anteriores serão regados e agora
criaremos um novo tempo limite definido. E depois desse tempo
chamaremos nossa função. Essa é exatamente a
ideia dos ossos. Agora vamos recarregar a página. Estamos recebendo nossa
função interna quatro vezes, e agora estamos recebendo entrada
salva por apenas uma vez após dois segundos. E isso é exatamente o que
queríamos quando
implementamos nossos débitos. Mais uma vez, a
função de ossos nos permite
chamar algo apenas uma vez
após um tempo específico. Isso é realmente
importante quando estamos falando de
algo que o usuário pode chamar muitas vezes durante a entrada
no formulário, por exemplo.
24. Implementar a função do acelerador: Implementamos com sucesso a função de ossos. Mas você também pode
ter uma pergunta sobre como implementar a função do
acelerador. E, na verdade, eles
são super semelhantes. E é por isso que eu tenho
o código da nossa
função bones porque realmente
precisamos
mudar como 1% do código. Então, a ideia da função do acelerador é que ela será
executada imediatamente. E só para lembrá-lo, a função bones será executada no tempo limite ou
após o nosso tempo limite. Aqui, a função do acelerador
executa imediatamente, mas depois disso, a coluna da função é completamente ignorada
para nossa equipe, que realmente significa que se o
usuário estiver digitando algo, podemos chame nossa função apenas no início e, em
seguida, cada dois segundos,
por exemplo. E esse é exatamente o objetivo
central do acelerador. Para simulá-lo, devemos
mudar nosso código um pouco. Aqui temos nossa contribuição do Salvador. Isso é bom. Aqui está a mudança de processo, mas não queremos usar aqui os ossos gostariam de
escrevê-lo com acelerador. Os argumentos são
exatamente os mesmos. E agora aqui chamamos de
mudança de processo no início. Isso é totalmente bom, mas agora eu quero simular que estamos chamando
isso com setTimeout. Aqui, estamos certos
e setTimeout, e queremos chamar essa mudança de processo de função dentro dela depois de algum
tempo, por exemplo, após 1 segundo, então eu
copiarei colar este setTimeout e executar depois de 1
segundo, 200 milissegundos. Agora eu copio colá-lo novamente e chamarei essa
função novamente após dois segundos e
400 milissegundos, e então removerei dois
últimos gráficos foram alterados. Na verdade, como você pode ver aqui, colocamos tempo limite 200 milissegundos, o que realmente
significa que essa função deve ser executada imediatamente. Este setTimeout será ignorado. Isso também será ignorado e o
download do último
tempo limite definido chamará essa função porque
isso acontecerá após esse tempo
de 200 milissegundos. Agora, primeiro de tudo, vamos mudar o nome dos nossos
ossos para acelerador. Estamos recebendo aqui
os mesmos argumentos, uma função e nosso tempo limite. Mas agora aqui não precisamos de um ID de
temporizador, mas um booleano. E este booleano nos mostrará se podemos executar essa
função novamente. É por isso que não o lead time, mas o lead, por exemplo, está aguardando e, por
padrão, é falso. Agora aqui também retornamos uma função que não precisamos
aqui, tempo limite claro. E, na verdade, SetTimeout
está hospedado aqui, mas não precisamos de tempo
porque na verdade vamos proibir este setTimeout
com uma condição if aqui. Podemos escrever se não estiver esperando, então queremos chamar
esse setTimeout. Em outros casos, não chamaremos nada e esse código
será ignorado. Além disso, é importante
chamarmos essa função diretamente. É por isso que eu quero
movê-lo para dentro da nossa condição
if e
insights setTimeout, simplesmente
mudamos nosso peso
na propriedade para false back. Então, como você pode ver, essa linha significa que,
no início da primeira chamada, chamaremos essa função. Mas depois disso, queremos
definir nossa bandeira como verdadeira. Este é o y aqui onde eu não esperava
é igual a verdade. Em seguida, temos um tempo limite definido, por exemplo, dois segundos. E depois de dois segundos estamos
configurando está esperando para false, o que realmente significa que
podemos chamar essa função no após dois
segundos e não antes. Então, como você pode ver, o
código é 99% o mesmo. A ideia principal é que estamos construindo aqui é
peso e bandeira, e nós apenas permitimos acessar essa função uma vez
no nosso tempo limite. Agora vamos verificar se está funcionando. Estou recarregando a página, estamos recebendo diretamente
poupando put foo pela primeira vez. E então vemos na entrada do Louvain
CV f2 segunda vez. E isso é exatamente essa mudança de processo de
código e este último modo de tempo definido Com dois segundos e
400 milissegundos. Porque, na verdade, aqui em nossa primeira tentativa,
vamos acelerar, está esperando, é falso. Vamos aqui, estamos
verificando uma chave, não é verdade. Então estamos chamando diretamente essa função e estamos
definindo nossa bandeira como verdadeira. E depois do nosso tempo limite
definido e então estamos mudando o
peso dele e de volta para falso. E não precisamos
aqui nenhum momento RED porque nunca a
bordo do nosso SetTimeout. A próxima pergunta
que você pode obter. Certo, mas qual é a diferença entre os ossos e o acelerador? E como eu já disse, estamos chamando os ossos
depois que os usuários pararam
para fazer alguma coisa. Estamos chamando acelerador antes
de tudo no início e depois de certo
intervalo de tempo.
25. Destaque Todas As Palavras Sobre 8 Chars Com Amarelo: Você também pode obter
algumas perguntas sobre como o JavaScript
está funcionando com sabedoria. Por exemplo, aqui devemos destacar todas as
palavras com mais de oito caracteres nos textos
do parágrafo
com fundo amarelo. E como você pode ver aqui, eu tenho index.HTML e
temos nosso parágrafo, e temos nosso parágrafo de
cabeçalho, e temos um
monte de texto aqui. Se você quiser experimentar você mesmo, vincularei o código-fonte
na caixa de descrição abaixo. Você não deve redigitar
esse texto inteiro. É assim que ele está olhando agora, como podemos implementar
essa tarefa específica? Primeiro de tudo, devemos
encontrar nosso parágrafo. Isso é muito fácil que
tenhamos apenas um único parágrafo. Aqui. Podemos dizer que
estamos encontrando o parágrafo e aqui está o seletor de consulta de
ponto de documento. E aqui este P e isso você pode ver que usei aqui
QuerySelector. E isso é super importante
se você tentar usar GetElementById ou
obter elemento por classe, essa não é a
melhor abordagem e detalhes que você não
trabalhou com Tom para combinar. É por isso que você sempre deve usar
QuerySelector ou QuerySelector. Oh, se você quiser obter uma
lista de seus elementos, no nosso caso, obtemos
apenas um único elemento. É por isso que simplesmente escrevemos aqui p e estamos recebendo
nosso parágrafo. Também poderíamos escrever aqui um
cifrão no início, assim como no estilo jQuery. Por exemplo,
prefiro fazê-lo
facilmente distinguido pelo nome, A diferença entre
apenas dois elementos
e elementos DOM. Mas, por enquanto, vamos
mantê-lo como um parágrafo. Mas queremos fazer agora Poupon para mudar nosso conteúdo para
que nosso HTML interno, é por
isso que podemos escrever pontos de
parágrafo HTML interno igual a. E queremos antes de tudo
ler o ponto do parágrafo emHTML. E, como você pode ver, é
assim que o conteúdo dentro do InnerHTML
está parecendo. Portanto, esta é apenas uma
string simples e agora podemos trabalhar com ela como com o fluxo JavaScript
normal. O que queremos fazer agora
aqui queremos, antes de tudo, dividi-lo com espaço. Nesse caso, estamos
recebendo uma série de palavras e agora podemos usar o mapa para
trabalhar com cada palavra. Então, na verdade, aqui estamos recebendo palavra e por dentro queremos verificar se nosso mundo é
maior que oito símbolos. Assim, podemos simplesmente
retornar aqui o comprimento do
ponto da palavra maior que oito símbolos. Então aqui queremos
escrever operador ternário. E se formos
maiores que oito símbolos, então cupom para
envolvê-lo em amarelo, o que realmente significa que queremos
escrever outro nó DOM dentro. É aqui que eu criarei uma div de string com estilo
dentro e dentro do estilo, estamos certos e
cor de fundo, por exemplo, amarelo. Aqui devemos fechar nossa div
e, na verdade, dv é ruim. Devemos usar aqui span
porque este será um elemento interior
dentro desse espaço onde exatamente em nosso mundo
que estava lá anteriormente. Então, neste caso, estamos
retornando e você não sabe. E se não
mudarmos o mundo, simplesmente retornamos
essa palavra de volta. Como você pode ver neste
caso, em primeiro lugar, pegamos nossa string
dentro do InnerHTML. Nós o dividimos por palavras
com espaço onde mapeamos cada palavra e
estamos verificando o comprimento. Nesse caso, estou retornando seu nó DOM ou estou
retornando a palavra em si. E depois de
terminarmos nosso mapa, devemos juntar tudo de volta. É aqui que estamos nos
unindo com o espaço, assim como fizemos anteriormente. Vamos verificar o que estamos recebendo. Estou recarregando a página. E como você pode
ver, todas as nossas palavras mais de oito símbolos, serão destacadas com amarelo, o que significa linhas
iniciais. Podemos resolver essa tarefa. Você pode obter
tarefas diferentes em relação ao DOM. O que você precisa saber é como
obter elementos do Dom, como removê-los deles,
como atualizá-los e, na verdade, como transformar elementos
DOM diretamente em cadeias de caracteres
JavaScript, por exemplo. Você pode trabalhar com eles.
26. Adicionar um link: Outra tarefa idiota que
você pode obter é adicionar um link volta à origem do
texto após a tag de parágrafo. E, na verdade, tenho exatamente o mesmo HTML como perversamente. Mas, no final, devemos fornecer um
link para nossa fonte. Como podemos resolver isso? Primeiro de tudo, devemos
criar um novo elemento DOM. Agora, no caso de ser um link, forneceremos um gráfico de
insights
e, em seguida, apenas o
anexaremos no final do nosso DOM. Primeiro de tudo, vamos
criar um link. Para isso, podemos usar o elemento de criação de ponto de
documento e dentro do útero deve fornecer qual elemento DOM
queremos criar. No nosso caso, é um após este boop quer dentro
vinculado para atribuir nosso gráfico. Então, simplesmente escrevemos link href igual em caso de negação. Eu
vou copiá-lo daqui. Será HTTPS para ipsum.com. E também devemos
fornecer insights, um texto interno que
será um conteúdo do nosso link. É por isso que o texto interno do ponto lync. E aqui estamos atribuindo texto
gerado a partir de Lorem Ipsum. Nosso elemento DOM está pronto. Agora nós simplesmente precisamos
colocá-lo no final do nosso DOM. Podemos escrever aqui corpo do
ponto do documento, ponto anexar filho. E aqui estamos apenas fornecendo
nosso novo elemento DOM. Nesse caso, ele aparecerá
no final do nosso corpo. Vamos verificar isso. Estou recarregando a página
e agora no final
temos textos gerados a
partir de Lorem Ipsum, e este é um link e está
indo na página correta.
27. Dividir cada frase para uma linha separada: Outra tarefa com o
evento DOM pode ser assim. Divida cada nova frase uma linha separada no texto
do parágrafo. Uma frase pode ser assumida como uma sequência de textos
terminados com um período. E, na verdade, temos exatamente o mesmo texto dentro do parágrafo, assim como fizemos anteriormente. Agora, a questão é como
podemos implementar essa tarefa? E, na verdade, podemos
pensar, ok, temos período, podemos
simplesmente dividi-lo por período. Vamos experimentar isso. Primeiro de tudo,
quero encontrar aqui nosso parágrafo com seletor de consulta de
documentos p, assim como fizemos anteriormente. E agora aqui podemos escrever ponto de
parágrafo innerHTML é igual a ponto de
parágrafo innerHTML. Queremos dividi-lo com ponto. E vamos verificar o que
teremos neste caso, depois de dividi-lo e tivermos
uma série de nossos pontos fortes, devemos nos juntar a ele de volta. Mas neste caso queremos
colocar aqui antes de tudo ponto porque estamos nos
unindo pelo DOD. Mas então precisamos de uma tag de fechamento para nossa tag p e aberta
para o nosso novo p. Nesse caso, estamos
escrevendo parágrafos para cada linha e junção não é aplicada
ao último elemento. É por isso que, no final,
queremos escrever mais, e aqui devemos fechar
nosso p. Vamos verificar isso. Estou recarregando a
página e, na verdade , ela está funcionando, mas
apenas parcialmente. Sim, está funcionando para
as frases simples, mas não funcionará para as frases em
que temos dois ou três pontos. Por exemplo, como
você pode ver aqui, temos linhas com
um ponto nele. E este é exatamente o problema
porque aqui nós o dividimos apenas por um ponto e isso
é um total de botão errado, nossa lógica está correta. Podemos inspecionar nossos
elementos HTML, como você pode ver, eles são embalados
corretamente
e, em seguida, estamos fechando
nossa lista p Aqui. Está funcionando, mas dividido
por um ponto não é nosso caso. Na verdade, aqui estamos chegando
a expressões regulares. E isso é algum conhecimento
que você deve aprender, pelo
menos no nível básico, porque você o usará em muitos casos quando
estiver trabalhando, por exemplo, com strings e para tentar verificar
expressão regular, eu recomendo que você
use um site, reg X.com. É totalmente gratuito. Você pode encontrar outros sites, mas aqui é muito bom
ver o que encontraremos. Como você pode ver aqui, você pode escrever uma expressão regular e aqui você pode fornecer o texto
e verificar como ele funcionará. Também aqui à direita, você pode definir alguns sinalizadores, por
exemplo, multilinha
global e assim por diante. Como você pode ver, essa é
a expressão regular que queremos escrever. E quando eu estiver pairando
sobre os símbolos, ele mostrará o que
exatamente estamos fazendo aqui. Este é o começo
da expressão regular, e estamos envolvendo a expressão
regular sempre com duas barras. Essa barra no
início e no final é apenas um início e fim
da expressão regular. Agora aqui dentro temos ponto, mas ponto é um símbolo especial
dentro da Expressão Regular. É por isso que devemos escapar
dele com a barra invertida. Como você pode ver aqui, isso corresponde
apenas a um caractere de ponto. Agora aqui temos
colchetes. E como você pode ver,
tudo dentro colchetes
é um conjunto negado, o que realmente significa que
isso não deve estar lá. Este símbolo atual é
o início do nosso conjunto. E aqui nós
pensamos e abrimos a tag. Nesse caso, estamos procurando
apenas um único ponto, mas não por vários pontos. Isso é tudo o que
queríamos dizer aqui. E como você pode ver aqui em nosso
código está funcionando corretamente. E agora temos essas correspondências
apenas com um único ponto, como você pode ver aqui, temos
três pontos, movimento de botão. O último ponto será verificado porque
estamos interessados apenas em ponto quando não tivermos
o segundo ponto depois. É por isso que podemos copiar e colar essa expressão regular e
colocá-la dentro da nossa divisão. Aqui devo escrever barra
no início e no final. E essa é nossa expressão
regular. E eu
entendo totalmente se você não conseguir 100% o que estou fazendo aqui, porque você deve aprender alguns conceitos básicos de
expressões regulares primeiro. Mas eles são extremamente importantes para se você estiver trabalhando
com cordas. Agora vamos verificar se
esse código está funcionando. Aqui. Estou pulando para a
página que estou recarregando, e agora ela está funcionando corretamente. Fizemos nossa divisão. E aqui, por exemplo, três pontos ainda estão lá e esta é a única frase. E quando tivermos um tiro único, simplesmente
consideramos a divisão e então movemos esse
texto na próxima linha. E, na verdade, o conhecimento de
expressões regulares está um pouco
fora do JavaScript, mas você ainda o usará muito. Mas também, se você aprender
essas expressões regulares, poderá usá-las em
todos os idiomas. Porque em todos os idiomas
é exatamente o mesmo.
28. Delegação de Eventos: Você também pode obter uma pergunta
como esta implementada clique no item o mais rápido
possível. E como você pode ver aqui
dentro do index.HTML, temos essa marcação. Temos uma lista UL e por dentro só
temos elementos li. Normalmente, você pode
resolvê-lo de forma diferente. Aqui temos duas soluções
típicas, mas uma é muito
melhor que outra. Na verdade, o que podemos fazer aqui, podemos encontrar itens em dólar com documento e aqui estamos
usando o seletor de consulta todos. E aqui, como você pode
ver em nosso index.HTML, Lee com item de classe. Aqui posso encontrar por
aula nosso item, e aqui estamos recebendo
uma lista de nossos itens. Depois disso, podemos percorrer
essa lista de nós DOM. E para cada elemento,
podemos anexar um ouvinte. Aqui podemos escrever
itens ponto para ricos. Aqui temos nosso item
que é um nó DOM. E dentro podemos escrever ponto de
item addEventListener. Aqui temos nosso clicker
e aqui está nosso manipulador. O que queremos fazer quando
estamos clicando no item, pelo
menos tentei alguns textos
sobre nosso item. Na verdade,
temos apenas um valor. É por isso que podemos escrever aqui. Você clicou no item e aqui
podemos escrever mais o texto interno
do ponto do item. Então, antes de tudo, encontramos a lista de nossos
itens e, em seguida, para cada item no loop
foi adicionado ouvinte de eventos. Vamos verificar isso. Estou recarregando a página. Vemos nossa lista de itens. Agora estamos clicando em um
item e estamos recebendo um bom registro de console com
o conteúdo deste item. Estamos clicando em outra extremidade, estamos recebendo log do console e na verdade, ele está funcionando
e está tudo bem, mas temos uma tarefa para
construí-lo o mais rápido possível. E, na verdade, aqui o problema é que se tivermos uma lista super enorme, então não é suficientemente eficiente. Porque na verdade aqui
temos para cada um, para todos os nossos itens, o que significa que temos
aqui uma lista de cem, dez centenas de itens onde adicionamos aqui cem,
dez centenas de ouvintes. E isso é super ruim
para o nosso desempenho. É por isso que essa não é a
melhor solução para nossa tarefa. O que podemos fazer, podemos encontrar
o pai ou para a nossa lista. E como você pode ver aqui,
temos UL com a classe Todo app. Aqui é onde
vamos encontrar o elemento do aplicativo e podemos usar aqui
documento QuerySelector, e saberemos que a
classe está pronta para fazer o aplicativo. Agora, dentro, podemos anexar apenas um único ouvinte
para nosso elemento de aplicativo. Então AB addEventListener. Aqui temos nosso clique e
aqui está nossa escuta. E então aqui mesmo evento, então temos acesso ao nosso evento. E, na verdade, o que
queremos fazer dentro, queremos verificar qual
elemento estamos direcionando. Porque podemos clicar aqui em nosso contêiner ou podemos clicar em qualquer item dentro
e realmente muito interessados em
clicar no item. É por isso que aqui
podemos escrever um K Se tivermos aqui o alvo do evento, que significa que
clicamos e queremos verificar aqui se nosso evento cobrar tem
uma classe do item, isso significa que
aquecemos nosso LEA. É por isso que aqui
podemos tentar até tocar na lista de classes de pontos. Aqui contém, na verdade,
a propriedade de lista de
classes dentro do nó tem uma função contém para verificar se
temos essa classe. Caso estejamos verificando se
clicamos em nosso item. Se isso for feito,
podemos copiar nosso bloqueio do console aqui dentro e apenas
alterá-lo um pouco. Estamos deixando aqui nossa corda. Você clicou no item aqui em
vez de item.name em um texto, podemos escrever texto de
ponto alvo de ponto de evento e ele funcionará
exatamente da mesma forma. Vamos verificar isso. Estou recarregando a página. Estou escondido aqui em alguns itens e estamos
ficando legais. Você clicou. E, na verdade, se
clicarmos em algum lugar fora, isso não faz nada. Mas a principal diferença
neste código é muito mais rápida porque temos aqui
apenas um único ouvinte para nossos pais. E não estamos gerando centenas de milhares de
ouvintes para cada item.
29. Solicitação HTTP Xml: Você pode conseguir uma entrevista
a pergunta, certo? Um exemplo de busca de dados da API com solicitação HTTP XML. E, na verdade, esta é
uma pergunta super antiga. E normalmente as pessoas não
devem fazer essa pergunta hoje em dia
e entrevistas, mas ainda estão aqui muito
nessa questão
porque algumas pessoas ainda querem saber como
resolvemos nossa busca e problemas há dez ou 15 anos. Nos projetos modernos,
você nunca
usará a solicitação HTTP XML nativamente. É por isso que não faz
sentido fazer essa pergunta, mas devemos
aprender a respondê-la. É por isso que vamos escrever um
exemplo de como ele está funcionando. Primeiro de tudo, devemos
criar nossa solicitação XHR. Portanto, é por isso que estamos chamando
você de solicitação HTTP XML. Agora temos uma instância de
nossa solicitação HTTP XML e podemos dizer qual método
queremos enviar e em qual URL. É por isso que estamos certos
e a cadeira XC está aberta. E como você pode ver aqui, temos dois parâmetros. Primeiro de tudo, é método. Aqui queremos escrever GED porque estamos fazendo
uma solicitação GET. E aqui está o URL da API e
eu colarei aqui e o
URL da API do github comm para buscar todos os repositórios
desse usuário específico. Depois disso, estamos certos em
pontos XHR cn e colchetes redondos. Mas não é tudo. Também devemos especificar o que
acontecerá no sucesso e no erro. E para isso estamos
escrevendo o ponto XHR no Senhor. E aqui devemos
atribuir uma função. E dentro dessa
função, antes de tudo, você quer verificar o
status que estamos recebendo de volta. Assim, podemos escrever aqui
se o gráfico xy esse status não for igual a 200, o que significa que
não é bem-sucedido, então queremos
consolar algum erro. Quero escrever
aqui, por exemplo, a
seta por último e talvez o vidro de status
XHR, e aqui o texto de status XHR. Nesse caso,
podemos ver diretamente o problema que temos no outro caso em
que obtemos sucesso. Então, aqui vamos escrever o sucesso
do log do console. E depois disso, passamos a
ler nossa resposta de ponto XHR, onde dentro temos
nossa resposta e também queremos verificar o erro dentro das solicitações do gráfico
xy. Então, aqui podemos escrever ponto do gráfico
xy em erro. E só para lembrá-lo, tudo é minúsculo e recebemos aqui uma função. E dentro podemos
escrever, por exemplo, a solicitação de
cobrança extra de log do
console falhou. É assim que você normalmente
define a função XHR. Primeiro de tudo, criamos uma
instância de solicitação HTTP XML. Em seguida, abrimos
com nosso método e URL. Em seguida, obteremos areia
e, em seguida, temos a função onload
e a função de erro para lidar com status incorretos ou uma seta com uma solicitação. Agora vamos verificar se está funcionando. Estou entrando no navegador
e recarregue a página. E como você pode ver aqui, estamos recebendo nossa resposta
e estamos recebendo sucesso do log do console
também em nossa rede, você pode ver que temos um invólucro de solicitação e
essa é a solicitação XHR. E, como você pode ver,
esta é a nossa prévia. Essa é a nossa resposta
do back-end. E isso significa que implementamos
com sucesso nossa solicitação de busca
usando a solicitação HTTP XML.
30. API de busca: Outra busca e sobre a
busca de dados da API é um pouco
mais atualizada. Isso é o que estamos
usando todos os dias. Aqui você tem uma pergunta, certo? Um exemplo de busca de
dados usando a API Fetch. Ele Pi é uma maneira moderna de
carregar alguns dados da API. E, na verdade, aqui eu não
removi a solicitação HTTP XML. Você pode comparar o código que
escrevemos há dez anos. E agora aqui podemos usar a função
fetch e nós apenas
fornecemos uma entrada e get é o método dentro da
busca por padrão, o que significa que aqui devemos
fornecer apenas um URL. A parte mais importante é que Fetch nos devolve uma promessa. E isso significa que
podemos usar aqui e pegar para obter alguns resultados. Aqui temos nossa resposta, mas normalmente queremos
converter nossa resposta para JSON. Nesse caso, podemos
usar esses dados facilmente no cliente. É aqui que ele vai reservar
para cold res.json, que é uma
função assíncrona e transformará nossa
resposta em JSON. E depois disso,
podemos chamá-los novamente. E aqui obteremos nossos dados. Agora, dentro, podemos trabalhar com
esses dados, por exemplo, sucesso
no log do console,
e aqui estão nossos dados. E, como você pode ver, esse código é muito menor e mais fácil ler do que esse código antigo
com solicitação HTTP XML. E, obviamente, aqui
também escrevemos um erro e também
queremos lidar com isso aqui. É por isso que aqui
podemos escrever uma gaiola de pontos. Aqui teremos nossa era. E agora aqui podemos
escrever a era do log do console. E isso será acionado
quando tivermos um erro. Vamos verificar agora se
esse código está funcionando, estou recarregando a página no
navegador e, como você pode ver, estamos obtendo um sucesso. Aqui está nossa resposta. E como você pode ver
dentro da rede, temos nossa solicitação de corredeiras
e o tipo é buscado. E aqui está nossa resposta, o que realmente significa que esse código está funcionando exatamente da mesma forma, mas é baseado em promessas, o que significa que podemos
facilmente misturar esse código era qualquer outro assíncrono baseadas em instalações. Por exemplo, se você tiver duas ou três fontes,
por exemplo, se você tiver várias
fontes de dados, poderá
combiná-las facilmente porque elas são todas
baseadas no local.
31. Callback Básico: Você pode ter outra pergunta sobre um
JavaScript síncrono. Por exemplo, escreva uma função
assíncrona, que executa Kohlberg depois terminar sua tarefa
assíncrona. E, na verdade, se você não
sabe em JavaScript, estamos usando retornos de chamada
bastante. E anteriormente
antes das promessas e o peso único que usamos
callback para buscar dados também, mesmo agora Kohlberg é uma maneira
bastante popular de trabalhar
dentro do aplicativo. Então, na verdade, antes de tudo, queríamos escrever alguma função que fará algum código
assíncrono. E a
maneira mais fácil de simular em
código assíncrono javascript é usando setTimeout
porque, por exemplo, onde h e alguns dados do
back-end e isso leva tempo. É por isso que eu quero
criar aqui uma função sinc e eles
apenas chamam uma pia, um fã. E aqui queremos obter nosso
retorno de chamada como parâmetro. E, na verdade, callback
é apenas uma função. Mas a
parte mais importante é que a função assíncrona
não sabe o que é Kohlberg. Pode ser o que quer que seja porque
estamos chamando de fora. Agora, dentro, estamos fazendo
algum código assíncrono. Por exemplo,
buscamos dados da API
ou, no nosso caso, aqui estamos usando setTimeout para simular isso. E definimos o tempo limite, por exemplo, por dois segundos. E então, no final, reserve
um para chamar nosso retorno de chamada. É aqui que simplesmente
chamamos essa função ou às vezes, com os dados
como resultado de nossa API. Talvez aqui possamos
escrever Kohlberg feito, e esta é nossa
função assíncrona está pronta. Agora, como estamos usando
essa função, acabamos de tentar uma função sinc e estamos fornecendo
nosso retorno de chamada dentro. Esta é uma função que será executada no interior no final. É por isso que aqui podemos
dizer que estamos recebendo uma função com mensagem de
argumento. Isto é o que estamos
recebendo de volta da nossa função
assíncrona aqui podemos escrever o log do console Kohlberg
e aqui mensagem de vírgula. Vamos verificar se está funcionando. Estou recarregando a página
e, como você pode ver, não
temos nada agora depois dois segundos, estamos
fazendo Kohlberg. É exatamente assim que
os retornos de chamada estão funcionando. Isso é exatamente o que
implementamos. Temos uma
função assíncrona que executa Kohlberg depois de
terminar sua tarefa assíncrona. E a segunda pergunta
que você pode obter aqui, qual problema callback resolve? E, na verdade, existem
dois pontos importantes. Primeiro de tudo, Kohlberg nos
permite fazer alguns funcionários síncronos
e aguardar o resultado. Porque, na verdade, aqui estamos apenas fornecendo uma função de fora e ela será chamada
mais tarde e não imediatamente. Este é o principal objetivo
do Kohlberg. E em segundo lugar, é
importante lembrar que dentro de nossa função
assíncrona, não
sabemos o que Kohlberg, é por
isso que podemos
construir coisas compartilháveis. Este Colbert pode fazer qualquer coisa
em casos diferentes. Por exemplo, em uma página, reserve para buscar dados e
talvez renderizar esses dados. E em outra página, queríamos buscar esses
dados e calcular o número total de postagens
ou algo assim. O que realmente significa que Kohlberg
é uma função genérica. É por isso que podemos compartilhar facilmente nossa
função assíncrona sem implementação
específica
do nosso callback.
32. Array Async Paralelo: Aqui está mais um exemplo
de uma pergunta síncrona, mas um pouco mais avançada, como você pode ver aqui,
temos uma pergunta. Execute a lista fornecida de funções
assíncronas em paralelo e retorne os resultados como uma matriz para o retorno de chamada. Como você pode ver aqui,
já temos três funções, e isso é dado com a tarefa. Então, cada função tem
aqui dentro do retorno de chamada, que retorna 123 parte mais
importante aqui, que a primeira função
é de três segundos, depois dois segundos, depois 1 segundo. Então devemos escrever a
função como coletor paralelo. Estamos dentro de onde lançamos uma matriz de funções
assíncronas, o que significa que cada
função é um retorno de chamada. E então o segundo
parâmetro que temos aqui, ONE Kohlberg para
um coletor paralelo. Aqui estamos obtendo nosso resultado e estamos fazendo login no console aqui. E devemos obter, neste caso 123 porque ele deve imprimir
resultados ou fissuras, função
síncrona em ordem, o que realmente significa que estamos
executando três funções em paralelo e estamos esperando
para que todos eles sejam concluídos. E depois disso, temos a ordem
correta dos resultados, o que realmente significa que
estamos obtendo resultados de
cada função. E, na verdade, estamos usando moda
paralela, por exemplo, bastante todos os dias porque
queremos, por exemplo, buscar três
solicitações diferentes simultaneamente e seguida, obter todos os dados em um só
lugar e mesclá-los de alguma forma. Isso é y. Vamos construir essa função agora, mas não é fácil e
realmente precisamos pensar no
que estamos fazendo aqui. Queremos implementar uma função paralela do
coletor. E, na verdade, aqui estamos
recebendo antes de tudo, uma série de nossas funções
assíncronas. Então podemos escrever
aqui eu sinc ufuncs. E o segundo parâmetro
é nosso retorno de chamada. E o mais importante é um
Kohlberg para um coletor paralelo, não para a função
func assíncrona específica. Primeiro de tudo, aqui
eu quero criar uma matriz onde
vamos colocar nossos resultados. Aqui. Posso tentar resultar na matriz. Aqui queremos
escrever uma nova matriz e dentro de um comprimento de ponto de
funções sinc. Nesse caso, estamos preparados
na matriz vazia com
três elementos. E, obviamente, são
três apenas para o nosso caso. E pode ser qualquer comprimento de
nossas funções assíncronas. Depois disso, eu queria
criar um contador de resultados
e, por padrão, ele será 0 até o comprimento de nossa matriz. Por que precisamos disso? Porque, na verdade, cada função
assíncrona
pode ser encerrada em tempo aleatório e
devemos esperar que todas essas
funções sejam concluídas. Isso significa que devemos
contar quantas funções
já estão concluídas até
estarmos ricos em comprimento. Isso é y aqui vamos
criar nosso conteúdo de resultados. E, por padrão, será 0. E agora queremos
percorrer nossas funções
assíncronas. Então aqui eu sincronizo o ponto de
fontes para cada um, e eles realmente
usam for-loop aqui. E estamos recebendo acesso para cada função
assíncrona. E também precisaremos aqui de
um índice porque precisamos armazenar os resultados também
na mesma ordem correta. Agora, dentro de cada um, devemos chamar nossa função
assíncrona. Mais importante ainda, não sabemos o que essa
função está fazendo. Mas sabemos que essa
função recebe um Kohlberg. É por isso que aqui podemos
escrever nosso retorno de chamada. Estamos chamando uma função sinc
sem argumentos. E por dentro
recebemos nosso cólon. Se este livro de códigos for acionado, isso significa que estamos prontos com nossa função
assíncrona. E agora queremos escrever o
resultado dentro da nossa matriz. É aqui que, na verdade, estamos recebendo nosso valor de retorno de chamada. E como você pode ver aqui
dentro de cada retorno de chamada, estamos recebendo um valor. E esse é exatamente
o valor que
recebemos dentro do nosso callback aqui. Agora, queremos armazenar esse valor dentro da
nossa matriz de resultados. Aqui podemos escrever uma matriz de
resultados e aqui estará nosso índice igual a valor. Só para lembrá-lo,
temos nosso índice aqui. É por isso que saberemos
que o armazenamos corretamente. Por exemplo, esta é
a terceira função e será acionada primeiro, depois a escreveremos
no túmulo de índice. Depois disso, devemos
aumentar nosso
contador de resultados para saber que uma
das funções está concluída. E por último, mas não menos importante, queremos verificar aqui se essa
função foi a última. Aqui, podemos verificar se nosso
contador de resultados maior ou
igual a uma pia ufuncs, então queremos chamar nosso
Kohlberg para uma pia paralela. Então, aqui podemos simplesmente
escrever callback e dentro, estamos fornecendo
nossa matriz de resultados. Mais uma vez, o que estamos
fazendo aqui, em primeiro lugar, estamos preparados para uma
matriz vazia e nosso contador. Estamos percorrendo nossas assíncronas
e estamos chamando
todas as funções aqui fornecidas em todas as
funções, um retorno de chamada. Quando estamos obtendo sucesso, primeiro
armazenamos nosso resultado
dentro do índice de resultados e, em seguida,
aumentamos nosso contador. Nesse caso, sabemos que essa lógica
nos devolverá Kohlberg para um coletor paralelo quando estivermos prontos e quando todas as nossas funções
estiverem concluídas. Aqui estamos chamando nossa matriz de resultados de largura do
livro de códigos. Agora, na verdade, devemos mover essa função antes de
chamar um coletor paralelo, porque devemos
escrevê-la com const. E vamos verificar se está funcionando. Estou recarregando a página
e estamos recebendo uma atribuição para variável
constante. Vamos verificar isso.
Sim, como você pode ver, um contador de resultados pode ser aumentado
porque é const. Aqui. Podemos escrever LED e
, em seguida, ele deve funcionar. Vamos verificar isso. Estou recarregando a página. Não temos nenhum erro. Agora passam três segundos e estamos recebendo nossa
matriz com 123, o que realmente significa que
aqui está um coletor paralelo que
espera que cada função
assíncrona seja concluída e depois regenerar como um Kohlberg nosso resultado
aqui e agora podemos usar aqui nossa matriz
na ordem correta. E isso é completamente
bom se você não
conseguir construir essa função rapidamente. Mais importante ainda, se você estiver
fazendo isso em uma entrevista, você deve sempre dizer nossa nuvem, o que você está fazendo e
como está pensando. Porque normalmente uma entrevista não
é tão importante. Se você resolver essa
tarefa completamente ou não, você deve mostrar seu
modo de pensar e como deseja resolver
essa tarefa específica.
33. Converter Callback para Promise: Você também pode obter outra pergunta sobre
um JavaScript síncrono. Aqui devemos criar a função de
premissa para poder usar
a função callback
via abordagem Promise. E, na verdade, só
para você saber anteriormente que tínhamos muitas funções de retorno de chamada porque não tínhamos premissas. Depois de algum
tempo em JavaScript, migramos totalmente duas premissas, e agora elas são suportadas
em JavaScript por padrão, o que significa que não estamos usando retornos de chamada
muito mais. E como você pode ver aqui, temos uma função de
retorno de chamada padrão onde dentro estamos fazendo alguma suposição é fria e nós
dominamos escrever essa função
para prometer abordagem, que na verdade
significa, por exemplo, estamos usando alguma biblioteca mais antiga que é baseada nos retornos de chamada, mas todo o código do nosso
projeto está usando premissas. É por isso que faz
muito sentido fazer um rapper e usar essa função de retorno de chamada
através da premissa. Para fazer isso,
devemos criar uma fina chamada função
Promises phi, que realmente significa
a mesma função mas envolvida e promessa. Podemos nomeá-lo de mim, Sci-Fi, e esse é o nome típico
e liberou uma função sinc, assim como no topo. Aqui não temos nenhum argumento aqui
que queremos
chamar nossa função assíncrona. E quando temos um livro de códigos
, queremos chamar nosso
callback da premissa. É aqui que estamos o retorno
principal e você promete. Aqui dentro da promessa
que resolvemos e rejeitamos, mas usaremos aqui na
resolução de Lou porque não
temos nenhum erro aqui. Agora, dentro de nossa premissa, podemos simplesmente chamar a função assíncrona regular
e colocar um retorno de chamada dentro. E, na verdade, esse retorno de chamada nos
dará alguns dados de volta. É por isso que estou
escrevendo dados e nem
sabemos de quais
dados estamos falando. Agora, dentro, queremos apenas
chamar a resolução e passar dados de insight de nossa função
assíncrona. Nesse caso, quando a função
síncrona estiver concluída, nosso Kohlberg
estará acontecendo. Aqui. Dentro de Kohlberg,
estamos recebendo dados de uma
função síncrona e trabalhamos dois pontos na
resolução de Kohlberg para essa premissa
que criamos. E o mais importante que essa função
retornará uma promessa. É por isso que podemos usá-lo agora, como essa premissa de
alta função assíncrona, nós apenas chamamos de
retornos finais como premissa. É por isso que podemos escrever aqui. Em seguida, estamos obtendo
alguns resultados e podemos fazer, por exemplo, o resultado
do log do console. Estamos usando essa função como
uma promessa e envolvemos nossa função sinc na premissa se phi, Vamos
verificar isso. Estou recarregando a página
e, como você pode ver, estamos voltando
uma depois de algum tempo. Porque aqui temos um livro de códigos com 3 mil milissegundos, o que realmente significa que
estamos recebendo nossos dados após três segundos e
esse código está funcionando. E agora
em todos os lugares do nosso aplicativo, podemos usar essa
função de retorno de chamada na abordagem promessa.
34. Mapa de dados em Promessas: Você pode obter
outra tarefa típica de mapear dados com premissas. Como você pode ver aqui,
temos esse recurso. Você tem duas funções
que retornam premissas, metadados de usuários
e status de usuários para obter uma matriz de usuários com nome
AED e está ativo. Como você pode ver aqui, temos um usuário de array
com D e nome, e temos um estágio de usuário
secundário com o dN dt é propriedades
ativas. E, na verdade, esse AD é exatamente
o mesmo que um D aqui. E esses são exatamente os
dados que precisamos mapear. Portanto, precisamos obter um array
com um nome DNS e está ativo. Mas o ponto principal é que esses dados não estão
disponíveis rapidamente. Eles só estão disponíveis aqui dentro de obter usuários e
obter status de usuários. Temos duas funções
que são promessas
e, normalmente, você buscará
esses dados da API. É assim que os usuários retornarão promessas falsas. É por isso que estamos
resolvendo uma matriz de usuários aqui e aqui estão os
mesmos com os status do usuário, o que realmente significa que
temos duas premissas. Devemos
resolvê-los e combinar. Existem diferentes
maneiras de resolver essa tarefa. A
abordagem mais iniciante aqui é
buscar a primeira premissa
e depois a próxima. Vamos tentar isso. Agora. Podemos escrever aqui para obter usuários, e isso nos
devolve uma premissa. É aqui que
podemos escrever e estamos recebendo
nossos usuários de volta. Agora, depois disso, queremos
buscar nossos status GetUser. Aqui estamos chamando status
GetUser, e também os usamos aqui, e estamos recebendo de volta
nossos status de usuário. E agora, dentro dessa
função, temos acesso aos
status e aos usuários dos usuários. Porque aqui vamos chegar somente depois de resolver
os dois, mas não em paralelo,
mas um por um. O que podemos fazer aqui,
podemos mapear usuários, que possamos criar, por
exemplo, usuários mapeados. E precisamos percorrer
nossos usuários com mapa, temos acesso a
todos os usuários. E agora precisamos descobrir que essa é uma propriedade
ativa porque isso é exatamente o que queremos
colocar em nossa matriz. É por isso que aqui podemos
escrever que o const está ativo, e aqui queremos
encontrar status de usuário, nosso status, é aqui
que estamos certos e encontrar o status dos usuários. E aqui precisamos
verificar o status do usuário. Dot id é igual ao nosso ID de ponto do usuário. Mas isso retornará
mais rápido ao status e devemos experimentá-lo
no final estiver ativo. Nesse caso, entraremos
na propriedade específica. Agora, depois de termos nosso executivo, queremos colocá-lo dentro de
cada objeto, mas não vamos usar aqui push porque você se lembra de empurrar mal. É por isso que o Google
mais simples retorna aqui e você se opõe e estamos
espalhados aqui. Todos os campos do nosso usuário. O vidro é propriedade ativa. Nesse caso, somos Putin é uma propriedade
ativa em
cada usuário. E depois disso, podemos apenas registrar
nossos usuários mapeados aqui e eles estão disponíveis para nós dentro do nosso aplicativo. Vamos verificar isso. Estou recarregando a página e
estamos recebendo o usuário atendido. E como você pode ver,
isso como uma matriz com três objetos, ID, nome
e está ativo, o que significa que,
na verdade resolvemos essa tarefa com sucesso. Mas há muitos
problemas nesse código. Primeiro de tudo, temos duas premissas diferentes e
elas não dependem umas das outras, o
que significa que não
faz sentido esperar pela primeira premissa e Don fará
uma segunda premissa. Na verdade, devemos
fazê-los em paralelo. Em outros casos, é muito lento. Então, quero escrever aqui
que esta é a solução um e eles querem
comentar nossa primeira solução. Agora vamos tentar a
segunda solução. Para a segunda solução, podemos usar premissa se você
não souber qual é a premissa dele. Então, isso é exatamente
o que está nos ajudando a fazer várias
premissas em paralelo. Podemos escrever aqui promessa ponto o, e devemos passar uma variedade
de instalações para dentro. Aqui temos uma matriz
e podemos escrever aqui, obter usuários e depois vírgula,
obter status de usuários. Nesse caso, estamos lançando dentro da premissa toda matriz
com nossas duas premissas. E depois da premissa
tudo no final, podemos tentar, então aqui obteremos nosso
resultado como uma matriz, mas não é muito confortável
trabalhar com array aqui. É por isso que podemos destruir
diretamente aqui nossa matriz para
nossas duas propriedades. Aqui estamos recebendo nossos usuários e aqui estamos recebendo
nossos status de usuário. E depois disso,
podemos fazer nossa lógica, o que fizemos aqui
com o usuário mapeado. É por isso que vou cortar esse
código foi mapeado usuários e apenas colocá-lo aqui porque ele permanecerá
exatamente o mesmo. Aqui temos acesso aos nossos usuários e ao status de nossos usuários SES, e estamos mapeando eles e o
console registrando-o aqui. Vamos verificar isso. Estou recarregando a página e estamos recebendo exatamente a
mesma resposta de volta. O ponto principal é aqui
que usamos promessa de todos. Isso é muito melhor
porque neste caso estamos fazendo essas duas
solicitações em paralelo. Além disso, como você pode ver,
a solução para, mas não tem esse mau
desagradável com então e então, e aqui temos apenas um
único, então isso é obviamente melhor porque queremos
evitar esse código profundamente aninhado, mas podemos tornar esse
código ainda melhor. Como você pode ver,
temos esse mapa para os usuários e, na verdade, podemos mover esse código para fora do nosso Então apenas para
torná-lo mais legível. Aqui podemos criar função
adicional antes, por exemplo, mapear usuários. E sabemos que
estamos recebendo aqui nossos usuários e status de usuário. E, na verdade, esta é uma função
completamente pura que apenas mapeará nossos usuários. Então eu posso cortar esse código
e colocá-lo aqui dentro. Aqui, não
precisamos da nossa constante. Podemos retornar diretamente nosso mapa. E, na verdade, esse código será exatamente o mesmo que o
usamos anteriormente. E agora o que podemos fazer aqui, podemos simplesmente criar usuários mapeados. E aqui estamos assinando usuários de
mapas e estamos passando por nossos status de usuários
e usuários. Como você pode ver agora, esse
código é ainda melhor para ler porque aqui nós simplesmente
temos premissa tudo. Em seguida, estamos mapeando
nossos usuários com função
adicional e
trabalhamos para que Logan eles. Vamos verificar isso como
você pode ver aqui, exatamente a mesma resposta. E, na verdade, podemos melhorar essa função ainda
um pouco mais, como você pode ver,
onde estou mapeando usuários de dentro para fora com eles. Mas, na verdade, podemos
encadear nossa dança, o que realmente significa que
aqui talvez quereremos diretamente
nosso mapa aos usuários. Então, nosso primeiro, depois vamos nos encontrar com os usuários
e devolvê-los aqui. E depois deste fim de semana, certo Um a mais do que, e aqui teremos
nossos usuários mapeados, e aqui
queremos trabalhar com eles. Então aqui eu vou
registrar nossos usuários mapeados no console. Nesse caso, dividimos dois mapeamentos de dança diferentes
dos usuários e trabalhamos
com sucesso. E, na verdade, aqui com o
console mais simples registra nossos usuários, o que significa que esse é o nosso sucesso. E podemos até
remover o retorno
daqui e escrever isso
como uma única linha, neste caso,
será ainda mais legível. Eu diria que esse código
é o mais seco possível. É por isso que, se você quiser mostrar que é um desenvolvedor
avançado, você deve escrever seu
código e tentar melhorá-lo quantas
vezes possível.
35. Reescrever dados de mapeamento no Async Await: A próxima pergunta
assíncrona em JavaScript terá certeza de que um coletor de ajuda aqui realmente dominará o exercício
anterior, como mapear usuários com duas premissas em um coletor,
uma função de peso, como você pode ver aqui, temos nossos usuários status de usuários
e duas funções, obter usuários e obter premissas do usuário. E, na verdade, eu
duvido do nosso
código anterior para que possamos copiar partes dele. A primeira coisa que
devemos fazer aqui é criar uma função adicional. Por que isso? Porque você não permite que
ele escreva de forma mais simples diretamente na parte raiz do arquivo JavaScript
****.
Este é y aqui. Primeiro de tudo, devemos
criar algo como obter usuários mapeados talvez porque queremos torná-lo
uma função assíncrona. É aqui que estamos
usando nossa palavra-chave assíncrona. Aqui estamos criando
nossa função. E essa palavra-chave presumida nos
permite usar
um peso dentro. Mas queremos fazer
agora, queremos obter status de usuários finais de
nossos usuários. Aqui eu posso simplesmente escrever usuários. Não se esqueça desse peso aqui. Estamos apenas tentando obter usuários. E se você esquecer aqui um peso, então aqui não
teremos nossos usuários, mas você terá aqui uma premissa. E isso não é o que queremos. Queremos resolver nossa premissa. A próxima linha aqui
será o status do usuário é, e aqui
queremos obter o uso dos status. E, obviamente, como você pode ver, esse código é
muito, muito mais fácil de ler
porque não
temos nenhum, então não
temos premissa todas. Parece que é um código síncrono
simples porque as linhas são
executadas uma a uma. E depois disso, na verdade,
queremos copiar, colar nosso mapeamento e
colocá-lo aqui porque não o
alteraremos e
não faz sentido criar função
adicional. Porque dentro dessa função
temos apenas duas linhas. É por isso que aqui podemos
escrever usuários mapeados const. Aqui estamos atribuindo o mapa de pontos dos
usuários e estamos fazendo exatamente as mesmas coisas como fizemos no vídeo anterior. Após a terceira linha, já
temos nossos dados de mapa. Aqui podemos escrever o mapa de
log do console para os usuários. E aqui podemos verificar
nossos usuários mapeados, mas também devemos chamar em algum lugar nossa função get mapped users. Não precisamos escrever
aqui um peso ou algo assim porque simplesmente chamamos uma função
assíncrona. Agora, vou recarregar esta página. Como você pode ver, estamos
recebendo usuários mapeados. E esta é a nossa resposta, o que realmente significa que esse
código está funcionando corretamente. E esse código parece
super legível porque
usamos aqui um único peso
por isso não é suficiente, mas sempre queremos envolver
nosso código de bytes um try-catch. Por que isso? Porque se aqui
recebermos algum erro , nunca o veremos. Teremos um erro
e apanharemos a premissa. É por isso que aqui queremos,
no início, escrever tente aqui no final após nosso cupom de log do console para
fechá-lo e secá-lo aqui, gaiola e aqui estamos recebendo
nosso erro dentro do nosso dinheiro. Queremos escrever algo
como log do console Azure. E aqui está um erro
que podemos obter. Nesse caso, estamos no lado
seguro e saberemos se algum código assíncrono não funciona aqui ou estamos
recebendo alguns erros, lançaremos um
erro aqui dentro do catch. Vamos verificar isso. Nosso
código ainda está funcionando e usamos
com sucesso
o peso singular à direita são
promessas com ele.
36. Você Deve Usar Vocabulário Correto: Mais uma coisa importante
a lembrar é bastante complicada e as pessoas não estão
falando muito sobre isso. E estou falando aqui sobre
seu vocabulário de programação. O que quero dizer com isso, na verdade, há muitas palavras que você pode usar quando você está
falando sobre programação. Então, a pessoa o entende
melhor ou pelo menos corretamente, e você não deve misturá-los. Há um começo. Pode ser muito difícil para você porque você não conhece todos esses termos ou não tem certeza do que
quer dizer, mas precisa ter isso em mente e tentar melhorar com o tempo. Por exemplo, você deve realmente entender
o que está dizendo. Por exemplo,
mostrei uma função ou criei um método
dentro da minha classe. Esta é uma instância
da classe. Você deve usar todos esses termos corretamente se vir uma função, mas estiver chamando esse método, ou talvez
esteja chamando de outra coisa. Isso não está correto. E então você receberá muitas perguntas
adicionais ou será visto como um desenvolvedor ruim. Você, claro, não quer isso. É por isso que você
precisa pensar um
pouco quais palavras você está usando e tentar usá-las
corretamente quando estiver descrevendo algumas coisas de
programação.
37. Gerente de Solicitação de Design: Aqui está outra tarefa
síncrona, que é um pouco complexa. Então você precisa de algum
tempo para resolvê-lo. E você não pode
resolvê-lo como em três
ou cinco minutos. Como você pode ver aqui,
devemos projetar um utilitário que pegue um URL e
o valor para tentativas, que tentará
fazer uma solicitação de busca. Se tivermos uma falha, essa função tentará
novamente buscar alguns dados com atraso crescente por número de vezes que o
usuário solicitou. que realmente significa que devemos criar uma função
que buscará um URL específico que
forneceremos e também ter
alguma quantidade de tentativas. E queremos atualizar
esses dados de novo e de novo por várias vezes, se
não recebemos uma mensagem de sucesso. E, na verdade, esse é um problema
muito comum porque às vezes nossa API não
está funcionando ou os dados não estão lá e queremos
tentar novamente. Vamos tentar criar essa função e
eles querem nomeá-la, por
exemplo, gerenciador de solicitações. E, na verdade, aqui
teremos nossa URL porque queremos buscar algo
de fora e
sempre algo novo. E aqui temos algumas
opções para nossa URL. E o último parâmetro
será tentativas. E, por padrão, pode
ser três, por exemplo. Então, estamos tentando atualizar
alguns funcionários três vezes. É assim que usaremos isso. Portanto, temos aqui o gerenciador de solicitações e receberam algum URL. Eles usarão aqui algum
URL que não existe. Nesse caso,
vamos atualizá-lo. Temos foo.com e essa função deve
retornar premissa mais rápida, é aqui que
temos aqui, então, aqui temos sucesso e erro. É aqui que estamos aguardando alguma resposta e podemos
apenas tentar o log do console, por exemplo, resposta para
verificar se está funcionando. É assim que
normalmente usaremos essa função. Queremos buscar algum URL
e simplesmente os temos. E, obviamente, aqui
podemos passar algumas opções. Por exemplo,
post de método e alguém, ou quantidade de tentativas se
quiséssemos alterá-lo, se não passarmos nada, então aqui não
temos nenhuma opção e nossa tentativa é três. Agora a questão é o que
queremos voltar aqui? O ponto mais importante para entender como vamos construí-lo. Vamos executar essa função
recursivamente porque essa é uma maneira mais fácil de chamar essa função várias vezes, é que chamaremos o
gerenciador de solicitações de cage novamente aqui. E nós simplesmente
forneceremos aqui dentro das opções de
URL e, em seguida,
tentaremos , diminuiremos, o
que significa que, no início,
temos três tentativas. Agora, na próxima vez,
serão dois, depois um, e então lançaremos
um erro porque
não temos nenhuma tentativa
restante. Então, antes de tudo, devemos retornar uma promessa porque é isso
que estamos esperando lá fora. E é aqui que estamos
retornando, você
promete, e aqui temos nossa
determinação e rejeição. Agora, dentro dessa função, queremos tentar
buscar nossos dados, e simplesmente usaremos
aqui a função fetch porque ela está disponível
para nós nativamente. Dentro, estamos passando
antes de tudo nosso URL e, em segundo lugar, opções. E agora aqui temos o nosso, então nós pegamos e,
na verdade , então podemos simplesmente
chamar nossa determinação. Isso passará os
dados de sucesso diretamente dentro do resolve, porque Resolve é uma função. Aqui. Também queremos uma captura. Aqui dentro da gaiola. Queremos fazer nossa matriz. Então, aqui estamos recebendo
nosso erro e queremos ligar para nosso gerente de
solicitações novamente. Mas aqui devemos saber quando
vou tentar é o último. Então aqui eu quero criar uma
propriedade é a última tentativa. E aqui podemos verificar
se nossa tentativa é igual a uma. Nesse caso,
saberemos, ok, esta é a última vez em que
podemos ligar para o nosso gerenciamento de solicitações. E depois disso, estamos verificando
se esta é uma última tentativa, então queremos
retornar a seta de rejeição, o que significa que
estamos apenas rejeitando nossa premissa porque não podemos continuar mais após esse EQ, mas não tem 0s última tentativa, então queremos fazer
setTimeout porque, na verdade queremos chamar essa
função depois de algum tempo. Não faz sentido
chamá-lo diretamente depois, porque talvez a API ainda esteja inativa. Aqui. Vou escrever setTimeout, por exemplo, com três segundos. E, obviamente, também podemos
implementar um argumento para passar o intervalo
para chamar dados. Dentro do SetTimeout,
queremos solicitar nossos dados novamente. Então, aqui vamos ligar para
o gerenciador de solicitações e estamos passando aqui opções de
URL agora. E a última
será tentativas menos uma, que realmente significa que não
começamos tentativas em nenhum lugar. Simplesmente fornecemos recursivamente na quantidade
reduzida de tentativas do gerenciador de solicitações . Isso é y aqui na
primeira vez que são três, então estamos vindo
aqui em SetTimeout. É para um. E então verificamos que essa
tentativa é igual a uma e estamos aqui dentro deste IV
e estamos rejeitando. Então, vamos verificar se está funcionando. Estou recarregando o navegador. E como você pode ver,
estamos recebendo um get e uma seta porque esse
URL não existe e estamos recebendo tentativas não
está definido na linha 13 dentro do nosso tempo limite definido. E, na verdade, o nome
do argumento aqui não
está correto. Não é tentativa, mas tentativas porque
temos várias delas. E também aqui devem ser tentativas iguais a uma
e não tentativa. Vamos recarregá-lo novamente. Como você pode ver, estamos
recebendo cabeçalho. Depois de três
segundos, estamos recebendo essa solicitação novamente porque tentamos novamente e depois novamente. Aqui, falhamos
um erro não detectado ao buscar, o que realmente significa que aqui
devemos escrever não apenas eles, mas também cache, porque
aqui teremos um erro se não conseguirmos buscar dados. E aqui podemos tentar
o erro de log do console. E aqui queremos
ver nosso erro. Mas, como você pode ver, ainda recebemos um erro sem aspas tipo
par de falha ao terminar, o que significa que nosso código não
está 100% correto. E, na verdade, o problema é aqui que esta é a nossa primeira chamada de gerente de solicitações e estamos
lidando com isso lá fora e pegamos. Mas aqui, em vez disso, setTimeout
temos o gerenciador de solicitações, mas não temos então e percebo que é por isso que
ele está quebrando. Temos um erro
em nosso terceiro carvão, e isso está aqui, mas não
especificamos o que
acontecerá com ele. Isto é o que aqui,
boom, deve escrever. Então aqui queremos
resolvê-lo com dados e também pegar e em dinheiro que simplesmente
queremos rejeitar. Nesse caso, ele
funcionará corretamente. Vamos experimentar isso. Estou recarregando a página. Estamos passando por
erros e agora nosso erro está borbulhado para fora e vemos que o
TypeError falhou ao buscar. Nesse caso, ele está
funcionando corretamente. Você não deve esquecer de borbulhar nosso gerente de solicitações interno
lá fora com então e pegar. Então, posso dizer que essa função
é bastante complicada. Então, se você receber algo
assim na entrevista, você realmente deve tomar seu
tempo para resolvê-lo corretamente. Você não pode realmente projetar essa função em
questão de minutos.
38. Implementar Comparação Rasa: Você também pode obter uma
pergunta sobre igualdade ou comparação
dentro do JavaScript. E como você pode ver aqui,
temos uma pergunta, função de
comparação superficial dos
designers. Para isso, você deve saber a diferença da comparação do
JavaScript, que é comparação nativa, superficial e
comparação profunda. Dentro do JavaScript, podemos
simplesmente escrever um igual a dois. Estamos ficando falsos.
Um é igual a um é verdadeiro. Isso está funcionando porque
estamos comparando primitivas. Mas se
compararmos aqui um igual um e aqui está
um objeto igual a um, estamos
ficando falso. Enquanto isso porque não podemos comparar objetos como este em JavaScript porque
eles estão fazendo referência objetos
diferentes
dentro da memória. E você tem exatamente o
mesmo problema com o array. matriz vazia não é
igual à matriz vazia. Sim, podemos entender por que
ele está funcionando assim, mas não é
confortável porque normalmente os desenvolvedores
querem comparar matrizes e objetos por valores e não como referência ao
objeto na memória. É por isso que temos funções de comparação
superficial e comparação profunda. Portanto, a ideia é que comparação
superficial seja
mais rápida do que uma comparação profunda, mas resolverá problemas com comparação de objetos ou matrizes. Ele consertará apenas matrizes não
aninhadas são objetos, o que realmente significa que, se quisermos
com comparação superficial, compararmos a, e aqui temos um objeto com B1 e aqui B1, ainda
obteremos uma resposta errada mesmo com função de
comparação superficial. Isso é completamente normal
porque, neste caso, queremos comparar
cada valor aninhado
e, em seguida, devemos usar uma comparação
profunda. E uma comparação profunda é extremamente lenta porque estamos verificando
cada valor, mas com certeza eu
lhe darei uma resposta verdadeira. Neste vídeo, devemos escrever uma função de comparação superficial, o que significa que queremos corrigir a comparação de
matrizes e objetos, mas não devemos comparar matrizes e objetos
aninhados. É assim que a
comparação superficial está funcionando. E, na verdade, aqui eu tenho um tipo
de função
adicional que nos ajudará tremendamente na construção de comparação
superficial. E, como você pode ver no navegador, podemos simplesmente usar typeof em
diferentes tipos de dados. Por exemplo, para número, estamos recebendo um número
tenso para palavra de
string versus
obter uma string. E aqui podemos escrever um objeto e, em seguida,
estamos recebendo um objeto, o que realmente significa que
é muito bom
obter o tipo de nossa
variável como uma string. Para nós, a parte mais
interessante é esse protótipo de objeto
para transmitir entrada de chamada. E como você pode ver
na entrada onde, por exemplo, um e estamos
recebendo o número do objeto. E, na verdade, essa expressão
regular aqui simplesmente moverá objeto e obteremos
essa parte com número. É assim que essa
função está funcionando. Aqui eu quero criar nossa função de comparação
superficial. Devemos fornecer
aqui dois argumentos. Portanto, temos origem e destino, e essas são duas coisas
que queríamos comparar, por exemplo, duas variáveis. Primeiro de tudo, queremos comparar um tipo de dados porque se
tivermos um tipo de dados diferente
, não devemos fazer nada e isso significa que
eles não são iguais. É por isso que podemos escrever aqui. Se typeof source
não for igual a typeof, então aqui podemos
simplesmente retornar false. É por isso que é
super desempenho. Não comparamos nada. Simplesmente obtemos um tipo
compará-los e estamos fora depois que esse boom deve escrever
lógica para nossas primitivas. E aqui podemos simplesmente usar uma comparação
JavaScript nativa
simples. Estou escrevendo aqui se a fonte
for igual a três folhas de estilo iguais, então aqui estamos apenas retornando, o que realmente significa
essa única linha. Vamos comparar ou primitivos. E agora só precisamos construir casos para nossos
objetos e matrizes. Primeiro de tudo, vamos
cobrir nossos arrays. Aqui queremos verificar o tipo
fora da nossa fonte é igual a array. Então queremos
aplicar essa lógica. E você pode perguntar, ok, mas por que estamos apenas verificando a
fonte e não um detergente? Porque, na verdade,
aqui no topo, já
sabemos que tanto a origem quanto o destino
do mesmo tipo. Em outros casos,
já estamos fora da função. Aqui. Sabemos que a origem
e o destino são ambos arrays e agora
queremos compará-los, mas na verdade podemos fazer algumas melhorias de
desempenho. Aqui podemos comparar apenas
um comprimento de dois arrays. E se eles são diferentes
do que não devemos comparar nada porque
eles não são iguais. Então aqui eu posso escrever IV, fonte, terra não é igual ao
nosso comprimento alvo. Então estamos aqui,
simplesmente retornamos false. Agora queremos comparar
esses dois arrays, e a maneira mais fácil de
fazer isso é usar a média. Estamos verificando
cada elemento dentro de uma matriz e comparamos. Aqui eu quero escrever fonte de
retorno a cada, então estamos verificando
cada elemento da fonte. E aqui temos acesso
ao elemento e ao índice. E o que podemos fazer aqui é nosso elemento é igual ao índice alvo. Nesse caso, estamos comparando
cada elemento da nossa fonte com cada
elemento do destino. Mas, como você pode ver aqui, estamos usando a comparação
JavaScript nativa, que significa que ela
funcionará para primitivas, mas não funcionará, por exemplo, para objetos ou matrizes,
como ele se parece? Vamos recarregar a página e
aqui nossa função, comparação
superficial. E podemos fornecer agora a
matriz com primitivas. Então aqui temos 11 e
estamos ficando verdadeiros, o que realmente significa que
nossa função está funcionando corretamente porque o JavaScript
nativo que você não pode comparar 11, será falso e nossa
função está funcionando corretamente. Agora devemos tentar o
código semelhante para o nosso objeto. É por isso que aqui podemos escrever se typeof source for igual a objeto, então queremos aplicar nossa lógica. E, novamente, quero melhorar o
desempenho. Este é y aqui. Em primeiro lugar, podemos
verificar, por exemplo, chaves de
objeto e
comparar
o comprimento das chaves se o comprimento for diferente desses objetos
são certamente diferentes. Então, aqui podemos escrever teclas de ponto de
objeto. Aqui temos fonte e
estamos comparando o comprimento. Portanto, aqui o comprimento não é
igual às nossas teclas de ponto de objeto, e aqui temos nosso comprimento de ponto
alvo. Nesse caso,
podemos simplesmente retornar false e
não devemos fazer nenhuma comparação. E, na verdade, aqui agora
precisaria comparar objetos. Então, para isso,
também usarei todos. Então aqui eu quero retornar
nossas teclas de ponto de objeto, e estou recebendo uma série de cadeias de caracteres de chaves do nosso objeto. E aqui estamos
fornecendo nossa fonte. Depois disso, podemos usar todos e aqui como um
elemento único. Estamos recebendo nossa chave. Agora podemos comparar a chave de origem. Então, estamos recebendo
o valor e
comparamos aqui a chave alvo. Nesse caso, estamos comparando cada valor único
do nosso objeto. Mas, como você pode ver com
uma comparação simples do JavaScript, que significa que
funcionará para primitivas, mas não funcionará para elementos aninhados
profundos.
Vamos verificar isso. Vou recarregar a página. Aqui está nossa comparação superficial. Nesse caso, queremos comparar o objeto a e o objeto
que você deseja. E como você pode ver
aqui, eu tenho algum erro de digitação. Aqui não há fonte. Vamos mudar isso. Agora, como você pode ver,
está funcionando e podemos comparar nossos objetos. E, na verdade, agora eu quero
mais uma comparação para datas, e isso é extremamente
fácil de fazer. Aqui. Podemos tentar o tipo de
fonte igual ao estado. Então queremos comparar apenas dois números porque,
na verdade, podemos comparar cada data dois milissegundos e comparar números é
extremamente eficiente. É por isso que aqui podemos escrever o ponto fonte de
retorno obter tempo. Isso obterá milissegundos
igual ao ponto alvo get time. E neste caso
estamos simplesmente comparando dois números e isso
é totalmente bom. É assim que estamos construindo uma função de comparação
superficial. E, na verdade, é
assim que eu quero ver a comparação por padrão
em JavaScript, mas infelizmente
não a temos. É por isso que devemos criar essa função por conta
própria ou usá-la de alguma biblioteca como Rumba
la dash ou apenas pacote NPM. Se você estiver respondendo a
essas perguntas sobre comparação superficial, você deve dizer que é super desempenho em
comparação com uma comparação profunda, mas não pode comparar elementos
aninhados, o que está totalmente bom. E você só precisa saber para
qual caso você está usando.
39. Implementar uma comparação profunda: Em vídeo anterior, escrevemos a comparação superficial da função. Mas você também pode obter
uma pergunta, ok? Mas como podemos escrever a
função para comparação profunda? Isso é o que
queremos fazer neste vídeo. Na verdade, como você pode ver,
eu não removi nenhum código. Eu tenho aqui um tipo de comparação
superficial e eles querem
copiá-lo e colá-lo completamente e comparar mais tarde com uma comparação
profunda. É por isso que, como você pode ver, eu copiei toda a
função e eles só querem
renomeá-la para comparação profunda. E, na verdade, o código será 90% semelhante porque
antes de tudo, queremos verificar o
tipo de dados e é permanecer o mesmo e
que no final
compararemos data e origem e destino para primitivos
da mesma forma. Então, na verdade, a biomassa
apenas muda a comparação de nossos arrays e objetos e, na verdade,
até mesmo o código interno será quase o mesmo. Então, antes de tudo, para corrida,
estamos verificando a duração. Aqui temos todos, mas aqui devemos remover
nossa comparação de elementos porque é uma comparação
nativa. Mas aqui queremos verificar
recursivamente
cada elemento. É por isso que aqui
podemos simplesmente escrever uma comparação
profunda e estamos jogando dentro do nosso índice alvo de
coma de elemento. Neste caso, o que estamos fazendo, somos dois pontos profundos comparar novamente. E, na verdade, aqui pode
ser que tenhamos um objeto, então estamos chegando recursivamente
e dizemos comparação profunda. E vamos comparar o assunto e estamos
fazendo isso de novo e novo até compararmos todo
o objeto ou toda
a matriz. E não importa quão profundo o assunto seja ou quão
profundo esses arrays, o que realmente significa que
isso não é desempenho. Isso é muito lento, mas lhe dará a resposta correta quando
você estiver trabalhando com dados
aninhados e exatamente o mesmo que devemos fazer agora
com nossos objetos. Aqui podemos deixar nossa
comparação com as chaves. Isso é totalmente bom. Aqui temos nosso Every, mas devemos remover essa comparação e chamar a comparação
profunda. E estamos passando
dentro da nossa
chave de origem e aqui a chave de destino. Nesse caso, estamos comparando dois valores de nosso
alvo e nossa fonte. E também estamos fazendo isso
com uma comparação profunda. E isso é, na verdade,
transformará totalmente nossa
função de comparação superficial em comparação profunda. Vamos verificar isso agora, vou recarregar a página aqui, a comparação superficial A1, A1,
é verdade, mas na verdade
aqui dentro da comparação superficial, se eu lançar um B1, então temos um
objeto aninhado e aqui um B1, ele retornará false, o que significa que a comparação
superficial não
pode funcionar com dados aninhados. Mas aqui estamos chamando nossa comparação profunda e estamos se tornando verdadeiros porque a comparação por imersão é recursiva e ela
vai comparar n in estan corretamente exatamente
o mesmo que temos para uma corrida. Por exemplo, se tivermos
aqui uma matriz de matrizes, digamos que array com um array. E aqui temos array
e array um dentro. Como você pode ver, estamos
passando e
podemos comparar matrizes de qualquer nível.
40. Criar função de memorização: Você também pode obter uma
pergunta sobre memorização. Aqui, como você pode ver
onde a máscara
projeta uma
função de memorização que adiciona dez para fornecer valor e tirá-lo do cache se fosse
tudo calculado. Se você não sabe o termo memorização em
JavaScript significa, isso significa que estamos
armazenando valores em cache para evitar fazer a
mesma operação novamente, que realmente
significa, por exemplo, queremos subtraia dois números. E se fizermos isso anteriormente e já
soubermos a resposta, então devemos devolver o sensor e não
calculá-lo novamente. Obviamente, não faz sentido
fazer com que subtraíssemos ou alguns, mas faz muito
sentido quando
temos alguns
cálculos difíceis. É por isso que aqui devemos construir um exemplo de função de
memoria. E, na verdade,
não é tão difícil. Então aqui eu quero criar
uma função memorizar, adicionar. Em vez disso, esta função.
Não precisamos de nenhum argumento, mas queremos criar
um cache dentro. É por isso que aqui vou
criar uma propriedade em dinheiro. Isso é apenas um objeto. Agora aqui eu quero
retornar uma nova função. E você pode ver que isso é
um fechamento porque na verdade podemos armazenar com algumas variáveis quando
temos um fechamento. É por isso que aqui retornarei
a função com valor. Agora, aqui está como estamos
usando isso lá fora. Aqui queremos criar uma nova função de adição e
apenas o chamamos de MIs add, neste caso, nova
função de usuário AD e podemos usá-la. É por isso que aqui
podemos escrever um novo anúncio, por
exemplo, nove, e
esse é o nosso valor. E fazer esse caso
será a saída 19 calculada por 19 porque na verdade, como você pode
ver em nosso futuro, ele deve adicionar dez ao
nosso valor fornecido. Estamos jogando dentro de nove
e estamos voltando 19. Mas, na verdade, quando estamos chamando novo anúncio com o Snyder, novamente, a saída também será 19, mas deve ser
tirada do cache. Não deve ser calculado. Novamente, isso é exatamente o que a
memorização está fazendo. Agora só precisamos implementar
essa lógica de memoria. Então aqui podemos escrever se
tivermos um valor em dinheiro, então estamos verificando se temos tal válido dentro do nosso objeto, então queremos apenas devolvê-lo. E aqui eu quero
escrever o log do console você
possa ver que
ele é minimizado. Aqui estará buscando dinheiro. E depois disso, quero
escrever dinheiro de retorno. E aqui está nosso valor. Como você pode ver, não
fazemos nenhum cálculo aqui. Simplesmente retornamos o valor
e também teremos mais. E aqui temos
cálculos estavam aqui
calculando os resultados. E depois disso, devemos
realmente calculá-lo. Então, vamos criar aqui um
valor, por exemplo, resultado. E queremos colocar
aqui valor mais dez. E depois disso, devemos colocá-lo em dinheiro antes de devolvê-lo. Nesse caso, estamos armazenando nosso resultado para a próxima faixa. É aqui que podemos escrever valor
em dinheiro igual a resultado. Nesse caso, estamos atribuindo
dinheiro para o nosso número nove. Neste caso, quando, na
próxima vez aqui nove
, estamos recebendo
o valor do dinheiro. E depois disso, podemos
simplesmente retornar nosso resultado. E esse é apenas o valor
que calculamos aqui. Vamos verificar isso. Estou recarregando a página. Como você pode ver, estamos obtendo
calcular os resultados finais. Esta é a nossa primeira tentativa
aqui e calculou 19, o que realmente significa que
realmente calculamos algo. Mas na segunda vez que esse carvão, temos buscando dinheiro 19, o que realmente significa que
não calculamos desta vez, esse número, mas nós o
tiramos do dinheiro. E é assim que você normalmente
implementa a memorização. Você pode obter tarefas diferentes, mas a ideia é a mesma. Você tem algum dinheiro, tem um fechamento e deve entregar o
valor do cache e colocá-lo no cache
no primeiro cálculo.
41. Fibonacci: Bem-vindo a algumas perguntas realmente
hilárias, porque essas coisas
que você nunca usará em sua vida cotidiana
como um programador, mas você deve saber
como resolvê-lo. E o primeiro aqui, que é o meu design favorito, uma função que retorna se valor da sequência de
Fibonacci e eles não tentaram funcionar para obter o valor de Fibonacci
nos últimos 12 anos, o que realmente significa
que não é necessário. Mas estou constantemente ouvindo essa pergunta
repetidas vezes na entrevista. E, na verdade, acho
que é totalmente bom perguntar ao entrevistador. Certo, não conheço uma
fórmula para Fibonacci. Você pode salvar e,
em seguida, eles podem codificá-lo. Não é um problema. Isso é totalmente bom
porque você não deve saber cor todas as fórmulas
matemáticas. É aqui que aqui, na verdade,
você pode obter algo assim como resultado
para sua pergunta. Então aqui você pode ver
que a sequência de Fibonacci é uma sequência inteira
onde os dois primeiros termos são 01 após o próximo termo ser definido como uma soma
de dois termos anteriores. E o termo else é a soma de n menos um e n menos dois, o que realmente significa que este é um início típico da
sequência que temos aqui 0112. E como você pode ver
aqui, podemos somar por exemplo, 11 e estamos chegando aqui com cerca de 12 e estamos recebendo três
e assim por diante e assim por diante. Então, como podemos resolver isso, devemos fornecer uma função R, um valor de sequência de Fibonacci, que realmente significa o
índice na sequência. Por exemplo, se
fornecermos sete como argumento, então devemos chegar aqui
em banda para banda, porque na verdade vamos
resumir 813 e estamos recebendo 21. Agora vamos chamar esse exercício. E, na verdade, aqui
vamos usar recursão porque queremos
calculá-la recursivamente. Aqui podemos criar uma função
Fibonacci e chegamos aqui n, que é o nosso índice aqui. Primeiro de tudo, devemos verificar
se é menor que dois, porque neste caso
nossos laços lógicos funcionam porque aqui temos 01. É aqui
que devemos verificar, certo? Se n menos de dois, então aqui queremos devolver um. Em outros casos,
devemos aplicar nossa lógica. Aqui nós simplesmente retornamos Fibonacci, e aqui estamos
passando n menos dois, o que realmente significa que
calculamos essa função recursivamente e cada chamada
recursiva de Fibonacci, vamos chamá-la de novo e de novo até chegarmos a
esta primeira condição. Aqui temos
Fibonacci n menos dois mais Fibonacci e menos um. E, na verdade, esse é o
código inteiro que você deve experimentá-lo. Vamos verificar isso. Vou pular para o console e aqui Fibonacci sete. E como você pode ver,
estamos recebendo 21, o que realmente significa que
nosso código está funcionando. Mas aqui estão algumas
coisas importantes para lembrar. Como programador, você
deve saber como
converter fórmulas matemáticas ou alguma lógica. Em JavaScript, as funções são funções em qualquer outra linguagem, mas é totalmente
bom não saber cor todas as fórmulas matemáticas. É por isso que você não deve
ter medo de perguntar sobre eles. E em segundo lugar,
acho que é totalmente bom perguntar em troca. Certo. Eu realmente não posso codificar, mas você está usando essas coisas todos os dias
em seu projeto? E provavelmente você
receberá uma resposta não. É por isso que
, na verdade,
não faz sentido perguntar essas
coisas em primeiro lugar.
42. Palindrome: Uma pergunta mais popular
que estou ouvindo muito é, por favor, escreva uma função
para verificar o palíndromo. Porque na verdade é isso que os programadores estão fazendo
todos os dias. Estão verificando palíndromos. Mas o que for que pudermos resolvê-lo. Na verdade, se você não
sabe o que é palíndromo, esta é uma string que é a mesma desde o início
e do fim. Por exemplo, se você
tiver uma string completa, não
é um palíndromo. Mas se você tem, por exemplo, para o string completo, é um palíndromo porque é a mesma força do
Stat e do final. Então, vamos tentar isso agora. E, na verdade, é muito fácil. O que queremos fazer aqui, queremos criar uma
função é palíndromo. E o que queremos fazer com
um para resolver com sabedoria. E, na verdade, não faz
sentido dividi-lo por letras e verificar
cada letra e assim por diante. Você pode simplesmente reverter
uma string e comparar. É por isso que aqui podemos
escrever que nossa string é igual e podemos
compará-la com a divisão de pontos de string. E aqui nós apenas fornecemos
uma string vazia. Então nós o dividimos por letras
agora com apenas fazer
reverso, reverter em nossa matriz e, em
seguida, estamos juntando-o novamente, o
que realmente significa
onde o inverso
neste mundo e estamos
comparando duas mesmas palavras. Neste caso, obteremos a mesma string se
eles forem iguais. Vamos verificar o Sul
aqui onde bem no palíndromo
leste e estamos fornecendo insights completos
e estamos ficando falsos. Mas se escrevermos foo, foo, então estamos se tornando realidade. A tarefa está resolvida.
43. Anagram: Mais uma pergunta que
ouço com frequência é escrever
a função
que verifica se a string é um anagrama. E, na verdade, essas coisas são super parecidas com o palíndromo,
como você pode ver aqui, anagramas de palavras que têm os mesmos caracteres
na mesma quantidade, o que significa que duas
strings são anagramas se podemos reorganizar cordas
e pegar o outro. E aqui estão alguns
exemplos de anagramas. Por exemplo, ouça
e silencioso e assim por diante. Então, agora vamos escrever que a
função é anagrama. Aqui temos
anagrama ys e sabemos que estamos recebendo
aqui dois pontos fortes que queremos comparar. Vamos citar o nome de 31
e transmitir dois. Então, o que queremos
verificar aqui é que essas duas cordas têm
as mesmas letras. Mas, para verificar isso, devemos ajustar a classificação de nossas cordas. Nesse caso, podemos simplesmente comparar as cordas por igualdade. Mas antes de tudo,
gostaria de verificar aqui um comprimento, porque se tivermos um
comprimento diferente nessas duas cordas, então não funcionará. É por isso que aqui, se o comprimento da nossa primeira string não igual ao comprimento da
nossa segunda string, então retornamos false
e não verificamos nada. E é claro que aqui
deve ser bancário e não igual porque queremos verificar
se eles não são iguais. A segunda coisa que
queremos fazer é convertê-lo minúsculas porque na verdade
podemos ter casos diferentes, mas as strings
ainda são válidas. Isto é y. Vamos chamá-lo de um fio inferior. E aqui simplesmente chamamos
string1 para minúsculas, e temos duas minúsculas
diretamente dentro do JavaScript. Aqui Vamos nomear a string mais baixa, e estamos convertendo
string para minúsculas. Agora, o que queremos verificar, queremos verificar se essas
duas strings são iguais. Nesse caso, dominamos false porque eles não
são anagramas. É por isso que aqui
vou escrever o fluxo de string1 é igual a cadeia de caracteres dois
mais baixa, então isso é falso e
isso não é um anagrama. E o último,
devemos escrever nossa lógica. E o que eu quero fazer, quero mais simples converter
nossas strings em array do que
determinado array e mesclá-lo diretamente de volta na string
para este fim de semana, certo? Por exemplo, a string classificada um, e aqui vamos escrever a
menor string de um ponto dividido. E aqui queremos
dividir apenas por letras. E aqui estou apenas chamando
tipo sem argumentos. Ele será classificado de alguma forma. E depois deste **** um para obter uma corda de volta, isso é yaqui. Junte-se nos trará de volta uma corda. Eu quero fazer exatamente o
mesmo na segunda string. E aqui agora podemos
compará-los porque,
neste caso, classificamos todas as nossas letras
na mesma direção. E agora aqui eu posso
simplesmente escrever uma string
classificada de retorno uma
é igual a string classificada. Nesse caso, estamos comparando duas strings que foram classificadas, e já sabemos que é entrar no Chrome se forem iguais, vamos verificar isso. Estou pulando para o navegador e
estamos escrevendo é anagrama. Aqui, estamos apenas
fornecendo completo e Byron. E como você pode ver, é falso porque essas são duas cordas
diferentes. Mas vamos agora tentar com ouvidos
e silenciosos. Por exemplo. Aqui estou escrevendo lição
e, à direita,
estou escrevendo em silêncio. E, na verdade, estamos
chegando aqui verdade, e está funcionando o que
estamos fazendo aqui. Primeiro de tudo, estamos verificando
se o comprimento é o mesmo. Bem-vindo aqui,
temos dois pontos fortes, minúsculas, então não estamos aqui. E agora temos
certeza dessas duas strings que foram
convertidas em nossas matrizes, e então estamos
convertendo-as de volta em strings. Neste caso, estamos recebendo
algo como E e St., mas é totalmente bom porque
queremos compará-los. E é assim que você está escrevendo função para comparar anagramas.
44. Encontrando vogais: Você também pode obter
uma tarefa como essa. Escreva a função que
conta vogais na string. E nem sempre são vogais, mas algo que você
deve contar na string. E, na verdade,
não é tão difícil porque a ideia principal
é que primeiro
devemos definir algo como uma matriz de possíveis oscilações
ou possíveis símbolos. E então tente verificar cada letra dentro da nossa força. Vamos fazer isso agora. Primeiro de tudo, aqui
queremos criar uma função phi e vogais, e estamos recebendo aqui
string como um argumento. Agora, o segundo fígado deve
definir o que nossas vogais. Aqui podemos criar uma
matriz de vogais e vamos definir aqui a, e, eu, o e u. E podemos resolver com duas maneiras diferentes, ou
com for-loop
sempre reduzir e, na verdade, ambos
estão bem. Aqui. Primeiro de tudo, quero criar um contador porque queremos
aumentá-lo toda
vez que encontrarmos nossa vogal, precisaria de um loop for. Então, aqui podemos escrever
o personagem principal, e aqui haverá
string para minúsculas. Nesse caso,
temos acesso a cada caractere dentro nossa string e podemos verificar,
ok, se as vogais
incluem nosso caractere, então queremos
aumentar nosso contador. Então, aqui vai
contar mais, mais. E depois desse loop, acabamos de devolver nossa
conta que criamos. Aqui. Vamos tentar encontrar os intestinos e
temos alguma corda, como você pode ver aqui, estamos
recebendo três vogais porque temos
aqui e três vezes. E, na verdade, eu diria
que esse código está bem, mas podemos escrevê-lo
melhor com redução. É por isso que eu queria
comentar essa contagem de leads e acompanhar diretamente
aqui, retornar um reduzido. Então aqui, antes de tudo, queremos converter nossa
string em minúsculas. Então, aqui podemos tentar
string para minúsculas. E depois disso, queremos
dividi-lo em personagens. Este é y aqui será uma string vazia
dividida. Agora queremos chamar aqui de reduzir
e estamos recebendo acesso, primeiro lugar ao nosso acumulador e, em segundo lugar, a
cada personagem. Após essa função, queremos definir nossa contagem
e ela será 0. Dentro são reduzidos. Queremos fazer exatamente
a mesma lógica. Podemos retornar aqui
que, se nossa
matriz de vogais incluir caracteres
que estamos verificando
, queremos
aumentar nosso contador. Aqui estamos aumentando nosso
acumulador com mais um. Em outros casos, não o
aumentamos e apenas devolvemos o acumulador. Vamos verificar o sal
que estou recarregando a página aqui é a mesma string
e estamos recebendo três. Na verdade, esse código é melhor
porque antes de tudo, podemos lê-lo linha por linha. E em segundo lugar, isso totalmente
puro e funcional.
45. Converter em Caso de Título: Você também pode obter uma tarefa para
converter o caso do título da string. E, na verdade, pode ser complicado. É por isso que é
muito bom que aqui recebemos casos de teste. Então, na verdade, devemos criar
um caso de título de função. E quando somos fornecidos
dentro, sou um pequeno bule. Devemos retornar uma string e
ela deve ser capitalizada. E como você pode ver,
cada palavra aqui é capitalizada, não apenas a primeira palavra, e isso é importante. Também. Não importa
como fornecemos nossa string, ela deve ser capitalizada
corretamente. Vamos construir essa função agora. E, na verdade, temos duas possibilidades aqui que
podemos usar for-loop over, podemos usar métodos
JavaScript nativos. Então, antes de tudo, vamos
escrevê-lo usando for-loop. Aqui estamos criando um método de caso
intitulado e estamos recebendo
string como um argumento. Primeiro de tudo, queremos
criar aqui uma matriz. Temos todos os
personagens aqui. Podemos escrever aqui
que nossa string é igual a string a divisão
minúscula, e aqui haverá um espaço. Então, na verdade, aqui estamos
escrevendo array dentro da string. E, na verdade, estou
escrevendo código assim porque quero mostrar como
você não deve escrever seu código. E não se trata apenas de lógica aqui que estamos usando o loop for, mas consideramos o que você está fazendo, como você pode ver, em primeiro lugar, a má prática aqui é usar o mesmo argumento
como temos aqui. Substituiu nosso argumento dentro, o que significa, antes de tudo, podemos modificá-lo. Sim, não é o
caso da string, mas será assim. Com matrizes há objetos porque estamos mais
definidos em uma referência. Em segundo lugar, aqui estamos
voltando ao array, mas aqui estamos escrevendo
em tal fluxo, o que o torna confuso. E ambas as coisas que você
não deve fazer em seu código
ou em entrevista. Porque com isso
você está mostrando que está escrevendo código de incorporação. Uma abordagem muito melhor
aqui será criar um array de propriedades
adicional
ou o que você quiser. Aqui estamos recebendo uma string para dividir
minúsculas e
estamos totalmente bem. Depois disso, devemos
escrever para loop aqui podemos escrever
simplesmente nativo for-loop, o que eu também não aconselho. Então aqui podemos escrever
var I igual a 0, eu menos que o comprimento da string. E aqui eu mais, mais. E, claro, aqui não é
fluxo, mas nosso array. Então aqui dentro agora podemos
mutar todos os elementos. Assim, podemos escrever aqui a
matriz que eu é igual, e aqui temos o mesmo caractere de ponto de
elemento em 0. E, na verdade, o que
ele faz, é preciso o primeiro
elemento do nosso fluxo. No nosso caso,
cada elemento de nossa matriz é uma string. E aqui estamos recebendo a
primeira letra para que possamos capitalizar, foi
assim em maiúsculas, o que também é um
método nativo dentro do JavaScript. E aqui podemos escrever
uma fatia de ponto i um. E neste caso estamos recebendo todos os nossos elementos
da string, exceto
da primeira letra. Isso é o que queremos.
Queremos capitalizar a primeira letra e depois pegar todas as outras letras. E depois disso, podemos
simplesmente unir nossa matriz. Estamos aqui,
retornamos a junção de matriz, e estamos
unidos, por espaço. Agora podemos escrever
aqui o log do console, onde dois pontos aqui no caso foram
fornecidos dentro da nossa string. Sou um pequeno bule. Vamos verificar se está funcionando. Estou recarregando a página e
recebendo sou um bule de chá, o que realmente parece bem
e resolvemos a tarefa. Mas antes de tudo,
usamos aqui menos quatro. E, como eu disse anteriormente, não
é a melhor
abordagem se estivermos percorrendo cada
elemento da matriz, pelo
menos você deve usar para rich, para array e não quatro nativos, então seu código será melhor. A segunda coisa que eles não
gostam aqui é que estamos
substituindo cada
elemento do nosso array, o que realmente significa que
não estamos criando uma nova matriz, mas estamos substituindo
o anterior. E também não é a
melhor abordagem. Isso é y. Vamos reescrever todo esse código apenas usando métodos
JavaScript simples. Porque, na verdade, aqui
nem precisamos de loop FOR. O que eu queria fazer
aqui, quero pegar nossa string e quero
convertê-la em minúsculas. Isso foi totalmente bom. Depois disso, queremos
dividi-lo com espaço. Isso também foi totalmente bom. Mas depois disso
podemos usar o mapa porque essencialmente, o que estamos
fazendo aqui é um mapa. Queremos alterar cada
elemento dentro da matriz. É por isso que estou chamando mapa e estamos chegando
aqui nosso conselho. E, na
verdade, como você pode ver, está mais claro
agora porque estamos usando o mundo da propriedade e não alguma IA ou array onde não sabemos do que
estamos falando. E aqui queremos fazer exatamente o mesmo caractere de
ponto de palavra em 0. Então, estamos recebendo o primeiro elemento. Aqui estamos usando letras maiúsculas, e aqui estamos usando mais, e pegamos todas as
outras letras com fatia de ponto de
palavra e aqui está uma. E, como você pode ver, esse código
é essencialmente o mesmo. Não mudamos
isso, mas é muito mais eficiente, mais fácil de ler. E isso mostra que você é um desenvolvedor
mais avançado, porque aqui não estamos
usando for-loop, mas mapa, o que não é tão difícil. E aqui estamos
apenas retornando para cada palavra em seu trabalho. E é importante aqui
mencionar que o personagem adicionar e cortar não sofrer mutações
nas funções, o que significa que estamos recebendo fluxo
juvenil e
não sofremos mutação do Alt stream.
Vamos verificar isso. Eu sou o Senhor nesta
página e estamos recebendo nossas cordas
capitalizadas, que significa que eu esqueci no
final de fazer nosso gigante aqui, podemos simplesmente chamar que eu iria
unir com o espaço dentro. Vamos verificar isso e estamos recebendo exatamente a mesma string. Portanto, recomendo vivamente que você
no entrevistador
assista sua nomeação, verifique se seus
tipos de dados são combinados com seus nomes e facilite a
leitura do código se for possível.
46. Converta a entrada de tempo dada em formato de 12 horas para 24: Aqui está mais uma tarefa que requer um
pouco de pensamento. E como você pode
ver, devemos escrever a função que pode converter a entrada de tempo dada no 12 horas para o formato de
24 horas. Aqui temos casos de uso. É por isso que é
mais fácil para nós verificar se estamos cobertos
tudo corretamente. Então, vamos tentar
criar essa função. E mais uma vez, isso não
é uma função que você pode resolver
em trinta segundos. Então você pode tomar seu tempo e pensar um pouco sobre isso. Vamos criar aqui converter
para o formato 24 horas. E estamos recebendo texto de tempo
aqui. E, na verdade, o que
eu
queria fazer aqui primeiro, quero
convertê-lo em minúsculas, porque na verdade aqui
teremos AM e PM e queremos ter certeza de
que eles são minúsculos. É por isso que aqui podemos
tentar o tempo para xt mais baixo. E aqui queremos chamar texto de
tempo para minúsculas. A segunda coisa
que eu quero fazer é obter horas e
minutos separadamente. O que eu quero escrever
aqui é a divisão da tecnologia de tempo mais lenta e queremos dividi-la por coluna
porque na verdade temos dois pontos em
cada caso. E à esquerda
temos nossas horas, e à direita
temos minutos. E, na verdade, aqui eu quero fazer uma destruição e uma
tarefa aqui diretamente. Quero ter em primeiro lugar nossas horas e
segundo minutos. Nesse caso, estamos criando
duas variáveis locais. Se você não quiser
escrever assim, você pode nomeá-lo com alguma variável de
temperatura T e, em seguida, basta ler esta
variável temporária ponto horas e minutos. Mas aqui chegamos a coisas
difíceis. Como você pode ver,
às vezes temos apenas um único dígito e
às vezes temos dois dígitos. Mas também temos um caso em
que temos zeros no
início. Aqui. Também temos mais um caso
que precisamos cobrir. Se tivermos aqui 12 como nosso, então devemos
convertê-lo em zeros 0. É por isso que eu queria
escrever exatamente essa lógica. Então, o tempo da véspera marca pontos e largura
mais lentos e,
na verdade, termina com Israel. Uma boa função em
JavaScript que está verificando o tostring está
terminando com alguma coisa. Aqui podemos verificar AM porque, na verdade,
sabemos que aqui temos 12 da manhã e isso significa que
devemos convertê-lo em dois zeros. É por isso que aqui eu quero
escrever nossos iguais, e aqui estamos
verificando se nossas horas iguais a 1212 como uma string, porque aqui estamos
divididos em nossa string, então queremos aqui obter 0. Em outro caso, estamos
chegando aqui horas. E como você pode
ver, em primeiro lugar, escrevi aqui um único
0 e não dois zeros. E isso também é importante. Aqui eu apenas
atribui horas diretamente, o que significa que nós cobrimos essa lógica para obter um único 0 e em todos os outros casos apenas
conseguiríamos o que recebemos. Se for cinco,
estamos recebendo cinco. Se for 01, obteremos 01. Nós cobrimos nosso AMK é agora que
eu queria cobrir o caso PM. É por isso que aqui
podemos escrever outra coisa e até mesmo qualquer outra vez porque
queremos verificar o PM. E aqui podemos escrever tempo
tecnologia ponto e largura mais lentos, e aqui estamos recebendo nosso PM. E neste caso, queremos
aplicar lógica diferente. Queremos atribuir
aqui nossas horas e queremos verificar se
nossas horas são iguais a 12, porque este é
novamente outro caso. Neste caso, queremos
aplicar aqui horas, ou queremos escrever
aqui string e dentro de mais horas últimas 12. Este código está fazendo um alto,
como você pode ver aqui, eu escrevi mais horas, o que ele realmente faz, estamos recebendo nossas
horas como uma string. Então, digamos que
estamos chegando aqui 12. Agora, se eu vou escrever aqui
mais no início, estamos chegando aqui diretamente o
número de uma string, o que realmente significa que
estamos convertendo isso número e, em seguida, ganhamos mais 12. Por que isso? Porque vamos
dizer que aqui estamos verificando PM, por exemplo, este caso com 01, e aqui estamos verificando, Ok, horas são iguais a 12, Não, Então queremos
fazer 01 mais 12. Vamos verificar o Sul
como será. Então, estamos chegando aqui 01 e, na verdade, ele é
convertido em um. E agora, depois disso,
estamos recebendo mais 12 e estamos entrando em lata, o que
significa, na verdade, adicionando 12, estamos
convertendo-o para o horário correto da PM. E se tivermos 12 horas
assim, simplesmente deixamos como 12. Então, na verdade, aqui
poderíamos escrever 12 sobre, poderia apenas levar nossas horas. Então, o que eu quero fazer agora, quero verificar o que estamos
recebendo dentro de horas. Então aqui eu quero registrar
nosso formato Convert to 24 horas, e aqui estão nossos
textos de tempo e nossas horas. E agora eu quero copiar todos
esses casos e apenas executá-los. Nesse caso, podemos verificar
se eles estão funcionando corretamente. Estou recarregando a página
e estamos recebendo atribuição para
constante, variável. E como você pode ver aqui, estamos tentando sobrescrever o nosso. E é claro que é proibido. É por isso que aqui
devemos escrever LED. Vamos verificar
isso. Estou recarregando e estamos recebendo
412045512120113. Aqui temos o PM 11231022, o que realmente significa que nossa
lógica por horas está correta. Depois disso, devemos adicionar um 0
à esquerda em todos esses casos. E como você pode ver,
às vezes não
precisamos disso e às vezes
devemos
tê-lo e podemos resolvê-lo facilmente com mais uma função
JavaScript simples. Podemos escrever aqui,
o nosso ponto pad começa. Aqui. Nós podemos fornecer para 0. O que ele faz é que você
pode ver aqui que ele encaixa a string atual com outra string várias
vezes, se necessário. que realmente significa que aqui
estamos fornecendo ferramenta, o que significa que teremos dois
símbolos e aqui temos 0, o que realmente significa que se
não tivermos um símbolo lá, então colocaremos 0 dentro. E, na verdade, agora eu
quero copiar essa parte e apenas colocar dentro do nosso
log do console para verificar se ela está funcionando. Estou recarregando a página
e, como você pode ver agora, estamos recebendo a hora correta. Então aqui temos dois zeros,
05, e então todos são números
corretos. Agora devemos implementar nossos minutos e, na verdade
, é muito mais fácil. Primeiro de tudo, apenas
para lembrá-lo, dentro de minutos também terá PM e TM e devemos nos
livrar disso. É por isso que podemos escrever
aqui diretamente significa fatia de
ponto e aqui estamos
usando 0 menos dois. Nesse caso, vamos nos
livrar de dois símbolos, AM ou PM, e
teremos apenas minutos aqui. E depois disso, quero
usar o fio PET, assim como fizemos anteriormente. E aqui também serão 20. Neste caso,
vamos verificar, ok, se tivermos aqui oito, então devemos obter
aqui pseudo-auxílio. Se tivermos aqui dois dígitos, então está totalmente bem. Agora podemos simplesmente remover
esse log do console, mas não precisamos mais dele. E, na verdade, aqui em
todos os casos, quero escrever o log do console. Isso é y. Vamos mudar isso. Agora. Quero escrever aqui o log
do console e, em seguida, abri-lo. E aqui temos convertido. E vamos fechar foi o suporte. Agora temos todos os nossos casos. Vamos
verificá-los. Estou recarregando a página e estamos
recebendo nosso tempo, e está parecendo totalmente bem
aqui, por exemplo, temos zeros minutos 0
a 35508 e assim por diante. Mas o problema é que
esquecemos de colocar uma
coluna entre eles. É aqui que aqui
devemos escrever mais e entre eles basta colocar
uma corda com dois pontos. E como você pode ver
agora, estamos recebendo um bom momento no formato de 24 horas. E, na verdade, do
meu ponto de vista, é difícil resolver essa tarefa em cinco
ou dez minutos. Você realmente precisa
sentar lá como talvez 15 minutos ou meia hora
para verificar casos diferentes, como você quer
resolvê-lo e assim por diante. Portanto, esta é uma boa tarefa para
verificar como você pode converter coisas
diferentes entre
elas com lógica diferente. Mas não é
algo que você possa resolver em um ou dois minutos.
47. Dados de mapeamento: Aqui está mais uma tarefa para você , que é tirada
do projeto real. Isso não é apenas algumas
tarefas para a entrevista, mas as tarefas que você
verá em sua vida cotidiana. E como você pode ver,
onde deve mapear os dados para a frente e o formato, que realmente significa que estamos recebendo nossos dados, por exemplo, do back-end, e não
informá-los como queremos. É por isso que queremos
convertê-los. O elemento principal
é a chave de localização, e precisamos mapear
todos os dados para ele, e
teremos cinco objetos. Como você pode ver aqui. Primeiro de tudo, temos
uma matriz de localização, e aqui temos dois objetos. Primeiro de tudo, chave de localização e este é o nosso identificador exclusivo. E temos aqui
algumas ideias e o exterior atribui exatamente o mesmo
no segundo objeto. E agora aqui temos uma taxa configurada
em massa. Essa também é a
matriz com objetos. E dentro de
cada objeto, temos valores
de dados e manutenção de conflitos. O ponto principal é que estamos
mapeando eles um para um, que realmente significa que
o índice 0 na matriz de
localização é igual ao índice de configurações
em massa 0. E neste caso, precisamos mapear tudo para a estrutura. No final, devemos
obter uma matriz de objetos com, antes de
tudo, chave de conflito. Esta é essa parte e localização mais perto de
dois, como você pode ver, localização kids a22 é essa parte e também
externa atribuída a partir dela, o que realmente significa que um
segundo elemento
também será conflito Kit de
localização 100 quando T2, este é o nosso segundo número e em seguida, atribuição externa
e assim por diante e assim por diante. E diz-se que o ID
único rápido é esse, o que realmente significa que estamos
recebendo aqui 12345 objetos. Então Advento, devemos ter uma
matriz com cinco objetos. Agora vamos tentar
escrever essa lógica e na verdade, não teremos
nada complicado aqui. É tudo sobre mapeamento de dados. Vamos tentar aqui. Nosso resultado, como eu quero fazê-lo resulta
diretamente em
loops de forma eficiente. E eles não vão trabalhar com
a localização só porque dentro
temos nossas IDs exclusivas. E aqui dentro do local
estamos obtendo mapa, o que realmente significa que estamos
percorrendo esses objetos. Aqui dentro do mapa. Estamos recebendo elemento de localização e também estamos
recebendo aqui índice. É por isso que devo colocar colchetes
adicionais aqui. Localização n, o índice
é o que precisamos. Agora, dentro, podemos fazer nossa magia porque agora dentro
do elemento de localização, eles estão recebendo
todos os objetos que
queremos aqui, um mapa toupeira, porque dentro
do nosso elemento de localização, queremos fazer um loop através da
nossa chave de localização. É por isso que aqui podemos
retornar nosso elemento de localização, e aqui temos
nossa chave de localização. Aqui também tenho
um mapa e temos acesso à nossa chave de localização. E como você pode ver,
eu escrevi com CamelCase porque estamos certos no código
JavaScript e normalmente todas as nossas variáveis são CamelCase. Agora, aqui dentro, queremos
devolver o que precisamos. Primeiro de tudo, precisamos
aqui da chave de alocação. É por isso que aqui estou
escrevendo a chave de localização. Podemos deixá-lo com
sublinhado como de back-end, superar,
convertê-lo em maiúsculas só
depende do que você quer. E aqui estamos apenas
atribuindo nossa chave de localização. Depois disso, devemos
obter nossa chave de conflito. Isso é extremamente fácil de fazer porque aqui dentro de um conflito
em massa, podemos apenas obter essa chave de
conflito por índice. É por isso que aqui podemos escrever índice de configuração do
Bow porque é o mesmo lago e valores de dados de
ponto de localização , chave de configuração de ponto. E a última parte é o sinal delta de atribuição
externa. Estamos recebendo o
elemento de localização dentro pontuar um sinal. E foi assim que remapeamos
o que precisávamos. Então, antes de tudo,
temos um mapa através da nossa localização,
através do assunto. E em um mapa temos
para nossa chave de localização. É por isso que, para
cada ID exclusivo, podemos mapear os dados que precisamos. Vamos verificar
isso. Vou escrever o bloqueio
do console aqui nosso resultado, e vamos verificar se ele está funcionando. Estou recarregando a página e
obtemos uma série de matrizes. A primeira matriz
que estamos recebendo aqui, chave de
localização configurada ao ar livre, atribuir e tudo é bom. O único problema que temos é que obtemos uma matriz de matrizes, mas na verdade
queremos uma matriz plana. É por isso que devemos fazer
algo com esse código. Podemos usar aqui reduza para criar
apenas uma matriz plana porque não temos método
nivelado nativamente
dentro do JavaScript. Aqui temos nossa matriz
e o acumulador. E no início podemos dizer que estamos recebendo
uma matriz vazia. O que queremos fazer dentro é
usar catenate array.com. E aqui estamos concatenados
e isso era acumulador. O que é feito aqui por padrão, temos aqui
uma matriz vazia e temos cada array
que você pode ver aqui. E queremos concatenar
nossa matriz com o acumulador. Então, essencialmente para
cada elemento, estamos concatenando
com nosso acumulador. Vamos verificar isso. Estou recarregando a página e estamos recebendo nossa
matriz fugida com assuntos. E é assim que você
mapeia dados, por exemplo, do formato de back-end para o
nosso formato front-end.
48. Substituir parâmetros em URL: Você também pode obter
uma tarefa como essa. Crie uma função para
substituir parâmetros no URL. E, na verdade, essa é uma tarefa do mundo real porque
aqui temos uma URL inicial, como se fosse gerada em roteadores
antigos para todas as estruturas
front-end. E neste caso,
temos barra de URL inicial, barra e aqui coluna post ID do comentário da barra do comentário da barra
do
AD, que significa que esses dois
parâmetros com colunas serão substituídos por IDs em
algum momento mais tarde. E, na verdade,
demonstrar que uma função substitui params
no URL onde podemos lançar dentro do URL com essa estrutura e
matriz de substituições. E como você pode ver dentro de
cada objeto que devemos fornecer de e
para, por exemplo, de pós-Covid significa que
devemos substituir dois pontos do
post AD por id1, e aqui comentou com 83. E, claro, essa
função deve ser genética. Não é apenas para
postagens e comentários, mas para quaisquer substituições dentro do URL. E, na verdade, antes de
começarmos a resolver, quero mostrar mais
uma coisa, como você pode pensar em
resolver problemas. Por exemplo, você pode escrever
algo como lista de tarefas. E neste caso, estamos
tentando pensar em etapas sobre o que
queremos implementar. Por exemplo, qual
será o primeiro passo aqui? Como você vê, temos uma
matriz de nossas substituições, o que realmente significa que temos uma função com dois argumentos. E, na verdade,
queremos percorrer cada substituição e aplicar essa substituição
ao nosso URL. Então, na verdade, aqui podemos escrever
passar por substituições. O segundo talvez seja substituir partes de cada substituição. A última coisa que estaremos aqui, volte em seu stream. Essa lista, neste caso pode parecer
uma coisa óbvia, mas pode ajudar se você
escrever algo
assim para implementar uma lógica
mais complexa. E, na verdade, deseja implementar aqui uma solução
correta. E podemos usar reduzido para isso porque é enorme nosso código melhor. Mas também quero mostrar o único problema
que você pode fazer. Na verdade, aqui
queremos criar nossa função, substituir parâmetros em URL, e estamos recebendo aqui URL
e nossa lista de substituições. E, na verdade, o que
queremos virar aqui é reduzido para nossas substituições, redução de pontos de
substituição. E aqui temos
nossa função com acumulador e cada uma
de substituição. Esse valor inicial
temos aqui nosso URL, porque é isso que
queremos mudar. Agora, aqui dentro da função, devemos retornar string atualizada. E para isso podemos usar uma função JavaScript simples
que é chamada de substituída. E, na verdade, aqui você pode
tentar desenhar assim. Você pode pensar,
Ok, eu tenho um URL, podemos simplesmente escrever aqui, URL é igual a substituição de pontos de URL. Aqui estamos substituindo em
primeiro lugar, coluna mais ponto de
substituição de, e estamos mudando
para ponto de substituição t2. É isso. E depois disso, queremos retornar nosso URL. E, na verdade, esse código
parece correto. E agora eu quero mover nossa URL
inicial e os resultados aqui para a parte inferior e escrever o URL do resultado
do log do console. E vamos verificar o que temos. Estou recarregando a página
e estamos recebendo exatamente barra pós barra um,
slash common slips três, o que realmente significa que essa lógica com redução está
funcionando corretamente. Estamos percorrendo
cada substituição. Aqui atualizamos nosso URL e aqui nós o devolvemos e
não parece bom, mas na verdade você tem
aqui um grande problema. Como você pode ver, minha variável
acumuladora não
está destacada, o que realmente significa que não
estamos usando aqui reduzir corretamente e não estamos
usando acumulador. O que estamos usando, estamos
usando esse URL de parâmetros e com a mutação direta
desse URL toda vez. E, na verdade, isso é
completamente errado ,
antes de tudo, porque não
devemos mudar nossos parâmetros. E em segundo lugar, a parte mais
importante que estamos usando aqui reduz como um
loop for-loop porque na verdade simplesmente
mudamos nossa variável de fora no loop e
não estamos usando nosso acumulador. Na verdade, o código correto
aqui não é substituído, mas simplesmente retorna a substituição
acumulada. Porque, como você pode ver,
fornecemos aqui o trilho aqui como um valor inicial e
não devemos usar o URL aqui dentro. Não queremos alterar nosso URL. Queremos
sempre atualizar nosso acumulador e retornar
em novo acumulador. Como você pode ver, esse código está funcionando exatamente da mesma forma, mas isso é
completamente diferente. Anteriormente, se você
escrevesse código assim,
isso está completamente errado
na entrevista porque você não
está usando reduzido, reduzido, mas assim como for-loop, o mesmo acontece com o mapa. Se você estiver usando o mapa
apenas para percorrer as coisas que você está fazendo
uma tendência com o mapa, você precisa transformar sua
matriz e devolvê-la.
49. Mensagens de validação: Você também pode obter uma
pergunta como essa para mensagem de validação de back-end
MOD para frente e formato. E, na verdade, esse é um exemplo
real porque às vezes estamos recebendo mensagens de validação de
back-end, não no formato como
é adequado rapidamente no front-end para
nossos formulários JavaScript. É por isso que aqui estamos recebendo nossos erros de back-end
nesse formato. Temos aqui um
objeto com chaves e cada chave é uma
propriedade do back-end. Nosso campo que estamos validando,
por exemplo, e-mail. E aqui nós preenchemos erros, e isso é o que
está interessado em erros de
arquivos é uma
matriz de objetos. E dentro de cada objeto, temos propriedade de mensagem
com alguma mensagem. Por exemplo, aqui temos
senha com dois erros. Isso é o que aqui é uma
matriz com dois objetos. Aqui está a mensagem deve
conter símbolos em diferentes casos e deve ter pelo
menos oito símbolos de lente. O que queremos fazer
neste exercício, queríamos convertê-lo
para nossa frente e formato. Esta é apenas uma matriz planar com strings e cada
fluxo é nossa chave. Então nosso e-mail alimentado, e agora temos todos os nossos erros
concatenados como por exemplo, não
podem ficar em branco. E se tivermos dois
deles,
simplesmente os concatenamos com vírgula. Então, na verdade, você pode
resolvê-lo de maneiras diferentes, mas eu recomendo
usar um objeto entre aqui. Podemos simplesmente escrever aqui entradas de
ponto de objeto e fornecer
dentro de nossos erros de back-end. E, como você pode
ver, estamos obtendo um formato
tão bom como
uma matriz de matrizes. E cada matriz
aqui é antes de tudo, siga uma chave e o valor
é o que tínhamos aqui. Portanto, temos um valor com erros e por dentro
temos nossos erros. E esse é um formato muito
confortável para funcionar para nós porque não
podemos chamar mapa em
JavaScript no objeto. É por isso que o que
queremos fazer aqui, queremos antes de tudo, criar alguma
propriedade normal pode ser erros de back-end legíveis por
humanos. E agora queremos chamar
aqui entradas de ponto de objeto. E queremos fornecer
dentro de nossos erros de back-end. Na verdade, agora temos
uma matriz de matrizes e podemos mapear aqui
todos os valores. E você já viu
o que chegamos aqui. Estamos recebendo uma
matriz com e-mail como chave e algum valor. E, na verdade, aqui eu
quero usar essa
estruturação regular para obter antes de
tudo o nosso loop chave e segundo, estamos recebendo nosso valor. Essa é a maneira mais fácil de
usar o mapa no objeto. E aqui estamos
recebendo em primeiro lugar, nosso campo e, em segundo lugar,
valor com os erros. É por isso que devemos
preparar nossos erros. Nesse caso, vamos
nomeá-los, por exemplo, mensagens de
campo e
devemos concatená-las. Assim, podemos escrever aqui erros de ponto de
valor. Então, estamos recebendo nossa
série de erros. E agora aqui precisamos
mapear cada erro. Aqui estamos chamando
mapa sem erros e queremos retornar a mensagem
de erro. E como você pode ver
aqui, isso é verdade. Temos aqui uma matriz
com objetos e cada objeto
contém nossa mensagem. Aqui estamos apenas
mapeando essas mensagens. E depois desse grupo
queria obter o nome deles. Aqui vou colocar juntar vírgula e espaço porque nascemos para
ter uma boa corda legível. E depois disso,
simplesmente precisamos retornar nossa string porque
estamos dentro do mapa aqui. Eu quero usar aqui o
script ECMO sexta string, e dentro eles
queriam fornecer nossa chave. Mas aqui está o problema. Como você pode ver, ele está
sempre em maiúsculas. Primeiro de tudo, devemos
capitalizá-lo e já
fizemos isso
em vídeos anteriores. É aqui que podemos
nomear o campo capitalize
e, na verdade, acho que
preencha esse nome melhor. Então, vamos renomear
nossa chave para campo. E agora aqui
devemos chamar em campo, antes de tudo caractere em 0. Neste caso, somos tomados
nosso primeiro elemento e
queremos concatenar que
foi preenchido fatia de pontos. E aqui estamos colocando um, foram cortados em um símbolo. Nesse caso, é nosso nome em
maiúsculas do campo. Agora aqui devemos fornecer
esse campo em maiúsculas, e aqui D é importante. Em outro caso, podemos
pensar que esta é uma função e depois disso
foi simplesmente colocado espaço na coluna. E aqui nossas mensagens de campo. O que estamos fazendo aqui,
estamos mapeando nossas entradas de objetos onde obtendo diretamente nosso campo e valor. Primeiro de tudo, estamos nos juntando às
nossas mensagens de campo. E em segundo lugar, estamos
capitalizando nosso campo e agora estamos retornando stream
para cada erro. Vamos verificar isso. Estou recarregando nossa página e
vamos verificar o que
temos dentro de erros
legíveis por humanos. E, como você pode ver, esta é nossa boa matriz
no formato correto. Então, temos aqui strings para cada campo e
capitalizamos o nome
de cada campo. E aqui
juntamos nossos erros, o que significa que somos bem-sucedidos
para resolver esse problema e transformar dados
no formato correto.
50. Lista aninhada: Você também pode obter uma
pergunta como essa. Transforme
a lista simples em lista aninhada. E isso é algo
super real. Normalmente, a partir do back-end, você está recebendo todos os dados
como uma lista simples e normalmente, esses dados podem ter
filhos uns dos outros. que realmente significa para
nós no front-end, não
é confortável
renderizar esses dados. Podemos simplesmente ir com o loop for
porque temos filhos. Precisamos antes de
tudo renderizar em pequenos níveis e, em seguida,
para cada elemento, encontrar seus filhos
e renderizá-los. É por isso que normalmente você
deseja transformar seus dados de lista simples para lista
aninhada apenas uma vez. E isso é exatamente o que
devemos fazer neste vídeo. Como você pode ver aqui, temos nossa lista
simples e cada elemento é um objeto. Temos um ID exclusivo, algum nome e dados pais. E antes de tudo, é
importante porque este é nosso identificador exclusivo
e, em segundo lugar, ID
pai e pode
ser adicionado de outro item. Por exemplo, aqui, pai um, este é esse item. Portanto, esse objeto é
pai desse item. E, em segundo lugar,
os dados pai podem ser nulos se este
for um elemento raiz e
não tiver um pai. Então, como você pode ver aqui, temos dois elementos raiz
com ad1 e dois. Agora temos um D3, que é o filho
do pai edu one. Então este é o segundo nível. É aqui que o nome dele
nível dois, item três. Então você entende o nível. E agora temos um padrão, que aparentemente é D três, o que realmente significa que
este é um filho
desse elemento e, na verdade,
esse pai três é esse. É por isso que é nível
três, item quatro. E aqui temos o ad5, que na verdade é
filho do pai D dois, o que significa esse item e na verdade, é
assim que normalmente estamos obtendo dados do back-end. Agora devemos
transformá-lo em tal formato. Então, temos uma matriz plana
com apenas dois elementos. Então, como você pode ver aqui, temos dois objetos objeto com
81 e o objeto com ad2 porque eles
são ambos através elementos e seus dados
pai são agora. Agora, dentro, temos uma
nova propriedade para crianças. E isso é exatamente crianças
que são mapeadas por dentro. E aqui, como você pode
ver, temos ad3 e também crianças
dentro porque na verdade ad4 está aninhado dentro D três e exatamente
o mesmo que temos aqui. Temos dentro de D dois filhos
e aqui ad5 e crianças. E omiti os nomes aqui porque eles não são
importantes para o entendimento. Mas, obviamente, você pode ter todas as propriedades adicionais aqui. E como você pode ver
no último nível, um, você não
tem filhos. Então entramos aqui,
crianças, matriz vazia. Portanto, nossa tarefa agora é transformar a lista
simples em lista aninhada. E como o ancião
disse anteriormente, para algumas pessoas é muito
mais fácil apenas tentar apontar como elas vão resolvê-lo e depois apenas codificá-lo. É por isso. Vamos tentar fazer isso agora. Então, antes de tudo, vou escrever aqui para fazer o que estamos fazendo. O primeiro ponto é livrar-se de elementos porque é isso
que queremos renderizar. Vamos tentar, assim, obter os elementos raiz. Portanto, devemos ter uma matriz
de nossos elementos raiz. O segundo ponto é
verificar todas as crianças e entender se nossos dois
elementos têm filhos. Se não, então simplesmente os
devolvemos hoje. Se sim, precisamos
recursivamente encontrar crianças. E devemos fazê-lo recursivamente
porque precisamos
verificar cada elemento
e verificar se ele tem filhos. Então podemos escrever aqui
algo assim. Verifique as crianças se
elas têm filhos. E agora o próximo ponto
será, se não, então apenas devolvemos o item
com filhos vazios. E o número quatro aqui é, se sim, então queremos
ir para o número dois, o que realmente significa que
estamos fazendo o número dois recursivamente até que estejamos
no final de nossos elementos. Agora vamos tentar escrever o código. Então, antes de tudo, quero
atribuí-lo à nossa lista aninhada. E o que eu quero fazer, quero pegar nossa lista plana
e encontrar pequenos elementos. E para isso, podemos usar o
filtro porque queremos
encontrar todos os elementos onde
nosso ID pai está agora. Nesse caso, podemos simplesmente
dizer que temos nosso item e o
ID dos pais do ponto do item é igual a nulo. Então, estamos prontos para ir. Vamos verificar isso.
Hora de carregar na página. E agora temos nossa lista aninhada. Como você pode ver, temos
nossa matriz de objetos. E aqui temos 81 e 82 porque seus
pais. Estes são agora. Isso é exatamente o que queríamos. Depois disso, quero apenas escrever esse mapa e dentro da
função quando crianças. Por que estou fazendo assim? Porque, na verdade, essa
função será chamada recursivamente e seria uma função completamente sem estado, o que realmente
significa que devemos chamar essa função em qualquer
item e ela deve funcionar. Isso é o que eu
quero criar aqui. Nossa função ADD children
e recebemos aqui um item , mas não precisamos de mais
nada, porque aqui temos nossa
lista simples no topo. Se você não o tiver
disponível na parte superior, talvez você possa obter
aqui um segundo argumento, uma lista simples em seu código, mas estará em
seu projeto real. Aqui temos acesso
à nossa lista fugida. Então, o que estamos fazendo aqui, estamos percorrendo
nossos elementos raiz e estamos mapeando em crianças, o que realmente significa
se quisermos adicionar filhos a
cada elemento de rota. Então, antes de tudo,
devemos encontrar nossos filhos. Então, vamos aqui, crianças. E sabemos que nossos
filhos são apenas uma lista simples, que é filtrada por dados
pais, onde ID é igual a
ID do ponto do item. Então, vamos fazer isso. Agora, simplesmente pegamos uma lista
simples, filtro de pontos, e aqui temos nosso filho e vamos
nomeá-lo, por exemplo, item
filho e queremos verificar o ID pai do ponto do item
filho igual
ao ID do ponto do item do caso. Nesse caso, estamos
encontrando todos os nossos filhos. Vamos console.log
o que temos aqui. Então, estou apenas escrevendo crianças
sublinhadas na página. E como você pode ver aqui,
temos um único elemento, porque este é um filho do elemento
fotográfico com um D1. E aqui
também temos mais um filho de fruto elemento com pai 82, o que realmente significa que ele
está funcionando corretamente. O próximo ponto é verificar
se temos filhos. Então aqui podemos escrever. Se nossos filhos durarem
maiores que zero, então devemos fazer nossa magia
recursiva porque precisamos não apenas de
ter filhos de crianças, mas devemos fazê-lo recursivamente. O que eu quero fazer
antes de criar um rapaz de propriedade foi próprio para
as crianças e eles querem atribuir aqui matriz
vazia porque,
na verdade, se
não estamos dentro do SIF,
não precisamos mudar qualquer coisa. Simplesmente precisamos
devolver crianças vazias. E como você pode
ver, atribuí por padrão matriz vazia aqui para que
possamos retornar aqui objeto
atribuir e aqui estou eu. Certo, um objeto vazio
depois vírgula, item, vírgula. E aqui estão nossos filhos. Crianças aninhadas. Por que
eu escrevi assim? Porque, na verdade, se
você usar aqui push ou apenas com armazenado, você está dizendo que aqui
estão nossos filhos aninhados. Em seguida, você mudará o item, que significa que você
mudará esse item dentro da lista
simples porque temos uma referência de objeto.
Não queremos isso. Nós simplesmente queremos
retornar seus dados. É por isso que estou usando aqui objeto atribuir com objeto vazio. Depois disso, estamos usando nosso item, então copiamos
todas as propriedades do nosso item dentro desse novo objeto e fomos registrados aqui em
seus filhos de propriedade, o que é nosso tipo para as crianças. E neste caso, simplesmente
deixamos as crianças aninhadas
esvaziarem objeto. Vamos verificar isso.
Hora de carregar na página. Aqui está nossa lista aninhada. E como você pode ver, agora temos uma matriz vazia de
filhos porque na verdade não escrevemos
nenhuma lógica para esta véspera. É por isso que simplesmente
retornamos dados em tal formato ID ID pai na verdade, todos os campos e,
adicionalmente, filhos. E como você pode ver, temos
aqui apenas dois elementos, o que realmente significa que tudo
está funcionando corretamente e devemos apenas chamar
recursivamente aqui nosso código. Então, o que queremos fazer aqui, queremos examinar
cada criança e ligar para a
função de crianças nesta criança. Assim, podemos atribuir aqui
nossos filhos aninhados. E isso é apenas nossos
filhos, esse mapa. E temos acesso a
todas as crianças. E estamos chamando isso de
crianças com nosso filho. Então, o que está acontecendo
neste caso? Por exemplo, encontramos a criança. Estamos verificando aqui, ok? Temos um filho
em, digamos, crianças. E aqui estamos
mapeando nosso array. E para cada elemento único
chamavam para crianças a parte
mais importante que foram Colin isso funciona
recursivamente. Primeiro de tudo, chamamos isso
aqui dentro do elemento raiz. Agora aqui dentro das crianças
estava Colin era mapa. E quando nós estávamos
chamando aqui eram filhos de
frango dessa criança, o que realmente significa que ela vai recursivamente até que
não tenhamos filhos e simplesmente
não vamos para essa condição. Então, por exemplo, no nosso caso, aqui estavam Colin três vezes. Primeiro de tudo, para
você fazer um, então para ID3 e, em seguida, por um padrão. E é exatamente por isso que precisamos recursão aqui. Vamos
verificar isso. Hora de carregar na página. Vamos verificar nossa lista aninhada. E como você pode ver, agora
temos filhos. E dentro do item um, temos apenas uma criança com ad3, e também temos uma propriedade
infantil dentro e temos mais
um filho aqui, nível três, item quatro, e temos filhos vazios porque, na verdade, nossa recursão terminou e simplesmente chegamos aqui crianças
vazias e
nós as atribuímos aqui. Então, mais uma vez, antes de tudo, devemos obter todos os elementos da
nossa estrada. Em segundo lugar, temos de criar
uma função que
podemos chamar recursivamente
em qualquer elemento. E estes são nossos filhos. Agora, por dentro, as crianças
estavam, em primeiro lugar, tentando encontrar todas as
crianças do item
e, em segundo lugar, urso frango. Se precisarmos fazer recursão para nossos filhos,
se tivermos alguma. Se sim, então somos Colin
em crianças recursivamente. Se não, simplesmente fazemos um objeto atribuir e o retorno
aqui nossos filhos. Então, é assim que você costuma
fazer isso no projeto real.
51. Trabalho de casa: Você
concluiu meu curso com sucesso sobre a preparação para a entrevista
JavaScript. E eu acho que você é incrível se você
terminar juntos, implementamos 59 perguntas de
entrevista em JavaScript. E, na verdade, muitos
deles não foram fáceis se você não
experimentasse sozinho, mas apenas seguisse o empréstimo. Você ainda pode fazer isso. Você pode simplesmente escolher
um vídeo aleatoriamente e tentar
implementá-lo sozinho, mesmo que você o
tenha visto uma vez, faz muito sentido
tentar fazê-lo. Além disso, eu só queria
lembrá-lo de não estar deprimido. Se você falhar na entrevista, ela virá com o tempo e você certamente
encontrará sua costeleta. Você só precisa
reunir mais conhecimento, entender qual pergunta
você está sendo feita
nas entrevistas e se
preparar melhor. Espero que você tenha
aprendido muito e eu vou vê-lo no
meu próximo curso.