200 questões teóricas de JavaScript

Bom dia amigos!



Aqui está uma lista das cem 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 e 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 offline.



Peço desculpas por quaisquer possíveis erros e erros tipográficos. Qualquer forma de feedback é apreciada.



Edição de 14.09.



Veja as primeiras 100 perguntas aqui .

101. Para que stopPropagation () é usado?

Este método é usado para evitar que o evento borbulhe ou suba na cadeia dos ancestrais do elemento de destino. Em outras palavras, ele para de enviar o evento do elemento de destino para seus ancestrais. Vamos considerar um exemplo:

<div onclick="f2()">
    <div onclick="f1()"></div>
</div>

function f1(event) {
    event.stopPropagation()
    console.log(' ')
}

function f2() {
    console.log(' ')
}

Ao clicar em um contêiner aninhado, a mensagem "Recipiente interno" é exibida no console. Se você remover event.stopPropagation (), ao clicar no contêiner aninhado, ambas as mensagens serão exibidas no console.



JSR

MDN

102. O que return false faz?

Esta instrução é usada em manipuladores de eventos para:

• Cancelando o comportamento padrão do navegador
• Impedindo a propagação de eventos através do DOM
• Parando a execução do retorno de chamada e retornando o controle para a função de chamada

Observe que, sem especificar um valor de retorno, a instrução return retorna indefinido.



JSR

MDN

103. O que é BOM?

O BOM ou (Browser Object Model) permite que o JavaScript interaja com o navegador. Este modelo inclui objetos como navegador, localização, histórico, tela, XMLHttpRequest, etc. Em outras palavras, BOMs são objetos adicionais fornecidos pelo navegador para funcionar com tudo, exceto com o documento.

Observe que o BOM não é padronizado, portanto, sua implementação pode ser diferente em navegadores diferentes.







JSR

104. Para que é usado setTimeout ()?

Este método é usado para a execução adiada de uma tarefa. Em outras palavras, permite que você execute a execução de uma função ou a avaliação de uma expressão após um certo tempo (em milissegundos). No exemplo a seguir, imprimimos uma mensagem no console após 2 segundos:

setTimeout(() => console.log('!'), 2000)

//    ,   
const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

JSR

MDN

105. Para que setInterval () é usado?

Este método é usado para executar uma tarefa periodicamente. Em outras palavras, permite que você execute a execução de uma função ou a avaliação de uma expressão após um determinado período de tempo (em milissegundos). No exemplo a seguir, imprimimos uma mensagem no console a cada 2 segundos:

setInterval(() => console.log('!'), 2000)

//    ,    
//    
let i = 0
const timer = setInterval(() => {
    console.log('!')
    i++

    if (i == 2) {
        clearInterval(timer)
    }
}, 2000)

No segundo exemplo, a mensagem "Hello!" imprimirá no console duas vezes, após o que o cronômetro será interrompido



JSR

MDN

106. Por que o JavaScript é chamado de single threated?

JavaScript é uma linguagem de programação de encadeamento único ou síncrona. Isso significa que apenas uma tarefa pode ser executada por vez. Se a tarefa for complexa, pode levar muito tempo para ser concluída e, durante esse tempo, o thread principal de execução do código será bloqueado. Bloquear um stream, por sua vez, significa que não há interatividade na página. O navegador para de responder às ações do usuário e outros eventos. Para resolver este problema, são usados ​​callbacks, promises, async / await, workers e outras ferramentas para trabalhar com código assíncrono. Em JavaScript, ao contrário, por exemplo, de Java, Go ou C ++, não há como criar threads ou processos adicionais.



JSR

MDN

107. O que é delegação de eventos?

Delegação de evento é uma técnica em que um evento é registrado em um pai para manipular eventos gerados por filhos.

Geralmente usado para lidar com cliques de botão em um contêiner de agrupamento ou para modificar campos de entrada de texto em formulários, por exemplo:

<form>
    <input type="text" class="first-input">
    <input type="text" class="second-input">
</form>

<div>
    <button class="first-button">click</button>
    <button class="second-button">click</button>
</div>

const form = document.querySelector('form')
const buttons = document.querySelector('div')

form.addEventListener('input', event => {
    console.log(event.target.className)
})

buttons.addEventListener('click', event => {
    console.log(event.target.className)
})

No exemplo acima, em vez de registrar manipuladores nos elementos filhos, nós os registramos nos elementos pais. Inserir texto em um campo ou pressionar um botão resulta na saída do nome da classe do elemento correspondente para o console.



JSR

108. O que é ECMAScript?

ECMAScript é a linguagem de programação por trás do JavaScript. Este é um tipo de padrão ou projeto pelo qual o JavaScript é "construído". ECMAScript é padronizado na especificação ECMA-262 pela organização de padrões Ecma International.



JSR

MDN

109. Nomeie os recursos da sintaxe JSON

A sintaxe JSON possui os seguintes recursos:

• Os dados são pares chave / valor
• A chave e o valor são colocados entre aspas duplas, a menos que o valor seja um número ("chave": "valor")
• Os dados são separados por vírgulas
• Os objetos são colocados entre chaves
• Matrizes - para quadrado

JSR

MDN

110. O que JSON.stringify () faz?

Ao enviar dados para o servidor, ele deve ter um formato de string especial. O método JSON.stringify () é usado para converter um objeto em uma string JSON:

const user = { name: '', age: 30 }
const str = JSON.stringify(user)
console.log(str) // {"name":"","age":30}

JSR

MDN

111. O que JSON.parse () faz?

Ao receber dados do servidor, eles têm um formato de string especial. O método JSON.parse () é usado para converter esses dados em um objeto JavaScript:

const str = { "name":"","age":30 }
const user = JSON.parse(str)
console.log(user) // {name: "", age: 30}

JSR

MDN

112. Para que serve o JSON?

Ao trocar dados entre o cliente e o servidor, esses dados podem ser apenas strings. Como JSON é texto, é perfeito para isso. Ele também pode ser usado como um formato de dados por qualquer linguagem de programação, junto com outros formatos como XML ou Protobuf.



JSR

MDN

113. O que é PWA (Progressive Web Application - Progressive Web Application)?

Resumindo, os PWAs são sites que se comportam como aplicativos nativos. Eles podem ser instalados em um telefone ou computador e, via de regra, funcionam offline. Para o último, são usados ​​service workers e uma interface de cache. A vantagem dos PWAs sobre os aplicativos móveis é seu tamanho e relativa facilidade de desenvolvimento. Além disso, você não precisa gastar recursos na criação de dois aplicativos para um site - web e móvel. Ele também mantém uma boa experiência do usuário.



MDN

114. Para que é usado clearTimeout ()?

Este método é usado para parar um cronômetro iniciado por setTimeout (). Para fazer isso, o identificador do temporizador é gravado em uma variável, que é então passada para clearTimeout () como um argumento.

const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

No exemplo acima, dois segundos depois, a mensagem “Hello!” É exibida no console, após o qual o cronômetro para. Isso é feito para que o coletor de lixo possa remover o cronômetro que foi executado.



JSR

MDN

115. Qual é a finalidade de clearInterval ()?

Este método é usado para parar um cronômetro iniciado com setInterval (). Para fazer isso, o identificador do temporizador é gravado em uma variável, que é então passada para clearInterval () como um argumento.

let i = 1
const timer = setInterval(() => {
    console.log(i)
    i++

    if (i === 3) clearInterval(timer)
}, 1000)

No exemplo acima, o valor da variável i é impresso no console a cada segundo, que é incrementado em 1 (1, 2) a cada vez. Quando i se torna 3, o cronômetro para.



JSR

MDN

116. Como faço para redirecionar?

Para fazer isso, você pode usar a propriedade location do objeto window:

location.href = 'newPage.html'
// 
location.replace('newPage.html')
// 
location.assign('newPage.html')

MDN

117. Como verificar se uma substring existe em uma string?

Existem pelo menos três maneiras de fazer isso.

String.prototype.includes ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.includes(subStr) // true

String.prototype.indexOf ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.indexOf(subStr) !== -1 // true

RegExp

const mainStr = 'hello'
const regex = /hel/
regex.test(mainStr) // true

JSR

MDN - inclui

MDN - indexOf

MDN - teste

118. Como verificar a correção do endereço de e-mail?

Isso pode ser feito usando HTML, definindo o tipo do campo de entrada para o valor email (<input type = "email">). No entanto, este método não é considerado muito confiável. Portanto, geralmente, o email é validado usando uma expressão regular. Recomenda-se fazer isso no lado do servidor, pois o JavaScript pode estar desativado no cliente:

const validateEmail = email =>
    /\S+@\S+.\S+/
        .test(email.toString()
        .toLowerCase())
const email = 'myemail@example.com'
validateEmail(email) // true

Este exemplo usa uma das expressões regulares mais simples para validar um endereço de e-mail. Uma expressão mais confiável se parece com esta (RFC 2822): [a-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] + (?:. [A-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] +) * @ (?: [a-z0-9] (?: [a-z0-9 -] * [a-z0- 9]) ?.) + [A-z0-9] (?: [A-z0-9 -] * [a-z0-9])?

119. Como obtenho o URL atual?

Para fazer isso, você pode usar a propriedade location do objeto window ou a propriedade URL do objeto document:

console.log(' URL', location.href)
console.log(' URL', document.URL) //  Chrome     " URL chrome-search://local-ntp/local-ntp.html"

MDN - localização

MDN - document.URL

120. Quais propriedades o objeto de localização tem?

As propriedades do objeto de localização podem ser usadas para obter partes do URL da página atual:

• href - URL completo
• origem - protocolo, host e porta (origem, usado na Política de Origem Comum (SOP) e Compartilhamento de Recursos (CORS))
• protocolo
• host - host e porta
• hostname - host
• porta
• pathname - path
• search - a string de consulta depois?
• hash - string de consulta após # (âncora)
• nome de usuário - nome de usuário antes do domínio
• senha - senha antes do domínio

MDN

121. Como obter a string de consulta?

Você pode usar o construtor de URL para isso:

const url = new URL('https://example.com?foo=1&bar=2')
console.log(url.search) // ?foo=1&bar=2
console.log(url.searchParams.get('foo')) // 1

MDN

122. Como verificar se uma propriedade existe em um objeto?

Existem pelo menos três maneiras de fazer isso.

Em operadora

const user = { name: '' }
console.log('name' in user) // true
console.log(!('age' in user)) // true

Método HasOwnProperty ()

const user = { name: '' }
console.log(user.hasOwnProperty('name')) // true
console.log(!user.hasOwnProperty('age')) // true

Comparação com indefinido

const user = { name: '' }
console.log(user.name !== undefined) // true
console.log(user.age === undefined) // true

JSR

MDN - para ... em

MDN - hasOwnProperty

123. Como iterar sobre as propriedades enumeradas de um objeto?

Para fazer isso, você pode usar um loop for ... in com o método hasOwnProperty () para excluir propriedades herdadas.

const user = {
    name: '',
    age: 30
}

for (key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(\`${key}: ${user[key]}\`) // name:  age: 30
    }
}

JSR

MDN

124. Como verificar se o objeto está vazio?

Existem pelo menos três maneiras de fazer isso.

Método Object.entries ()

const obj = {}
console.log(Object.entries(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.entries(obj2).length === 0 && obj2.constructor === Object) // false

Método Object.keys ()

const obj = {}
console.log(Object.keys(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.keys(obj2).length === 0 && obj2.constructor === Object) // false

For ... in loop e método Object.hasOwnProperty ()

const obj = {}
const obj2 = {key: 'value'}

const isEmpty = obj => {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) return false
    }
    return true
}

console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false

JSR - Objetos JSR

- Object.keys, valores, entradas

MDN - Object.entries

MDN - Object.keys

MDN - para ... em

MDN - Object.hasOwnProperty

125. Qual é o objeto de argumentos?

argumentos é um objeto semelhante a uma matriz (pseudomatriz) contendo os argumentos passados ​​para a função:

function sum () {
    let total = 0
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total

    // 
    let total = 0
    for (const i of arguments) {
        total += i
    }
    return total

    // 
    return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

Observe que as funções de seta não têm argumentos. Em vez de argumentos, é recomendável usar o operador rest ... (outros parâmetros), que funciona tanto nas funções comuns quanto nas de seta:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

sum(1, 2, 3) // 6

JSR

MDN

126. Como colocar a primeira letra de uma string em maiúscula?

Isso pode ser feito usando os métodos charAt (), toUpperCase () e slice ():

String.prototype.capitilize = function () {
    return this.charAt(0).toUpperCase() + this.slice(1)
}

console.log('hello'.capitilize()) // Hello

JSR

MDN -

charAt MDN - toUpperCase

MDN - fatia

127. Como obter a data atual?

Isso pode ser feito usando um objeto Date ou o construtor Intl.DateTimeFormat:

console.log(new Date().toLocaleDateString()) // 02.09.2020

console.log(new Intl.DateTimeFormat(
    'ru-Ru',
    {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    }
).format(new Date())) // , 2  2020 .

JSR - Data

JSR = Intl

MDN - Data

MDN - Intl.DateTimeFormat

128. Como comparar dois objetos Date?

Para fazer isso, você não deve comparar os próprios objetos, mas, por exemplo, os valores retornados pelo método getTime ():

const d1 = new Date()
const d2 = new Date(d1)

console.log(d1.getTime() === d2.getTime()) // true
console.log(d1 === d2) // false

JSR

MDN

129. Como verificar se uma linha começa em uma linha diferente?

Você pode usar o método startedWith () integrado para fazer isso:

console.log('Good morning'.startsWith('Good')) // true
console.log('Good morning'.startsWith('morning')) // false

De acordo com CanIUse, este método é compatível com quase 94% dos navegadores



JSR

MDN

130. Como remover problemas em uma linha?

Para fazer isso, você pode usar os métodos integrados trimStart () (início da linha), trimEnd () (fim da linha) e trim () (início e fim da linha):

console.log('  hello world   '.trim()) // hello world

trim não funciona para espaços entre palavras. Nesse caso, você pode usar o método replace () e a expressão regular:

console.log('hello   world'.replace(/s+/, ' ')) // hello world
//    
console.log('hello   world'.replace(/s{2,}/, ' ')) // hello world
console.log('key   value'.replace(/s{2,}/, ' -> ')) // key -> value

De acordo com CanIUse , trimStart () e trimEnd () são suportados por 93% dos navegadores.



MDN

131. Como adicionar uma nova propriedade a um objeto?

Existem duas maneiras de fazer isso. Vamos supor que temos um objeto como este:

const obj = {
    name: '',
    age: 30
}

Podemos adicionar uma nova propriedade a ele usando a notação de ponto ou colchete:

obj.job = ''
obj['job'] = ''

Uma das diferenças entre esses métodos é que, ao usar a notação entre parênteses, a chave adicionada pode ser um número:

const obj = {}
obj[1] = ''
console.log(obj) // { 1: '' }
obj.2 = '' // SyntaxError: Unexpected number

JSR

MDN

132. A expressão! - é um operador especial?

Não, não é. É uma combinação de dois operadores: operador! (não lógico) e operador - (decremento). Se você usar a expressão especificada com qualquer valor, primeiro esse valor será diminuído em um, depois convertido para um tipo booleano e invertido:

const fun = val => !--val
const a = 1
const b = 2
console.log(fun(a)) // !0 -> not false -> true
console.log(fun(b)) // !1 -> not true -> false

JSR

MDN - Lógico NÃO

MDN - Decremento

133. Como atribuir um valor padrão a uma variável?

Para fazer isso, você pode usar o || (booleano ou):

const a = b || 'default'

Nesse caso, a variável a terá o valor padrão atribuído se o valor da variável b for falso (falso, indefinido, nulo, NaN, 0, '').

Se estamos falando sobre os valores padrão dos parâmetros da função, eles podem ser atribuídos da seguinte forma:

const greet = (name = '') => \`, ${name}!\`
console.log(greet('')) // , !
console.log(greet()) // , !

Além disso, os parâmetros subsequentes podem usar os valores dos anteriores como valores padrão:

const sum = (a = 1, b = a + 2) => a + b
console.log(sum()) // 4

JSR

MDN

134. Como criar uma string multilinha?

Anteriormente, era feito algo assim (caracteres de controle de concatenação e quebra de linha):

const str =
    ' ' + ' ' +
    ' ' + ' ' +
    '!'

// 
const str = '  a
  
 !'
console.log(str)
/*
     
     
    !
*/

Agora eles fazem assim (literal de modelo):

const str =
    \` 
     
    !\`

JSR

MDN

135. Podemos adicionar propriedades às funções?

Como as funções também são objetos, podemos facilmente adicionar propriedades a elas. O valor da propriedade da função pode ser outra função:

function someFun () {}
someFun.somePropName = 'somePropValue'

console.log(someFun.somePropName) // somePropValue
//  
console.log(someFun.name) // someFun

const sum = (x, y) => x + y
console.log(sum(1, 2)) // 3

sum.curry = x => y => x + y
console.log(sum.curry(1)(2)) // 3

JSR

MDN

136. Como descobrir quantos argumentos uma função espera receber?

A propriedade length pode ser usada para:

const sum = (a, b, c) => +a + +b + +c
console.log(sum(1, '1', true)) // 3
console.log(sum(0, '', [])) // 0

console.log(sum.length) // 3

MDN

137. O que é um polyfill?

Polyfills são usados ​​para fazer o JavaScript moderno funcionar em navegadores mais antigos. Isso é feito implementando novos recursos da linguagem usando a sintaxe antiga. O próprio processo de conversão de novo código em código antigo é chamado de transpilação. O transpiler mais popular para código JavaScript é o Babel.

Por exemplo, um dos recursos mais recentes de JavaScript é o método Promise.allSettled (), que, ao contrário de Promise.all (), não termina quando qualquer uma das promessas passadas a ele é rejeitada.

No entanto, a partir de hoje, o suporte do navegador de acordo com os dados do CanIUse é de 80%, então um polyfill é necessário:

const promise1 = Promise.resolve('promise1')
const promise2 = Promise.reject('promise2')
const promise3 = Promise.resolve('promise3')

//     Promise.allSettled()
Promise
    .allSettled([promise1, promise2, promise3])
    .then(console.log)
/*
    [
        {status: "fulfilled", value: "promise1"},
        {status: "rejected", reason: "promise2"},
        {status: "fulfilled", value: "promise3"},
    ]
*/

//    
//  Promise.all() = 94%
const allSettled = promises => {
    const wrappedPromises = promises
        .map(p => Promise.resolve(p)
        .then(
            val => ({
                status: 'fulfilled',
                value: val
            }),
            err => ({
                status: 'rejected',
                reason: err
            })))
    return Promise.all(wrappedPromises)
}
allSettled([promise1,promise2,promise3])
    .then(console.log)

JSR

MDN

138. Para que são usadas as instruções continue e break?

A instrução break é usada para sair do loop. Depois de parar a iteração, o código continua:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible'
}

for (key in obj) {
    if (obj[key] === 'impossible') break

    console.log(obj[key]) // Everything is
}

console.log('possible') // possible

A instrução continue é usada para pular a iteração:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible',
    4: 'possible'
}

for (key in obj) {
    if (obj[key] === 'impossible') continue

    console.log(obj[key]) // Everything is possible
}

MDN - interromper

MDN - continuar

139. O que é um rótulo?

Os rótulos permitem nomear loops e blocos de código. Eles podem ser usados, por exemplo, para sair de um loop ou como uma condição para a execução de código:

loop1:
for (let i = 0; i < 3; i++) {
    loop2:
    for (let j = 0; j < 3; j++) {
        if (i === j) continue loop1

        console.log(\`i = ${i}, j = ${j}\`)
    }
}

/*
    i = 1, j = 0
    i = 2, j = 0
    i = 2, j = 1
*/

O uso de tags é considerado uma prática inadequada.



MDN

140. Quais são as vantagens de declarar variáveis ​​no início do código?

Recomenda-se declarar variáveis ​​no início de cada script ou função. Isso oferece os seguintes benefícios:

• Mantém o código limpo
• Todas as variáveis ​​estão em um só lugar
• Evita a criação acidental de variáveis ​​globais
• Previne sobreposições de variáveis ​​indesejadas

JSR

MDN

141. Quais são as vantagens de inicializar uma variável quando declarada?

Recomenda-se inicializar todas as variáveis ​​no momento da declaração. Isso oferece os seguintes benefícios:

• Mantém o código limpo
• Variáveis ​​e seus valores estão em um só lugar
• Impede que variáveis ​​não inicializadas sejam atribuídas indefinidas

JSR

MDN

142. Quais são as principais recomendações para a criação de um objeto

Para criar um objeto, em vez do construtor de objeto new Object (), é recomendável usar a notação de parênteses {}. Além disso, dependendo do tipo de valor, é recomendável usar o seguinte:

• string como '' em vez de new String ()
• um número, por exemplo 0 em vez de um novo número ()
• valor booleano como falso em vez de novo Boolean ()
• [] em vez de novo Array ()
• // em vez de novo RegExp ()
• function () {} em vez de new Function ()

JSR

MDN

143. Como definir um array no formato JSON?

A matriz JSON é uma matriz de objetos JSON, por exemplo:

[
    { "name": "", "age": 30 },
    { "name": "", "age": 20 }
]

JSR

MDN

144. Como implementar uma função que retorna um inteiro aleatório em um determinado intervalo?

Essa função pode ser implementada usando os métodos Math.random () e Math.floor () do objeto Math:

const getRandomInteger = (min, max) => Math.floor(min + Math.random() * (max + 1 - min))

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. O que é árvore tremendo?

A agitação da árvore é a remoção do código de módulos não utilizados. Esses módulos não são incluídos na montagem final (pacote). Para que o construtor de módulo (bundler) seja capaz de determinar quais módulos são usados ​​e quais não são, a estrutura do programa deve ser baseada em módulos ES6. Essa técnica foi popularizada pelo empacotador Rollup.



MDN

146. Para que é usado o sacudir de árvores?

A agitação da árvore pode reduzir significativamente o tamanho de uma montagem (pacote), removendo o código de módulos não utilizados dela. Quanto menor o tamanho da montagem, melhor será o desempenho do aplicativo. A agitação da árvore é implementada em construtores de módulo, como Rollup e Webpack.



MDN

147. O que é uma expressão regular?

Uma expressão regular é uma sequência de caracteres que formam um padrão de pesquisa. Esse padrão pode ser usado para localizar dados em texto, como substrings em uma string. As expressões regulares são amplamente utilizadas por muitas linguagens de programação para pesquisa de texto e operações de substituição. O padrão regex geral é assim:

//

Exemplo:

const regex = /java/i
const str = 'JavaScript'
console.log(regex.test(str)) // true

Você também pode usar o construtor RegExp para criar uma expressão regular:

const regex = new RegExp('java', 'i')
const str = 'JavaScript'
console.log(regex.test(str)) // true

JSR

MDN

148. Quais métodos são usados ​​em expressões regulares?

Existem dois métodos principais usados ​​em expressões regulares: exec () e test ().

O método exec () procura uma correspondência de expressão regular na string passada a ele como um argumento. O comportamento desse método depende se a expressão regular tem o sinalizador g. Caso contrário, a primeira correspondência é retornada. Se o sinalizador g estiver presente, então:

• A chamada exec () retorna a primeira correspondência e armazena a posição depois dela na propriedade lastIndex.
• A próxima chamada inicia a pesquisa na posição lastIndex, retorna a próxima correspondência e lembra a posição depois dela em lastIndex.
• Se não houver mais correspondências, exec () retorna nulo e lastIndex é definido como 0.

const str = 'Java  JavaScript -   '
const regex = /Java/g

let result
while (result = regex.exec(str)) {
    console.log(
        \` ${result[0]}   ${result.index}\`
    )
}
/*
     Java   0
     Java   7
*/

O método test () retorna um valor booleano dependendo se uma correspondência for encontrada na string:

const str = '  JavaScript'

console.log(
    / /.test(str) // true
)

JSR

MDN

149. Quais sinalizadores são usados ​​em expressões regulares?

const regex = /([-]+)s([-]+)/i
const str = ' '
const newStr = str.replace(regex, '$2 $1')
console.log(newStr) //  

JSR

MDN

150. Quais caracteres especiais são usados ​​em expressões regulares?

Os caracteres especiais usados ​​em expressões regulares podem ser divididos em vários grupos.

Classes básicas de personagens:



Conjuntos de caracteres:



Fronteiras:



Agrupamento:



Quantificadores:



JSR

MDN

151. Como mudo os estilos de um elemento HTML?

Isso pode ser feito usando a propriedade style ou atribuindo uma classe apropriada ao elemento:

document
    .querySelector(selector)
    .style.property = value
document
    .querySelector('title')
    .fontSize = '2rem'

document.querySelector(selector)
    .className = 'class-name'
document.querySelector(selector)
    .classList.add('class-name')
document.querySelector('button')
    .classList.add('active')

JSR

MDN - estilo

MDN - className

MDN - classList

152. O que é um depurador?

A expressão do depurador fornece acesso a qualquer funcionalidade de depuração disponível em um ambiente específico, por exemplo, definir pontos de interrupção (pontos de interrupção, pontos de interrupção). Se a funcionalidade de depuração não estiver disponível no tempo de execução, esta expressão não terá efeito:

const fun = () => {
    // 
    debugger //       
    // 
}

JSR

MDN

153. Para que são usados ​​os pontos de interrupção do depurador?

Os pontos de verificação são usados ​​para pausar a execução de uma função ou outro código em um local específico para descobrir porque um programa não está funcionando corretamente. Uma vez interrompida, a função pode ser continuada.



JSR

MDN

154. As palavras reservadas podem ser usadas como identificadores?

Não, você não pode usar palavras reservadas como nomes para variáveis, rótulos, funções ou objetos:

const class = '    ' // SyntaxError: Unexpected token 'class'

155. Como determinar a largura e altura da imagem?

Isso pode ser feito de várias maneiras. Aqui está um deles:

const getImgSize = src => {
    const img = new Image()
    img.src = src
    img.addEventListener('load', () => console.log(\`${img.width} x ${img.height}\`)) // 276 x 110
    document.body.append(img)
}
getImgSize('http://www.google.com/ intl/en_ALL/images/logo.gif')

MDN

156. Como enviar uma solicitação HTTP síncrona?

Para fazer isso, você pode usar o objeto XMLHttpRequest passando-o para o método open () com um terceiro argumento opcional com o valor false:

const getUsers = url => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.send()
    console.table(xhr.response)

    const response = JSON.parse(xhr.response)
    const template = \`
        <table>
            ${response.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body
        .insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

157. Como fazer uma solicitação HTTP assíncrona?

O método fetch () pode ser usado para isso:

const getUsers = async url => {
    const response = await fetch(url)
    const data = await response.json()
    console.table(data)

    const template = \`
        <table>
            ${data.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body.insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

158. Como obter a data no formato exigido?

O método toLocaleString () pode ser usado para isso:

console.log(
    new Date().toLocaleString('ru-Ru', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
) // , 6  2020 .

MDN

159. Como obter os tamanhos máximos de página?

Para fazer isso, você precisa encontrar os valores máximos das propriedades scrollWidth, offsetWidth, clientWidth e scrollHeight, offsetHeight, clientHeight dos objetos document.body e document.documentElement:

const pageWidth = Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
)
const pageHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
)
const pageSize = {
    width: pageWidth,
    heigth: pageHeight
}
console.log(pageSize)

const pageCenter = {
    centerX: pageWidth / 2,
    centerY: pageHeight / 2
}
console.log(pageCenter)

JSR

160. O que é um operador condicional ou ternário?

O operador ternário é uma forma abreviada de escrever o bloco if ... else:

let accesAllowed
const age = propmt('  ?')

// if...else
if (age > 18) {
    accesAllowed = true
} else {
    accessAllowed = false
}

//  
(age > 18)
    ? accesAllowed = true
    : accessAllowed = false

JSR

MDN

161. Uma cadeia de operadores ternários pode ser usada?

Sim, neste caso, o operador ternário é uma alternativa ao bloco if ... else if ... else:

let accessAllowed
const getAge = () => prompt('  ?')

//     -    
// if...else if...else
const checkAge = (age = getAge()) => {
    console.log(age)
    if (isNaN(age)) {
        Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
    } else if (age === null || age === '') {
        Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
    } else if (age < 0) {
        Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
    } else if (age > 100) {
        Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
    } else if (age < 18) {
        Promise.resolve(alert(',   ')).then(accessAllowed = false)
    } else {
        Promise.resolve(alert(' !')).then(accessAllowed = true)
    }
    console.log(accessAllowed)
}

//  
const checkAge = (age = getAge()) => {
    isNaN(age)
        ? Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
        : (age === null || age === '')
          ? Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
          : (age < 0)
            ? Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
            : (age > 100)
            ? Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
            : (age < 18)
                ? Promise.resolve(alert(',   ')).then(accessAllowed = false)
                : Promise.resolve(alert(' !')).then(accessAllowed = true)
    console.log(accessAllowed)
}

JSR

MDN

162. Como iniciar a execução do código depois que a página estiver totalmente carregada?

Isto pode ser feito de várias maneiras.

Coloque a tag de script antes da tag de fechamento do corpo ou adicione um atributo defer a ela:

<body>
    ...
    <script src="script.js"></script>
</body>

<!--  -->
<head>
    ...
    <script src="script.js" defer></script>
</head>

Se o seu script for um módulo, em vez do atributo defer, você precisa especificar o atributo type com o módulo value:

<script src="script.js" type="module"></script>

Adicione um atributo onload à tag body:

<body onload="script()"></body>

Adicione o código como um manipulador para o evento load do objeto window:

window.onload = () => console.log('  ')

// 
window.addEventListener('load', () => console.log('  '))

Faça o mesmo para document.body:

document.body.onload = () => console.log('  ')

163. Qual é a diferença entre __proto__ e protótipo?

A propriedade __proto__ ([[Prototype]] propriedade oculta interna) é um objeto do qual uma instância herda campos e métodos. E prototype é um objeto que é usado para criar __proto__ quando instanciado usando a nova palavra-chave:

class Person {
    constructor(firstName, secondName) {
        this.firstName = firstName
        this.secondName = secondName
    }
    getFullName() {
        return \`${this.firstName} ${this.secondName}\`
    }

}

const user = new Person('', '')
console.log(user.getFullName()) //  
console.log(user.__proto__.getFullName === Person.prototype.getFullName) // true
console.log(Person.prototype) // {constructor: ƒ, getFullName: ƒ}
console.log(user.prototype === undefined) // true

JSR

MDN

164. Dê um exemplo do uso obrigatório de um ponto e vírgula

Um dos usos obrigatórios de ponto-e-vírgulas é o uso de IIFE (Immediately Invoked Fuction Expression):

Por exemplo, o código a seguir:

try {
    const x = ''

    (() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Será interpretado assim:

try {
    const x = ''(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Portanto, no bloco try, obtemos um TypeError: "To be" não é uma função, o controle é passado para o bloco catch e "Not to be" é enviado para o console.

Para que o código funcione conforme o esperado, ele deve ter a seguinte aparência:

try {
    //       
    const x = '';
    //  
    ;(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Além disso, não se esqueça dos casos de posicionamento automático de ponto e vírgula.

165. Para que é usado o método freeze ()?

Este método, como o próprio nome indica, serve para "congelar" um objeto. Um objeto congelado é imutável (imutável). Isso significa que você não pode adicionar novas propriedades a esse objeto, excluir ou modificar as existentes. Além disso, este método define configurável: falso e gravável: falso para propriedades existentes. O método retorna um objeto congelado.

'use strict'
const obj = {
    mission: 'possible'
}

Object.freeze(obj)
obj.mission = 'impossible' // TypeError: Cannot assign to read only property 'mission' of object '#<Object>'

delete obj.mission // TypeError: Cannot delete property 'mission' of #<Object>

Observe que no modo não estrito, nenhuma exceção é lançada, o código simplesmente não é executado.



JSR

MDN

166. Por que precisamos do método freeze ()?

O paradigma da programação orientada a objetos diz que uma interface contendo um certo número de elementos deve ser imutável, ou seja, deve ser impossível estender, modificar ou usar elementos fora do contexto atual. Este método é um apelido para a palavra-chave final em algumas outras linguagens de programação.



JSR

MDN

167. Como capitalizar a primeira letra de cada palavra em uma linha?

Uma maneira de fazer isso é a seguinte:

const capitilize = str => str.replace(
    /[-]S+/gi,
    txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
)

console.log(capitilize(', , ')) // , , 

168. Como posso saber se o JavaScript está desabilitado em uma página?

Você pode usar a tag noscript para isso. O código dentro desta tag só será executado se o JavaScript estiver desabilitado na página:

    console.log('JavaScript ')

<noscript>
    <p> JavaScript,    </p>
</noscript>

Para desativar o JavaScript no Chrome, vá para configurações -> seção "Privacidade e segurança" -> Configurações do site -> seção "Conteúdo" -> JavaScript.



MDN

169. Quais operadores são suportados por JavaScript?

Os operadores são usados ​​para trabalhar com valores ou operandos. JavaScript suporta os seguintes operadores:

• Aritmética: + (adição, conversão para um número, concatenação), - (subtração), * (multiplicação), / (divisão),% (módulo, com resto), ++ (incremento), - (decremento), * * (exponenciação)
• operadores de comparação: == (abstrato, igualdade flexível) ,! = (desigualdade abstrata), === (igualdade estrita, verificação de identidade) ,! == (desigualdade estrita),>,> =, <, <=
• lógico: && (e), || (ou),! (não) (!!! (negação dupla) não é um operador separado)
• operadores de atribuição: =, + =, - =, * =, / =,% =
• ternário :? ...: (se ... senão)
• operador typeof: define o tipo de operando
• bit a bit: & (e), | (ou), ^ (exclusivo ou), ~ (não), << (deslocamento para a esquerda), >> (deslocamento para a direita), >>> (deslocamento para a direita com preenchimento zero)
• novo :? .. ​​(cadeia opcional), ?? (mesclagem nula)

//  
const obj = {
    foo: {
        baz: {
            qux: 'bar'
        }
    }
}

// 
console.log(obj.foo.bar.baz.qux) // TypeError: Cannot read property 'baz' of undefined

if (
    obj.foo !== undefined &&
    obj.foo.bar !== undefined &&
    obj.foo.bar.baz !== undefined
) {
    console.log(obj.foo.bar.baz.qux) //   
}

// 
console.log(obj?.foo?.bar?.baz?.qux) // undefined

//   null
console.log(
    0 || 'default null', // 'default null'
    0 ?? 'default null', // 0
    '' || 'default string', // default string
    '' ?? 'default string', // ''
)

JSR - Operadores JSR - Operadores

lógicos

JSR - Operadores de comparação JSR - Operadores

JSR condicionais

-

Operadores MDN bit a bit - Operador de sequência opcional

MDN - Operador de mesclagem nula

170. Para que serve o operador resto ... (outros parâmetros)?

O operador rest é uma alternativa ao objeto de argumentos e retorna uma matriz dos argumentos passados ​​para a função:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

console.log(sum(1, 2, 3)) // 6

Observe que o operador rest deve ser passado como o último argumento:

const fun = (x, ...rest, y) => console.log(rest) // SyntaxError: Rest parameter must be last formal parameter

JSR

MDN

171. Para que é usado o operador de spread?

O operador spread é usado para expandir (desempacotar, expandir) entidades iteráveis ​​(arrays, strings). Descompactar significa converter, por exemplo, uma matriz de números em um conjunto de valores simples:

const sum = (x, y, z) => x + y + z

const nums = [1, 2, 3]

console.log(sum(...nums)) // 6

JSR

MDN

172. Como determinar se um objeto está congelado?

Para determinar se um objeto está congelado, ou seja, é imutável (imutável), o método isFrozen () é usado:

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

console.log(Object.isFrozen(obj)) // true

MDN

173. Como determinar a igualdade de valores usando um objeto?

O método is () pode ser usado para isso:

Object.is('  ', '  ') // true
Object.is(0.1 + 0.2, 0.3) // false
Object.is(window, window) // true
Object.is(+0, -0) // false

const objA = {}
const objB = objA
Object.is(objA, objB) // true
Object.is({}, {}) // false

Os valores são iguais se:

• ambos são indefinidos
• ambos são nulos
• ambos são verdadeiros ou falsos
• ambos são strings do mesmo comprimento com os mesmos caracteres
• ambos se referem ao mesmo objeto
• ambos são números, +0, -0 ou NaN

JSR

MDN

174. Como criar uma cópia de um objeto?

Uma das maneiras mais confiáveis ​​de fazer isso é usando o método assign ():

const objA = {a: 1, b: 2}
const objB = Object.assign(objA)

console.log(objB) // {a: 1, b: 2}

console.log(objA === objB) // true

Além disso, este método permite combinar objetos, excluindo duplicatas:

const objA = {a: 1, b: 2}
const objB = {b: 2, c: 3}

const objC = Object.assign(objA, objB)
console.log(objC) {a: 1, b: 2, c: 3}

Você pode usar a vinculação JSON.parse-JSON.stringify para copiar objetos simples:

const objA = {a: 1, b: 2}

const objB = JSON.parse(JSON.stringify(objA))

console.log(objB) // {a: 1, b: 2}

JSR

MDN

175. O que é um proxy?

O objeto Proxy "envolve" outro objeto e pode interceptar (e, se desejado, processar de forma independente) várias ações com ele, por exemplo, propriedades de leitura / gravação e outras.

const handler = {
    get: (obj, prop) => prop in obj
        ? obj[prop]
        : 0
}

// new Proxy(, )
const p = new Proxy({}, handler)

p.a = 1
p.b = true

console.log(p.a, p.b) // 1 true
console.log( 'c' in p, p.c) // false 0

176. Para que é usado o método seal ()?

Este método "sela" o objeto, evitando adicionar / remover propriedades. Ele também define configurável: falso para todas as propriedades existentes. No entanto, os valores das propriedades de tal objeto podem ser alterados. O método isSealed () é usado para verificar se um objeto está lacrado.

'use strict'
const obj = {
    prop: '    JavaScript!'
}

Object.seal(obj)

obj.prop = ' ,   '
console.log(Object.isSealed(obj)) // true
delete obj.prop // TypeError: Cannot delete property 'prop' of #<Object>
console.log(obj.prop) //  ,   

Observe que, no modo frouxo, uma tentativa de excluir uma propriedade em um objeto selado falhará silenciosamente.



JSR

MDN

177. Qual é a diferença entre os métodos freeze () e seal ()?

O método Object.seal (), ao contrário do método Object.freeze (), permite que você modifique as propriedades existentes de um objeto.

'use strict'
const objA = {
    prop: ''
}
Object.freeze(objA)
objA.prop = ' ' // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

const objB = {
    prop: ' '
}
Object.seal(objB)
objB.prop = ''
console.log(objB.prop) // 

178. Como obter pares de chave / valor enumerados de um objeto?

O método Object.entries () retorna uma matriz de pares de chave / valor de objeto enumerados como submatrizes na mesma ordem que o loop for ... in:

const obj = {
    x: 1,
    y: 2
}

console.log(Object.entries(obj)) // [["x", 1], ["y", 2]]

for (let [key, value] of Object.entries(obj)) {
    console.log(\`${key}: ${value}\`) // x: 1 y: 2
}

JSR

MDN

179. Qual é a principal diferença entre os métodos Object.keys (), Object.values ​​() e Object.entries ()?

O método Object.keys () retorna as chaves de um objeto, o método Object.values ​​() retorna os valores de suas propriedades e Object.entries () retorna uma matriz de pares chave / valor:

const user = {
    name: '',
    age: 30
}

console.log(Object.keys(user)) // ["name", "age"]
console.log(Object.values(user)) // ["", 30]
console.log(Object.entries(user)) // [["name", ""], ["age", 30]]

JSR

MDN - Object.keys ()

MDN - Object.values ​​()

MDN - Object.entries ()

180. Como criar um objeto com um protótipo específico sem usar uma função construtora e classes?

O método Object.create () pode ser usado para isso:

const firstUser = {
    name: '',
    sayHi() {
        console.log(\`,   ${this.name}!\`)
    }
}

const secondUser = Object.create(firstUser)

secondUser.name = ''
secondUser.sayHi() // ,   !

JSR

MDN

181. Para que é usado o WeakSet?

WeakSet é usado para armazenar uma coleção de objetos fracos referenciados. Em outras palavras, ele serve como armazenamento adicional para objetos usados ​​por outro código. Esses objetos são removidos automaticamente pelo coletor de lixo quando se tornam inacessíveis (não utilizados), ou seja, quando apenas a chave permanece no WeakSet.

const ws = new WeakSet()
let user = {}

ws.add(user)
console.log(ws.has(user)) // true

user = null
console.log(ws.has(user)) // false,    

JSR

MDN

182. Qual é a diferença entre Set e WeakSet?

Sua principal diferença é que os objetos armazenados no WeakSet são fracamente referenciados, ou seja, são excluídos automaticamente assim que se tornam inacessíveis. Outras diferenças são as seguintes:

• Set pode armazenar qualquer valor, e WeakSet só pode armazenar objetos.
• WeakSet não tem propriedade de tamanho
• WeakSet não tem métodos clear (), keys (), values ​​(), forEach ()
• WeakSet não é uma entidade iterável

JSR

MDN

183. Quais métodos estão disponíveis no WeakSet?

WeakSet tem os seguintes métodos:

• add (): adiciona um objeto à coleção
• delete (): remove um objeto de uma coleção
• has (): determina se um objeto está na coleção
• length (): retorna o comprimento da coleção

const ws = new WeakSet()
const objA = {}
const objB = {}

ws.add(objA)
ws.add(objB)
console.log(ws.has(objA)) // true
console.log(ws.lenghth()) // 2
ws.delete(objA)
console.log(ws.has(objA)) // false

JSR

MDN

184. Para que é usado o WeakMap?

WeakMap é usado para armazenar pares de chave / valor onde as chaves são fracamente referenciadas. Em outras palavras, ele serve como um repositório adicional para chaves usadas por outro código. Essas chaves são removidas automaticamente pelo coletor de lixo quando se tornam inacessíveis (não utilizadas), ou seja, quando apenas a chave permanece no WeakMap.

const wm = new WeakMap()
let user = {}
wm.set(user, 'user')
console.log(wm.has(user)) // true
user = null
console.log(wm.has(user)) // false,    

JSR

MDN

185. Qual é a diferença entre Map e WeakMap?

Sua principal diferença é que as chaves armazenadas no WeakMap são fracamente referenciadas, ou seja, são excluídos automaticamente assim que se tornam inacessíveis. Outras diferenças são as seguintes:

• O mapa pode usar quaisquer valores como chaves, enquanto o WeakMap pode usar apenas objetos
• WeakMap não tem propriedade de tamanho
• WeakMap não tem métodos clear (), keys (), values ​​(), entries (), forEach ()
• WeakMap não é uma entidade iterável

JSR

MDN

186. Quais métodos estão disponíveis no WeakMap?

WeakMap tem os seguintes métodos:

• set (): adiciona um par chave / valor a um objeto
• delete (): exclui um valor por chave
• has (): determina se um valor está presente por chave
• get (): retorna o valor por chave

const wm = new WeakMap()
const firstUser = {}
const secondUser = {}

wm.set(firstUser, '')
wm.set(secondUser, '')
console.log(wm.has(firstUser)) // true
console.log(wm.get(firstUser)) // 
wm.delete(secondUser)
console.log(wm.has(secondUser)) // false

JSR

MDN

187. Como codificar um URL?

Você pode usar o método encodeURI () para isso. Este método converte todos os caracteres especiais, exceto /?: @ = + $ #

const url = 'https://ru.wikipedia.org/wiki/,__'
const encoded = encodeURI(url)
console.log(encoded) // https://ru.wikipedia.org/wiki/%D0%9B%D0...

JSR

MDN

188. Como decodificar um URL?

O método decodeURI () pode ser usado para isso:

const url = 'https://ru.wikipedia.org/wiki/%D0%9B%D0...'
const decoded = decodeURI(url)
console.log(decoded) // https://ru.wikipedia.org/wiki/,__

JSR

MDN

189. Como imprimir o conteúdo da página?

Você pode usar o método global print () para isso. Este método abre uma caixa de diálogo especial com configurações de impressão:

<button></button>

document.querySelector('button')
    .addEventListener('click', () => print())

MDN

190. O que é uma função anônima?

Uma função anônima é uma função sem nome. Essas funções são frequentemente atribuídas a variáveis ​​e também usadas como retornos de chamada:

const sayHi = function () {
    console.log('')
}
sayHi() // 
// 
const sayBye = () => console.log('')
sayBye() // 

window.addEventListener('click', function () {
    console.log('  ,   ')
})
// 
window.addEventListener('contextmenu', e => {
    e.preventDefault()
    console.log('  -   ')
})

JSR

MDN

191. Qual é a prioridade de usar variáveis ​​locais e globais?

Variáveis ​​locais têm precedência sobre globais com o mesmo nome:

let question = ' '

function toBe () {
    question = ''
    console.log(question)
}
toBe() // 

JSR

MDN

192. O que são acessores?

Acessores ou propriedades computadas são getters e setters. Getters são usados ​​para obter os valores das propriedades de um objeto, e setters são usados ​​para defini-los:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    get access () {
        return this.#access
    }

    set access (bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.access) // false
user.access = true
console.log(user.access) // true

Getters e setters são propriedades e métodos são funções:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    getAccess () {
        return this.#access
    }

    setAccess(bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.getAccess()) // false
user.setAccess(true)
console.log(user.getAccess()) // true

JSR

193. Como definir uma propriedade em um construtor de objetos?

O método Object.defineProperty () pode ser usado para isso. Este método permite adicionar novas propriedades ao objeto e modificar as existentes, bem como alterar as configurações de acesso ao objeto:

'use strict'
const obj = {}

Object.defineProperty(obj, 'prop', {
    value: 1,
    writable: false
})

console.log(obj.prop) // 1
obj.prop = 2 // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

No modo relaxado, uma tentativa de alterar uma propriedade somente leitura falhará silenciosamente.



JSR

MDN

194. Quais são os recursos de getters e setters?

Os principais recursos de getters e setters são os seguintes:

• Eles têm uma sintaxe mais simples em comparação aos métodos.
• Usado para definir propriedades computadas - acessores
• Permite a mesma relação entre propriedades e métodos
• Pode fornecer melhor qualidade de dados
• Permite que você execute tarefas nos bastidores quando se trata de encapsulamento

JSR

195. Os getters e setters podem ser adicionados a um objeto usando o método Object.defineProperty ()?

Bastante:

const obj = {counter: 0}

Object.defineProperty(obj, 'increment', {
    get() {return ++this.counter}
})
Object.defineProperty(obj, 'decrement', {
    get() {return --this.counter}
})

Object.defineProperty(obj, 'sum', {
    set(val) {return this.counter += val}
})
Object.defineProperty(obj, 'sub', {
    set(val) {return this.counter -= val}
})

obj.sum = 10
obj.sub = 5
console.log(obj) // {counter: 5}
console.log(obj.increment) // 6
console.log(obj.decrement) // 5

JSR

MDN

196. Para que é usado switch ... case?

switch ... case é uma alternativa para if ... else e é uma maneira mais visual de executar o código, dependendo da condição passada:

const calc = (x, y, operator) => {
    let result

    try {
        switch (operator) {
            case '+':
                result = x + y
                break
            case '-':
                result = x - y
                break
            case '*':
                result = x * y
                break
            case '/':
                result = x / y
                break
            default:
                throw new Error(' ')
        }

        if (isNaN(result)) {
            throw new Error('   ')
        }

        console.log(result)
        return result
    } catch (e) {
        console.error(e.message)
    }
}

calc(1, 2, '+') // 3
calc(3, 4, '*') // 12
calc('a', 1, '-') //    
calc(5, 6, 'x') //  

JSR

MDN

197. Cite as regras para usar switch ... case

Ao usar a construção de switch ... case, você deve seguir as seguintes regras:

• a condição pode ser um número ou uma string
• valores duplicados não são permitidos
• a instrução padrão é opcional. Se nenhum caso for encontrado, o bloco padrão é executado
• break é usado para parar o loop
• break também é opcional, mas sem ele, a execução do loop continuará

JSR

MDN

198. Nomeie os tipos de dados primitivos.

Os tipos de dados primitivos ("primitivos") em JavaScript são os seguintes valores:

• number : , ±2⁵³
• bigint
• string . ,
• boolean true/false
• null – , null
• undefined – , undefined
• symbol

MDN

Habr — JavaScript?

Habr — JavaScript ?

JavaScript ?

Medium — Advanced JavaScript ES6 — Temporal Dead Zone, Default Parameters And Let vs Var — Deep dive!

JavaScript:

̆ JavaScript

Medium — JavaScript.

Habr — JavaScript

Medium — Understanding Prototypes in JavaScript

Medium — apply(), call() bind(), JavaScript

JavaScript:

Medium — JavaScript Classes: An In-Depth look (Part 1)

Medium — JavaScript slice(), splice() split()

JavaScript

JavaScript- .map(), .filter() .reduce()

reduce() JavaScript

̆ ̆ ECMAScript 2019, for-of

ES2020,

DigitalOcean — map set JavaScript

Medium — JavaScript

Medium — What is Memoization in Javascript?

Redd — Debounce vs Throttle: Definitive Visual Guide

JavaScript

Habr — 5 JSON.stringify()

Habr — () «» JavaScript

Habr — JavaScript- : . 1

Habr — -

GoogleDevelopers — Service Workers: an Introduction

Habr —

WebDevBlog — IndexedDB

GoogleDevelopers — Working with IndexedDB

Habr — Web Storage API:

Habr — -

Medium — A Simple Introduction to Web Workers in JavaScript

Habr — JavaScript,

Habr — Async/Await

Habr — CORS: