100 Theoretische JavaScript-Fragen

Guten Tag, Freunde!



Hier ist eine Liste der 100 wichtigsten Fragen zu JavaScript-Grundlagen 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.



Siehe die Fortsetzung hier .

1. Wie erstelle ich ein Objekt?

Es gibt verschiedene Möglichkeiten, dies zu tun. Einige davon sind:

Objektliteral:

const object = {}

Objektkonstruktor (nicht empfohlen):

const object = new Object()

Object.create ()

-Methode Bei Verwendung dieser Methode wird ein Objekt als Argument an das Objekt übergeben, das zum Prototyp des neuen Objekts wird.

//     -  
const object = Object.create(null)

Konstruktorfunktion

Erstellen Sie eine Konstruktorfunktion und erstellen Sie mit dem Operator "new" eine Instanz dieser Funktion - ein Objekt:

function Person (name) {
    const object = {}
    object.name = name
    object.age = 30
    return object
}
const user = new Person('')

Klasse:

class Person {
    constructor(name) {
        this.name = name
    }
}

const user = new Person('')

JSR

MDN

2. Was sind Prototypen?

Prototypen werden verwendet, um neue Objekte basierend auf vorhandenen zu erstellen. Diese Technik wird als prototypische Vererbung bezeichnet. Der Prototyp einer Instanz eines Objekts ist über Object.getPrototypeOf (Objekt) oder die Eigenschaft __proto__ (interne versteckte Eigenschaft [[Prototype]]) verfügbar.







JSR

MDN

3. Was ist der Unterschied zwischen call (), apply () und bind ()?

Der Unterschied zwischen diesen Methoden lässt sich am einfachsten anhand von Beispielen erklären.

Die Methode call () ruft eine Funktion mit dem angegebenen Wert und den durch Kommas getrennten Argumenten auf.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.call(employee1, '', ' ?') // ,  .  ?
invite.call(employee2, '', ' ?') // ,  .  ?

Die Methode apply () ruft eine Funktion mit den angegebenen Argumenten this value und array auf.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.apply(employee1, ['', ' ?']) // ,  .  ?
invite.apply(employee2, ['', ' ?']) // ,  .  ?

Die bind () -Methode gibt eine neue Funktion mit dem angegebenen Wert zurück und ermöglicht es Ihnen, ein Array oder eine beliebige Anzahl von durch Kommas getrennten Argumenten an dieses zu übergeben.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

const inviteEmployee1 = invite.bind(employee1)
const inviteEmployee2 = invite.bind(employee2)
inviteEmployee1('', ' ?') // ,  .  ?
inviteEmployee2('', ' ?') // ,  .  ?

Daher rufen die Methoden call () und apply () die Funktion auf, nachdem sie an ein Objekt gebunden wurde. Der Unterschied zwischen den beiden besteht in der Art und Weise, wie die Argumente übergeben werden. Dieser Unterschied ist bei den ersten Buchstaben der Methoden leicht zu merken: Aufruf ist ein Komma (Komma, c), Apply ist ein Array (Array, a). Die bind () -Methode gibt eine neue Funktion zurück, die an das angegebene Objekt gebunden ist.



JSR - JSR aufrufen / anwenden

-

MDN

binden - MDN aufrufen - MDN anwenden

- binden

4. Was ist JSON und welche Methoden hat es?

JSON ist ein Textdatenformat, das auf der von Douglas Crockford erfundenen JavaScript-Objektsyntax basiert. Es wird zum Übertragen von Daten über das Netzwerk verwendet und hat normalerweise die Erweiterung .json und die Anwendung / json vom Typ MIME.

Parsing: Konvertiert eine JSON-Zeichenfolge in ein Objekt.

JSON.parse(text)

Stringifizierung: Konvertiert ein Objekt zur Übertragung über das Netzwerk in eine JSON-Zeichenfolge.

JSON.stringify(object)

JSR

MDN

5. Was macht die Array.slice () -Methode?

Die Slice () -Methode gibt die ausgewählten Array-Elemente als neues Array zurück. Es gibt Elemente zurück, die mit dem im ersten Argument angegebenen Index beginnen und mit dem im zweiten optionalen Argument angegebenen Index enden, diesen jedoch nicht einschließen. Wenn das zweite Argument fehlt, werden alle Elemente abgerufen, die mit dem im ersten Argument angegebenen Index beginnen.

const arrayIntegers = [1, 2, 3, 4, 5]
const arrayIntegers1 = arrayIntegers.slice(0, 2) // [1, 2]
const arrayIntegers2 = arrayIntegers.slice(2, 3) // [3]
const arrayIntegers3 = arrayIntegers.slice(4) // [5]

Beachten Sie, dass diese Methode das ursprüngliche Array nicht ändert, sondern nur eine Teilmenge davon als neues Array zurückgibt.



JSR

MDN

6. Was macht die Array.splice () -Methode?

Die splice () -Methode wird verwendet, um Elemente zu oder von einem Array hinzuzufügen oder zu entfernen. Das erste Argument gibt die Startposition für das Hinzufügen oder Entfernen von Elementen an, das zweite optionale Argument gibt die Anzahl der zu entfernenden Elemente an. Jedes nachfolgende Argument (drittes usw.) wird dem Array hinzugefügt:

let arrayOriginal1 = [1, 2, 3, 4, 5]
let arrayOriginal2 = [1, 2, 3, 4, 5]
let arrayOriginal3 = [1, 2, 3, 4, 5]

let array1 = arrayOriginal1.splice(0, 2) //  [1, 2];   = [3, 4, 5]
let array2 = arrayOriginal2.slice(3) //  [4, 5];   = [1, 2, 3]
let array3 = arrayOriginal3.slice(3, 1, 'a', 'b', 'c') //  [4];   = [1, 2, 3, 'a', 'b', 'c']

Beachten Sie, dass die splice () -Methode das ursprüngliche Array ändert und ein Array der extrahierten Elemente zurückgibt.



JSR

MDN

7. Was ist der Unterschied zwischen Slice () und Splice ()?

Die Hauptunterschiede sind wie folgt:



JSR

MDN - Slice

MDN - Spleißen

8. Wie vergleichen sich Objekte und Karten?

Objekte ähneln Maps insofern, als Sie mit beiden Schlüssel für Werte festlegen, Werte abrufen, Schlüssel löschen und feststellen können, ob ein Wert pro Schlüssel vorhanden ist. Aus diesem Grund wurden Objekte zuvor als Karten verwendet. Es gibt jedoch einige Unterschiede zwischen ihnen, die die Verwendung von Karten in bestimmten Fällen vorzuziehen machen.

• Objektschlüssel können nur Zeichenfolgen und Symbole sein, und Zuordnungstasten können beliebige Werte sein, einschließlich Funktionen und Objekte
• Kartenschlüssel werden bestellt, Objektschlüssel jedoch nicht. Bei der Iteration werden die Kartenschlüssel in der Reihenfolge zurückgegeben, in der sie hinzugefügt wurden
• Sie können die Größe der Karte mithilfe der size-Eigenschaft ermitteln und die Anzahl der Objekteigenschaften manuell definieren
• Eine Karte ist eine iterierbare Entität. Um über ein Objekt zu iterieren, müssen Sie zuerst die Schlüssel irgendwie abrufen und dann über sie iterieren
• Denken Sie bei der Verwendung eines Objekts als Karte daran, dass jedes Objekt einen Prototyp hat, sodass sich die eigenen Schlüssel der Karte mit benutzerdefinierten Schlüsseln überschneiden können. Daher sollte Object.create (null) verwendet werden, um ein Kartenobjekt zu erstellen. Diese Methode wird jedoch nur noch selten verwendet.
• Das Objekt ist der Karte in Bezug auf die Leistung unterlegen, wenn es darum geht, Schlüssel schnell hinzuzufügen / zu entfernen

JSR

MDN

9. Was ist der Unterschied zwischen den Operatoren "==" und "==="?

JavaScript bietet zwei Möglichkeiten zum Vergleichen von Werten: strict (=== ,! ==) und abstract (== ,! ==). In einem strengen Vergleich werden die Werte so verglichen, wie sie sind, und in einem laxen Vergleich wird erforderlichenfalls eine implizite Konvertierung (Umwandlung) von Werttypen durchgeführt. Strenge Operatoren verwenden die folgenden Regeln zum Vergleichen verschiedener Wertetypen:

• Zwei Zeichenfolgen sind streng gleich, wenn sie denselben Zeichensatz, dieselbe Länge und dieselben Zeichen an denselben Positionen haben
• Zwei Zahlen sind streng gleich, wenn ihre Werte gleich sind. Es gibt zwei Sonderfälle:
  
  
  
  
  • NaN ist nichts, einschließlich NaN
  • Positive und negative Nullen sind gleich
  
  
  
• Boolesche Werte sind streng gleich, wenn beide wahr oder falsch sind, d.h. richtig oder falsch
• Zwei Objekte sind streng gleich, wenn sie sich auf dasselbe Objekt beziehen (Speicherort).
• null === undefined gibt false zurück und null == undefined gibt true zurück

Einige Beispiele:

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[] == [] // 
[] === [] // false,      
{} == {} // 
{} === {} // false,      

JSR

MDN

10. Was sind Lambda oder Pfeilfunktionen?

Pfeilfunktionen sind eine Kurzform zum Schreiben von Funktionsausdrücken. Sie haben nicht ihre eigenen Argumente, super und new.target. Diese Funktionen dienen als gute Alternative zu Funktionen, die keine Methoden haben, aber nicht als Konstruktoren verwendet werden können.

function regularSum (x, y) {
    return x + y
}

const arrowSum = (x, y) => x + y

JSR

MDN

11. Warum werden Funktionen als erstklassige Objekte bezeichnet?

In JavaScript sind Funktionen erstklassige Objekte. Dies bedeutet, dass Funktionen wie reguläre Variablen verwendet werden können.

Beispielsweise kann eine Funktion als Argument an eine andere Funktion übergeben, als Wert von einer anderen Funktion zurückgegeben und einer Variablen zugewiesen werden. Im folgenden Beispiel wird einem Handler eine Funktion zugewiesen:

const handler = () => console.log(' -   ')
document.addEventListener('click', handler)

JSR

MDN

12. Was ist eine Funktion erster Ordnung?

Eine Funktion erster Ordnung ist eine Funktion, die keine andere Funktion als Argument verwendet und keine Funktion als Wert zurückgibt:

const firstOrder = () => console.log(' -   ')

JSR

MDN

13. Was ist eine Funktion höherer Ordnung?

Eine Funktion höherer Ordnung ist eine Funktion, die eine andere Funktion als Argument verwendet oder eine andere Funktion als Wert zurückgibt:

const firstOrderFun = () => console.log(' -   ')
const higherOrder = returnFirstOrderFun => returnFirstOrderFun()
higherOrder(firstOrderFunc)

JSR

MDN

14. Was ist eine unäre Funktion?

Eine unäre Funktion (Monadenfunktion) ist eine Funktion, die nur ein Argument akzeptiert:

const unaryFun = a => console.log(a + 10) //  10        

JSR

MDN

15. Was ist Curry?

Beim Currying wird eine Funktion mit mehreren Parametern in mehrere Funktionen mit einem Parameter konvertiert. Dieser Prozess ist nach dem Mathematiker Haskell Curry benannt. Durch das Currying wird eine n-ary-Funktion in mehrere unäre Funktionen umgewandelt (reduziert die Arität der Funktion):

const sum = (a, b, c) => a + b + c
const currySum = a => b => c => a + b + c

currySum(1) //  : b => c => 1 + b + c
currySum(1)(2) //  : c => 3 + c
currySum(1)(2)(3) //   6

Currying wird verwendet, um die Wiederverwendung von Code (Teilfunktionsanwendung) zu ermöglichen und eine Zusammenstellung von Funktionen zu erstellen.



JSR

16. Was ist eine reine Funktion?

Eine reine Funktion ist eine Funktion, deren Rückgabewert nur von den übergebenen Argumenten ohne Nebenwirkungen abhängt. Einfach ausgedrückt, wenn Sie eine Funktion n-mal mit n Argumenten aufrufen und die Funktion immer den gleichen Wert zurückgibt, ist sie sauber:

//  
let numberArray = []
const impureAddNumber = number => numberArray.push(number)
// 
const pureAddNumber = number => argNumberArray => argNumberArray.concat([number])

console.log(impureAddNumber(1)) // 1
console.log(numberArray) // [1]
console.log(pureAddNumber(2)(numberArray)) // [1, 2]
console.log(numberArray) // [1]

Im obigen Beispiel ist impureAddNumber keine reine Funktion, da die push () -Methode die neue Länge des Arrays zurückgibt, die unabhängig vom übergebenen Argument ist. Die zweite Funktion ist rein, da die Methode concat () die beiden Arrays ohne Nebenwirkungen verkettet und ein neues Array zurückgibt. Reine Funktionen sind für Unit-Tests unerlässlich und erfordern keine Abhängigkeitsinjektion. Das Fehlen von Nebenwirkungen verbessert die Zuverlässigkeit der Anwendung aufgrund der schwächeren Verbindungen zwischen ihren Elementen. Eine der Inkarnationen dieses Prinzips ist das in ES6 eingeführte Konzept der Unveränderlichkeit, das const gegenüber let bevorzugt.



JSR

MDN

17. Wofür wird das Schlüsselwort "let" verwendet?

Das Schlüsselwort "let" wird verwendet, um eine lokale Variable mit Blockbereich zu deklarieren. Der Umfang einer solchen Variablen wird durch den Block, Operator oder Ausdruck begrenzt, in dem sie verwendet wird. Mit dem Schlüsselwort "var" deklarierte Variablen haben den globalen oder Funktionsumfang, in dem sie definiert sind:

let counter = 1
if (counter === 1) {
    let counter = 2
    console.log(counter) // 2
}
console.log(counter) // 1 ( counter,   ,   )

JSR

MDN

18. Was ist der Unterschied zwischen let und var?

Die Hauptunterschiede sind wie folgt:



Einige Beispiele:

function userDetails(username) {
    if (username) {
        console.log(salary)
        console.log(age)
        let age = 30
        var salary = 10000
    }
    console.log(salary) // 10000 (  )
    console.log(age) // SyntaxError: "age" is not defined (  )
}

JSR

MDN - lassen Sie

MDN - var

19. Warum wurde das Wort "let" als Schlüsselwort gewählt?

Let ist ein mathematischer Operator, der von frühen Programmiersprachen wie Scheme und Basic verwendet wurde. Heutzutage wird let von einer großen Anzahl von Programmiersprachen verwendet, daher ist dieses Wort die nächstgelegene Alternative zur Abkürzung "var" (Variable).



JSR

MDN

20. Wie überschreibe ich eine Variable in einem Schaltblock?

Wenn Sie versuchen, eine mit dem Schlüsselwort "let" deklarierte Variable in einem Schalterblock zu überschreiben, wird folgende Fehlermeldung angezeigt:

let counter = 1
switch(x) {
    case 0:
        let name
        break
    case 1:
        let name // SyntaxError
        break
}

Um dieses Problem zu lösen, müssen Sie einen neuen Block im Fall erstellen - einen neuen lexikalischen Bereich:

let counter = 1
switch(x) {
    case 0: {
        let name
        break
    }
    case 1: {
        let name
        break
    }
}

JSR

MDN

21. Was ist eine vorübergehende Totzone?

Wenn Sie versuchen, auf Variablen zuzugreifen, die mit dem Schlüsselwort "let" oder "const" (aber nicht "var") deklariert wurden, bevor sie definiert wurden (dh bevor ihnen ein Wert innerhalb des aktuellen Bereichs zugewiesen wurde), wird eine ReferenceError-Ausnahme ausgelöst. ). Mit anderen Worten, die Zeittotzone ist die Zeit zwischen der Erstellung des Kontexts (Bereichs) einer Variablen und ihrer Definition:

function someMethod () {
    console.log(counter1) // undefined
    console.log(counter2) // ReferenceError
    var counter1 = 1
    const counter2 = 2
}

MDN

22. Was ist ein sofort aufgerufener Funktionsausdruck (IIFE)?

IIFE ist eine Funktion, die unmittelbar nach der Definition aufgerufen wird. Die Syntax für eine solche Funktion sieht möglicherweise folgendermaßen aus (eine der am häufigsten verwendeten Optionen):

(function () {
    // 
})()

// ,      
(() => {
    // 
})()

Der Hauptgrund für die Verwendung eines IIFE besteht darin, Variablen privat zu halten, da auf Variablen, die innerhalb des IIFE deklariert sind, von außerhalb nicht zugegriffen werden kann:

(function () {
    var message = 'IIFE'
    console.log(message)
})()
console.log(message) // SyntaxError: "message" is not defined

JSR

MDN

23. Was sind die Vorteile der Verwendung von Modulen?

Unter anderem kann Folgendes erwähnt werden:

• Verbesserung der Lesbarkeit und einfachere Codepflege
• Wiederverwendbarer Code
• Halten Sie den globalen Namespace sauber

JSR

MDN

24. Was ist Auswendiglernen oder Auswendiglernen?

Das Speichern ist eine Möglichkeit, die Leistung einer Funktion zu verbessern, indem zuvor empfangene Ergebnisse dieser Funktion im Cache gespeichert werden. Bei jedem Aufruf der Funktion wird das an sie übergebene Argument zum Cache-Index. Befinden sich die Daten im Cache, werden sie zurückgegeben, ohne die Funktion erneut auszuführen. Andernfalls wird die Funktion ausgeführt und das Ergebnis in den Cache geschrieben:

const memoAdd = () => {
    let cache = {}
    return value => {
        if (value in cache) {
            console.log('   ')
            return cache[value] //   , cache.value        ,     JavaScript     .    
        } else {
            console.log(' ')
            let result = value + 20
            cache[value] = result
            return result
        }
    }
}
//    memoAdd
const add = memoAdd()
console.log(add(20)) //   40
console.log(add(20)) //     40

25. Was ist Heben?

Beim Heben werden Variablen und Funktionsausdrücke an den Anfang ihres Gültigkeitsbereichs verschoben, bevor Code ausgeführt wird. Denken Sie daran: Nur die Variablen und Ausdrücke selbst werden gehisst, nicht ihre Initialisierung (d. H. Die Variablendeklaration wird gehisst, nicht die Zuweisung eines Werts):

console.log(message) // undefined
var message = '!'

Für den Interpreter sieht dieser Code folgendermaßen aus:

var message
console.log(message)
message = '!'

JSR

MDN

26. Was ist eine Klasse?

In ES6 eingeführte Klassen sind syntaktischer Zucker (Wrapper, Abstraktion oder Add-On) für die Vererbung von Prototypen (für Prototypen von Konstruktorfunktionen). Beispiel einer Konstruktorfunktion:

function Bike(model, color) {
    this.model = model
    this.color = color
}

Bike.prototype.getDetails = function () {
    return ' ' + this.model + '   ' + this.color + ' .'
}

Gleiches Beispiel mit Klasse:

class Bike {
    constructor (color, model) {
        this.color = color
        this.model = model
    }

    getDetails () {
        return \` ${this.model}   ${this.color} .\`
    }
}

JSR

MDN

27. Was ist eine Schließung?

Ein Abschluss ist eine Kombination aus einer Funktion und ihrer lexikalischen Umgebung. In einfachen Worten ist ein Abschluss, wenn eine innere Funktion Zugriff auf Variablen hat, die in einer äußeren Funktion deklariert sind. Ein Verschluss hat eine Kette von drei Bereichen:

• Eigener Umfang
• Externer Funktionsumfang
• Globaler Geltungsbereich

const welcome = name => {
    const greet = message => {
        console.log(\`${message}, ${name}!\`)
    }
    return greet
}

const fun = welcome('')
fun('') // , !

JSR

MDN

28. Was ist ein Modul?

Module sind kleine Teile von unabhängigem, wiederverwendbarem Code, die vielen Entwurfsmustern zugrunde liegen. Die meisten Module werden als Objekte, Funktionen oder Konstruktoren exportiert.



JSR

MDN

29. Was ist Umfang?

Der Bereich definiert die Verfügbarkeit von Variablen, Funktionen und Objekten an verschiedenen Stellen im Code während seiner Ausführung. Mit anderen Worten, Umfang ist die Sichtbarkeit von Variablen und anderen Ressourcen im aktuellen Kontext der Codeausführung.



MDN

30. Was ist ein Servicemitarbeiter?

Ein Service Worker ist ein Skript, das unabhängig von der Webseite, auf der es ausgeführt wird, und den Aktionen des Benutzers ausgeführt wird. Tatsächlich fungiert der Service Worker als Proxyserver zwischen der Anwendung und dem Browser. Die Hauptfunktionen der Servicemitarbeiter sind folgende: Sicherstellen, dass die Anwendung offline ist, regelmäßige Hintergrundsynchronisierung, Push-Benachrichtigungen, Abfangen und Verarbeiten von Netzwerkanforderungen und programmgesteuertes Verwalten des Caches.



MDN

31. Wie interagieren Sie mit dem Document Object Model (DOM) mithilfe von Servicemitarbeitern?

Servicemitarbeiter haben keinen direkten Zugriff auf das DOM. Sie können jedoch über die postMessage-Oberfläche mit der Seite interagieren, und die Seite kann das DOM ändern.



MDN - ServiceWorker

MDN - postMessage

32. Wie können Informationen beim Neustart eines Servicemitarbeiters wiederverwendet werden?

Eines der Probleme mit Servicemitarbeitern besteht darin, dass sie die Ausführung beenden, wenn sie nicht verwendet werden, und bei Bedarf neu starten. Dies verhindert, dass Sie global Abruf- und Nachrichtenereignishandler hinzufügen. Um Informationen wiederzuverwenden, muss sichergestellt werden, dass Servicemitarbeiter mit einer indizierten Datenbank (IndexedDB) oder einem lokalen Speicher (lokaler Speicher) interagieren.



MDN

33. Was ist eine indizierte Datenbank (IndexedDB)?

IndexedDB ist eine Low-Level-API zum Speichern großer Mengen strukturierter Daten, einschließlich Dateien und Blobs, auf der Clientseite. Diese Schnittstelle verwendet Indizes, um das Abrufen von Daten zu beschleunigen.



JSR

MDN

34. Was ist Webspeicher?

Webspeicher ist eine Schnittstelle, über die Sie Daten lokal als Schlüssel / Wert-Paare speichern können, d. H. im Browser des Benutzers bequemer als die Verwendung von Cookies. Der Webspeicher bietet zwei Speichermechanismen:

• Lokaler Speicher (Local Stotage) - Speichert die Daten des aktuellen Benutzers unbegrenzt lange
• Sitzungsspeicher - speichert Daten während der aktuellen Sitzung, d. H. Beim Schließen der Browser-Registerkarte gehen die Daten verloren

JSR

MDN

35. Was ist postMessage?

postMessage ist eine Möglichkeit zur Kommunikation zwischen verschiedenen Quellen eines Fensterobjekts (z. B. einer Seite und dem von ihr generierten Popup (ein Popup-Fenster) oder einer Seite und einem eingebetteten Iframe). In der Regel haben Skripte auf einer Seite keinen Zugriff auf eine andere Seite, wenn diese Seite der Common Origin- oder Single Source-Richtlinie (Quelle - Protokoll, Host und Port) entspricht.



MDN - postMessage

36. Was sind Cookies?

Ein Cookie ist ein kleines Datenelement, das auf dem Computer eines Benutzers zur späteren Verwendung durch einen Browser gespeichert wird. Cookies werden als Schlüssel / Wert-Paare gespeichert:

document.cookie = 'username='

JSR

MDN

37. Warum brauchen wir Cookies?

Cookies werden zum Speichern von Informationen über den Benutzer verwendet (nicht zum Speichern vertraulicher Informationen empfohlen). Normalerweise besteht dieser Prozess aus zwei Schritten:

• Beim ersten Besuch der Seite wird das Benutzerprofil in einem Cookie gespeichert
• Beim erneuten Aufrufen der Seite wird das Benutzerprofil aus dem Cookie abgerufen

JSR

MDN

38. Welche Funktionen bieten Cookies?

Standardmäßig werden Cookies gelöscht, wenn der Browser geschlossen wird. Dies kann jedoch geändert werden, indem das Ablaufdatum in UTC festgelegt wird:

document.cookie = 'username=; expires=Sat, 5 Sep 2020 12:00:00 UTC'

Standardmäßig gehören Cookies zur aktuellen Seite. Dies kann jedoch auch durch Festlegen des Pfads geändert werden:

document.cookie = 'username=; path=/services'

JSR

MDN

39. Wie lösche ich Cookies?

Sie können Cookies löschen, indem Sie die verstrichene Zeit als Lebensdauer festlegen. In diesem Fall müssen Sie keinen Cookie-Wert definieren:

document.cookie = 'username=; expires=Sat, 05 Jun 2020 00:00:00 UTC; path=/;'

Bitte beachten Sie, dass in diesem Fall der Pfad zum Löschen des richtigen Cookies festgelegt werden muss. In einigen Browsern können Sie Cookies nicht löschen, ohne diesen Parameter anzugeben.



JSR

MDN

40. Was ist der Unterschied zwischen Cookies, lokalem Speicher und Sitzungsspeicher?

Die Hauptunterschiede sind wie folgt:



JSR - Cookies

MDN - Cookie

JSR - LocalStorage, SessionStotage MDN - Webspeicher

41. Was ist der Hauptunterschied zwischen lokalem und Sitzungsspeicher?

Der lokale Speicher entspricht dem Sitzungsspeicher, mit der Ausnahme, dass im ersten Fall die Daten gespeichert werden, auch wenn der Browser geschlossen und neu gestartet wird, und im zweiten Fall die Daten am Ende der Sitzung gelöscht werden (Schließen der Browser-Registerkarte).



JSR

MDN

42. Wie greife ich auf den Webspeicher zu?

Das Fensterobjekt bietet WindowLocalStorage- und WindowSessionStorage-Objekte mit den Eigenschaften localStorage und sessionStorage. Diese Eigenschaften erstellen eine Instanz eines Speicherobjekts, mit der Sie Daten für eine bestimmte Domäne und einen bestimmten Speichertyp (Sitzung oder lokal) schreiben, abrufen und löschen können:

//  
localStorage.setItem('data', document.querySelector('.data').value)
//  
localStorage.getItem('data')

JSR

MDN

43. Welche Methoden bietet der Sitzungsspeicher?

Der Sitzungsspeicher bietet Methoden zum Lesen, Schreiben und Löschen von Daten:

//  
sessionStorage.setItem('key', 'value')

//  
const data = sessionStorage.getItem('key')

//   
sessionStorage.removeItem('key')

//   
sessionStorage.clear()

JSR

MDN

44. Welches Ereignis tritt bei der Arbeit mit dem Webspeicher auf?

Wenn sich der Speicher im Kontext eines anderen Dokuments ändert, wird das Speicherereignis ausgelöst:

window.onstorage = function () {}

Ein Beispiel für die Behandlung dieses Ereignisses:

window.onstorage = event => {
    console.log(\`${event.key}  .
     : ${event.oldValue}.
     : ${event.newValue}.\`)
}

Mit diesem Ereignis können Sie eine Art Chat implementieren.



JSR

MDN

45. Wofür wird Webspeicher verwendet?

Der Webspeicher ist sicherer und kann mehr Daten als Cookies speichern, ohne die Leistung zu beeinträchtigen. Außerdem werden keine Daten an den Server gesendet (bei Cookies werden Daten bei jedem Zugriff des Clients auf den Server in die Anforderungs- und Antwortheader aufgenommen). Daher ist diese Art der Speicherung von Daten Cookies vorzuziehen.



JSR

MDN

46. ​​Wie stelle ich fest, ob ein Browser Web Storage unterstützt?

Bevor Sie den Webspeicher verwenden, wird empfohlen, die Browserunterstützung für diese Schnittstelle zu überprüfen:

if (typeof(Storage) !== 'undefined') {
    // 
} else {
    // -  
}

// 
if ('Storage' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

Laut CanIUse beträgt die Unterstützung für Webspeicher heute 98%.



JSR

MDN

47. Wie stelle ich fest, ob ein Browser Servicemitarbeiter unterstützt?

Vor der Verwendung von Servicemitarbeitern wird empfohlen, die Browserunterstützung für diese Schnittstelle zu überprüfen:

if (typeof(Worker) !== undefined) {
    // 
} else {
    // -  
}
// 
if ('Worker' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

Laut CanIUse beträgt die Unterstützung für Servicemitarbeiter heute 94%.



MDN

48. Geben Sie ein Beispiel für einen Web-Worker

Um den Web Worker zu verwenden, müssen Sie Folgendes tun.

Erstellen Sie eine Datei für den Worker, z. B. get-current-time.js:

const getCurrentTime = () => {
    let time = new Date().toLocaleTimeString()
    postMessage(time)
    setTimeout(() => getCurrentTime(), 1000)
}

getCurrentTime()

Die postMessage () -Methode wird verwendet, um Nachrichten an die Seite zu senden.

Erstellen Sie ein Worker-Objekt:

const worker = new Worker('get-current-time.js')

Danach verarbeiten wir den Empfang von Nachrichten vom Arbeiter:

<output></output>
<button></button>

worker
    .addEventListener('message', event => document.querySelector('output')
    .textContent = event.data)

Der Worker verarbeitet das Nachrichtenereignis auch dann weiter, wenn das externe Skript seine Arbeit abgeschlossen hat. Daher muss es zwangsweise gestoppt werden:

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

Wenn Sie den Worker auf undefiniert setzen, können Sie ihn wiederverwenden:

worker = undefined

MDN

49. Was sind die Einschränkungen von Web-Workern für die Arbeit mit dem DOM?

Da Web-Worker in einer separaten Datei erstellt werden, haben sie keinen Zugriff auf die folgenden Objekte:

• Fenster
• Dokument
• Übergeordnetes Objekt - das Objekt, mit dem der Worker gestartet wurde

MDN

50. Was ist ein Versprechen?

Ein Versprechen (Kommunikation) ist ein Objekt, das entweder mit einem bestimmten Wert ausgeführt oder mit einem Fehler abgelehnt wird. Versprechen werden entweder nach Ablauf einer bestimmten Zeit oder nach Eintreten eines bestimmten Ereignisses gelöst. Ein Versprechen kann einen von drei Zuständen haben: ausstehend, erfüllt und abgelehnt.

Versprechenssyntax:

const promise = new Promise((resolve, reject) => {
    // 
})

// ,   ,    
const promise = Promise.resolve(value)
promise.then(value => {
    // 
})

Ein Beispiel für die Verwendung eines Versprechens:

const promise = new Promise(resolve => {
    const timer = setTimeout(() => {
        resolve('  !')
        clearTimeout(timer)
    }, 5000);
}, reject => {
    reject('-   ')
})

promise
    .then(value => console.log(value))
    .catch(error => console.error(error))
    .finally(() => console.log(' ')) //     "  !"  5    " "

Promise Resolution-Algorithmus:







JSR

MDN

51. Warum werden Versprechen benötigt?

Versprechen werden verwendet, um mit asynchronem Code zu arbeiten. Sie sind eine Alternative zu Rückruffunktionen, vermeiden die sogenannte "Rückrufhölle" und machen den Code sauberer und lesbarer.



JSR

MDN

52. Nennen Sie drei mögliche Zustände eines Versprechens

Versprechen haben drei Zustände:

• Ausstehend: die Phase vor Beginn der Operation
• Erfüllt: Vorgang erfolgreich abgeschlossen
• Abgelehnt: Der Vorgang ist fehlgeschlagen. Ausnahme wird geworfen

JSR

MDN

53. Was ist eine Rückruffunktion?

Ein Rückruf ist eine Funktion, die als Argument an eine andere Funktion übergeben wird. Diese Funktion (intern) wird innerhalb des übergeordneten (extern) aufgerufen, um eine Operation auszuführen, wenn ein bestimmtes Ereignis auftritt. Schauen wir uns ein einfaches Beispiel an:

function callback(name) {
    alert(\`, ${name}!\`)
}

function outer(cb) {
    const name = prompt(',   ')
    cb(name)
}
outer(callback)

In diesem Beispiel fragt die äußere Funktion nach dem Namen des Benutzers und speichert ihn in der Namensvariablen. Diese Funktion übergibt dann den Namen an die Rückruffunktion, die eine Begrüßung mit dem Namen des Benutzers ausgibt.



JSR

MDN

54. Warum werden Rückrufe benötigt?

Rückrufe sind erforderlich, da JavaScript eine ereignisgesteuerte Sprache ist. Dies bedeutet, dass JavaScript beispielsweise nicht auf eine Antwort auf eine Anforderung oder auf die Verarbeitung eines bestimmten Ereignisses wartet, sondern weiterhin auf andere Ereignisse reagiert. Stellen Sie sich ein Beispiel vor, in dem eine Funktion auf die Schnittstelle zugreift und die andere eine Nachricht an die Konsole druckt:

function first () {
    //    API
    setTimeout(() => console.log('  '), 1000)
}

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

first()
second()
//    "  ",  "  "

Wie Sie sehen, wartet JavaScript nicht auf den Abschluss der ersten Funktion, sondern führt den Code weiterhin aus. Daher werden Rückrufe verwendet, um die Asynchronität zu simulieren und das Blockieren des Hauptprogramm-Threads zu verhindern.



JSR

MDN

55. Was ist die Rückrufhölle?

Callback Hell ist ein Anti-Pattern, bei dem mehrere Callback-Funktionen ineinander verschachtelt sind, um asynchrone Logik zu implementieren. Diese Codestruktur ist schwer zu verstehen und zu pflegen. Es könnte so aussehen:

function first () {
    return function second () {
        return function third () {
            return function fourth () {
                //  ..
            }
        }
    }
}

Dieser Ansatz zur Codierung wird als schlechte Praxis angesehen, außer in Fällen von Currying, teilweiser Anwendung oder Zusammensetzung von Funktionen.



JSR

MDN

56. Was sind vom Server gesendete Ereignisse (SSE)?

Server Sent Events ist eine Push-Benachrichtigungstechnologie, mit der Browser aktualisierte Daten vom Server über eine HTTP-Verbindung empfangen können, ohne eine Anforderung zu senden. Dies ist eine der Kommunikationsmethoden zwischen dem Client und dem Server, wenn Nachrichten nur vom Server gesendet werden. Diese Technologie wird verwendet, um Facebook / Twitter, Geschäftspreise, Newsfeeds usw. zu aktualisieren.



JSR

MDN

57. Wie empfange ich vom Server gesendete Nachrichten (Benachrichtigungen oder Ereignisse)?

Das EventSource-Objekt wird dafür verwendet:

if('EventSource' in window) {
    const source = new EventSource('sse.js')
    source.addEventListener('message', event => document.querySelector('output')
        .textContent = event.data)
}

JSR

MDN

58. Wie kann ich die Browserunterstützung für SSE überprüfen?

Dies geschieht folgendermaßen:

if (typeof EventSource !== 'undefined') {
    // 
} else {
    // SSE  
}

// 
('EventSource' in window)
    ? console.log('ok')
    : console.warn('! ok')

Laut CanIUse werden derzeit 95% der Browser von SSE unterstützt.



JSR

MDN

59. Welche Ereignisse treten bei der Arbeit mit SSE auf?

Hier ist eine Liste dieser Ereignisse:



JSR

MDN

60. Was sind die Grundregeln für die Arbeit mit Versprechungen?

Die Grundregeln für die Arbeit mit Versprechungen lauten wie folgt:

• Ein Versprechen ist ein Objekt, das eine integrierte oder standardmäßige then () -Methode enthält
• Die Phase des Wartens auf ein Versprechen endet normalerweise mit einer Phase seiner Erfüllung oder Ablehnung
• Der Status eines erfüllten oder abgelehnten Versprechens sollte sich nicht ändern, sobald es gelöst wurde
• Nach der Lösung eines Versprechens sollte sich auch sein Wert nicht ändern.

JSR

MDN

61. Was ist ein Rückruf in einem Rückruf?

Sie können Rückrufe ineinander verschachteln, um bestimmte Vorgänge nacheinander auszuführen:

loadScript('/script1.js', script => {
    console.log(\` ${script} \`)

    loadScript('/script2.js', script => {
        console.log(\` ${script} \`)

        loadScript('/script3.js', script => {
            console.log(\` ${script} \`)
        })
    })
})

JSR

MDN

62. Was ist eine Versprechenskette?

Die sequentielle Ausführung mehrerer asynchroner Aufgaben unter Verwendung von Versprechungen wird als Versprechenskette bezeichnet. Betrachten wir ein Beispiel:

new Promise((resolve, reject) => {
    const id = setTimeout(() => {
        resolve(1)
        clearTimeout(id)
    }, 1000)
}).then(result => {
    console.log(result) // 1
    return result * 2
}).then(result2 => {
    console.log(result2) // 2
    return result2 * 3
}).then(result3 => {
    console.log(result3) // 6
}).catch(error => console.error(error))

Ausführungsalgorithmus:

• Das erste Versprechen wird mit einem Wert von 1 aufgelöst
• Danach druckt die erste then () -Methode diesen Wert an die Konsole und gibt ihn multipliziert mit 2 zurück
• Das zweite then () druckt das Ergebnis des ersten then () an die Konsole (2) und gibt das mit 3 multiplizierte Ergebnis zurück
• Das letzte then () druckt das Ergebnis des zweiten then () auf die Konsole (6).
• Der catch-Block wird zur Behandlung von Fehlern verwendet

JSR

MDN

63. Was ist Promise.all ()?

Promise.all () ist ein Versprechen, das eine Reihe anderer Versprechen als Argument verwendet und die Ergebnisse erfüllter Versprechen oder einen Fehler zurückgibt, wenn eines abgelehnt wird. Syntax:

Promise.all([Promise1, Promise2, Promise3])
    .then(results => console.log(results))
    .catch(error => console.error(error))

Denken Sie daran, dass die Reihenfolge, in der die Ergebnisse ausgelöst werden, von der Reihenfolge der Versprechen im Array abhängt.



JSR

MDN

64. Was ist Promise.race ()?

Promise.race () gibt das Ergebnis des ersten erfüllten oder abgelehnten Versprechens zurück, das als eine Reihe von Versprechungen übergeben wurde:

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, ''))

const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, ''))

Promise.race([promise1, promise2]).then(value => console.log(value)) // ""

JSR

MDN

65. Was ist ein strenges Regime?

Um den strengen Modus zu aktivieren, verwenden Sie die Anweisung 'use strict' (oder 'use strict') am Anfang des gesamten Codes oder einer einzelnen Funktion. Der strikte Modus wurde in ES5 eingeführt. In diesem Modus sind einige Aktionen verboten und es werden weitere Ausnahmen ausgelöst.



JSR

MDN

66. Warum brauchen Sie ein strenges Regime?

Im strengen Modus können Sie sichereren Code schreiben, indem Sie verhindern, dass viele Fehler auftreten. Beispielsweise ist die versehentliche Erstellung globaler Variablen (ohne das Schlüsselwort variable = value), die Zuweisung eines Werts zu einer schreibgeschützten Eigenschaft, einer Eigenschaft, die nur mit einem Getter, einer nicht vorhandenen Eigenschaft und einer nicht vorhandenen Variablen oder einem nicht vorhandenen Objekt abgerufen werden kann, nicht zulässig. Im nicht strengen Modus wird in all diesen Fällen keine Ausnahme ausgelöst.



JSR

MDN

67. Wie aktiviere ich strenge Sicherheit?

Der strikte Modus wird durch die Anweisung 'use strict' (oder 'use strict') am Anfang eines Codes oder einer Funktion aktiviert. Normalerweise wird diese Anweisung ganz am Anfang des Skripts angezeigt, d. H. im globalen Namespace:

'use strict'
x = 3.14 // ReferenceError: "x" is not defined

Wenn in einer Funktion 'use strict' angegeben ist, gilt der strikte Modus nur für diese Funktion:

x = 3.14 //   
f() // ReferenceError: "y" is not defined

function f () {
    'use strict'
    y = 3.14
}

JSR

MDN

68. Wofür wird doppelte Negation verwendet?

Doppelte Negation (!!) konvertiert den Wert in einen Booleschen Wert. Wenn der Wert false ist, wird false zurückgegeben, andernfalls - true:

const x = 1
console.log(x) // 1
console.log(!!x) // true
const y = ''
console.log(y) // ''
console.log(!!str) // false

Beachten Sie:!!! Ist kein separater Operator, sondern zwei Operatoren! ..



MDN

JSR

69. Wofür wird der Löschoperator verwendet?

Dieser Operator wird verwendet, um Eigenschaften von Objekten und die Werte dieser Eigenschaften zu löschen:

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

delete user.age

console.log(user) // { name: "" }

delete user // SyntaxError: Delete of an unqualified identifier in strict mode

Beachten Sie, dass im nicht strengen Modus der Versuch, ein Objekt zu löschen, im Hintergrund fehlschlägt.

Da ein Array auch ein Objekt ist, wird durch Anwenden von delete auf ein Element des Arrays sein Wert gelöscht und undefiniert darauf geschrieben, d. H. Der Index des gelöschten Elements des Arrays bleibt erhalten und die Länge des Arrays ändert sich nicht



JSR

MDN

70. Wofür wird der Operatortyp verwendet?

Dieser Operator wird verwendet, um den Typ einer Variablen oder eines Ausdrucks zu definieren:

typeof 1 // number
typeof [] // object
typeof '' // string
typeof (1 + 2) // number

typeof null // object
typeof NaN // number

JSR

MDN

71. Was ist undefiniert?

undefined ist der undefinierte (aber nicht fehlende) Standardwert (Standardwert) einer Variablen, der kein Wert zugewiesen wurde, sowie eine nicht deklarierte Variable. Dies ist einer der primitiven Datentypen:

let name
console.log(typeof name) // undefined
console.log(typeof age) // undefined

Dieser Wert kann einer Variablen explizit zugewiesen werden:

user = undefined

JSR

MDN

72. Was ist null?

null ist ein Wert, der das Fehlen eines explizit festgelegten Wertes darstellt. Dies ist einer der primitiven Datentypen. Mit null können Sie den Wert einer Variablen entfernen:

const user = null
console.log(typeof user) // object

JSR

MDN

73. Was ist der Unterschied zwischen null und undefiniert?

Die Hauptunterschiede sind wie folgt:



JSR - undefiniert

JSR - null

MDN - undefiniert

MDN - null

74. Was ist eval?

Die Funktion eval () wertet die übergebene Zeichenfolge aus. Eine Zeichenfolge kann ein Ausdruck, eine Variable, ein oder mehrere Operatoren sein:

console.log(eval('1 + 2')) // 3

//   
const curryCalc = x => operator => y =>
    new Promise((resolve, reject) =>
        resolve(eval(\`x${operator}y\`))
    ).then(
        result => console.log(result),
        error => console.error(' !')
    )

curryCalc(1)('+')(2) // 3
curryCalc(4)('-')(3) // 1
curryCalc(5)('x')(6) //  !

Nicht zur Verwendung empfohlen.



JSR

MDN

75. Wie greife ich auf den Browserverlauf zu?

Informationen zum Verlauf von Bewegungen zwischen Seiten im Browser enthalten die Eigenschaft history des Fensterobjekts. Verwenden Sie die Methoden back (), next () oder go (), um zur vorherigen oder nächsten Seite zu gelangen:

const goBack = () => {
    history.back()
    // 
    history.go(-1)
}

const goForward = () => history.forward()

MDN

76. Welche Datentypen gibt es in JavaScript?

Es gibt 8 Haupttypen in JavaScript:

• 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
• Objekt für komplexere Datenstrukturen
• Symbol für eindeutige Bezeichner

JSR

MDN

77. Was macht isNaN ()?

Die Funktion isNaN () konvertiert den Wert in eine Zahl und prüft, ob es sich um NaN handelt.

isNaN('hello') // true
isNaN(100) // false

Eine robustere Version dieser Funktionalität ist die in ES6 eingeführte Number.isNaN () -Methode.



JSR

MDN

78. Was ist der Unterschied zwischen nicht deklarierten und nicht definierten Variablen?

Die Hauptunterschiede sind wie folgt:



JSR

MDN

79. Was sind globale Variablen?

Im Browser werden globale Funktionen und Variablen, die mit dem Schlüsselwort "var" oder ohne das Schlüsselwort (im Lax-Modus) deklariert wurden, zu Eigenschaften des globalen Fensterobjekts (funktioniert nicht in Modulen). Auf solche Variablen kann von überall im Programm zugegriffen werden. Es wird nicht empfohlen, globale Variablen zu verwenden. Wenn Sie eine globale Variable erstellen müssen, ist es besser, dies explizit zu tun:

window.currentUser = {
    name: ''
}

// 
globalThis.currentUser = {
    name: ''
}

console.log(currentUser.name) // 

JSR

80. Welche Probleme bringt die Erstellung globaler Variablen mit sich?

Das Erstellen globaler Variablen verschmutzt den globalen Namespace, was zu Konflikten zwischen Variablennamen führen kann. Es macht es auch schwieriger, Ihren Code zu debuggen und zu testen.



JSR

81. Was ist NaN?

Die globale NaN-Eigenschaft ist ein Not-a-Number-Wert. Genauer gesagt zeigt NaN an, dass der Wert falsch ist, aber immer noch eine Zahl. Daher gibt der NaN-Typ die Nummer zurück.

parseInt('bla') // NaN
Math.sqrt(-1) // NaN

MDN

82. Was macht isFinite ()?

Die globale Funktion isFinite () konvertiert das Argument in eine Zahl und gibt true zurück, wenn es sich um eine gewöhnliche (endliche) Zahl handelt, d. H. nicht NaN, Unendlichkeit (positive Unendlichkeit), Unendlichkeit (negative Unendlichkeit). Andernfalls wird false zurückgegeben.

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false

isFinite(100) // true

Es gibt auch eine Number.isFinite () -Methode, die im Gegensatz zu isFinite () das Argument vor der Überprüfung nicht in eine Zahl konvertiert.



MDN

JSR

83. Was ist Ereignisfluss / -ausbreitung?

Der Ereignisfluss (Ereignisausbreitung) ist die Reihenfolge, in der das Ereignis auf der Seite auftritt. Wenn Sie auf ein in anderen Elementen verschachteltes Element klicken, bevor das Ereignis das Zielelement erreicht, werden alle seine Vorfahren ausgehend vom globalen Fensterobjekt nacheinander durchlaufen. Es gibt drei Stufen der Ereignisausbreitung:

• Von oben nach unten - Erfassungs- oder Tauchphase
• Zielphase
• Bottom up - das Stadium des Aufstiegs oder Aufstiegs (nicht zu verwechseln mit dem Erhöhen von Variablen - Heben)

JSR

84. Was ist Ereignisblasen?

Blasenbildung ist das Stadium der Ausbreitung eines Ereignisses, in dem das Ereignis zuerst auf dem Zielelement registriert wird und dann die Kette von den Vorfahren dieses Elements zum obersten (äußeren) Element - dem globalen Fensterobjekt - hinaufführt.



JSR

85. Was ist Immersion oder Ereigniserfassung?

Das Eintauchen ist die Phase, in der ein Ereignis ausgelöst wird, wenn es sich zuerst am obersten (äußeren) Element (dem globalen Fensterobjekt) registriert und dann die Ahnenkette hinunter zum Zielelement absteigt.



JSR

86. Wie reiche ich ein Formular zur Bearbeitung ein?

Dies kann auf verschiedene Arten erfolgen:

function submitForm() {
    document.forms[0].submit()
}

form.onsubmit = function(event) {
    event.preventDefault()
    // 
}

form.addEventListener('submit', event => {
    event.preventDefault()
    // 
})

Jede Schaltfläche in einem Formular wird standardmäßig gesendet, d. H. dient zum Einreichen eines Formulars.



JSR

MDN

87. Wie kann ich Informationen über das Betriebssystem erhalten?

Diese Informationen sind im globalen Navigatorobjekt enthalten. Einige dieser Informationen können über die Plattformeigenschaft abgerufen werden:

console.log(navigator.platform)

MDN

88. Was ist der Unterschied zwischen DOMContentLoaded- und Ladeereignissen?

Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder oder Frames vollständig geladen werden. Das Ladeereignis wird ausgelöst, nachdem die Seite vollständig geladen wurde, einschließlich aller zusätzlichen Ressourcen.



JSR

MDN - DOMContentLoaded

MDN - Laden

89. Was ist der Unterschied zwischen nativen, Host- (im Besitz der Code-Laufzeit befindlichen) und benutzerdefinierten Objekten?

Native Objekte sind Teil der Sprache und in der ECMAScript-Spezifikation definiert. Solche Objekte sind beispielsweise Number, String, Function, Object, Math, RegExp, Date usw. Hostobjekte werden vom Browser oder einer anderen Laufzeit wie Node.js bereitgestellt. Solche Objekte sind beispielsweise Fenster, Dokument (DOM), XMLHttpRequest, Web-API (Aufrufstapel, Aufgabenwarteschlange) usw. Benutzerobjekte sind alle im Code erstellten Objekte, z. B. ein Objekt mit Informationen über den Benutzer:

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

JSR

MDN

90. Welche Tools werden zum Verschieben von Code verwendet?

Solche Mittel sind:

• In-Browser-Entwicklertools wie Chrome DevTools
• Debugger-Ausdruck
• Gute alte console.log ()

JSR

MDN - Debugger

MDN - Konsole

91. Was sind die Vor- und Nachteile von Versprechungen gegenüber Rückrufen?

Leistungen:

• Verhindern Sie die Hölle der Rückrufe
• Ermöglichen Sie die sequentielle Ausführung von asynchronem Code mit then ()
• Ermöglichen Sie die parallele Ausführung von asynchronem Code mit Promise.all ()
• Lösen Sie viele Rückrufprobleme (Anruf zu spät oder zu früh, mehrere Anrufe statt eines, Fehler versteckt)

Nachteile

• Code wird schwieriger zu schreiben
• Um ältere Browser zu unterstützen, wird eine Polyfüllung benötigt (es gibt heute fast keine solchen Browser mehr).

JSR - Versprechen

JSR - MDN-Rückrufe

- Versprechen

MDN - Rückruf

92. Was ist der Unterschied zwischen einem Attribut und einer Eigenschaft eines Elements?

Wenn der Browser die Seite lädt, analysiert er den HTML-Code und generiert daraus DOM-Objekte. Bei Elementknoten werden die meisten Standard-HTML-Attribute automatisch zu Eigenschaften von DOM-Objekten. Jene. Das Attribut eines Elements wird im Markup angegeben, und seine Eigenschaft befindet sich im DOM. Für ein Body-Tag mit dem Attribut id = "page" verfügt das DOM-Objekt beispielsweise über die Eigenschaft body.id = "page".

<input type="text" value=" !">
//     : type  value

const input = document.querySelector('input')
//  
console.log(input.getAttribute('value'))
//  
console.log(input.value)

//   
input.setAttribute('value', ' !')
//   
input.value = ' !'

Beachten Sie, dass die ECMAScript-Spezifikation auch Attribute für Objekteigenschaften definiert - [[Wert]], [[Beschreibbar]], [[Aufzählbar]] und [[Konfigurierbar]].



JSR

93. Was ist eine Politik gleicher Herkunft (SOP)?

Die Richtlinie für gemeinsam genutzten Ursprung (dieselbe Quelle) blockiert den Zugriff auf Daten von einer anderen Quelle. Die Quelle ist eine Kombination aus Protokoll, Host und Port. Standardmäßig ist die gemeinsame Nutzung von Cross-Origin-Ressourcen (CORS) verboten, d. H. Daten werden nur als Antwort auf eine Anfrage von derselben Quelle bereitgestellt, in der sie sich befinden. Dieses Verhalten kann mithilfe spezieller HTTP-Header geändert werden.



JSR

MDN - SOP

MDN - CORS

94. Was macht void 0?

Der void-Operator wertet den übergebenen Ausdruck aus und gibt undefiniert zurück. Wenn wir auf einen Link klicken, lädt der Browser normalerweise eine neue Seite oder lädt die aktuelle Seite neu. Sie können dies vermeiden, indem Sie den Ausdruck "void (0)" verwenden:

<a href="javascript:void(0)" onclick="alert('!')">  !
</a>

Das erneute Laden von Seiten kann auch mit einem einfachen Stub verhindert werden:

<a href="#"> </a>
//     "#"   URL   

MDN

95. Ist JavaScript eine kompilierte oder interpretierte Programmiersprache?

JavaScript selbst ist eine interpretierte Programmiersprache. Die Engine analysiert den Code, interpretiert jede Zeile und führt sie aus. Moderne Browser verwenden jedoch eine Technologie namens Just-in-Time (JIT-Kompilierung), bei der Code vor der Ausführung kompiliert (optimiert) wird. Dies erhöht die Vorbereitungszeit für die Codeausführung, beschleunigt jedoch die Ausführung selbst erheblich. Beispielsweise verwendet V8, die in Chrome und Node.js verwendete Engine, den Ignition-Interpreter zum Parsen von Code und den TurboFan-Compiler zum Optimieren des Codes.



JSR

MDN

96. Bei JavaScript wird zwischen Groß- und Kleinschreibung unterschieden?

Ja, bei JavaScript wird zwischen Groß- und Kleinschreibung unterschieden. Daher müssen Schlüsselwörter, Namen von Variablen, Funktionen und Objekten bei ihrer Verwendung identisch sein. Beispielsweise sind const somename und const someName unterschiedliche Variablen, typeof (1) ist number und typeOf 1 ist ReferenceError: typeOf ist nicht definiert.



JSR

MDN

97. Sind Java und JavaScript verwandt?

Nein, es sind zwei verschiedene Programmiersprachen. Beide gehören jedoch zu objektorientierten Sprachen und verwenden wie viele andere Sprachen eine ähnliche Syntax (wenn andernfalls für, wechseln, unterbrechen, fortfahren usw.). Grundsätzlich ist Java zu JavaScript ein Marketingtrick.



JSR

MDN

98. Was ist eine Veranstaltung?

Ein Ereignis ist eine Browserreaktion auf eine bestimmte Aktion. Diese Aktion kann eine Benutzeraktion sein, z. B. Klicken auf eine Schaltfläche oder Eingeben von Text, Laden einer Seite, Empfangen einer Antwort auf eine Anfrage usw. (Die Aktionen, die Ereignisse auslösen, sind nicht unbedingt benutzerspezifisch.) Ereignisse werden zur weiteren Verarbeitung protokolliert.

button.onclick = () => alert('!')

input.addEventListener('change', function() {
    p.textContent = this.value
})

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

MDN

JSR

99. Wer hat JavaScript erfunden?

JavaScript wurde von Brendan Eich während seiner Zeit bei Netscape Communications erstellt. Die Sprache hieß ursprünglich Mocha, wurde dann in LiveScript umbenannt und war sowohl für die clientseitige als auch für die serverseitige Programmierung gedacht (wo sie als LiveWire bezeichnet werden sollte).



JSR

MDN