Wir haben versucht, etwas Interessantes und Ungewöhnliches für Sie zu tun. Ich hoffe wirklich, dass es uns gelingt. Wir wollten Sie nicht unbeantwortet lassen und keine Erklärung dafür. Lass es uns richtig machen.
Zunächst möchte ich Sie daran erinnern, wie der Wettbewerb abgehalten wurde. Es gab 4 Runden mit 15 Fragen zu JS, eine Runde mit 15 Fragen zu React außerhalb des Wettbewerbs und ein Finale mit 10 Fragen.
Unter dem Schnitt - die Analyse der Aufgaben der ersten 4 Runden.
Dies ist der zweite Teil unserer Analyse.
Reagieren Sie hier auf Fragen
Wie haben wir das alle gemacht? Wir haben beschlossen, dass wir ungefähr 80-90 Fragen generieren müssen, damit ein Bestand zur Auswahl steht. Danach haben wir alles in Themen unterteilt:
- Browser-Ereignisse
- verschiedene APIs (Array, Set, defineProperty usw.),
- Aufmerksamkeit
- arbeite mit Bruchzahlen
- Heben
- Ereignisschleife
- Typkonvertierung
- Art
- logisch (mit logischem UND und ODER)
Danach wurden die Fragen auf 4 Runden verteilt. Wir haben versucht, alle Touren in ihrer Komplexität gleich zu gestalten. Dazu haben wir mehrere Besuche durchgeführt, um diese Tests zu bestehen und festzustellen, wo die Fragen einfacher sind, wo es schwieriger ist, und die ausstehenden Fragen durch geeignetere ersetzt. Und wir haben in jeder Runde ungefähr die gleiche Anzahl von Fragen zu einem bestimmten Thema gestellt. Als Ergebnis stellte sich heraus, dass es bei verschiedenen Touren ähnliche, aber nicht dieselben Fragen gab.
Aus diesem Grund scheint es nicht sehr bequem zu sein, Touren zu sortieren, da es viele doppelte Erklärungen geben wird. Ich schlage vor, sie nach Themen zu betrachten. Beginnen wir mit dem einfachsten.
Fragen zur Aufmerksamkeit:
Was wird in der Konsole angezeigt?
console.log(0,1 + 0,2); a) 0.30000000000000004 b) 0.3 c) 2 d) 0 1 2
Antwort + Analysed) 0 1 2
Hier steht zwischen den Zahlen und nicht . Wenn Sie die Frage wie folgt formatieren:
console.log(0, 1 + 0, 2); alles wird klar
Was wird in der Konsole angezeigt?
(() => { 'use strict'; a = null + undefined; console.log(a); })(); a) 0 b) NaN c) null d)
Antwort + Analysed) Fehler
a wird nicht als Variable erstellt (keine Variablendeklaration), hier gibt es einen impliziten Zuweisungsausdruck this.a der sehr oft nicht das ist, was Sie erwarten, weil Ein globales Variablenfenster.a wird im strengen Modus erstellt, dies ist verboten.
Was wird in der Konsole angezeigt?
let foo = function bar() { return 123; }; console.log( typeof bar() ); a) 'function' b) 'number' c) 'undefined' d)
Antwort + Analysed) Fehler
Dies ist ein Funktionsausdruck (Ausdruck) - der Name der Funktion ist in diesem Fall lokal für die Funktion. Um eine Funktion aufzurufen, müssen Sie foo und nicht bar aufrufen. Wenn es eine Erklärung wäre, wäre die Antwort number .
Fragen zum Arbeiten mit Bruchzahlen:
Was wird in der Konsole angezeigt?
console.log(0.1 ** 2); a) 0.2 b) 0.01 c) 0.010000000000000002 d) NaN
Was wird in der Konsole angezeigt?
console.log(0.1 + 0.2); a) 0.30000000000000004 b) 0.3 c) 2 d) NaN
Antwort + Analysea) 0,30000000000000004
** - Dies ist ein Analogon zu Math.pow im Quadrat 0.1 - es sollte sich als 0.01 herausstellen, aber in JS (wie in vielen anderen Sprachen) gibt es ein bekanntes Problem mit der Genauigkeit von Operationen beim Arbeiten mit Gleitkommazahlen . Es wird 0.010000000000000002 Dies liegt an der Tatsache, dass im binären System ein unendlicher Bruch erhalten wird, weil Für eine Zahl in JS werden immer genau 64 Bit zugewiesen - alle Zahlen sind immer Gleitkommazahlen mit doppelter Genauigkeit. Das gleiche passiert, wenn es hinzugefügt wird.
Wir wenden uns den Fragen etwas komplizierter zu.
Ereignisse im Browser:
Das Element enthält einen Ereignishandler. Welche Werte in diesem Handler sind immer gleich?
elem.onclick = function(event) { } a) event.target event.currentTarget b) event.target this c) event.currentTarget this d)
Antwort + Analysec) event.currentTarget und dies
this - zeigt immer auf ein Element
currentTarget - das Element, an dem das Ereignis hängt
target - das Element, bei dem das Ereignis aufgetreten ist
Was wird dieser Code ausgeben, wenn Sie auf ein div klicken?
div.onclick = function() { console.log(1) }; div.onclick = function() { console.log(2) }; div.addEventListener('click', function() { console.log(3) }); a) 1 b) 1 3 c) 2 3 d) 3
Antwort + Analysec) 2 3
onclick fügt den console.log(1) , aber in der nächsten Zeile mahlen wir ihn mit einer neuen Funktion und es bleibt nur console.log(2) übrig. onclick ist eine DOM-Eigenschaft, es ist immer eine
Ereignisse funktionieren in der Reihenfolge, in der sie aufgehängt sind. Zuerst werden 2, dann 3 angezeigt.
Wenn wir addEventListener mehrmals addEventListener würden, würde jeder von ihnen funktionieren, weil Handler fügen der Warteschlange Ereignisse hinzu.
Fragenbereich zu verschiedenen APIs
defineProperty:
Was wird dieser Code ausgeben?
(() => { const obj = { key: 1 }; Object.defineProperty(obj, 'key', { enumerable: false, configurable: false, writable: false, value: 2 }); console.log(obj.key); obj.key = 3; console.log(obj.key); })(); a) 1, 2 b) 2, 2 c) 2, 3 d)
Was wird dieser Code ausgeben?
(() => { 'use strict'; const obj = { key: 1 }; Object.defineProperty(obj, 'key', { enumerable: false, configurable: false, writable: false, value: 2 }); console.log(obj.key); obj.key = 3; console.log(obj.key); })(); a) 1, 2 b) 2, 2 c) 2, 3 d) 2,
Was wird dieser Code ausgeben?
(() => { const obj = { key: 1 }; Object.defineProperty(obj, 'key', { enumerable: false, configurable: false, writable: true, value: 2 }); console.log(obj.key); obj.key = 3; console.log(obj.key); })(); a) 1, 2 b) 2, 2 c) 2, 3 d)
Antwort + Analysec) 2, 3
In allen oben genannten Fragen wird die Kenntnis der defineProperty Methode und insbesondere der writable Einstellungen defineProperty . Wenn der Wert auf false ist, dürfen die Werte des Schlüssels, der vom zweiten Parameter in defineProperty . Der einzige Unterschied besteht darin, dass use strict Engine ohne strengen Modus - use strict verwenden - vorgibt, dass alles in Ordnung ist, aber den Wert nicht ändert und im strengen Modus ein Fehler auftritt.
Inkrement:
Was wird dieser Code ausgeben?
let x = 5; console.log(x++); a) 5 b) 6 c) '5++' d)
Was wird dieser Code ausgeben?
const a = 5; console.log(a++); a) 5 b) 6 c) '5++' d)
Die Antwortd) Fehler
Bei Verwendung der Postfix-Form der Inkriminierung wird der Wert vor der Erhöhung zurückgegeben.
Und mit dem Präfix nach, d.h. console.log(++5) würde 6 drucken
const kann nicht überschrieben werden; Zahl ist ein Grundelement. Wenn es inkrementiert wird, wird die Variable mit dem neuen Wert überschrieben und es tritt ein Fehler auf.
Set:
Was wird dieser Code ausgeben?
const a = [...new Set([1, 1, 2, , 3, , 4, 5, 5])]; console.log(a); a) [1, 1, 2, , 3, , 4, 5, 5] b) [1, 2, undefined, 3, 4, 5] c) [1, 1, 2, undefined, 3, undefined, 4, 5, 5] d)
Die Antwortb) [1, 2, undefiniert, 3, 4, 5]
Was wird dieser Code ausgeben?
let set = new Set([10, '10', new Number(10), 1e1, 0xA]); console.log(set.size); a) 5 b) 3 c) 2 d) 1
Was wird dieser Code ausgeben?
let obj = {}; let set = new Set([obj, obj, {}, {}, {...{}}, {...obj}]); console.log(set.size); a) 6 b) 5 c) 2 d) 1
Die Antwortb) 5
Set ist ein Set, das per Definition keine identischen Werte enthalten kann. Die Frage ist, wie diese Werte verglichen werden. Grundelemente werden nach Wert und Objekte nach Referenz verglichen.
Es selbst zitiert keine Datentypen und kann Werte aller Typen 1e1 und 0xA - wird in ein Dezimalsystem konvertiert und erhält 10 .
Und neue Objekte sind immer nicht gleich: console.log({} == {}) gibt seitdem false Objekte werden an verschiedenen Orten des Gedächtnisses auf neue Weise erstellt und ihre Verknüpfungen sind nicht gleich.
Was wird dieser Code ausgeben?
console.log(Infinity / Infinity); a) NaN b) 1 c) Error d) Infinity
Die Antworta) NaN
Es ist unmöglich, Unendlichkeit in Unendlichkeit zu teilen und Unendlichkeit von Unendlichkeit zu subtrahieren, da Aus mathematischer Sicht wird Unsicherheit erhalten, dasselbe passiert, wenn Infinity multipliziert wird und 0 Fehler keine mathematischen Operationen verursachen - es wird NaN
Fragen zur Verbreitung:
Was wird dieser Code ausgeben?
const a = { ...{ a: 1, b: 2, c: 3 }, ...{ a: 2, c: 4, d: 8 } }; console.log(a); a) { a: 2, b: 2, c: 4, d: 8 } c) { a: 1, b: 2, c: 3, d: 8 } c) { a: 1, b: 2, c: 3, a: 2, c: 4, d: 8 } d)
Die Antworta) {a: 2, b: 2, c: 4, d: 8}
Was wird dieser Code ausgeben?
const a = [...[1, 2], ...[[3, 4]], ...[5, 6]]; console.log(a); a) [1, 2, 3, 4, 5, 6] b) [1, 2, [3, 4], 5, 6] c) [[1, 2], [[3, 4]], 5, 6] e)
Antwort + Analyseb) [1, 2, [3, 4], 5, 6]
Spread Operator dient zum Parsen eines Objekts oder Arrays in Teile. Es nimmt Werte von der Entität nach ... und kopiert sie in die erstellte. Es ist erwähnenswert, dass für ein Array und ein Objekt eine Ebene geöffnet wird, d. H. ...[[1]] gibt ein Array mit einem Element zurück, nicht das Element selbst. Es können keine doppelten Werte in Objekten vorhanden sein. Daher werden die nachfolgend angegebenen Werte von den zuvor angegebenen Werten überschrieben. Hiermit können Standardeinstellungen festgelegt werden.
const fn = (actualProps) => ({ ...defaultProps, ...actualProps })
Alle Standardwerte werden gegebenenfalls durch die übergebenen Werte überschrieben.
Was wird dieser Code ausgeben?
console.log(parseInt(' -10,3 ')); a) -10,3 b) -10 c) TypeError d) NaN
Antwort + Analyseb) -10
Vollständige Beschreibung mit MDN :
Wenn die Funktion parseInt auf ein Zeichen stößt, das im angegebenen Zahlensystem keine Zahl ist, überspringt sie dieses und alle nachfolgenden Zeichen (auch wenn sie geeignet sind) und gibt eine Ganzzahl zurück, die aus dem Teil der Zeichenfolge vor diesem Zeichen konvertiert wurde. parseInt schneidet den Bruchteil einer Zahl ab. Leerzeichen am Anfang und Ende einer Zeile sind zulässig.
Was wird dieser Code ausgeben?
const t = { a: 6, b: 7 }; const p = new Proxy(t, { get() { return 12; }, }); console.log(pa); pa = 18; console.log(pa); console.log(ta); a) b) 12 18 18 c) 12 18 6 d) 12 12 18 e) 6 18 6
Antwort + Analysed) 12 12 18
Proxy fängt alle Aufrufe des Objekts ab. In diesem Fall vertreten wir nur die get Methode und geben immer 12 unabhängig davon, auf welches Feld des Objekts wir zugreifen. In diesem Fall berühren wir set nicht und beim Zugriff auf den Proxy wird der Wert im Objekt ersetzt.
Arrays:
Was wird dieser Code ausgeben?
let arr = []; arr[1] = 1; arr[5] = 10; console.log(arr.length); a) 1 b) 5 c) 6 d) 10
Was wird dieser Code ausgeben?
let arr = new Array(3); console.log(arr[1]); a) undefined b) 1 c) 3 d)
Antwort + Analysea) undefiniert
Wenn wir ein Array mit einem numerischen Argument erstellen, bedeutet dies die Länge des Arrays. Ein Array wird leer erstellt, alle Werte sind undefined . Das gleiche passiert, wenn Sie Zugriff auf ein nicht vorhandenes Array-Feld erstellen. Es ist erwähnenswert, dass, wenn Sie eine Zahl an Array , ein Array mit diesem Element zurückgegeben wird, d. H. Array('a') gibt ['a']
logische Operationen && , || , == usw.:
Was wird dieser Code ausgeben?
console.log([] && 'foo' && undefined && true && false); a) [] b) 'foo' c) undefined d) true
Was wird dieser Code ausgeben?
console.log(0 || 1 && 2 || 3); a) 0 b) 1 c) 2 d) 3
Was wird dieser Code ausgeben?
console.log(0 || '' || 2 || undefined || true || false); a) 0 b) false c) 2 d) true
Was wird dieser Code ausgeben?
console.log(2 && '1' && null && undefined && true && false); a) 2 b) false c) undefined d) null
Was wird dieser Code ausgeben?
console.log([] && {} || null && 100 || ''); a) true b) 100 c) '' d) {}
Antwort + Analysed) {}
Ein leeres Array [] ist true ebenso wie ein leeres Objekt {} .
Die leere Zeichenfolge '' , null und undefined ist false
Logisch oder || - gibt den linken Operanden zurück, falls true, andernfalls den rechten Operanden.
Logisch und && - gibt den linken Operanden zurück, wenn er falsch ist, andernfalls den rechten Operanden.
Dies kann manchmal im Code gefunden werden, bevor die Standardparameter angezeigt werden. Sie haben oft so geschrieben - wenn die Funktion keine Parameter enthält, nehmen wir die Standardparameter:
function f(userParams) { var params = userParams || defaultParams; }
Jetzt prüft React oft, ob die Bedingung erfüllt ist, dann rendern wir etwas:
{ isDivVisible && <div>bla-bla</div> }
Array-Vergleich:
Was wird dieser Code ausgeben?
const arrayFoo = [1, 2, 3, 4]; const arrayBaz = [1, 2, 3, 4]; console.log(arrayFoo == arrayBaz && arrayFoo == arrayBaz); a) false b) true c) undefined d)
Was wird dieser Code ausgeben?
console.log([null, 0, -0].map(x => 0 <= x)); a) [false, true, false] b) [false, true, true] c) [false, false, false] d) [true, true, true]
Was wird dieser Code ausgeben?
const arrayFoo = [1, 2, 3, 4]; const arrayBaz = [1, 2, 3, 4]; console.log(arrayFoo >= arrayBaz && arrayFoo <= arrayBaz); a) true b) false c) undefined d)
Was wird dieser Code ausgeben?
const foo = [1, 2, 3, 4]; const baz = '1,2,3,4'; console.log(foo >= baz && foo <= baz); a) false b) true c) undefined d)
Antwort + Analyseb) wahr
Wenn == anhand der Referenz vergleichen.
Während der Operation >, >=, <, <= Operanden in Grundelemente konvertiert, und die valueOf-Methode wird für arrayFoo aufgerufen. arrayFoo sollte den arrayFoo , gibt jedoch einen Verweis auf dasselbe Array zurück. Als nächstes erfolgt eine Konvertierung in einen primitiven Wert durch Aufrufen der toString Methode, die wiederum eine Zeichenfolgendarstellung des Arrays in Form von "1,2,3,4" zurückgibt, zwei Arrays lexikografisch vergleicht und true
Was wird dieser Code ausgeben?
console.log(+0 == -0); console.log(+0 === -0); console.log(Object.is(+0, -0)); a) true, false, false b) true, true, false c) false, true, true d) false, false. false
Antwort + Analyseb) wahr, wahr, falsch
Umfassende Erklärung mit MDN :
Das Verhalten dieser Methode (über Object.is ) ist nicht dasselbe wie der Operator === . Der Operator === (sowie der Operator == ) betrachtet die numerischen Werte -0 und +0 gleich, und der Wert Number.NaN nicht gleich sich selbst.
Fragen zum Heben:
Was wird dieser Code ausgeben?
console.log(str); const str = 'HeadHunter'; a) 'HeadHunter' b) undefined c)
Was wird dieser Code ausgeben?
var arrayFunction = []; for (let i = 0; i <= 10; i++) { arrayFunction.push(() => i); } console.log(arrayFunction[3]()); a) 4 b) 0 c) 11 d) 3
Was wird dieser Code ausgeben?
console.log(str); var str = 'HeadHunter'; a) 'HeadHunter' b) undefined c) null c)
Was wird dieser Code ausgeben?
console.log(foo); var foo; foo = foo ? 1 : 0; console.log(foo); a) b) undefined 0 c) '' 1 d) 0 0
Funktioniert ein Funktionsaufruf?
getCompanyName(); function getCompanyName() { return 'HeadHunter'; } a) b) , . c)
Was wird dieser Code ausgeben?
var arrayFunction = []; for (var i = 0; i <= 10; i++) { arrayFunction.push(() => i); } console.log(arrayFunction[3]()); a) 4 b) 0 c) 11 d) 3
Antwort + Analysec) 11
Funktionsdeklarationen werden angezeigt, aber kein Ausdruck.
var angezeigt, aber bis die Initialisierung undefined .
let und const nicht angezeigt und haben einen Gültigkeitsbereich in einem Block, d. h. beschränkt auf {} .
Damit die Schleife mit var korrekt funktioniert var Sie einen Abschluss verwenden. Der Wert wird darin gespeichert.
(Früher war dies eine klassische Aufgabe für Interviews, aber jetzt haben wir es gelassen)
var arrayFunction = []; for (var i = 0; i <= 10; i++) { (function(i) { arrayFunction.push(() => i); })(i); } console.log(arrayFunction[3]());
Was wird dieser Code ausgeben?
console.log(true + false); a) true b) false c) 1 d) 0
Antwort + Analysec) 1
Keiner der Operatoren ist eine Zeichenfolge, + führt zu einer Zahl. Es stellt sich heraus, 1 + 0
Was wird dieser Code ausgeben?
console.log([] - 100 + ![]); a) false b) '-100' c) -100 d) NaN
Antwort + Analysec) -100
Das Array wird in eine Zeichenfolge umgewandelt. Danach wird - -100 in eine Zahl umgewandelt, es stellt sich heraus, dass -100 , dann wird das Array in false , und dies ist 0
Was wird dieser Code ausgeben?
console.log([[], []] + 1); a) 1 b) '1' c) ',1' d) NaN
Antwort + Analysec) ', 1'
Wir toString für das Objekt auf, während toString auch für alle Elemente des Arrays aufgerufen wird. [].toString gibt eine leere Zeichenfolge '' . Es stellt sich heraus , + 1 - die Antwort ,1 .
Was wird dieser Code ausgeben?
console.log([] + 100 + 5); a) 105 b) '1005' c) 1005 d) NaN
Antwort + Analyseb) "1005"
Das Array kann auf eine Zeichenfolge reduziert werden, und dann tritt bereits eine Verkettung auf.
Was wird dieser Code ausgeben?
console.log(1 + { a: 3 } + '2'); a) 6 b) '1[object Object]2' c) 3 d) NaN
Antwort + Analyseb) '1 [Objekt Objekt] 2'
In eine Zeichenfolge konvertieren - es ist nur eine Verkettung.
Was wird dieser Code ausgeben?
console.log(10.toString() + 10 + 0x1); a) '10101' b) 21 c) '10100x1' d)
Antwort + Analysed) Fehler
Für die Anzahl der Punkte . bedeutet der Beginn des Bruchteils, wir erwarten dort eine Zahl - es wird ein Fehler auftreten.
Damit dieses Beispiel funktioniert, müssen Sie 10..toString() schreiben.
Was wird dieser Code ausgeben?
console.log(5 + false - null + true); a) '0true' b) NaN c) 6 d)
Antwort + Analysec) 6
Hier wird alles auf eine Zahl reduziert, es stellt sich heraus, 5 + 0 - 0 + 1
Was wird dieser Code ausgeben?
console.log(true + NaN + false); a) true b) NaN c) false d) 1
Antwort + Analyseb) NaN
Wir reduzieren alles auf eine Zahl, wenn wir Zahlen mit NaN hinzufügen - wir bekommen NaN
Was wird dieser Code ausgeben?
console.log('0x1' + '1' - '1e1'); a) 17 b) 7 c) '0x111e1' d) NaN
Antwort + Analyseb) 7
Es gibt bereits Zeilen nach der ersten Verkettung, wir erhalten: '0x11' - '1e1' . Wegen des Zeichens - wir bringen alles auf eine Nummer.
0x11 - Die Hexadezimalzahl in Dezimalzahl ist 17 .
1e1 - die Exponentialform ist dieselbe wie 1 * 10 ** 1 - d.h. nur 10 .
Art:
Was wird dieser Code ausgeben?
let foo = () => { return null; }; console.log( typeof typeof foo ); a) 'function' b) 'string' c) 'null' d)
Was wird dieser Code ausgeben?
typeof function() {}.prototype; a) 'function' b) 'object' c) 'undefined' d)
Antwort + Analyseb) "Objekt"
typeof immer einen String zurück, hat eine niedrigere Priorität als der Aufruf der Funktion, daher wird die Funktion zuerst ausgeführt und typeof wird auf das zurückgegebene Ergebnis angewendet. Funktionsobjekte erben von Function.prototype. Speck stellt ausdrücklich fest, dass dies ein Objekt ist.
Ereignisschleife:
Beginnen wir mit 2 Fragen zu Versprechungen.
Was wird dieser Code ausgeben?
Promise.reject() .then(() => console.log(1), () => console.log(2)) .then(() => console.log(3), () => console.log(4)); a) 1 4 b) 1 3 c) 2 3 d) 2 4
Was wird dieser Code ausgeben?
Promise.reject('foo') .then(() => Promise.resolve('bar'), () => {}) .then((a) => {console.log(a)}) a) foo b) bar c) undefined d)
Antwort + Analysec) undefiniert
Promise.reject - Promise.reject ein Versprechen in einem abgelehnten Zustand zurück.
Es sollte beachtet werden, dass then 2 Parameter verwendet werden, onFulfill und onReject Rückrufe. Wenn then vorher ein Fehler auftritt, gelangen wir zum Rückruf onReject . Wenn es keinen Fehler gibt, kommen wir onFulfill nächstes zu onFulfill . Und vergessen Sie nicht, dass () => {} kein leeres, sondern undefined Objekt zurückgibt. Um ein leeres Objekt zurückzugeben, müssen Sie wie folgt schreiben: () => ({})
die Reihenfolge der Aufgaben.
Was wird dieser Code ausgeben?
async function get1() { return 1; } function get2() { return 2; } (async () => { console.log(await get1()); })(); console.log(get2()); a) 1,2 b) 2,1 c) 1 d) 2
Was wird dieser Code ausgeben?
setTimeout(() => {console.log('in timeout')}); Promise.resolve() .then(() => {console.log('in promise')}); console.log('after'); a) in timeout, in promise, after b) after, in promise, in timeout c) after, in timeout, in promise d) in timeout, after, in promise
Die Antwortb) nach, in Versprechen, in Timeout
Was wird dieser Code ausgeben?
let __promise = new Promise((res, rej) => { setTimeout(res, 1000); }); async function test(i) { await __promise; console.log(i); } test(1); test(2); a) 1, 2 b) 2, 1 c) 1 d) 2
Was wird dieser Code ausgeben?
console.log('FUS'); setTimeout(() => {console.log('RO')}) Promise.resolve('DAH!').then(x => console.log(x)); a FUS RO DAH! b) FUS DAH! RO c) RO FUS DAH! d) DAH! RO FUS
Was wird dieser Code ausgeben?
console.log(1); setTimeout(() => console.log('setTimeout'), 0); console.log(2); Promise.resolve().then(() => console.log('promise1 resolved')); console.log(3); a) 1, 2, 3, 'setTimeout', 'promise1 resolved' b) 1, 'setTimeout', 2, 'promise1 resolved', 3 c) 1, 2, 3, 'promise1 resolved', 'setTimeout' d) 1, 2, 'promise1 resolved', 3, 'setTimeout'
Antwort + Analysec) 1, 2, 3, 'Versprechen1 gelöst', 'SetTimeout'
Zunächst werden alle synchronen Aufrufe ausgelöst. Wenn der Aufrufstapel leer ist, wird das aufgerufen, was sich in der Warteschlange befindet (asynchrone Aufgaben). Erstens Mikrotask - Versprechen und mutation observer . Am Ende der aktuellen Aufgabe werden alle Mikrotask ausgeführt. In Verbindung mit dieser Mikrotask können Sie die Ereignisschleife blockieren. Nach Abschluss der Aufgabe rendert der Browser. Danach werden Makroaufgaben - Timeouts ausgeführt.
Dies ist ein sehr vereinfachtes Beispiel. Im Detail würde ich Ihnen raten, die Rede von Michail Baschurow zu sehen
Und die letzte Frage verspricht vs warten
Was wird dieser Code ausgeben?
const p = Promise.resolve(); (async () => { await p; console.log('1'); })(); p.then(() => console.log('2')) .then(() => console.log('3'));
a) 1 2 3
b) 2 1 3
c) 2 3 1
d) 3 2 1
Antwort + Analysec) 2 3 1
Gemäß der Spezifikation müssen die dann hinzugefügten Versprechen zuerst ausgeführt werden und erst danach müssen sie fortgesetzt werden
Ausführung einer asynchronen Funktion. Speck . Für ein detaillierteres Verständnis, warum dies so ist, empfehle ich Ihnen, einen ausgezeichneten Artikel auf v8.dev zu lesen