200 questions JavaScript théoriques

Bonne journée, mes amis!



Voici une liste de la deuxième centaine de questions de base sur JavaScript de ce référentiel avec des réponses courtes et des liens vers le tutoriel JavaScript moderne (JSR) d'Ilya Kantor et MDN.



Cette liste, ainsi que plus de 300 questions pratiques, sont disponibles dans mon application .



L'application met en œuvre un mécanisme de mémorisation de la question étudiée, et fournit également un travail en mode hors ligne.



Je m'excuse pour les éventuelles erreurs et erreurs typographiques. Toute forme de rétroaction est appréciée.



Édition du 14.09.2019



Consultez les 100 premières questions ici .

101. À quoi sert stopPropagation ()?

Cette méthode est utilisée pour empêcher l'événement de remonter ou de remonter la chaîne à partir des ancêtres de l'élément cible. En d'autres termes, il arrête d'envoyer l'événement de l'élément cible à ses ancêtres. Prenons un exemple:

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

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

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

Lorsque vous cliquez sur un conteneur imbriqué, le message "Conteneur interne" s'affiche dans la console. Si vous supprimez event.stopPropagation (), alors lorsque vous cliquez sur le conteneur imbriqué, les deux messages seront affichés dans la console.



JSR

MDN

102. Que fait return false?

Cette instruction est utilisée dans les gestionnaires d'événements pour:

• Annulation du comportement par défaut du navigateur
• Empêcher la propagation des événements via le DOM
• Arrêt de l'exécution du callback et retour du contrôle à la fonction appelante

Notez que sans spécifier de valeur de retour, l'instruction return renvoie undefined.



JSR

MDN

103. Qu'est-ce que BOM?

La nomenclature ou (Browser Object Model) permet à JavaScript d'interagir avec le navigateur. Ce modèle comprend des objets tels que le navigateur, l'emplacement, l'historique, l'écran, XMLHttpRequest, etc. En d'autres termes, les nomenclatures sont des objets supplémentaires fournis par le navigateur pour fonctionner avec tout sauf le document.

Veuillez noter que la nomenclature n'est pas standardisée, donc sa mise en œuvre peut différer selon les navigateurs.







JSR

104. À quoi sert setTimeout ()?

Cette méthode est utilisée pour l'exécution différée d'une tâche. En d'autres termes, il permet de lancer l'exécution d'une fonction ou l'évaluation d'une expression après un certain temps (en millisecondes). Dans l'exemple suivant, nous imprimons un message sur la console après 2 secondes:

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

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

JSR

MDN

105. À quoi sert setInterval ()?

Cette méthode est utilisée pour exécuter périodiquement une tâche. En d'autres termes, il vous permet d'exécuter l'exécution d'une fonction ou l'évaluation d'une expression après un certain laps de temps (en millisecondes). Dans l'exemple suivant, nous imprimons un message sur la console toutes les 2 secondes:

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

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

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

Dans le deuxième exemple, le message "Hello!" imprimera deux fois sur la console, après quoi la minuterie s'arrêtera



JSR

MDN

106. Pourquoi est-ce que JavaScript est appelé Single Threated?

JavaScript est un langage de programmation à thread unique ou synchrone. Cela signifie qu'une seule tâche peut être exécutée à la fois. Si la tâche est complexe, son exécution peut prendre beaucoup de temps et pendant ce temps, le thread principal de l'exécution du code sera bloqué. Le blocage d'un flux, à son tour, signifie qu'il n'y a pas d'interactivité sur la page. Le navigateur cesse de répondre aux actions de l'utilisateur et à d'autres événements. Pour résoudre ce problème, des rappels, des promesses, async / await, des workers et d'autres outils pour travailler avec du code asynchrone sont utilisés. En JavaScript, contrairement à, par exemple, Java, Go ou C ++, il n'y a aucun moyen de créer des threads ou des processus supplémentaires.



JSR

MDN

107. Qu'est-ce que la délégation d'événements?

La délégation d'événements est une technique dans laquelle un événement est enregistré sur un parent pour gérer les événements déclenchés par les enfants.

Souvent utilisé pour gérer les clics de bouton dans un conteneur de regroupement ou pour modifier les champs de saisie de texte dans les formulaires, par exemple:

<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)
})

Dans l'exemple ci-dessus, au lieu d'inscrire des gestionnaires sur les éléments enfants, nous les enregistrons sur les éléments parents. Entrer du texte dans un champ ou cliquer sur un bouton affichera le nom de classe de l'élément correspondant dans la console.



JSR

108. Qu'est-ce qu'ECMAScript?

ECMAScript est le langage de programmation derrière JavaScript. C'est une sorte de modèle ou de plan sur lequel JavaScript est "construit". ECMAScript est normalisé dans la spécification ECMA-262 par l'organisme de normalisation Ecma International.



JSR

MDN

109. Nommer les fonctionnalités de la syntaxe JSON

La syntaxe JSON présente les caractéristiques suivantes:

• Les données sont des paires clé / valeur
• La clé et la valeur sont placées entre guillemets, sauf si la valeur est un nombre ("clé": "valeur")
• Les données sont séparées par des virgules
• Les objets sont entourés d'accolades
• Tableaux - au carré

JSR

MDN

110. Que fait JSON.stringify ()?

Lors de l'envoi de données au serveur, il doit avoir un format de chaîne spécial. La méthode JSON.stringify () est utilisée pour convertir un objet en chaîne JSON:

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

JSR

MDN

111. Que fait JSON.parse ()?

Lors de la réception des données du serveur, elles ont un format de chaîne spécial. La méthode JSON.parse () est utilisée pour convertir ces données en un objet JavaScript:

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

JSR

MDN

112. À quoi sert JSON?

Lors de l'échange de données entre client et serveur, ces données ne peuvent être que des chaînes. Puisque JSON est du texte, il est parfait pour cela. Il peut également être utilisé comme format de données par n'importe quel langage de programmation, avec d'autres formats tels que XML ou Protobuf.



JSR

MDN

113. Qu'est-ce que PWA (Progressive Web Application - Progressive Web Application)?

En bref, les PWA sont des sites Web qui se comportent comme des applications natives. Ils peuvent être installés sur un téléphone ou un ordinateur et, en règle générale, ils fonctionnent hors ligne. Pour ce dernier, des agents de service et une interface de mise en cache sont utilisés. L'avantage des PWA par rapport aux applications mobiles est leur taille et leur relative facilité de développement. En outre, vous n'avez pas besoin de dépenser des ressources pour créer deux applications pour un site: Web et mobile. Il maintient également une bonne expérience utilisateur.



MDN

114. À quoi sert clearTimeout ()?

Cette méthode est utilisée pour arrêter une minuterie démarrée par setTimeout (). Pour ce faire, l'identifiant du minuteur est écrit dans une variable, qui est ensuite passée à clearTimeout () en tant qu'argument.

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

Dans l'exemple ci-dessus, deux secondes plus tard, le message «Hello!» S'affiche sur la console, après quoi le minuteur s'arrête. Ceci est fait pour que le garbage collector puisse supprimer le minuteur qui s'est exécuté.



JSR

MDN

115. À quoi sert clearInterval ()?

Cette méthode est utilisée pour arrêter une minuterie démarrée avec setInterval (). Pour ce faire, l'identifiant du minuteur est écrit dans une variable, qui est ensuite passée à clearInterval () en tant qu'argument.

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

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

Dans l'exemple ci-dessus, la valeur de la variable i est imprimée sur la console toutes les secondes, qui augmente de 1 (1, 2) à chaque fois. Lorsque i devient 3, la minuterie s'arrête.



JSR

MDN

116. Comment rediriger?

Pour ce faire, vous pouvez utiliser la propriété location de l'objet window:

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

MDN

117. Comment vérifier si une sous-chaîne existe dans une chaîne?

Il existe au moins trois façons de procéder.

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 - inclut

MDN - indexOf

MDN - test

118. Comment vérifier l'exactitude de l'adresse e-mail?

Cela peut être fait en utilisant HTML, en définissant le type du champ de saisie sur la valeur email (<input type = "email">). Cependant, cette méthode n'est pas considérée comme très fiable. Par conséquent, le courrier électronique est généralement validé à l'aide d'une expression régulière. Il est recommandé de le faire côté serveur car JavaScript peut être désactivé sur le client:

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

Cet exemple utilise l'une des expressions régulières les plus simples pour valider une adresse e-mail. Une expression plus fiable ressemble à ceci (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. Comment obtenir l'URL actuelle?

Pour ce faire, vous pouvez utiliser la propriété location de l'objet window ou la propriété URL de l'objet document:

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

MDN - emplacement

MDN - document.URL

120. Quelles sont les propriétés de l'objet de localisation?

Les propriétés de l'objet de localisation peuvent être utilisées pour obtenir des parties de l'URL de la page actuelle:

• href - URL complète
• origine - protocole, hôte et port (origine, utilisé dans la politique d'origine commune (SOP) et le partage de ressources (CORS))
• protocole
• hôte - hôte et port
• nom d'hôte - hôte
• Port
• chemin d'accès - chemin
• recherche - la chaîne de requête après?
• hash - chaîne de requête après # (ancre)
• nom d'utilisateur - nom d'utilisateur avant le domaine
• mot de passe - mot de passe avant le domaine

MDN

121. Comment obtenir la chaîne de requête?

Vous pouvez utiliser le constructeur d'URL pour cela:

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. Comment vérifier si une propriété existe dans un objet?

Il existe au moins trois façons de procéder.

En opérateur

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

Méthode HasOwnProperty ()

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

Comparaison avec undefined

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

JSR

MDN - pour ... dans

MDN - hasOwnProperty

123. Comment parcourir les propriétés énumérées d'un objet?

Pour ce faire, vous pouvez utiliser une boucle for ... in avec la méthode hasOwnProperty () pour exclure les propriétés héritées.

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

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

JSR

MDN

124. Comment vérifier que l'objet est vide?

Il existe au moins trois façons de procéder.

Object.entries (), méthode

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

Object.keys (), méthode

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 boucle et méthode 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 - Objets JSR

- Object.keys, valeurs, entrées

MDN - Object.entries

MDN - Object.keys

MDN - pour ... dans

MDN - Object.hasOwnProperty

125. Quel est l'objet des arguments?

arguments est un objet de type tableau (pseudo-tableau) contenant les arguments passés à la fonction:

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

Notez que les fonctions fléchées n'ont pas d'arguments. Au lieu d'arguments, il est recommandé d'utiliser l'opérateur rest ... (autres paramètres), qui fonctionne à la fois dans les fonctions ordinaires et fléchées:

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

sum(1, 2, 3) // 6

JSR

MDN

126. Comment mettre en majuscule la première lettre d'une chaîne?

Cela peut être fait en utilisant les méthodes charAt (), toUpperCase () et slice ():

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

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

JSR

MDN - charAt

MDN - toUpperCase

MDN - tranche

127. Comment obtenir la date actuelle?

Cela peut être fait à l'aide d'un objet Date ou du constructeur 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 - Date

JSR = Intl

MDN - Date

MDN - Intl.DateTimeFormat

128. Comment comparer deux objets Date?

Pour ce faire, vous ne devez pas comparer les objets eux-mêmes, mais, par exemple, les valeurs renvoyées par la méthode 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. Comment vérifier qu'une ligne commence sur une autre ligne?

Vous pouvez utiliser la méthode intégrée startsWith () pour ce faire:

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

Selon CanIUse, cette méthode est prise en charge par près de 94% des navigateurs



JSR

MDN

130. Comment supprimer les problèmes d'une ligne?

Pour ce faire, vous pouvez utiliser les méthodes intégrées trimStart () (début de ligne), trimEnd () (fin de ligne) et trim () (début et fin de ligne):

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

la coupe ne fonctionne pas pour les espaces entre les mots. Dans ce cas, vous pouvez utiliser la méthode replace () et l'expression régulière:

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

Selon CanIUse , les méthodes trimStart () et trimEnd () sont prises en charge par 93% des navigateurs.



MDN

131. Comment ajouter une nouvelle propriété à un objet?

Il y a deux façons de faire ça. Supposons que nous ayons un objet comme celui-ci:

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

Nous pouvons y ajouter une nouvelle propriété en utilisant la notation par points ou par crochets:

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

L'une des différences entre ces méthodes est que lors de l'utilisation de la notation entre parenthèses, la clé ajoutée peut être un nombre:

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

JSR

MDN

132. L'expression! - est-elle un opérateur spécial?

Non ce n'est pas. C'est une combinaison de deux opérateurs: opérateur! (logique non) et opérateur - (décrémenter). Si vous utilisez l'expression spécifiée avec une valeur quelconque, cette valeur sera d'abord diminuée de un, puis convertie en un type booléen et inversée:

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 - logique PAS

MDN - décrémentation

133. Comment affecter une valeur par défaut à une variable?

Pour ce faire, vous pouvez utiliser le || (booléen ou):

const a = b || 'default'

Dans ce cas, la variable a se verra attribuer la valeur par défaut si la valeur de la variable b est false (false, undefined, null, NaN, 0, '').

Si nous parlons des valeurs standard des paramètres de fonction, elles peuvent être affectées comme suit:

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

De plus, les paramètres suivants peuvent utiliser les valeurs des précédents comme valeurs standard:

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

JSR

MDN

134. Comment créer une chaîne multiligne?

Auparavant, il était fait quelque chose comme ceci (caractères de contrôle de concaténation et de saut de ligne):

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

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

Maintenant, ils le font comme ceci (modèle littéral):

const str =
    \` 
     
    !\`

JSR

MDN

135. Pouvons-nous ajouter des propriétés aux fonctions?

Puisque les fonctions sont également des objets, nous pouvons facilement leur ajouter des propriétés. La valeur de la propriété de la fonction peut être une autre fonction:

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. Comment savoir combien d'arguments une fonction s'attend à recevoir?

La propriété length peut être utilisée pour cela:

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. Qu'est-ce qu'un polyfill?

Les polyfills sont utilisés pour faire fonctionner JavaScript moderne dans les anciens navigateurs. Cela se fait en implémentant de nouvelles fonctionnalités du langage en utilisant l'ancienne syntaxe. Le processus même de conversion d'un nouveau code en ancien code s'appelle la transpilation. Le transpilateur le plus populaire pour le code JavaScript est Babel.

Par exemple, l'une des dernières fonctionnalités JavaScript est la méthode Promise.allSettled (), qui, contrairement à Promise.all (), ne se termine pas lorsqu'une des promesses qui lui sont transmises est rejetée.

Cependant, à partir d'aujourd'hui, le support de son navigateur selon les données CanIUse est de 80%, donc un polyfill est nécessaire:

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. À quoi servent les instructions continue et break?

L'instruction break est utilisée pour sortir de la boucle. Après avoir arrêté l'itération, le code continue:

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

L'instruction continue est utilisée pour ignorer l'itération:

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 - briser

MDN - continuer

139. Qu'est-ce qu'une étiquette?

Les étiquettes vous permettent de nommer des boucles et des blocs de code. Ils peuvent être utilisés, par exemple, pour sortir d'une boucle ou comme condition pour exécuter du code:

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
*/

L'utilisation d'étiquettes est considérée comme une mauvaise pratique.



MDN

140. Quels sont les avantages de déclarer des variables au début du code?

Il est recommandé de déclarer les variables au début de chaque script ou fonction. Cela offre les avantages suivants:

• Garde le code propre
• Toutes les variables sont au même endroit
• Évite la création accidentelle de variables globales
• Empêche les remplacements de variables indésirables

JSR

MDN

141. Quels sont les avantages de l'initialisation d'une variable lorsqu'elle est déclarée?

Il est recommandé d'initialiser toutes les variables au moment de la déclaration. Cela offre les avantages suivants:

• Garde le code propre
• Les variables et leurs valeurs sont au même endroit
• Empêche les variables non initialisées d'être affectées non définies

JSR

MDN

142. Quelles sont les principales recommandations pour créer un objet

Pour créer un objet, au lieu du constructeur d'objet new Object (), il est recommandé d'utiliser la notation entre parenthèses {}. En outre, selon le type de valeur, il est recommandé d'utiliser les éléments suivants:

• string comme '' au lieu de new String ()
• un nombre, par exemple 0 au lieu du nouveau nombre ()
• valeur booléenne comme false au lieu de new Boolean ()
• [] au lieu de new Array ()
• // au lieu de new RegExp ()
• function () {} au lieu de new Function ()

JSR

MDN

143. Comment définir un tableau au format JSON?

Le tableau JSON est un tableau d'objets JSON, par exemple:

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

JSR

MDN

144. Comment implémenter une fonction qui renvoie un entier aléatoire dans une plage donnée?

Cette fonction peut être implémentée à l'aide des méthodes Math.random () et Math.floor () de l'objet Math:

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

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. Qu'est-ce que le tremblement des arbres?

La secousse d'arbre est la suppression du code des modules inutilisés. Ces modules ne sont pas inclus dans l'assemblage final (bundle). Pour que le générateur de modules (bundler) détermine quels modules sont utilisés et lesquels ne le sont pas, la structure du programme doit être basée sur des modules ES6. Cette technique a été popularisée par le bundler Rollup.



MDN

146. À quoi sert le secouage des arbres?

La secousse d'arbre peut réduire considérablement la taille d'un assembly (bundle) en supprimant le code des modules inutilisés. Plus la taille de l'assemblage est petite, meilleures sont les performances de l'application. La secousse d'arbre est implémentée dans les générateurs de modules tels que Rollup et Webpack.



MDN

147. Qu'est-ce qu'une expression régulière?

Une expression régulière est une séquence de caractères qui forment un modèle de recherche. Ce modèle peut être utilisé pour rechercher des données dans du texte, telles que des sous-chaînes dans une chaîne. Les expressions régulières sont largement utilisées par de nombreux langages de programmation pour les opérations de recherche et de remplacement de texte. Le modèle général de regex ressemble à ceci:

//

Exemple:

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

Vous pouvez également utiliser le constructeur RegExp pour créer une expression régulière:

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

JSR

MDN

148. Quelles méthodes sont utilisées dans les expressions régulières?

Il existe deux méthodes principales utilisées dans les expressions régulières: exec () et test ().

La méthode exec () recherche une correspondance d'expression régulière dans la chaîne qui lui est transmise en tant qu'argument. Le comportement de cette méthode dépend de si l'expression régulière a l'indicateur g. Sinon, la première correspondance est renvoyée. Si l'indicateur g est présent, alors:

• L'appel exec () renvoie la première correspondance et stocke la position après celle-ci dans la propriété lastIndex.
• Le prochain appel de ce type démarre la recherche à la position lastIndex, retourne la correspondance suivante et se souvient de la position après celle-ci dans lastIndex.
• S'il n'y a plus de correspondances, exec () retourne null et lastIndex est mis à 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
*/

La méthode test () renvoie une valeur booléenne selon qu'une correspondance est trouvée dans la chaîne:

const str = '  JavaScript'

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

JSR

MDN

149. Quels indicateurs sont utilisés dans les expressions régulières?

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

JSR

MDN

150. Quels caractères spéciaux sont utilisés dans les expressions régulières?

Les caractères spéciaux utilisés dans les expressions régulières peuvent être divisés en plusieurs groupes.

Classes de caractères de base:



Jeux de caractères:



Les frontières:



Regroupement:



Quantificateurs:



JSR

MDN

151. Comment changer les styles d'un élément HTML?

Cela peut être fait soit en utilisant la propriété style, soit en attribuant une classe appropriée à l'élément:

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 - style

MDN - className

MDN - classList

152. Qu'est-ce qu'un débogueur?

L'expression du débogueur donne accès à toutes les fonctionnalités de débogage disponibles dans un environnement spécifique, par exemple, la définition de points d'arrêt (points d'arrêt, points d'arrêt). Si la fonctionnalité de débogage n'est pas disponible au moment de l'exécution, cette expression n'aura aucun effet:

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

JSR

MDN

153. À quoi servent les points d'arrêt du débogueur?

Les points de contrôle sont utilisés pour suspendre l'exécution d'une fonction ou d'un autre code à un emplacement spécifique afin de découvrir pourquoi un programme ne fonctionne pas correctement. Une fois arrêtée, la fonction peut être poursuivie.



JSR

MDN

154. Des mots réservés peuvent-ils être utilisés comme identifiants?

Non, vous ne pouvez pas utiliser de mots réservés comme noms pour des variables, des étiquettes, des fonctions ou des objets:

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

155. Comment déterminer la largeur et la hauteur de l'image?

Cela peut être fait de plusieurs manières. Voici l'un d'entre eux:

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. Comment envoyer une requête HTTP synchrone?

Pour ce faire, vous pouvez utiliser l'objet XMLHttpRequest en le passant à la méthode open () avec un troisième argument facultatif avec la valeur 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. Comment faire une requête HTTP asynchrone?

La méthode fetch () peut être utilisée pour cela:

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. Comment obtenir la date au format requis?

La méthode toLocaleString () peut être utilisée pour cela:

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

MDN

159. Comment obtenir les tailles de page maximales?

Pour ce faire, vous devez rechercher les valeurs maximales des propriétés scrollWidth, offsetWidth, clientWidth et scrollHeight, offsetHeight, clientHeight des objets document.body et 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. Qu'est-ce qu'un opérateur conditionnel ou ternaire?

L'opérateur ternaire est une manière abrégée d'écrire le bloc 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. Peut-on utiliser une chaîne d'opérateurs ternaires?

Oui, dans ce cas, l'opérateur ternaire est une alternative au bloc 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. Comment démarrer l'exécution du code après le chargement complet de la page?

Cela peut être fait de plusieurs manières.

Placez la balise de script avant la balise de fermeture du corps ou ajoutez-lui un attribut defer:

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

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

Si votre script est un module, au lieu de l'attribut defer, vous devez spécifier l'attribut type avec le module de valeur:

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

Ajoutez un attribut onload à la balise body:

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

Ajoutez du code pour gérer l'événement load de l'objet window:

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

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

Faites de même pour document.body:

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

163. Quelle est la différence entre __proto__ et prototype?

La propriété __proto__ (propriété cachée interne [[Prototype]]) est un objet dont une instance hérite des champs et des méthodes. Et prototype est un objet utilisé pour créer __proto__ lorsqu'il est instancié à l'aide du nouveau mot-clé:

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. Donnez un exemple de l'utilisation obligatoire d'un point-virgule

L'une des utilisations obligatoires des points-virgules est l'utilisation de IIFE (Immediately Invoked Fuction Expression):

Par exemple, le code suivant:

try {
    const x = ''

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

Sera interprété comme ceci:

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

Par conséquent, dans le bloc try, nous obtenons une TypeError: "To be" n'est pas une fonction, le contrôle est passé au bloc catch et "Not to be" est envoyé à la console.

Pour que le code fonctionne comme prévu, il doit ressembler à ceci:

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

N'oubliez pas non plus les cas de placement automatique de points-virgules.

165. A quoi sert la méthode freeze ()?

Cette méthode, comme son nom l'indique, sert à "figer" un objet. Un objet gelé est immuable (immuable). Cela signifie que vous ne pouvez pas ajouter de nouvelles propriétés à un tel objet, supprimer ou modifier celles existantes. Cette méthode définit également configurable: false et writable: false pour les propriétés existantes. La méthode renvoie un objet gelé.

'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>

Notez qu'en mode non strict, aucune exception n'est levée, le code ne s'exécute tout simplement pas.



JSR

MDN

166. Pourquoi avons-nous besoin de la méthode freeze ()?

Le paradigme de la programmation orientée objet dit qu'une interface contenant un certain nombre d'éléments doit être immuable, c'est-à-dire il doit être impossible d'étendre, de modifier ou d'utiliser des éléments en dehors du contexte actuel. Cette méthode est un alias pour le mot-clé final dans certains autres langages de programmation.



JSR

MDN

167. Comment mettre en majuscule la première lettre de chaque mot d'une ligne?

Une façon de procéder est la suivante:

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

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

168. Comment savoir si JavaScript est désactivé sur une page?

Vous pouvez utiliser la balise noscript pour cela. Le code à l'intérieur de cette balise ne sera exécuté que si JavaScript est désactivé sur la page:

    console.log('JavaScript ')

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

Pour désactiver JavaScript dans Chrome, allez dans les paramètres -> section "Confidentialité et sécurité" -> Paramètres du site -> section "Contenu" -> JavaScript.



MDN

169. Quels opérateurs sont pris en charge par JavaScript?

Les opérateurs sont utilisés pour travailler avec des valeurs ou des opérandes. JavaScript prend en charge les opérateurs suivants:

• Arithmétique: + (addition, conversion en un nombre, concaténation), - (soustraction), * (multiplication), / (division),% (modulo, avec reste), ++ (incrémentation), - (décrémentation), * * (exponentiation)
• opérateurs de comparaison: == (égalité abstraite, lâche),! = (inégalité abstraite), === (égalité stricte, contrôle d'identité) ,! == (inégalité stricte),>,> =, <, <=
• logique: && (et), || (ou),! (not) (!!! (double négation) n'est pas un opérateur séparé)
• opérateurs d'affectation: =, + =, - =, * =, / =,% =
• ternaire :? ...: (si ... sinon)
• opérateur typeof: définit le type de l'opérande
• au niveau du bit: & (et), | (ou), ^ (exclusif ou), ~ (pas), << (décalage gauche), >> (décalage droit), >>> (décalage droit avec un remplissage nul)
• nouveau :? .. ​​(chaîne optionnelle), ?? (fusion nulle)

//  
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 - Opérateurs JSR - Opérateurs

logiques

JSR - Opérateurs de comparaison JSR - Opérateurs

JSR conditionnels -

Opérateurs binaires

MDN - Opérateur de séquence facultatif

MDN - Opérateur de fusion nul

170. A quoi sert l'opérateur rest ... (autres paramètres)?

L'opérateur rest est une alternative à l'objet arguments et renvoie un tableau des arguments passés à la fonction:

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

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

Veuillez noter que l'opérateur rest doit être passé comme dernier argument:

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

JSR

MDN

171. À quoi sert l'opérateur de diffusion?

L'opérateur de diffusion est utilisé pour développer (décompresser, développer) les entités itératives (tableaux, chaînes). Déballer signifie convertir, par exemple, un tableau de nombres en un ensemble de valeurs simples:

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

const nums = [1, 2, 3]

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

JSR

MDN

172. Comment déterminer si un objet est gelé?

Afin de déterminer si un objet est gelé, c'est-à-dire est-il immuable (immuable) la méthode isFrozen () est utilisée:

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

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

MDN

173. Comment déterminer l'égalité des valeurs à l'aide d'un objet?

La méthode is () peut être utilisée pour cela:

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

Les valeurs sont égales si:

• les deux ne sont pas définis
• les deux sont nuls
• les deux sont vrais ou faux
• les deux sont des chaînes de même longueur avec les mêmes caractères
• tous deux font référence au même objet
• les deux sont des nombres, +0, -0 ou NaN

JSR

MDN

174. Comment créer une copie d'un objet?

L'un des moyens les plus fiables de le faire est d'utiliser la méthode assign ():

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

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

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

En outre, cette méthode vous permet de combiner des objets, à l'exclusion des doublons:

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}

Vous pouvez utiliser la liaison JSON.parse-JSON.stringify pour copier des objets simples:

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

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

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

JSR

MDN

175. Qu'est-ce qu'un proxy?

L'objet Proxy «s'enroule» autour d'un autre objet et peut intercepter (et, si désiré, traiter indépendamment) diverses actions avec lui, par exemple, lire / écrire des propriétés et autres.

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. À quoi sert la méthode seal ()?

Cette méthode "scelle" l'objet, empêchant l'ajout / la suppression de propriétés. Il définit également configurable: false pour toutes les propriétés existantes. Cependant, les valeurs des propriétés d'un tel objet peuvent être modifiées. La méthode isSealed () est utilisée pour vérifier si un objet est scellé.

'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) //  ,   

Notez qu'en mode laxiste, une tentative de suppression d'une propriété sur un objet scellé échouera silencieusement.



JSR

MDN

177. Quelle est la différence entre les méthodes freeze () et seal ()?

La méthode Object.seal (), contrairement à la méthode Object.freeze (), vous permet de modifier les propriétés existantes d'un objet.

'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. Comment obtenir les paires clé / valeur énumérées d'un objet?

La méthode Object.entries () renvoie un tableau de paires clé / valeur d'objet énumérées sous forme de sous-tableaux dans le même ordre que la boucle 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. Quelle est la principale différence entre les méthodes Object.keys (), Object.values ​​() et Object.entries ()?

La méthode Object.keys () renvoie les clés d'un objet, la méthode Object.values ​​() renvoie les valeurs de ses propriétés et Object.entries () renvoie un tableau de paires clé / valeur:

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. Comment créer un objet avec un prototype spécifique sans utiliser de fonction constructeur et de classes?

La méthode Object.create () peut être utilisée pour cela:

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

const secondUser = Object.create(firstUser)

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

JSR

MDN

181. À quoi sert WeakSet?

WeakSet est utilisé pour stocker une collection d'objets faiblement référencés. En d'autres termes, il sert de stockage supplémentaire pour les objets utilisés par d'autres codes. Ces objets sont automatiquement supprimés par le ramasse-miettes lorsqu'ils deviennent inaccessibles (inutilisés), c'est-à-dire lorsque seule la clé reste de l'objet dans le 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. Quelle est la différence entre Set et WeakSet?

Leur principale différence est que les objets stockés dans le WeakSet sont faiblement référencés, c'est-à-dire sont automatiquement supprimés dès qu'ils deviennent inaccessibles. Les autres différences sont les suivantes:

• Set peut stocker n'importe quelle valeur et WeakSet ne peut stocker que des objets
• WeakSet n'a pas de propriété de taille
• WeakSet n'a pas de méthodes clear (), keys (), values ​​(), forEach ()
• WeakSet n'est pas une entité itérable

JSR

MDN

183. Quelles méthodes sont disponibles dans le WeakSet?

WeakSet a les méthodes suivantes:

• add (): ajoute un objet à la collection
• delete (): supprime un objet d'une collection
• has (): détermine si un objet est dans la collection
• length (): renvoie la longueur de la collection

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. À quoi sert WeakMap?

WeakMap est utilisé pour stocker des paires clé / valeur où les clés sont faiblement référencées. En d'autres termes, il sert de référentiel supplémentaire pour les clés utilisées par d'autres codes. Ces clés sont automatiquement supprimées par le ramasse-miettes lorsqu'elles deviennent inaccessibles (inutilisées), c'est-à-dire lorsque seule la clé reste dans le 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. Quelle est la différence entre Map et WeakMap?

Leur principale différence est que les clés stockées dans WeakMap sont faiblement référencées, c'est-à-dire sont automatiquement supprimés dès qu'ils deviennent inaccessibles. Les autres différences sont les suivantes:

• Map peut utiliser n'importe quelle valeur comme clé, tandis que WeakMap ne peut utiliser que des objets
• WeakMap n'a pas de propriété de taille
• WeakMap n'a pas de méthodes clear (), keys (), values ​​(), entries (), forEach ()
• WeakMap n'est pas une entité itérable

JSR

MDN

186. Quelles méthodes sont disponibles dans WeakMap?

WeakMap a les méthodes suivantes:

• set (): ajoute une paire clé / valeur à un objet
• delete (): supprime une valeur par clé
• has (): détermine si une valeur est présente par clé
• get (): renvoie la valeur par clé

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. Comment encoder une URL?

Vous pouvez utiliser la méthode encodeURI () pour cela. Cette méthode convertit tous les caractères spéciaux sauf /?: @ = + $ #

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. Comment décoder une URL?

La méthode decodeURI () peut être utilisée pour cela:

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. Comment imprimer le contenu de la page?

Vous pouvez utiliser la méthode globale print () pour cela. Cette méthode ouvre une boîte de dialogue spéciale avec les paramètres d'impression:

<button></button>

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

MDN

190. Qu'est-ce qu'une fonction anonyme?

Une fonction anonyme est une fonction sans nom. Ces fonctions sont souvent attribuées à des variables et également utilisées comme rappels:

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. Quelle est la priorité de l'utilisation des variables locales et globales?

Les variables locales ont priorité sur les globaux du même nom:

let question = ' '

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

JSR

MDN

192. Que sont les accesseurs?

Les accesseurs ou propriétés calculées sont des getters et des setters. Les getters sont utilisés pour obtenir les valeurs des propriétés d'un objet, et les setters sont utilisés pour les définir:

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

Les getters et les setters sont des propriétés, et les méthodes sont des fonctions:

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. Comment définir une propriété dans un constructeur d'objet?

La méthode Object.defineProperty () peut être utilisée pour cela. Cette méthode vous permet d'ajouter de nouvelles propriétés à l'objet et de modifier celles existantes, ainsi que de modifier les paramètres d'accès à l'objet:

'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>'

En mode laxiste, une tentative de modification d'une propriété en lecture seule échouera silencieusement.



JSR

MDN

194. Quelles sont les caractéristiques des getters et des setters?

Les principales caractéristiques des getters et des setters sont les suivantes:

• Ils ont une syntaxe plus simple que les méthodes.
• Utilisé pour définir les propriétés calculées - accesseurs
• Permet la même relation entre les propriétés et les méthodes
• Peut fournir une meilleure qualité des données
• Vous permet d'effectuer des tâches dans les coulisses en matière d'encapsulation

JSR

195. Des getters et des setters peuvent-ils être ajoutés à un objet à l'aide de la méthode Object.defineProperty ()?

Assez:

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. A quoi sert le boîtier interrupteur ...?

switch ... case est une alternative à if ... else et est une manière plus visuelle d'exécuter du code en fonction de la condition passée:

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. Nommez les règles d'utilisation de switch ... case

Lorsque vous utilisez la construction de boîtier interrupteur ..., vous devez respecter les règles suivantes:

• la condition peut être un nombre ou une chaîne
• les valeurs en double ne sont pas autorisées
• l'instruction par défaut est facultative. Si aucun cas n'est trouvé, le bloc par défaut est exécuté
• break est utilisé pour arrêter la boucle
• break est également facultatif, mais sans lui, l'exécution de la boucle continuera

JSR

MDN

198. Nommez les types de données primitifs.

Les types de données primitifs ("primitives") en JavaScript sont les valeurs suivantes:

• nombre pour tout nombre: entier ou virgule flottante, les valeurs entières sont limitées à ± 2 ⁵³
• bigint pour les entiers de longueur arbitraire
• string pour les chaînes. Une chaîne peut contenir un ou plusieurs caractères, il n'y a pas de type de caractère distinct
• booléen pour vrai / faux
• null pour les valeurs inconnues - un type distinct avec une seule valeur nulle
• non défini pour les valeurs non attribuées - un type distinct ayant une valeur non définie
• symbole pour les identifiants uniques

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: