
Bom dia amigos!
Aqui está uma lista das 100 principais perguntas básicas sobre JavaScript deste repositório com respostas curtas e links para o Tutorial de JavaScript moderno (JSR) e MDN de Ilya Kantor.
Esta lista, junto com mais de 300 questões práticas, estão disponíveis em meu aplicativo .
O aplicativo implementa um mecanismo de memorização da questão estudada, além de possibilitar o trabalho no modo offline.
Peço desculpas por quaisquer possíveis erros e erros tipográficos. Qualquer forma de feedback é apreciada.
Edição de 14.09.
Veja a continuação aqui .
1. Como criar um objeto?
Existem várias maneiras de fazer isso. Alguns deles são:
Literal de objeto:
const object = {}
Construtor de objeto (não recomendado):
const object = new Object()
Método Object.create () Ao usar este método, um objeto é passado a ele como um argumento, que se tornará o protótipo do novo objeto.
// -
const object = Object.create(null)
Função construtora Criamos uma função construtora e usamos o operador "novo" para criar uma instância dessa função - um objeto:
function Person (name) {
const object = {}
object.name = name
object.age = 30
return object
}
const user = new Person('')
Classe:
class Person {
constructor(name) {
this.name = name
}
}
const user = new Person('')
JSR
MDN
2. O que são protótipos?
Protótipos são usados para criar novos objetos baseados nos já existentes. Essa técnica é chamada de herança prototípica. O protótipo de uma instância de um objeto está disponível através de Object.getPrototypeOf (objeto) ou da propriedade __proto__ ([[Prototype]] propriedade oculta interna).

JSR
MDN
3. Qual é a diferença entre call (), apply () e bind ()?
A diferença entre esses métodos é mais fácil de explicar com exemplos.
O método call () chama uma função com o valor especificado e os argumentos separados por vírgulas.
const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }
function invite (greet1, greet2) {
console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}
invite.call(employee1, '', ' ?') // , . ?
invite.call(employee2, '', ' ?') // , . ?
O método apply () chama uma função com o valor especificado e argumentos de matriz.
const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }
function invite (greet1, greet2) {
console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}
invite.apply(employee1, ['', ' ?']) // , . ?
invite.apply(employee2, ['', ' ?']) // , . ?
O método bind () retorna uma nova função com o valor especificado e permite que você passe uma matriz ou qualquer número de argumentos separados por vírgulas para ela.
const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }
function invite (greet1, greet2) {
console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}
const inviteEmployee1 = invite.bind(employee1)
const inviteEmployee2 = invite.bind(employee2)
inviteEmployee1('', ' ?') // , . ?
inviteEmployee2('', ' ?') // , . ?
Portanto, os métodos call () e apply () chamam a função após ela ter sido associada a um objeto. A diferença entre os dois é a forma como os argumentos são passados. Essa diferença é fácil de lembrar com as primeiras letras dos métodos: call é uma vírgula (vírgula, c), apply é um array (array, a). O método bind () retorna uma nova função associada ao objeto especificado.
JSR - Chamar / Aplicar
JSR - Ligar
MDN - Chamar
MDN - Aplicar
MDN - Ligar
4. O que é JSON e quais métodos ele possui?
JSON é um formato de dados textuais baseado na sintaxe do objeto JavaScript inventado por Douglas Crockford. É usado para transferir dados pela rede e geralmente tem a extensão .json e o tipo MIME application / json.
Análise: converte uma string JSON em um objeto.
JSON.parse(text)
Stringificação: converte um objeto em uma string JSON para transmissão pela rede.
JSON.stringify(object)
JSR
MDN
5. O que o método Array.slice () faz?
O método slice () retorna os elementos selecionados da matriz como uma nova matriz. Ele retorna itens começando no índice especificado no primeiro argumento e terminando, mas não incluindo, o índice especificado no segundo argumento opcional. Se o segundo argumento estiver ausente, todos os elementos começando no índice especificado no primeiro argumento serão recuperados.
const arrayIntegers = [1, 2, 3, 4, 5]
const arrayIntegers1 = arrayIntegers.slice(0, 2) // [1, 2]
const arrayIntegers2 = arrayIntegers.slice(2, 3) // [3]
const arrayIntegers3 = arrayIntegers.slice(4) // [5]
Observe que este método não modifica a matriz original, mas apenas retorna um subconjunto dela como uma nova matriz.
JSR
MDN
6. O que o método Array.splice () faz?
O método splice () é usado para adicionar ou remover elementos de ou para um array. O primeiro argumento especifica a posição inicial para adicionar ou remover elementos, o segundo argumento opcional especifica o número de elementos a serem removidos. Cada argumento subsequente (terceiro, etc.) é adicionado à matriz:
let arrayOriginal1 = [1, 2, 3, 4, 5]
let arrayOriginal2 = [1, 2, 3, 4, 5]
let arrayOriginal3 = [1, 2, 3, 4, 5]
let array1 = arrayOriginal1.splice(0, 2) // [1, 2]; = [3, 4, 5]
let array2 = arrayOriginal2.slice(3) // [4, 5]; = [1, 2, 3]
let array3 = arrayOriginal3.slice(3, 1, 'a', 'b', 'c') // [4]; = [1, 2, 3, 'a', 'b', 'c']
Observe que o método splice () modifica a matriz original e retorna uma matriz dos elementos extraídos.
JSR
MDN
7. Qual é a diferença entre slice () e splice ()?
As principais diferenças são as seguintes:
Fatia | Emenda |
---|---|
Não muda a matriz original | Modifica a matriz original |
Retorna um subarray do array original | Retorna os elementos removidos como uma matriz |
Usado para recuperar elementos de uma matriz | Serve para adicionar / remover elementos de / para uma matriz |
JSR
MDN - Slice
MDN - Splice
8. Como objetos e mapas se comparam?
Os objetos são semelhantes aos mapas, pois ambos permitem definir as chaves dos valores, recuperar valores, excluir chaves e determinar se um valor está presente por chave. Por esse motivo, os objetos costumavam ser usados como mapas. No entanto, existem algumas diferenças entre eles que tornam o uso de cartões mais preferível em certos casos.
- As chaves de objeto podem ser apenas strings e símbolos, e as chaves de mapa podem ser quaisquer valores, incluindo funções e objetos
- As chaves do mapa são ordenadas, mas as chaves do objeto não. Assim, ao iterar, as chaves do mapa são retornadas na ordem em que foram adicionadas
- Você pode obter o tamanho do mapa usando a propriedade size e o número de propriedades do objeto é definido manualmente
- Um mapa é uma entidade iterável e, para iterar sobre um objeto, você deve primeiro obter suas chaves de alguma forma e, em seguida, iterar sobre elas
- Ao usar um objeto como mapa, lembre-se de que qualquer objeto tem um protótipo, portanto, as próprias chaves do mapa podem se sobrepor às chaves definidas pelo usuário. Portanto, Object.create (null) deve ser usado para criar um objeto de mapa, mas agora esse método raramente é usado.
- O objeto é inferior ao mapa em termos de desempenho quando se trata de adicionar / remover chaves rapidamente
JSR
MDN
9. Qual é a diferença entre os operadores "==" e "==="?
JavaScript fornece duas maneiras de comparar valores: estrito (=== ,! ==) e abstrato (== ,! ==). Em uma comparação estrita, os valores são comparados como estão e em uma comparação frouxa, se necessário, uma conversão implícita (conversão) de tipos de valor é executada. Operadores estritos usam as seguintes regras para comparar diferentes tipos de valores:
- Duas strings são estritamente iguais quando têm o mesmo conjunto de caracteres, o mesmo comprimento e os mesmos caracteres nas mesmas posições
- Dois números são estritamente iguais se seus valores forem iguais. Existem dois casos especiais:
- NaN é igual a nada, incluindo NaN
- Zeros positivos e negativos são iguais um ao outro
- Os valores booleanos são estritamente iguais quando ambos são verdadeiros ou falsos, ou seja, verdadeiro ou falso
- Dois objetos são estritamente iguais se eles se referem ao mesmo objeto (local da memória)
- null === undefined retorna falso e null == undefined retorna verdadeiro
Alguns exemplos:
0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[] == [] //
[] === [] // false,
{} == {} //
{} === {} // false,
JSR
MDN
10. O que são lambda ou funções de seta?
As funções de seta são uma forma abreviada de escrever expressões funcionais. Eles não têm seus próprios this, arguments, super e new.target. Essas funções servem como uma boa alternativa para funções que não têm métodos, mas não podem ser usadas como construtores.
function regularSum (x, y) {
return x + y
}
const arrowSum = (x, y) => x + y
JSR
MDN
11. Por que as funções são chamadas de objetos de primeira classe?
Em JavaScript, as funções são objetos de primeira classe. Isso significa que as funções podem ser usadas como variáveis regulares.
Por exemplo, uma função pode ser passada como um argumento para outra função, retornada como um valor de outra função e atribuída a uma variável. O exemplo a seguir atribui uma função a um manipulador:
const handler = () => console.log(' - ')
document.addEventListener('click', handler)
JSR
MDN
12. O que é uma função de primeira ordem?
Uma função de primeira ordem é uma função que não assume outra função como argumento e não retorna uma função como valor:
const firstOrder = () => console.log(' - ')
JSR
MDN
13. O que é uma função de ordem superior?
Uma função de ordem superior é aquela que recebe outra função como argumento ou retorna outra função como valor:
const firstOrderFun = () => console.log(' - ')
const higherOrder = returnFirstOrderFun => returnFirstOrderFun()
higherOrder(firstOrderFunc)
JSR
MDN
14. O que é uma função unária?
Uma função unária (função monad) é uma função que leva apenas um argumento:
const unaryFun = a => console.log(a + 10) // 10
JSR
MDN
15. O que é currying?
Currying é o processo de converter uma função com vários parâmetros em várias funções com um parâmetro. Este processo recebeu o nome do matemático Haskell Curry. Currying transforma uma função n-ária em várias funções unárias (reduz a aridade da função):
const sum = (a, b, c) => a + b + c
const currySum = a => b => c => a + b + c
currySum(1) // : b => c => 1 + b + c
currySum(1)(2) // : c => 3 + c
currySum(1)(2)(3) // 6
Currying é usado para permitir a reutilização de código (aplicação de função parcial) e para criar uma composição de funções.
JSR
16. O que é uma função pura?
Uma função pura é uma função cujo valor de retorno depende apenas dos argumentos passados, sem efeitos colaterais. Simplificando, se você chamar uma função n vezes com n argumentos e a função sempre retornar o mesmo valor, ela estará limpa:
//
let numberArray = []
const impureAddNumber = number => numberArray.push(number)
//
const pureAddNumber = number => argNumberArray => argNumberArray.concat([number])
console.log(impureAddNumber(1)) // 1
console.log(numberArray) // [1]
console.log(pureAddNumber(2)(numberArray)) // [1, 2]
console.log(numberArray) // [1]
No exemplo acima, impureAddNumber não é uma função pura porque o método push () retorna o novo comprimento da matriz, que é independente do argumento passado. A segunda função é pura porque o método concat () concatena os dois arrays sem efeitos colaterais e retorna um novo array. Funções puras são essenciais para teste de unidade e não precisam de injeção de dependência. A ausência de efeitos colaterais melhora a confiabilidade do aplicativo devido às conexões mais fracas entre seus elementos. Uma das encarnações desse princípio é o conceito de imutabilidade, introduzido no ES6, que prefere const a let.
JSR
MDN
17. Para que é usada a palavra-chave "let"?
A palavra-chave let declara uma variável local com escopo de bloco. O escopo de tal variável é limitado pelo bloco, operador ou expressão em que é usada. Variáveis declaradas com a palavra-chave "var" têm escopo global ou de função em que são definidas:
let counter = 1
if (counter === 1) {
let counter = 2
console.log(counter) // 2
}
console.log(counter) // 1 ( counter, , )
JSR
MDN
18. Qual é a diferença entre let e var?
As principais diferenças são as seguintes:
var | deixei |
---|---|
Disponível desde JavaScript | Introduzido em ES6 |
Tem escopo global ou funcional | Com escopo de bloco |
As variáveis são içadas para o início do escopo | Variáveis também são içadas, mas não inicializadas (apenas declaração é içada, não atribuição de valor) |
Alguns exemplos:
function userDetails(username) {
if (username) {
console.log(salary)
console.log(age)
let age = 30
var salary = 10000
}
console.log(salary) // 10000 ( )
console.log(age) // SyntaxError: "age" is not defined ( )
}
JSR
MDN - deixe
MDN - var
19. Por que a palavra "deixar" foi escolhida como palavra-chave?
Let é um operador matemático usado pelas primeiras linguagens de programação, como Scheme e Basic. Hoje em dia let é usado por um grande número de linguagens de programação, então essa palavra é a alternativa mais próxima à abreviação "var" (variável).
JSR
MDN
20. Como substituir uma variável em um bloco de switch?
Se você tentar substituir uma variável declarada com a palavra-chave "let" em um bloco switch, receberá um erro:
let counter = 1
switch(x) {
case 0:
let name
break
case 1:
let name // SyntaxError
break
}
Para resolver este problema, você precisa criar um novo bloco dentro do caso - um novo escopo léxico:
let counter = 1
switch(x) {
case 0: {
let name
break
}
case 1: {
let name
break
}
}
JSR
MDN
21. O que é uma zona morta temporária?
Se você tentar acessar variáveis declaradas com a palavra-chave "let" ou "const" (mas não "var"), antes de serem definidas (isto é, antes de serem atribuídos a um valor no escopo atual), uma exceção ReferenceError será lançada. ) Em outras palavras, o fuso horário é o tempo entre a criação do contexto (escopo) de uma variável e sua definição:
function someMethod () {
console.log(counter1) // undefined
console.log(counter2) // ReferenceError
var counter1 = 1
const counter2 = 2
}
MDN
22. O que é uma expressão de função invocada imediatamente (IIFE)?
IIFE é uma função chamada imediatamente após a definição. A sintaxe para tal função pode ser semelhante a esta (uma das opções, a mais comum):
(function () {
//
})()
// ,
(() => {
//
})()
A principal razão para usar o IIFE é manter as variáveis privadas, uma vez que as variáveis declaradas dentro do IIFE não podem ser acessadas do ambiente externo:
(function () {
var message = 'IIFE'
console.log(message)
})()
console.log(message) // SyntaxError: "message" is not defined
JSR
MDN
23. Quais são os benefícios de usar módulos?
Entre outros, podem ser mencionados os seguintes:
- Melhorar a legibilidade e facilitar a manutenção do código
- Código reutilizável
- Mantendo o namespace global limpo
JSR
MDN
24. O que é memorização ou memoização?
Memoização é uma maneira de melhorar o desempenho de uma função, armazenando resultados recebidos anteriormente dessa função no cache. Cada vez que a função é chamada, o argumento passado a ela se torna o índice do cache. Se os dados estiverem no cache, eles serão retornados sem executar novamente a função. Caso contrário, a função é executada e o resultado é gravado no cache:
const memoAdd = () => {
let cache = {}
return value => {
if (value in cache) {
console.log(' ')
return cache[value] // , cache.value , JavaScript .
} else {
console.log(' ')
let result = value + 20
cache[value] = result
return result
}
}
}
// memoAdd
const add = memoAdd()
console.log(add(20)) // 40
console.log(add(20)) // 40
25. O que é içar?
Içar é o processo de mover variáveis e expressões de função para o início de seu escopo antes de executar o código. Lembre-se: apenas as variáveis e expressões em si são suspensas, não sua inicialização (ou seja, a declaração da variável é suspensa, não a atribuição de um valor a ela):
console.log(message) // undefined
var message = '!'
Para o intérprete, este código se parece com este:
var message
console.log(message)
message = '!'
JSR
MDN
26. O que é uma aula?
As classes introduzidas no ES6 são sintáticas (wrapper, abstração ou add-on) para herança de protótipo (para protótipo de função de construtor). Exemplo de uma função construtora:
function Bike(model, color) {
this.model = model
this.color = color
}
Bike.prototype.getDetails = function () {
return ' ' + this.model + ' ' + this.color + ' .'
}
Mesmo exemplo usando classe:
class Bike {
constructor (color, model) {
this.color = color
this.model = model
}
getDetails () {
return \` ${this.model} ${this.color} .\`
}
}
JSR
MDN
27. O que é um fechamento?
Um fechamento é uma combinação de uma função e seu ambiente lexical. Simplificando, um encerramento é quando uma função interna tem acesso a variáveis declaradas em uma função externa. Um fechamento tem uma cadeia de três escopos:
- Escopo próprio
- Escopo de função externa
- Âmbito global
const welcome = name => {
const greet = message => {
console.log(\`${message}, ${name}!\`)
}
return greet
}
const fun = welcome('')
fun('') // , !
JSR
MDN
28. O que é um módulo?
Módulos são pequenos pedaços de código independente e reutilizável que sustentam muitos padrões de design. A maioria dos módulos é exportada como objetos, funções ou construtores.
JSR
MDN
29. Qual é o escopo?
O escopo define a disponibilidade de variáveis, funções e objetos em diferentes lugares no código durante sua execução. Em outras palavras, o escopo é a visibilidade de variáveis e outros recursos no contexto atual de execução de código.
MDN
30. O que é um prestador de serviço?
Um service worker é um script executado independentemente da página da web em que é executado e das ações do usuário. Na verdade, o service worker atua como um servidor proxy entre o aplicativo e o navegador. Os principais recursos dos service workers são os seguintes: garantir que o aplicativo esteja offline, sincronização periódica em segundo plano, notificações push, interceptar e processar solicitações de rede e gerenciar o cache de maneira programática.
MDN
31. Como interajo com o Document Object Model (DOM) usando service workers?
Os service workers não têm acesso direto ao DOM. No entanto, eles podem interagir com a página por meio da interface postMessage e a página pode modificar o DOM.
MDN - ServiceWorker
MDN - postMessage
32. Como reutilizar informações ao reiniciar um service worker?
Um dos problemas com os service workers é que eles param de executar quando não estão em uso e reiniciam quando necessário. Isso evita que você adicione manipuladores de eventos de busca e mensagem globalmente. Para reutilizar as informações, é necessário garantir que os service workers interajam com um banco de dados indexado (IndexedDB) ou armazenamento local (armazenamento local).
MDN
33. O que é um banco de dados indexado (IndexedDB)?
IndexedDB é uma API de baixo nível para armazenar grandes quantidades de dados estruturados, incluindo arquivos e blobs, no lado do cliente. Essa interface usa índices para melhorar a velocidade de recuperação de dados.
JSR
MDN
34. O que é armazenamento na Web?
O armazenamento na Web é uma interface que permite armazenar dados como pares de chave / valor localmente, ou seja, no navegador do usuário, de forma mais conveniente do que usando cookies. O armazenamento na Web oferece dois mecanismos de armazenamento:
- Armazenamento local (stotage local) - armazena os dados do usuário atual por um período de tempo ilimitado
- Armazenamento de sessão - armazena dados durante a sessão atual, ou seja, ao fechar a guia do navegador, os dados serão perdidos
JSR
MDN
35. O que é postMessage?
postMessage é uma forma de comunicação entre diferentes fontes do objeto de janela (por exemplo, uma página e o pop-up que ela gera (uma janela pop-up) ou uma página e um iframe incorporado). Normalmente, os scripts em uma página não têm acesso a outra página se essa página seguir a Origem Comum ou Política de Origem Única (origem - protocolo, host e porta).
MDN - postMessage
36. O que são cookies?
Um cookie é um pequeno pedaço de dados armazenado no computador do usuário para uso posterior por um navegador. Os cookies são armazenados como pares de chave / valor:
document.cookie = 'username='

JSR
MDN
37. Por que precisamos de cookies?
Os cookies são usados para salvar informações sobre o usuário (não é recomendado para armazenar informações confidenciais). Normalmente, esse processo consiste em duas etapas:
- Na primeira visita à página, o perfil do usuário é salvo em um cookie
- Ao revisitar a página, o perfil do usuário é recuperado do cookie
JSR
MDN
38. Quais são os recursos dos cookies?
Por padrão, os cookies são excluídos quando o navegador é fechado; no entanto, isso pode ser alterado definindo expira em UTC:
document.cookie = 'username=; expires=Sat, 5 Sep 2020 12:00:00 UTC'
Por padrão, os cookies pertencem à página atual, no entanto, isso também pode ser alterado definindo o caminho:
document.cookie = 'username=; path=/services'
JSR
MDN
39. Como excluo cookies?
Você pode excluir cookies definindo o tempo decorrido como o tempo de vida. Nesse caso, você não precisa definir um valor de cookie:
document.cookie = 'username=; expires=Sat, 05 Jun 2020 00:00:00 UTC; path=/;'
Observe que, neste caso, é necessário determinar o caminho para excluir o cookie correto. Alguns navegadores não permitem que você exclua cookies sem especificar este parâmetro.
JSR
MDN
40. Qual é a diferença entre cookies, armazenamento local e armazenamento de sessão?
As principais diferenças são as seguintes:
Critério | Biscoitos | Armazenamento local | Armazenamento de sessão |
---|---|---|---|
Disponibilidade | Tanto no servidor quanto no cliente | Apenas cliente | Apenas cliente |
Tempo de vida | Instalado com expira | Até que o usuário exclua | Até que a guia do navegador seja fechada |
Suporte para criptografia | Com suporte | Não suportado | Não suportado |
Tamanho máximo de dados | 4 kb | Cerca de 5 MB (dependendo do navegador) | Cerca de 5 MB (dependendo do navegador) |
JSR - Cookies
MDN - Cookie
JSR - LocalStorage, SessionStotage
MDN - Armazenamento na Web
41. Qual é a principal diferença entre armazenamento local e de sessão?
O armazenamento local é igual ao armazenamento da sessão, exceto que, no primeiro, os dados são salvos mesmo quando você fecha e reinicia o navegador e, no segundo, os dados são excluídos ao final da sessão (fechando a guia do navegador).
JSR
MDN
42. Como faço para acessar o armazenamento na web?
O objeto window fornece objetos WindowLocalStorage e WindowSessionStorage que possuem propriedades localStorage e sessionStorage, respectivamente. Essas propriedades criam uma instância de um objeto Storage, com a qual você pode gravar, recuperar e excluir dados para um domínio específico e tipo de armazenamento (sessão ou local):
//
localStorage.setItem('data', document.querySelector('.data').value)
//
localStorage.getItem('data')
JSR
MDN
43. Quais métodos o armazenamento de sessão fornece?
O armazenamento de sessão fornece métodos para ler, gravar e excluir dados:
//
sessionStorage.setItem('key', 'value')
//
const data = sessionStorage.getItem('key')
//
sessionStorage.removeItem('key')
//
sessionStorage.clear()
JSR
MDN
44. Que evento ocorre ao trabalhar com o armazenamento da web?
Quando o armazenamento muda no contexto de outro documento, o evento de armazenamento é gerado:
window.onstorage = function () {}
Um exemplo de manipulação deste evento:
window.onstorage = event => {
console.log(\`${event.key} .
: ${event.oldValue}.
: ${event.newValue}.\`)
}
Este evento permite implementar uma espécie de chat.
JSR
MDN
45. Para que é usado o armazenamento na web?
O armazenamento na Web é mais seguro e pode armazenar mais dados do que cookies sem afetar o desempenho. Além disso, nenhum dado é enviado ao servidor (no caso de cookies, os dados são incluídos nos cabeçalhos de solicitação e resposta cada vez que o cliente acessa o servidor). Portanto, esta forma de armazenamento de dados é preferível aos cookies.
JSR
MDN
46. Como posso determinar se um navegador oferece suporte para armazenamento na Web?
Antes de usar o armazenamento da web, é recomendável verificar o suporte do navegador para esta interface:
if (typeof(Storage) !== 'undefined') {
//
} else {
// -
}
//
if ('Storage' in window) {
console.log('ok')
} else {
console.warn(' ok')
}
De acordo com CanIUse , o suporte ao armazenamento web é de 98% hoje.
JSR
MDN
47. Como posso determinar se um navegador oferece suporte a service workers?
Antes de usar service workers, é recomendável verificar o suporte do navegador para esta interface:
if (typeof(Worker) !== undefined) {
//
} else {
// -
}
//
if ('Worker' in window) {
console.log('ok')
} else {
console.warn(' ok')
}
De acordo com a CanIUse , o suporte ao service worker é de 94% hoje.
MDN
48. Dê um exemplo de um trabalhador da web
Para usar o web worker, você precisa fazer o seguinte.
Crie um arquivo para o trabalhador, por exemplo get-current-time.js:
const getCurrentTime = () => {
let time = new Date().toLocaleTimeString()
postMessage(time)
setTimeout(() => getCurrentTime(), 1000)
}
getCurrentTime()
O método postMessage () é usado para enviar mensagens para a página.
Crie um objeto de trabalho:
const worker = new Worker('get-current-time.js')
Depois disso, processamos o recebimento das mensagens do trabalhador:
<output></output>
<button></button>
worker
.addEventListener('message', event => document.querySelector('output')
.textContent = event.data)
O trabalhador continuará a processar o evento de mensagem mesmo depois que o script externo concluir seu trabalho, portanto, ele deve ser interrompido à força:
document.querySelector('button')
.addEventListener('click', () => worker.terminate())
Se você definir o trabalhador como indefinido, poderá reutilizá-lo:
worker = undefined
MDN
49. Quais são as limitações dos web workers para trabalhar com o DOM
Como os web workers são criados em um arquivo separado, eles não têm acesso aos seguintes objetos:
- janela
- Documento
- Objeto pai - o objeto que iniciou o trabalhador
MDN
50. O que é uma promessa?
Uma promessa (comunicação) é um objeto que é executado com algum valor ou rejeitado com um erro. As promessas são resolvidas após um determinado período de tempo ou após a ocorrência de um determinado evento. Uma promessa pode ter um de três estados: pendente, cumprida e rejeitada.
Sintaxe de promessa:
const promise = new Promise((resolve, reject) => {
//
})
// , ,
const promise = Promise.resolve(value)
promise.then(value => {
//
})
Um exemplo de como usar uma promessa:
const promise = new Promise(resolve => {
const timer = setTimeout(() => {
resolve(' !')
clearTimeout(timer)
}, 5000);
}, reject => {
reject('- ')
})
promise
.then(value => console.log(value))
.catch(error => console.error(error))
.finally(() => console.log(' ')) // " !" 5 " "
Algoritmo de resolução de promessa:

JSR
MDN
51. Por que as promessas são necessárias?
As promessas são usadas para trabalhar com código assíncrono. São uma alternativa às funções de callback, evitando o chamado "inferno de callback", tornando o código mais limpo e legível.
JSR
MDN
52. Cite três estados possíveis de uma promessa
As promessas têm três estados:
- Pendente: a etapa antes de iniciar a operação
- Preenchido: operação concluída com sucesso
- Rejeitado: a operação falhou. A exceção é lançada
JSR
MDN
53. O que é uma função de retorno de chamada?
Um retorno de chamada é uma função que é passada para outra função como um argumento. Esta função (interna) é chamada dentro do pai (externo) para realizar uma operação quando ocorre um evento específico. Vejamos um exemplo simples:
function callback(name) {
alert(\`, ${name}!\`)
}
function outer(cb) {
const name = prompt(', ')
cb(name)
}
outer(callback)
No exemplo acima, a função externa pede o nome do usuário e o armazena na variável name. Esta função então passa o nome para a função de retorno de chamada, que produz uma saudação com o nome do usuário.
JSR
MDN
54. Por que os retornos de chamada são necessários?
Retornos de chamada são necessários porque JavaScript é uma linguagem orientada a eventos. Isso significa que, por exemplo, em vez de esperar por uma resposta a uma solicitação ou por um determinado evento a ser processado, o JavaScript continua a responder a outros eventos. Considere um exemplo em que uma função acessa a interface e a outra imprime uma mensagem no console:
function first () {
// API
setTimeout(() => console.log(' '), 1000)
}
function second () {
console.log(' ')
}
first()
second()
// " ", " "
Como você pode ver, o JavaScript não espera a conclusão da primeira função, mas continua a executar o código. Portanto, os retornos de chamada são usados para simular a assincronia, evitando o bloqueio da thread principal do programa.
JSR
MDN
55. O que é inferno de callback?
O inferno de retorno de chamada é um antipadrão onde muitas funções de retorno de chamada são aninhadas umas nas outras para implementar a lógica assíncrona. Essa estrutura de código é difícil de entender e manter. Pode ser assim:
function first () {
return function second () {
return function third () {
return function fourth () {
// ..
}
}
}
}
Essa abordagem de codificação é considerada uma prática inadequada, exceto em casos de currying, aplicação parcial ou composição de funções.
JSR
MDN
56. O que são eventos enviados pelo servidor (SSE)?
O Server Sent Events é uma tecnologia de notificação push que permite que os navegadores recebam dados atualizados do servidor por meio de uma conexão HTTP sem enviar uma solicitação. Esta é uma das formas de comunicação entre o cliente e o servidor, quando as mensagens são enviadas apenas pelo servidor. Esta tecnologia é usada para atualizar o Facebook / Twitter, armazenar preços, feeds de notícias, etc.
JSR
MDN
57. Como receber mensagens (notificações ou eventos) enviadas pelo servidor?
O objeto EventSource é usado para:
if('EventSource' in window) {
const source = new EventSource('sse.js')
source.addEventListener('message', event => document.querySelector('output')
.textContent = event.data)
}
JSR
MDN
58. Como posso verificar o suporte do navegador para SSE?
Isso é feito assim:
if (typeof EventSource !== 'undefined') {
//
} else {
// SSE
}
//
('EventSource' in window)
? console.log('ok')
: console.warn('! ok')
De acordo com CanIUse, 95% dos navegadores são atualmente suportados pelo SSE.
JSR
MDN
59. Que eventos ocorrem ao trabalhar com SSE?
Aqui está uma lista desses eventos:
Evento | Descrição |
---|---|
abrir | Ocorre quando uma conexão com o servidor é aberta |
mensagem | Ocorre ao receber uma mensagem do servidor |
erro | Lançado quando uma exceção é lançada |
JSR
MDN
60. Quais são as regras básicas para trabalhar com promessas?
As regras básicas para trabalhar com promessas são as seguintes:
- Uma promessa é um objeto que contém um método embutido ou padrão then ()
- A fase de espera por uma promessa, geralmente termina com uma fase de seu cumprimento ou rejeição
- O status de uma promessa cumprida ou rejeitada não deve mudar depois de resolvida
- Depois de resolver uma promessa, seu valor também não deve mudar.
JSR
MDN
61. O que é um retorno de chamada em um retorno de chamada?
Você pode aninhar retornos de chamada entre si para executar certas operações sequencialmente:
loadScript('/script1.js', script => {
console.log(\` ${script} \`)
loadScript('/script2.js', script => {
console.log(\` ${script} \`)
loadScript('/script3.js', script => {
console.log(\` ${script} \`)
})
})
})
JSR
MDN
62. O que é uma cadeia de promessa?
A execução sequencial de várias tarefas assíncronas usando promessas é chamada de cadeia de promessa. Vamos considerar um exemplo:
new Promise((resolve, reject) => {
const id = setTimeout(() => {
resolve(1)
clearTimeout(id)
}, 1000)
}).then(result => {
console.log(result) // 1
return result * 2
}).then(result2 => {
console.log(result2) // 2
return result2 * 3
}).then(result3 => {
console.log(result3) // 6
}).catch(error => console.error(error))
Algoritmo de execução:
- A primeira promessa resolve com um valor de 1
- Depois disso, o primeiro método then () imprime esse valor no console e o retorna multiplicado por 2
- O segundo then () imprime o resultado do primeiro then () no console (2) e retorna o resultado multiplicado por 3
- O último then () imprime o resultado do segundo then () no console (6)
- O bloco catch é usado para lidar com erros
JSR
MDN
63. O que é Promise.all ()?
Promise.all () é uma promessa que recebe uma série de outras promessas como argumento e retorna os resultados das promessas cumpridas ou um erro se uma for rejeitada. Sintaxe:
Promise.all([Promise1, Promise2, Promise3])
.then(results => console.log(results))
.catch(error => console.error(error))
Lembre-se de que a ordem em que os resultados são disparados depende da ordem das promessas na matriz.
JSR
MDN
64. O que é Promise.race ()?
Promise.race () retorna o resultado da primeira promessa cumprida ou rejeitada passada como um conjunto de promessas:
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, ''))
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, ''))
Promise.race([promise1, promise2]).then(value => console.log(value)) // ""
JSR
MDN
65. O que é regime estrito?
Para habilitar o modo estrito, use a instrução 'use strict' (ou 'use strict') no início de todo o código ou de uma função individual. O modo estrito foi introduzido no ES5. Neste modo, algumas ações são proibidas e mais exceções são lançadas.
JSR
MDN
66. Por que você precisa de um regime rígido?
O modo estrito permite que você escreva um código mais seguro, evitando a ocorrência de muitos erros. Por exemplo, ele não permite a criação acidental de variáveis globais (sem a palavra-chave, variável = valor), atribuição de um valor a uma propriedade somente leitura, uma propriedade que só pode ser obtida com um getter, uma propriedade inexistente e uma variável ou objeto inexistente. No modo não estrito, nenhuma exceção é lançada em todos esses casos.
JSR
MDN
67. Como habilito a segurança estrita?
O modo estrito é habilitado pela instrução 'use strict' (ou 'use strict') no início de um código ou função. Normalmente, esta instrução é indicada no início do script, ou seja, no namespace global:
'use strict'
x = 3.14 // ReferenceError: "x" is not defined
Se 'usar estrito' for especificado em uma função, o modo estrito se aplicará apenas a essa função:
x = 3.14 //
f() // ReferenceError: "y" is not defined
function f () {
'use strict'
y = 3.14
}
JSR
MDN
68. Para que é usada a dupla negação?
A negação dupla (!!) converte o valor em booleano. Se o valor for falso, então falso será retornado, caso contrário - verdadeiro:
const x = 1
console.log(x) // 1
console.log(!!x) // true
const y = ''
console.log(y) // ''
console.log(!!str) // false
Nota:!!! Não é um operador separado, mas dois operadores! ..
MDN
JSR
69. Para que é usado o operador delete?
Este operador é usado para excluir propriedades de objetos e os valores dessas propriedades:
'use strict'
const user = {
name: '',
age: 30
}
delete user.age
console.log(user) // { name: "" }
delete user // SyntaxError: Delete of an unqualified identifier in strict mode
Observe que, no modo não estrito, uma tentativa de excluir um objeto falhará silenciosamente.
Uma vez que uma matriz também é um objeto, aplicar delete a um elemento da matriz excluirá seu valor e gravará undefined nele, ou seja, o índice do elemento excluído da matriz será preservado e o comprimento da matriz não será alterado.
JSR
MDN
70. Qual é o operador typeof usado?
Este operador é usado para definir o tipo de uma variável ou expressão:
typeof 1 // number
typeof [] // object
typeof '' // string
typeof (1 + 2) // number
typeof null // object
typeof NaN // number
JSR
MDN
71. O que é indefinido?
undefined é o valor padrão indefinido (mas não ausente) (valor padrão) de uma variável à qual não foi atribuído um valor, bem como uma variável não declarada. Este é um dos tipos de dados primitivos:
let name
console.log(typeof name) // undefined
console.log(typeof age) // undefined
Este valor pode ser atribuído a uma variável explicitamente:
user = undefined
JSR
MDN
72. O que é nulo?
null é um valor que representa a ausência de um valor definido explicitamente. Este é um dos tipos de dados primitivos. Usando nulo, você pode remover o valor de uma variável:
const user = null
console.log(typeof user) // object
JSR
MDN
73. Qual é a diferença entre null e undefined?
As principais diferenças são as seguintes:
Nulo | Indefinido |
---|---|
Atribuído como indicador de nenhum valor | É o padrão para variáveis que não tenham um valor atribuído ou para variáveis não declaradas |
Tipo - objeto | Tipo - indefinido |
Tipo primitivo que significa nulo, sem valor ou sem referência | Tipo primitivo, significando que nenhum valor foi atribuído a uma variável |
Indica a ausência de um valor variável | Indica a ausência de uma variável ou sua ambigüidade |
JSR - indefinido
JSR - nulo
MDN - indefinido
MDN - nulo
74. O que é eval?
A função eval () avalia a string passada para ela. Uma string pode ser uma expressão, uma variável, um ou mais operadores:
console.log(eval('1 + 2')) // 3
//
const curryCalc = x => operator => y =>
new Promise((resolve, reject) =>
resolve(eval(\`x${operator}y\`))
).then(
result => console.log(result),
error => console.error(' !')
)
curryCalc(1)('+')(2) // 3
curryCalc(4)('-')(3) // 1
curryCalc(5)('x')(6) // !
Não recomendado para uso.
JSR
MDN
75. Como acessar o histórico do navegador?
As informações sobre o histórico de movimentos entre páginas no navegador contêm a propriedade de histórico do objeto janela. Para ir para a página anterior ou seguinte, use os métodos back (), next () ou go ():
const goBack = () => {
history.back()
//
history.go(-1)
}
const goForward = () => history.forward()
MDN
76. Quais tipos de dados existem em JavaScript?
Existem 8 tipos principais em JavaScript:
- número para qualquer número: inteiro ou ponto flutuante, valores inteiros são limitados a ± 2 53
- bigint para inteiros de comprimento arbitrário
- string para strings. Uma string pode conter um ou mais caracteres, não existe um tipo de caractere separado
- booleano para verdadeiro / falso
- nulo para valores desconhecidos - um tipo distinto com um único valor nulo
- indefinido para valores não atribuídos - um tipo separado com um valor indefinido
- objeto para estruturas de dados mais complexas
- símbolo para identificadores únicos
JSR
MDN
77. O que isNaN () faz?
A função isNaN () converte o valor em um número e verifica se é NaN.
isNaN('hello') // true
isNaN(100) // false
Uma versão mais robusta dessa funcionalidade é o método Number.isNaN () introduzido no ES6.
JSR
MDN
78. Qual é a diferença entre variáveis não declaradas e indefinidas?
As principais diferenças são as seguintes:
Não declarado | Indefinido |
---|---|
Não existe no programa | Foram declarados sem ter um valor atribuído |
Uma tentativa de acesso termina com um erro | Ao tentar acessá-lo retorna indefinido |
Sobe (flutua) até o início do escopo atual | Também sobe, mas sem um valor atribuído, ou seja, com o valor indefinido (apenas a declaração é içada, mas não a inicialização) |
JSR
MDN
79. O que são variáveis globais?
No navegador, as funções e variáveis globais declaradas com a palavra-chave "var" ou sem a palavra-chave (no modo não estrito), tornam-se propriedades do objeto janela global (não funciona em módulos). Essas variáveis são acessíveis de qualquer lugar do programa. Não é recomendado usar variáveis globais. Se você precisar criar uma variável global, é melhor fazê-lo explicitamente:
window.currentUser = {
name: ''
}
//
globalThis.currentUser = {
name: ''
}
console.log(currentUser.name) //
JSR
80. Que problemas a criação de variáveis globais acarreta?
A criação de variáveis globais polui o namespace global, o que pode causar conflitos entre os nomes das variáveis. Também torna mais difícil depurar e testar seu código.
JSR
81. O que é NaN?
A propriedade NaN global é um valor Not-a-Number. Mais precisamente, NaN indica que o valor está incorreto, mas ainda é um número. Portanto, typeof NaN retorna um número.
parseInt('bla') // NaN
Math.sqrt(-1) // NaN
MDN
82. O que isFinite () faz?
A função global isFinite () converte o argumento em um número e retorna verdadeiro se for um número comum (finito), ou seja, não NaN, Infinity (infinito positivo), -Infinity (infinito negativo). Caso contrário, false é retornado.
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(100) // true
Há também um método Number.isFinite () que, ao contrário de isFinite (), não converte o argumento em um número antes de verificar. JSR
MDN
83. O que é fluxo / propagação de eventos?
O fluxo de eventos (propagação do evento) é a ordem em que o evento ocorre na página. Quando você clica em um elemento aninhado em outros elementos, antes que o evento alcance o elemento de destino, ele percorrerá sequencialmente todos os seus ancestrais, começando pelo objeto janela global. Existem três estágios de propagação de eventos:
- De cima para baixo - captura ou estágio de mergulho
- Estágio alvo
- De baixo para cima - o estágio de subida ou subida (não deve ser confundido com variáveis de elevação - içamento)
JSR
84. O que é o evento borbulhando?
Borbulhar é o estágio de propagação de um evento, quando o evento é primeiro registrado no elemento de destino e, em seguida, na cadeia dos ancestrais desse elemento até o elemento superior (externo) - o objeto janela global.
JSR
85. O que é imersão ou captura de evento?
A imersão é o estágio em que um evento é disparado, quando ele primeiro é registrado no elemento superior (externo) (o objeto janela global) e, em seguida, desce na cadeia de ancestrais até o elemento de destino.
JSR
86. Como faço para enviar um formulário para processamento?
Isso pode ser feito de diferentes maneiras:
function submitForm() {
document.forms[0].submit()
}
form.onsubmit = function(event) {
event.preventDefault()
//
}
form.addEventListener('submit', event => {
event.preventDefault()
//
})
Qualquer botão em um formulário é enviado por padrão, ou seja, serve para enviar um formulário.
JSR
MDN
87. Como posso obter informações sobre o sistema operacional?
Essas informações estão contidas no objeto navegador global. Algumas dessas informações podem ser obtidas por meio de sua propriedade de plataforma:
console.log(navigator.platform)
MDN
88. Qual é a diferença entre DOMContentLoaded e eventos de carregamento?
O evento DOMContentLoaded é gerado quando o documento HTML original foi totalmente carregado e analisado sem esperar que as folhas de estilo, imagens ou quadros carreguem totalmente. O evento load é disparado após o carregamento total da página, incluindo quaisquer recursos adicionais.
JSR
MDN - DOMContentLoaded
MDN - carregar
89. Qual é a diferença entre objetos nativos, host (pertencentes ao tempo de execução do código) e objetos personalizados?
Os objetos nativos fazem parte da linguagem e são definidos na especificação ECMAScript. Esses objetos são, por exemplo, Número, String, Função, Objeto, Matemática, RegExp, Data, etc. Objetos de host são fornecidos pelo navegador ou outro tempo de execução, como Node.js. Esses objetos são, por exemplo, janela, documento (DOM), XMLHttpRequest, API da Web (pilha de chamadas, fila de tarefas), etc. Objetos de usuário são quaisquer objetos criados em código, por exemplo, um objeto contendo informações sobre o usuário:
const user = {
name: '',
age: 30
}
JSR
MDN
90. Quais ferramentas são usadas para adiar o código?
Esses meios são:
- Ferramentas de desenvolvedor no navegador, como Chrome DevTools
- Expressão do depurador
- O bom e velho console.log ()
JSR
MDN - depurador
MDN - Console
91. Quais são as vantagens e desvantagens de promessas versus retornos de chamada?
Benefícios:
- Evite o inferno de chamadas de retorno
- Permitir que o código assíncrono seja executado sequencialmente usando then ()
- Permitir que o código assíncrono seja executado em paralelo usando Promise.all ()
- Resolve muitos problemas de retorno de chamada (ligar muito tarde ou muito cedo, várias chamadas em vez de uma, ocultação de erro)
desvantagens
- O código fica mais difícil de escrever
- Para fornecer suporte para navegadores mais antigos, é necessário um polyfill (quase não existem mais navegadores hoje)
JSR - Promises
JSR - Retornos de chamada MDN
- Promise
MDN - Retorno de chamada
92. Qual é a diferença entre um atributo e uma propriedade de elemento?
Quando o navegador carrega a página, ele analisa o HTML e gera objetos DOM a partir dele. Para nós de elemento, a maioria dos atributos HTML padrão tornam-se automaticamente propriedades de objetos DOM. Essa. o atributo de um elemento é especificado na marcação e sua propriedade é especificada no DOM. Por exemplo, para uma tag body com um atributo id = "page", o objeto DOM terá uma propriedade body.id = "page".
<input type="text" value=" !">
// : type value
const input = document.querySelector('input')
//
console.log(input.getAttribute('value'))
//
console.log(input.value)
//
input.setAttribute('value', ' !')
//
input.value = ' !'
Observe que a especificação ECMAScript também define atributos para propriedades de objeto - [[Value]], [[Writable]], [[Enumerable]] e [[Configurable]].
JSR
93. O que é política de mesma origem (SOP)?
A política de origem compartilhada (mesma fonte) bloqueia o acesso aos dados de outra fonte. A origem é uma combinação de protocolo, host e porta. Por padrão, o compartilhamento de recursos de origem cruzada (CORS) é proibido, ou seja, os dados são fornecidos apenas em resposta a uma solicitação da mesma fonte em que estão localizados. Esse comportamento pode ser alterado usando cabeçalhos HTTP especiais.
JSR
MDN - SOP
MDN - CORS
94. O que void 0 faz?
O operador void avalia a expressão passada e retorna indefinido. Normalmente, quando clicamos em um link, o navegador carrega uma nova página ou recarrega a atual. Você pode evitar isso usando a expressão "void (0)":
<a href="javascript:void(0)" onclick="alert('!')"> !
</a>
Recargas de página também podem ser evitadas com um simples esboço:
<a href="#"> </a>
// "#" URL
MDN
95. O JavaScript é uma linguagem de programação compilada ou interpretada?
O próprio JavaScript é uma linguagem de programação interpretada. O mecanismo analisa o código, interpreta cada linha e a executa. No entanto, os navegadores modernos usam uma tecnologia chamada just-in-time (compilação JIT), onde o código é compilado (otimizado) antes da execução. Isso aumenta o tempo de preparação para a execução do código, mas acelera significativamente a própria execução. Por exemplo, V8, o motor usado no Chrome e Node.js, usa o interpretador Ignition para analisar o código e o compilador TurboFan para otimizar o código.
JSR
MDN
96. O JavaScript diferencia maiúsculas de minúsculas?
Sim, o JavaScript diferencia maiúsculas de minúsculas. Portanto, palavras-chave, nomes de variáveis, funções e objetos devem ser idênticos ao usá-los. Por exemplo, const somename e const someName são variáveis diferentes, typeof (1) é número e typeOf 1 é ReferenceError: typeOf não está definido.
JSR
MDN
97. O Java e o JavaScript estão relacionados?
Não, são duas linguagens de programação diferentes. No entanto, ambos pertencem a linguagens orientadas a objetos e, como muitas outras linguagens, usam sintaxe semelhante (if, else, for, switch, break, continue, etc.). Basicamente, Java para JavaScript é uma jogada de marketing.
JSR
MDN
98. O que é um evento?
Um evento é uma reação do navegador a uma ação específica. Esta ação pode ser uma ação do usuário, por exemplo, clicar em um botão ou inserir texto, carregar uma página, receber uma resposta a uma solicitação, etc. (As ações que disparam eventos não são necessariamente específicas do usuário). Os eventos são registrados para processamento posterior.
button.onclick = () => alert('!')
input.addEventListener('change', function() {
p.textContent = this.value
})
window.onload = () => console.log(' ')
JSR MDN
99. Quem inventou o JavaScript?
JavaScript foi criado por Brendan Eich durante seu tempo na Netscape Communications. A linguagem foi originalmente chamada de Mocha, depois foi renomeada para LiveScript e destinava-se tanto à programação do lado do cliente quanto à programação do lado do servidor (onde deveria ser chamada de LiveWire).
JSR
MDN