200 theoretische JavaScript-Fragen

Guten Tag, Freunde!



Hier ist eine Liste der zweiten hundert JavaScript-Grundfragen aus diesem Repository mit kurzen Antworten und Links zu Ilya Kantors Modern JavaScript Tutorial (JSR) und MDN.



Diese Liste und mehr als 300 Übungsfragen sind in meiner App verfügbar .



Die Anwendung implementiert einen Mechanismus zum Speichern der untersuchten Frage und bietet auch Offline-Arbeit.



Ich entschuldige mich für mögliche Fehler und Tippfehler. Jede Form von Feedback ist willkommen.



Ausgabe vom 14.09.



Die ersten 100 Fragen finden Sie hier .

101. Wofür wird stopPropagation () verwendet?

Diese Methode wird verwendet, um zu verhindern, dass das Ereignis von den Vorfahren des Zielelements in die Luft sprudelt. Mit anderen Worten, das Ereignis wird nicht mehr vom Zielelement an seine Vorfahren gesendet. Betrachten wir ein Beispiel:

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

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

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

Wenn Sie auf einen verschachtelten Container klicken, wird in der Konsole die Meldung "Innerer Container" angezeigt. Wenn Sie event.stopPropagation () entfernen und dann auf den verschachtelten Container klicken, werden beide Nachrichten in der Konsole angezeigt.



JSR

MDN

102. Was macht return false?

Diese Anweisung wird in Ereignishandlern verwendet, um:

• Abbrechen des Standardverhaltens des Browsers
• Verhindern der Ereignisausbreitung durch das DOM
• Stoppen der Ausführung des Rückrufs und Zurückgeben der Steuerung an die aufrufende Funktion

Beachten Sie, dass die return-Anweisung ohne Angabe eines Rückgabewerts undefiniert zurückgibt.



JSR

MDN

103. Was ist Stückliste?

Die Stückliste oder (Browser-Objektmodell) ermöglicht die Interaktion von JavaScript mit dem Browser. Dieses Modell enthält Objekte wie Navigator, Standort, Verlauf, Bildschirm, XMLHttpRequest usw. Mit anderen Worten, Stücklisten sind zusätzliche Objekte, die vom Browser bereitgestellt werden, um mit allem außer dem Dokument zu arbeiten.

Bitte beachten Sie, dass die Stückliste nicht standardisiert ist, sodass ihre Implementierung in verschiedenen Browsern unterschiedlich sein kann.







JSR

104. Wofür wird setTimeout () verwendet?

Diese Methode wird zur verzögerten Ausführung einer Aufgabe verwendet. Mit anderen Worten, Sie können die Ausführung einer Funktion oder die Auswertung eines Ausdrucks nach einer bestimmten Zeit (in Millisekunden) ausführen. Im folgenden Beispiel wird nach 2 Sekunden eine Nachricht an die Konsole gedruckt:

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

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

JSR

MDN

105. Wofür wird setInterval () verwendet?

Diese Methode wird verwendet, um eine Aufgabe regelmäßig auszuführen. Mit anderen Worten, Sie können die Ausführung einer Funktion oder die Auswertung eines Ausdrucks nach einem bestimmten Zeitraum (in Millisekunden) ausführen. Im folgenden Beispiel drucken wir alle 2 Sekunden eine Nachricht an die Konsole:

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

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

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

Im zweiten Beispiel wird die Meldung "Hallo!" wird zweimal auf der Konsole gedruckt, danach wird der Timer



JSR MDN gestoppt

106. Warum wird JavaScript als Single Threated bezeichnet?

JavaScript ist eine einzelne Thread- oder synchrone Programmiersprache. Dies bedeutet, dass jeweils nur eine Aufgabe ausgeführt werden kann. Wenn die Aufgabe komplex ist, kann es lange dauern, bis sie abgeschlossen ist. Während dieser Zeit wird der Hauptthread der Codeausführung blockiert. Das Blockieren eines Streams bedeutet wiederum, dass auf der Seite keine Interaktivität vorhanden ist. Der Browser reagiert nicht mehr auf Benutzeraktionen und andere Ereignisse. Um dieses Problem zu lösen, werden Rückrufe, Versprechen, Async / Wait, Worker und andere Tools für die Arbeit mit asynchronem Code verwendet. In JavaScript gibt es im Gegensatz zu beispielsweise Java, Go oder C ++ keine Möglichkeit, zusätzliche Threads oder Prozesse zu erstellen.



JSR

MDN

107. Was ist Ereignisdelegation?

Die Ereignisdelegierung ist eine Technik, bei der ein Ereignis bei einem Elternteil registriert wird, um von Kindern ausgelöste Ereignisse zu verarbeiten.

Wird häufig verwendet, um Schaltflächenklicks in einem Gruppierungscontainer zu verarbeiten oder Texteingabefelder in Formularen zu ändern, z.

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

Im obigen Beispiel registrieren wir Handler nicht für die untergeordneten Elemente, sondern für die übergeordneten Elemente. Wenn Sie Text in ein Feld eingeben oder eine Schaltfläche drücken, wird der Klassenname des entsprechenden Elements an die Konsole ausgegeben.



JSR

108. Was ist ECMAScript?

ECMAScript ist die Programmiersprache hinter JavaScript. Dies ist eine Art Muster oder Blaupause, von der JavaScript "erstellt" wird. ECMAScript ist in der ECMA-262-Spezifikation der Normungsorganisation Ecma International standardisiert.



JSR

MDN

109. Nennen Sie die Funktionen der JSON-Syntax

Die JSON-Syntax bietet folgende Funktionen:

• Daten sind Schlüssel / Wert-Paare
• Der Schlüssel und der Wert werden in doppelte Anführungszeichen gesetzt, es sei denn, der Wert ist eine Zahl ("Schlüssel": "Wert").
• Daten werden durch Kommas getrennt
• Objekte werden in geschweifte Klammern gewickelt
• Arrays - zum Quadrat

JSR

MDN

110. Was macht JSON.stringify ()?

Beim Senden von Daten an den Server muss ein spezielles Zeichenfolgenformat vorliegen. Die Methode JSON.stringify () wird verwendet, um ein Objekt in eine JSON-Zeichenfolge zu konvertieren:

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

JSR

MDN

111. Was macht JSON.parse ()?

Beim Empfang von Daten vom Server haben sie ein spezielles Zeichenfolgenformat. Die Methode JSON.parse () wird verwendet, um diese Daten in ein JavaScript-Objekt zu konvertieren:

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

JSR

MDN

112. Wofür ist JSON?

Beim Datenaustausch zwischen Client und Server können diese Daten nur Zeichenfolgen sein. Da JSON Text ist, ist es perfekt dafür. Es kann auch von jeder Programmiersprache als Datenformat verwendet werden, zusammen mit anderen Formaten wie XML oder Protobuf.



JSR

MDN

113. Was ist PWA (Progressive Web Application - Progressive Webanwendung)?

Kurz gesagt, PWAs sind Websites, die sich wie native Anwendungen verhalten. Sie können auf einem Telefon oder Computer installiert werden und arbeiten in der Regel offline. Für letztere werden Servicemitarbeiter und eine Caching-Schnittstelle verwendet. Der Vorteil von PWAs gegenüber mobilen Anwendungen liegt in ihrer Größe und der relativ einfachen Entwicklung. Außerdem müssen Sie keine Ressourcen für die Erstellung von zwei Anwendungen für eine Site aufwenden - Web und Mobile. Es behält auch eine gute Benutzererfahrung bei.



MDN

114. Wofür wird clearTimeout () verwendet?

Diese Methode wird verwendet, um einen von setTimeout () gestarteten Timer zu stoppen. Zu diesem Zweck wird die Timer-ID in eine Variable geschrieben, die dann als Argument an clearTimeout () übergeben wird.

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

Im obigen Beispiel wird zwei Sekunden später die Meldung „Hallo!“ Auf der Konsole angezeigt. Danach stoppt der Timer. Dies geschieht, damit der Garbage Collector den ausgeführten Timer entfernen kann.



JSR

MDN

115. Wofür wird clearInterval () verwendet?

Diese Methode wird verwendet, um einen mit setInterval () gestarteten Timer zu stoppen. Zu diesem Zweck wird die Timer-ID in eine Variable geschrieben, die dann als Argument an clearInterval () übergeben wird.

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

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

Im obigen Beispiel wird der Wert der Variablen i jede Sekunde auf die Konsole gedruckt, die jedes Mal um 1 (1, 2) erhöht wird. Wenn ich 3 werde, stoppt der Timer.



JSR

MDN

116. Wie leite ich um?

Dazu können Sie die location-Eigenschaft des Fensterobjekts verwenden:

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

MDN

117. Wie überprüfe ich, ob eine Teilzeichenfolge in einer Zeichenfolge vorhanden ist?

Es gibt mindestens drei Möglichkeiten, dies zu tun.

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 - enthält

MDN - Index des

MDN - Tests

118. Wie überprüfe ich die Richtigkeit der E-Mail-Adresse?

Dies kann mithilfe von HTML erfolgen, indem der Typ des Eingabefelds auf den Wert email (<input type = "email">) gesetzt wird. Diese Methode wird jedoch nicht als sehr zuverlässig angesehen. Daher wird E-Mail normalerweise mit einem regulären Ausdruck überprüft. Es wird empfohlen, dies auf der Serverseite zu tun, da JavaScript auf dem Client möglicherweise deaktiviert ist:

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

In diesem Beispiel wird einer der einfachsten regulären Ausdrücke verwendet, um eine E-Mail-Adresse zu überprüfen. Ein zuverlässigerer Ausdruck sieht folgendermaßen aus (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. Wie erhalte ich die aktuelle URL?

Dazu können Sie die location-Eigenschaft des Fensterobjekts oder die URL-Eigenschaft des Dokumentobjekts verwenden:

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

MDN - Speicherort

MDN - document.URL

120. Welche Eigenschaften hat das Standortobjekt?

Die Eigenschaften des Standortobjekts können verwendet werden, um Teile der URL der aktuellen Seite abzurufen:

• href - vollständige URL
• Ursprung - Protokoll, Host und Port (Ursprung, verwendet in Common Origin Policy (SOP) und Resource Sharing (CORS))
• Protokoll
• Host - Host und Port
• Hostname - Host
• Hafen
• Pfadname - Pfad
• Suche - die Abfragezeichenfolge nach?
• Hash - Abfragezeichenfolge nach # (Anker)
• Benutzername - Benutzername vor Domain
• Passwort - Passwort vor der Domain

MDN

121. Wie erhalte ich die Abfragezeichenfolge?

Sie können den URL-Konstruktor dafür verwenden:

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. Wie überprüfe ich, ob eine Eigenschaft in einem Objekt vorhanden ist?

Es gibt mindestens drei Möglichkeiten, dies zu tun.

Im Bediener

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

HasOwnProperty () -Methode

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

Vergleich mit undefiniert

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

JSR

MDN - für ... in

MDN - hasOwnProperty

123. Wie iteriere ich über die aufgezählten Eigenschaften eines Objekts?

Dazu können Sie eine for ... in-Schleife mit der Methode hasOwnProperty () verwenden, um geerbte Eigenschaften auszuschließen.

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

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

JSR

MDN

124. Wie überprüfe ich, ob das Objekt leer ist?

Es gibt mindestens drei Möglichkeiten, dies zu tun.

Object.entries () -Methode

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 () -Methode

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

Für ... in Schleife und Object.hasOwnProperty () -Methode

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 - JSR-Objekte

- Object.keys, Werte, Einträge

MDN - Object.entries

MDN - Object.keys

MDN - für ... in

MDN - Object.hasOwnProperty

125. Was ist das Argumentobjekt?

Argumente ist ein Array-ähnliches Objekt (Pseudo-Array), das die an die Funktion übergebenen Argumente enthält:

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

Beachten Sie, dass Pfeilfunktionen keine Argumente haben. Anstelle von Argumenten wird empfohlen, den Restoperator ... (andere Parameter) zu verwenden, der sowohl in normalen als auch in Pfeilfunktionen funktioniert:

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

sum(1, 2, 3) // 6

JSR

MDN

126. Wie groß schreibt man den ersten Buchstaben einer Zeichenfolge?

Dies kann mit den Methoden charAt (), toUpperCase () und Slice () erfolgen:

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

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

JSR

MDN - charAt

MDN - toUpperCase

MDN - Slice

127. Wie erhalte ich das aktuelle Datum?

Dies kann mit einem Date-Objekt oder dem Intl.DateTimeFormat-Konstruktor erfolgen:

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

JSR = Intl

MDN - Datum

MDN - Intl.DateTimeFormat

128. Wie vergleiche ich zwei Datumsobjekte?

Dazu sollten Sie nicht die Objekte selbst vergleichen, sondern beispielsweise die von der Methode getTime () zurückgegebenen Werte:

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

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

JSR

MDN

129. Wie kann überprüft werden, ob eine Zeile in einer anderen Zeile beginnt?

Sie können dazu die integrierte StartsWith () -Methode verwenden:

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

Laut CanIUse wird diese Methode von fast 94% der



JSR- MDN- Browser unterstützt

130. Wie entferne ich Probleme in einer Zeile?

Dazu können Sie die integrierten Methoden trimStart () (Zeilenanfang), trimEnd () (Zeilenende) und trim () (Zeilenanfang und Zeilenende) verwenden:

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

Trimmen funktioniert nicht für Leerzeichen zwischen Wörtern. In diesem Fall können Sie die Methode replace () und den regulären Ausdruck verwenden:

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

Laut CanIUse werden trimStart () und trimEnd () von 93% der Browser unterstützt.



MDN

131. Wie füge ich einem Objekt eine neue Eigenschaft hinzu?

Es gibt zwei Möglichkeiten, dies zu tun. Nehmen wir an, wir haben ein Objekt wie dieses:

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

Wir können ihm eine neue Eigenschaft hinzufügen, indem wir entweder die Punkt- oder die Klammernotation verwenden:

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

Einer der Unterschiede zwischen diesen Methoden besteht darin, dass bei Verwendung der Klammernotation der hinzugefügte Schlüssel eine Zahl sein kann:

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

JSR

MDN

132. Ist der Ausdruck! - ein spezieller Operator?

Nein, ist es nicht. Es ist eine Kombination aus zwei Operatoren: Operator! (logisch nicht) und Operator - (Dekrement). Wenn Sie den angegebenen Ausdruck mit einem beliebigen Wert verwenden, wird dieser Wert zuerst um eins verringert, dann in einen booleschen Typ konvertiert und invertiert:

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 - Logisch NICHT

MDN - Dekrement

133. Wie ordne ich einer Variablen einen Standardwert zu?

Dazu können Sie das || verwenden (Boolescher Wert oder):

const a = b || 'default'

In diesem Fall wird der Variablen a der Standardwert zugewiesen, wenn der Wert der Variablen b falsch ist (false, undefined, null, NaN, 0, '').

Wenn es sich um die Standardwerte der Funktionsparameter handelt, können diese wie folgt zugewiesen werden:

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

Darüber hinaus können nachfolgende Parameter die Werte der vorherigen als Standardwerte verwenden:

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

JSR

MDN

134. Wie erstelle ich eine mehrzeilige Zeichenfolge?

Zuvor wurde ungefähr so ​​vorgegangen (Steuerzeichen für Verkettung und Zeilenumbruch):

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

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

Jetzt machen sie es so (Template-Literal):

const str =
    \` 
     
    !\`

JSR

MDN

135. Können wir Funktionen Eigenschaften hinzufügen?

Da Funktionen auch Objekte sind, können wir ihnen problemlos Eigenschaften hinzufügen. Der Funktionseigenschaftswert kann eine andere Funktion sein:

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. Wie kann man herausfinden, wie viele Argumente eine Funktion erwartet?

Die Eigenschaft length kann hierfür verwendet werden:

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. Was ist eine Polyfüllung?

Polyfills werden verwendet, damit modernes JavaScript in älteren Browsern funktioniert. Dies erfolgt durch Implementieren neuer Funktionen der Sprache unter Verwendung der alten Syntax. Das Konvertieren von neuem Code in alten Code wird als Transpilation bezeichnet. Der beliebteste Transpiler für JavaScript-Code ist Babel.

Eine der neuesten JavaScript-Funktionen ist beispielsweise die Promise.allSettled () -Methode, die im Gegensatz zu Promise.all () nicht beendet wird, wenn eines der an sie übergebenen Versprechen abgelehnt wird. Bis heute beträgt

die Browserunterstützung laut CanIUse- Daten 80%, sodass eine Polyfüllung erforderlich ist:

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. Wofür werden die Anweisungen continue und break verwendet?

Die break-Anweisung wird verwendet, um aus der Schleife auszubrechen. Nach dem Stoppen der Iteration wird der Code fortgesetzt:

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

Die continue-Anweisung wird verwendet, um die Iteration zu überspringen:

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 -

MDN unterbrechen - fortfahren

139. Was ist ein Etikett?

Mit Beschriftungen können Sie Schleifen und Codeblöcke benennen. Sie können beispielsweise zum Verlassen einer Schleife oder als Bedingung für die Ausführung von Code verwendet werden:

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

Es wird als schlechte Praxis angesehen, Etiketten zu verwenden.



MDN

140. Was sind die Vorteile der Deklaration von Variablen am Anfang des Codes?

Es wird empfohlen, Variablen am Anfang jedes Skripts oder jeder Funktion zu deklarieren. Dies bietet die folgenden Vorteile:

• Hält den Code sauber
• Alle Variablen befinden sich an einem Ort
• Vermeidet das versehentliche Erstellen globaler Variablen
• Verhindert unerwünschte Variablenüberschreibungen

JSR

MDN

141. Was sind die Vorteile der Initialisierung einer Variablen bei der Deklaration?

Es wird empfohlen, alle Variablen zum Zeitpunkt der Deklaration zu initialisieren. Dies bietet die folgenden Vorteile:

• Hält den Code sauber
• Variablen und ihre Werte befinden sich an einer Stelle
• Verhindert, dass nicht initialisierte Variablen undefiniert zugewiesen werden

JSR

MDN

142. Was sind die wichtigsten Empfehlungen zum Erstellen eines Objekts?

Um ein Objekt zu erstellen, wird empfohlen, anstelle des Objektkonstruktors new Object () die Klammernotation {} zu verwenden. Abhängig vom Werttyp wird außerdem empfohlen, Folgendes zu verwenden:

• Zeichenfolge wie '' anstelle von new String ()
• eine Zahl, zum Beispiel 0 anstelle einer neuen Zahl ()
• Boolescher Wert wie false anstelle von new Boolean ()
• [] anstelle von neuem Array ()
• // anstelle von neuem RegExp ()
• function () {} statt new Function ()

JSR

MDN

143. Wie definiere ich ein Array im JSON-Format?

JSON-Array ist ein Array von JSON-Objekten, zum Beispiel:

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

JSR

MDN

144. Wie implementiere ich eine Funktion, die eine zufällige Ganzzahl in einem bestimmten Bereich zurückgibt?

Eine solche Funktion kann mit den Methoden Math.random () und Math.floor () des Math-Objekts implementiert werden:

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

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. Was ist Baumschütteln?

Beim Baumschütteln wird der Code nicht verwendeter Module entfernt. Solche Module sind nicht in der Endmontage (Bundle) enthalten. Damit der Modul-Builder (Bundler) bestimmen kann, welche Module verwendet werden und welche nicht, muss die Programmstruktur auf ES6-Modulen basieren. Diese Technik wurde vom Rollup-Bundler populär gemacht.



MDN

146. Wofür wird Baumschütteln angewendet?

Durch Baumschütteln kann die Größe einer Baugruppe (eines Bündels) erheblich reduziert werden, indem der Code nicht verwendeter Module daraus entfernt wird. Je kleiner die Baugruppengröße ist, desto besser ist die Anwendungsleistung. Das Baumschütteln wird in Modul-Buildern wie Rollup und Webpack implementiert.



MDN

147. Was ist ein regulärer Ausdruck?

Ein regulärer Ausdruck ist eine Folge von Zeichen, die ein Suchmuster bilden. Dieses Muster kann verwendet werden, um Daten im Text zu finden, z. B. Teilzeichenfolgen in einer Zeichenfolge. Reguläre Ausdrücke werden von vielen Programmiersprachen häufig für Textsuch- und Ersetzungsvorgänge verwendet. Das allgemeine Regex-Muster sieht folgendermaßen aus:

//

Beispiel:

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

Sie können auch den RegExp-Konstruktor verwenden, um einen regulären Ausdruck zu erstellen:

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

JSR

MDN

148. Welche Methoden werden in regulären Ausdrücken verwendet?

In regulären Ausdrücken werden zwei Hauptmethoden verwendet: exec () und test ().

Die exec () -Methode sucht nach einer Übereinstimmung mit regulären Ausdrücken in der als Argument übergebenen Zeichenfolge. Das Verhalten dieser Methode hängt davon ab, ob der reguläre Ausdruck das g-Flag hat. Wenn nicht, wird die erste Übereinstimmung zurückgegeben. Wenn das g-Flag vorhanden ist, gilt Folgendes:

• Der Aufruf exec () gibt die erste Übereinstimmung zurück und speichert die Position danach in der Eigenschaft lastIndex.
• Der nächste derartige Aufruf startet die Suche an der Position lastIndex, gibt die nächste Übereinstimmung zurück und merkt sich die Position danach in lastIndex.
• Wenn keine Übereinstimmungen mehr vorhanden sind, gibt exec () null zurück und lastIndex wird auf 0 gesetzt.

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

Die test () -Methode gibt einen booleschen Wert zurück, abhängig davon, ob eine Übereinstimmung in der Zeichenfolge gefunden wird:

const str = '  JavaScript'

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

JSR

MDN

149. Welche Flags werden in regulären Ausdrücken verwendet?

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

JSR

MDN

150. Welche Sonderzeichen werden in regulären Ausdrücken verwendet?

Die in regulären Ausdrücken verwendeten Sonderzeichen können in mehrere Gruppen unterteilt werden.

Grundlegende Charakterklassen:



Zeichensätze:



Grenzen:



Gruppierung:



Quantifizierer:



JSR

MDN

151. Wie ändere ich die Stile eines HTML-Elements?

Dies kann entweder mithilfe der style-Eigenschaft oder durch Zuweisen einer geeigneten Klasse zum Element erfolgen:

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

MDN - Klassenname

MDN - Klassenliste

152. Was ist ein Debugger?

Der Debugger-Ausdruck bietet Zugriff auf alle in einer bestimmten Umgebung verfügbaren Debugging-Funktionen, z. B. das Festlegen von Haltepunkten (Haltepunkten, Haltepunkten). Wenn zur Laufzeit keine Debugging-Funktion verfügbar ist, hat dieser Ausdruck keine Auswirkung:

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

JSR

MDN

153. Wofür werden Debugger-Haltepunkte verwendet?

Checkpoints werden verwendet, um die Ausführung einer Funktion oder eines anderen Codes an einer bestimmten Stelle anzuhalten, um herauszufinden, warum ein Programm nicht ordnungsgemäß funktioniert. Nach dem Stoppen kann die Funktion fortgesetzt werden.



JSR

MDN

154. Können reservierte Wörter als Bezeichner verwendet werden?

Nein, Sie können keine reservierten Wörter als Namen für Variablen, Beschriftungen, Funktionen oder Objekte verwenden:

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

155. Wie bestimme ich die Breite und Höhe des Bildes?

Dies kann auf verschiedene Arten erfolgen. Hier ist einer von ihnen:

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. Wie sende ich eine synchrone HTTP-Anfrage?

Zu diesem Zweck können Sie das XMLHttpRequest-Objekt verwenden, indem Sie es mit einem dritten optionalen Argument mit dem Wert false an die open () -Methode übergeben:

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. Wie mache ich eine asynchrone HTTP-Anfrage?

Hierfür kann die Methode fetch () verwendet werden:

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. Wie erhalte ich das Datum im erforderlichen Format?

Die toLocaleString () -Methode kann hierfür verwendet werden:

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

MDN

159. Wie erhalte ich die maximale Seitengröße?

Dazu müssen Sie die Maximalwerte der Eigenschaften scrollWidth, offsetWidth, clientWidth und scrollHeight, offsetHeight, clientHeight der Objekte document.body und document.documentElement ermitteln:

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. Was ist ein bedingter oder ternärer Operator?

Der ternäre Operator ist eine Kurzform zum Schreiben des if ... else-Blocks:

let accesAllowed
const age = propmt('  ?')

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

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

JSR

MDN

161. Kann eine Kette ternärer Operatoren verwendet werden?

Ja, in diesem Fall ist der ternäre Operator eine Alternative zum Block 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. Wie starte ich die Ausführung des Codes, nachdem die Seite vollständig geladen wurde?

Dies kann auf verschiedene Arten erfolgen.

Platzieren Sie das Skript-Tag vor dem schließenden Body-Tag oder fügen Sie ihm ein Defer-Attribut hinzu:

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

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

Wenn Ihr Skript ein Modul ist, müssen Sie anstelle des Attributs defer das Attribut type mit dem Wertemodul angeben:

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

Fügen Sie dem Body-Tag ein Onload-Attribut hinzu:

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

Fügen Sie Code als Handler für das Ladeereignis des Fensterobjekts hinzu:

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

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

Machen Sie dasselbe für document.body:

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

163. Was ist der Unterschied zwischen __proto__ und Prototyp?

Die Eigenschaft __proto__ (interne versteckte Eigenschaft [[Prototype]]) ist ein Objekt, von dem eine Instanz Felder und Methoden erbt. Der Prototyp ist ein Objekt, mit dem __proto__ erstellt wird, wenn es mit dem neuen Schlüsselwort instanziiert wird:

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. Geben Sie ein Beispiel für die obligatorische Verwendung eines Semikolons

Eine der obligatorischen Verwendung von Semikolons ist die Verwendung von IIFE (Sofort aufgerufener Funktionsausdruck):

Zum Beispiel der folgende Code:

try {
    const x = ''

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

Wird so interpretiert:

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

Daher erhalten wir im try-Block einen TypeError: "To be" ist keine Funktion, die Steuerung wird an den catch-Block übergeben und "Not to be" wird an die Konsole ausgegeben.

Damit der Code wie erwartet funktioniert, sollte er folgendermaßen aussehen:

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

Vergessen Sie auch nicht die Fälle der automatischen Semikolonplatzierung.

165. Wofür wird die Methode freeze () verwendet?

Diese Methode dient, wie der Name schon sagt, dazu, ein Objekt "einzufrieren". Ein eingefrorenes Objekt ist unveränderlich (unveränderlich). Dies bedeutet, dass Sie einem solchen Objekt keine neuen Eigenschaften hinzufügen, vorhandene löschen oder ändern können. Auch diese Methode setzt konfigurierbar: false und beschreibbar: false für vorhandene Eigenschaften. Die Methode gibt ein eingefrorenes Objekt zurück.

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

Beachten Sie, dass im nicht strengen Modus keine Ausnahme ausgelöst wird und der Code einfach nicht ausgeführt wird.



JSR

MDN

166. Warum brauchen wir die Methode freeze ()?

Das objektorientierte Programmierparadigma besagt, dass eine Schnittstelle, die eine bestimmte Anzahl von Elementen enthält, unveränderlich sein muss, d.h. Es muss von der Möglichkeit seiner Erweiterung, Änderung oder Verwendung von Elementen außerhalb des aktuellen Kontexts ausgeschlossen werden. Diese Methode ist ein Alias ​​für das endgültige Schlüsselwort in einigen anderen Programmiersprachen.



JSR

MDN

167. Wie kann man den ersten Buchstaben jedes Wortes in einer Zeile groß schreiben?

Eine Möglichkeit, dies zu tun, ist wie folgt:

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

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

168. Woher weiß ich, ob JavaScript auf einer Seite deaktiviert ist?

Sie können hierfür das Noscript-Tag verwenden. Der Code in diesem Tag wird nur ausgeführt, wenn JavaScript auf der Seite deaktiviert ist:

    console.log('JavaScript ')

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

Um JavaScript in Chrome zu deaktivieren, gehen Sie zu Einstellungen -> Abschnitt "Datenschutz und Sicherheit" -> Websiteeinstellungen -> Abschnitt "Inhalt" -> JavaScript.



MDN

169. Welche Operatoren werden von JavaScript unterstützt?

Operatoren werden verwendet, um mit Werten oder Operanden zu arbeiten. JavaScript unterstützt die folgenden Operatoren:

• Arithmetik: + (Addition, Umwandlung in eine Zahl, Verkettung), - (Subtraktion), * (Multiplikation), / (Division),% (Modulo, mit Rest), ++ (Inkrement), - (Dekrement), * * (Potenzierung)
• Vergleichsoperatoren: == (abstrakt, lose Gleichheit) ,! = (abstrakte Ungleichung), === (strenge Gleichheit, Identitätsprüfung) ,! == (strenge Ungleichung),>,> =, <, <=
• logisch: && (und), || (oder),! (nicht) (!!! (doppelte Verneinung) ist kein separater Operator)
• Zuweisungsoperatoren: =, + =, - =, * =, / =,% =
• ternär:? ...: (wenn ... sonst)
• Typ des Operators: Definiert den Typ des Operanden
• bitweise: & (und), | (oder), ^ (exklusiv oder), ~ (nicht), << (Linksverschiebung), >> (Rechtsverschiebung), >>> (Rechtsverschiebung mit Null-Auffüllung)
• neu:? .. ​​(optionale Kette), ?? (Null Merge)

//  
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 - JSR-Operatoren

- Logische Operatoren

JSR - Vergleichsoperatoren

JSR - Bedingte

JSR- Operatoren - Bitweise

MDN-Operatoren - Optionaler Sequenzoperator

MDN - Null-Merge-Operator

170. Wofür wird der Restoperator ... (andere Parameter) verwendet?

Der Restoperator ist eine Alternative zum Argumentobjekt und gibt ein Array der an die Funktion übergebenen Argumente zurück:

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

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

Bitte beachten Sie, dass der Restoperator als letztes Argument übergeben werden muss:

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

JSR

MDN

171. Wofür wird der Spread-Operator verwendet?

Der Spread-Operator wird verwendet, um iterierbare Entitäten (Arrays, Strings) zu erweitern (zu entpacken, zu erweitern). Auspacken bedeutet, beispielsweise ein Array von Zahlen in eine Reihe einfacher Werte umzuwandeln:

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

const nums = [1, 2, 3]

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

JSR

MDN

172. Wie kann festgestellt werden, ob ein Objekt eingefroren ist?

Um festzustellen, ob ein Objekt eingefroren ist, d.h. Ist es unveränderlich (unveränderlich), wird die Methode isFrozen () verwendet:

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

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

MDN

173. Wie kann man die Gleichheit von Werten mit einem Objekt bestimmen?

Hierfür kann die Methode is () verwendet werden:

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

Die Werte sind gleich, wenn:

• beide sind undefiniert
• beide sind null
• beide sind wahr oder falsch
• Beide sind Zeichenfolgen gleicher Länge mit denselben Zeichen
• beide beziehen sich auf dasselbe Objekt
• beide sind Zahlen, +0, -0 oder NaN

JSR

MDN

174. Wie erstelle ich eine Kopie eines Objekts?

Eine der zuverlässigsten Möglichkeiten hierfür ist die Verwendung der Methode assign ():

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

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

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

Mit dieser Methode können Sie auch Objekte mit Ausnahme von Duplikaten kombinieren:

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}

Sie können die Bindung JSON.parse-JSON.stringify verwenden, um einfache Objekte zu kopieren:

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

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

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

JSR

MDN

175. Was ist ein Proxy?

Das Proxy-Objekt "umschließt" ein anderes Objekt und kann damit verschiedene Aktionen abfangen (und, falls gewünscht, unabhängig verarbeiten), z. B. Lese- / Schreibeigenschaften und andere.

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. Wofür wird die Methode seal () verwendet?

Diese Methode "versiegelt" das Objekt und verhindert das Hinzufügen / Entfernen von Eigenschaften. Außerdem wird konfigurierbar festgelegt: false für alle vorhandenen Eigenschaften. Die Eigenschaftswerte eines solchen Objekts können jedoch geändert werden. Mit der Methode isSealed () wird überprüft, ob ein Objekt versiegelt ist.

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

Beachten Sie, dass im Lax-Modus der Versuch, eine Eigenschaft für ein versiegeltes Objekt zu löschen, im Hintergrund fehlschlägt.



JSR

MDN

177. Was ist der Unterschied zwischen den Methoden freeze () und seal ()?

Mit der Object.seal () -Methode können Sie im Gegensatz zur Object.freeze () -Methode die vorhandenen Eigenschaften eines Objekts ändern.

'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. Wie erhalte ich aufgezählte Schlüssel / Wert-Paare eines Objekts?

Die Object.entries () -Methode gibt ein Array von aufgezählten Objektschlüssel / Wert-Paaren als Subarrays in derselben Reihenfolge wie die for ... in-Schleife zurück:

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. Was ist der Hauptunterschied zwischen den Methoden Object.keys (), Object.values ​​() und Object.entries ()?

Die Object.keys () -Methode gibt die Schlüssel eines Objekts zurück, die Object.values ​​() -Methode gibt die Werte seiner Eigenschaften zurück und Object.entries () gibt ein Array von Schlüssel / Wert-Paaren zurück:

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. Wie erstelle ich ein Objekt mit einem bestimmten Prototyp ohne Verwendung einer Konstruktorfunktion und von Klassen?

Die Object.create () -Methode kann hierfür verwendet werden:

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

const secondUser = Object.create(firstUser)

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

JSR

MDN

181. Wofür wird WeakSet verwendet?

WeakSet wird verwendet, um eine Sammlung von Objekten mit schwachen Referenzen zu speichern. Mit anderen Worten, es dient als zusätzlicher Speicher für Objekte, die von anderem Code verwendet werden. Solche Objekte werden vom Garbage Collector automatisch entfernt, wenn sie nicht mehr erreichbar (nicht verwendet) sind, d. H. wenn nur der Schlüssel vom Objekt im WeakSet übrig bleibt.

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. Was ist der Unterschied zwischen Set und WeakSet?

Ihr Hauptunterschied besteht darin, dass die im WeakSet gespeicherten Objekte schwach referenziert sind, d. H. werden automatisch gelöscht, sobald sie nicht mehr erreichbar sind. Andere Unterschiede sind wie folgt:

• Set kann beliebige Werte speichern und WeakSet kann nur Objekte speichern.
• WeakSet hat keine Größeneigenschaft
• WeakSet verfügt nicht über die Methoden clear (), keys (), values ​​() und forEach ()
• WeakSet ist keine iterierbare Entität

JSR

MDN

183. Welche Methoden stehen im WeakSet zur Verfügung?

WeakSet verfügt über die folgenden Methoden:

• add (): Fügt der Sammlung ein Objekt hinzu
• delete (): Entfernt ein Objekt aus einer Sammlung
• has (): Bestimmt, ob sich ein Objekt in der Sammlung befindet
• length (): Gibt die Länge der Sammlung zurück

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. Wofür wird WeakMap verwendet?

WeakMap wird zum Speichern von Schlüssel / Wert-Paaren verwendet, bei denen auf Schlüssel nur schwach verwiesen wird. Mit anderen Worten, es dient als zusätzliches Repository für Schlüssel, die von anderem Code verwendet werden. Solche Schlüssel werden vom Garbage Collector automatisch entfernt, wenn sie nicht mehr erreichbar (nicht verwendet) sind, d. H. wenn nur der Schlüssel in der WeakMap verbleibt.

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. Was ist der Unterschied zwischen Map und WeakMap?

Ihr Hauptunterschied besteht darin, dass die in der WeakMap gespeicherten Schlüssel schwach referenziert sind, d. H. werden automatisch gelöscht, sobald sie nicht mehr erreichbar sind. Andere Unterschiede sind wie folgt:

• Beliebige Werte können in Map als Schlüssel verwendet werden, und in WeakMap können nur Objekte verwendet werden
• WeakMap hat keine Größeneigenschaft
• WeakMap verfügt nicht über die Methoden clear (), keys (), values ​​(), entry () und forEach ()
• WeakMap ist keine iterierbare Entität

JSR

MDN

186. Welche Methoden stehen in WeakMap zur Verfügung?

WeakMap verfügt über die folgenden Methoden:

• set (): Fügt einem Objekt ein Schlüssel / Wert-Paar hinzu
• delete (): Löscht einen Wert per Schlüssel
• has (): Bestimmt, ob ein Wert per Schlüssel vorhanden ist
• get (): Gibt den Wert per Schlüssel zurück

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. Wie verschlüssele ich eine URL?

Hierfür können Sie die Methode encodeURI () verwenden. Diese Methode konvertiert alle Sonderzeichen außer / ?: @ = + $ #

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. Wie entschlüssele ich eine URL?

Sie können hierfür die Methode decodeURI () verwenden:

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. Wie drucke ich den Seiteninhalt?

Hierfür können Sie die globale print () -Methode verwenden. Diese Methode öffnet ein spezielles Dialogfeld mit Druckeinstellungen:

<button></button>

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

MDN

190. Was ist eine anonyme Funktion?

Eine anonyme Funktion ist eine unbenannte Funktion. Solche Funktionen werden häufig Variablen zugewiesen und auch als Rückrufe verwendet:

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. Welche Priorität hat die Verwendung lokaler und globaler Variablen?

Lokale Variablen haben Vorrang vor gleichnamigen Globals:

let question = ' '

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

JSR

MDN

192. Was sind Accessoren?

Accessoren oder berechnete Eigenschaften sind Getter und Setter. Getter werden verwendet, um die Werte der Eigenschaften eines Objekts abzurufen, und Setter werden verwendet, um sie festzulegen:

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

Getter und Setter sind Eigenschaften und Methoden sind Funktionen:

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. Wie definiere ich eine Eigenschaft in einem Objektkonstruktor?

Hierfür kann die Object.defineProperty () -Methode verwendet werden. Mit dieser Methode können Sie dem Objekt neue Eigenschaften hinzufügen und vorhandene ändern sowie die Einstellungen für den Zugriff auf das Objekt ändern:

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

Im laxen Modus schlägt der Versuch, eine schreibgeschützte Eigenschaft zu ändern, unbemerkt fehl.



JSR

MDN

194. Was sind die Merkmale von Gettern und Setzern?

Die Hauptmerkmale von Gettern und Setzern sind wie folgt:

• Sie haben eine einfachere Syntax als Methoden.
• Wird verwendet, um berechnete Eigenschaften zu definieren - Accessoren
• Aktiviert die gleiche Beziehung zwischen Eigenschaften und Methoden
• Kann eine bessere Datenqualität bieten
• Ermöglicht es Ihnen, Aufgaben hinter den Kulissen auszuführen, wenn es um die Kapselung geht

JSR

195. Können Getter und Setter mit der Object.defineProperty () -Methode zu einem Objekt hinzugefügt werden?

Ziemlich:

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. Wofür wird der Schalter ... verwendet?

switch ... case ist eine Alternative zu if ... else und eine visuellere Methode zum Ausführen von Code, abhängig von der übergebenen Bedingung:

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. Nennen Sie die Regeln für die Verwendung von switch ... case

Bei Verwendung der Schaltergehäusekonstruktion müssen Sie die folgenden Regeln einhalten:

• Die Bedingung kann eine Zahl oder eine Zeichenfolge sein
• doppelte Werte sind nicht zulässig
• Die Standardanweisung ist optional. Wird kein Fall gefunden, wird der Standardblock ausgeführt
• break wird verwendet, um die Schleife zu stoppen
• break ist ebenfalls optional, aber ohne es wird die Schleifenausführung fortgesetzt

JSR

MDN

198. Nennen Sie die primitiven Datentypen.

Die primitiven Datentypen ("Primitive") in JavaScript sind die folgenden Werte:

• Zahl für eine beliebige Zahl: Ganzzahl oder Gleitkomma, Ganzzahlwerte sind auf ± 2 ^{53 begrenzt}
• bigint für ganze Zahlen beliebiger Länge
• Zeichenfolge für Zeichenfolgen. Eine Zeichenfolge kann ein oder mehrere Zeichen enthalten. Es gibt keinen separaten Zeichentyp
• Boolescher Wert für wahr / falsch
• Null für unbekannte Werte - ein eindeutiger Typ mit einem einzelnen Nullwert
• undefiniert für nicht zugewiesene Werte - ein separater Typ mit einem undefinierten Wert
• 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: