100 questões teóricas de JavaScript





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



All Articles