Geekly articles weekly

Analisis pertanyaan di stand hh.ru di # HolyJS18

Kami mencoba melakukan sesuatu yang menarik dan tidak biasa untuk Anda. Saya sangat berharap kami berhasil. Kami tidak ingin meninggalkan Anda tanpa jawaban dan tidak ada penjelasan mengapa. Mari kita perbaiki.


Untuk mulai dengan, saya ingin mengingatkan Anda bagaimana kompetisi diadakan, ada 4 putaran 15 pertanyaan tentang JS, 1 putaran 15 kompetisi tentang React dan final 10 pertanyaan.


gambar


Di bawah cut - analisis tugas dari 4 putaran pertama.


Ini adalah bagian kedua dari analisis kami.
Bereaksi pertanyaan di sini


Bagaimana kita semua melakukan ini? Kami memutuskan bahwa kami perlu membuat sekitar 80-90 pertanyaan sehingga ada stok untuk memilih. Setelah itu, kami membagi semuanya menjadi topik:


  • acara browser
  • berbagai API (Array, Set, defineProperty, dll.),
  • perhatian
  • bekerja dengan bilangan pecahan
  • mengangkat
  • loop acara
  • konversi tipe
  • typeof
  • logis (dengan logika AND dan OR)

Setelah itu, pertanyaan dibagikan dalam 4 putaran. Kami mencoba membuat semua tur sama kerumitannya, untuk ini kami melakukan beberapa kunjungan yang lulus dari tes ini dan menentukan di mana pertanyaan lebih mudah, di mana lebih sulit dan mengganti pertanyaan luar biasa dengan yang lebih cocok. Dan kami melakukan tentang jumlah pertanyaan yang sama pada topik tertentu di setiap putaran. Akibatnya, ternyata dalam tur yang berbeda ada yang serupa, tetapi bukan pertanyaan yang sama.


Karena itu, sepertinya tidak nyaman untuk memilah-milah tur karena akan ada banyak penjelasan duplikat, saya sarankan melihat mereka berdasarkan topik. Mari kita mulai dengan yang paling sederhana.


Pertanyaan untuk diperhatikan:


Apa yang akan ditampilkan di konsol?


console.log(0,1 + 0,2); a) 0.30000000000000004 b) 0.3 c) 2 d) 0 1 2

Jawab + parsing

d) 0 1 2
Di sini berdiri di antara angka-angka, dan tidak . jika Anda memformat pertanyaan seperti ini:
console.log(0, 1 + 0, 2); semuanya akan menjadi jelas


Apa yang akan ditampilkan di konsol?


 (() => { 'use strict'; a = null + undefined; console.log(a); })(); a) 0 b) NaN c) null d)

Jawab + parsing

d) kesalahan
a tidak dibuat sebagai variabel (bukan Deklarasi Variabel), di sini ada Ekspresi Penugasan implisit untuk this.a yang sangat sering mungkin bukan apa yang Anda harapkan, karena window.a variabel global. akan dibuat dalam mode ketat, ini dilarang.


Apa yang akan ditampilkan di konsol?


 let foo = function bar() { return 123; }; console.log( typeof bar() ); a) 'function' b) 'number' c) 'undefined' d)

Jawab + parsing

d) kesalahan
Ini adalah ekspresi fungsional (ekspresi) - nama fungsi dalam kasus ini adalah lokal untuk fungsi tersebut. Untuk memanggil suatu fungsi, Anda harus memanggil foo , bukan bar . Jika itu adalah deklarasi, jawabannya adalah number .


Pertanyaan tentang bekerja dengan bilangan pecahan:


Apa yang akan ditampilkan di konsol?


 console.log(0.1 ** 2); a) 0.2 b) 0.01 c) 0.010000000000000002 d) NaN

Jawabannya

c) 0,010000000000000002


Apa yang akan ditampilkan di konsol?


 console.log(0.1 + 0.2); a) 0.30000000000000004 b) 0.3 c) 2 d) NaN

Jawab + parsing

a) 0.30000000000000004
** - ini adalah analog dari Math.pow kuadrat 0.1 - seharusnya menjadi 0.01 , tetapi dalam JS (seperti dalam banyak bahasa lain) ada masalah yang diketahui dengan akurasi operasi ketika bekerja dengan angka floating point . Ini akan menjadi 0.010000000000000002 Hal ini disebabkan oleh fakta bahwa dalam sistem biner fraksi tak terbatas diperoleh, karena tepatnya 64 bit selalu dialokasikan untuk sebuah angka di JS - semua angka selalu merupakan floating point presisi ganda. Hal yang sama terjadi ketika ditambahkan.


Kami beralih ke pertanyaan yang sedikit lebih rumit.


Acara di browser:


Ada event handler pada elemen tersebut. Nilai apa di dalam handler ini akan selalu sama?


 elem.onclick = function(event) { } a) event.target  event.currentTarget b) event.target  this c) event.currentTarget  this d)

Jawab + parsing

c) event.currentTarget dan ini
this - akan selalu mengarah ke suatu elemen
currentTarget - elemen yang digunakan untuk menggantung acara
target - elemen di mana peristiwa itu terjadi


Apa yang akan dihasilkan kode ini dengan mengklik div?


 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

Jawab + parsing

c) 2 3
onclick akan menambahkan handler console.log(1) , tetapi pada baris berikutnya kita menggilingnya dengan fungsi baru dan hanya console.log(2) tersisa. onclick adalah properti DOM, selalu satu
Acara akan bekerja dalam urutan di mana mereka digantung, pertama 2 kemudian 3 akan ditampilkan.
Jika kami memang addEventListener beberapa kali, maka masing-masing akan berfungsi, karena handler menambahkan acara ke antrian.


Bagian pertanyaan tentang berbagai API


defineProperty:


Apa yang akan dihasilkan kode ini?


 (() => { 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)

Jawabannya

b) 2, 2


Apa yang akan dihasilkan kode ini?


 (() => { '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,

Jawabannya

d) 2, kesalahan


Apa yang akan dihasilkan kode ini?


 (() => { 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)

Jawab + parsing

c) 2, 3
Dalam semua pertanyaan di atas, pengetahuan tentang metode defineProperty dan lebih khusus lagi, pengaturan yang writable . Jika disetel ke false dilarang mengubah nilai kunci yang dilewatkan sebagai parameter kedua untuk defineProperty . Satu-satunya perbedaan adalah bahwa tanpa mode ketat - use strict mesin akan berpura-pura semuanya baik-baik saja, tetapi tidak akan mengubah nilainya, dan akan ada kesalahan dalam mode ketat.


kenaikan:


Apa yang akan dihasilkan kode ini?


 let x = 5; console.log(x++); a) 5 b) 6 c) '5++' d)

Jawabannya

a) 5


Apa yang akan dihasilkan kode ini?


 const a = 5; console.log(a++); a) 5 b) 6 c) '5++' d)

Jawabannya

d) kesalahan
Saat menggunakan bentuk postfix yang memberatkan, nilainya dikembalikan sebelum meningkat.
Dan dengan awalan setelahnya, yaitu console.log(++5) akan mencetak 6
const tidak bisa ditimpa; Angka adalah primitif, ketika ditambahkan, variabel akan ditimpa dengan nilai baru dan akan ada kesalahan.


Setel:


Apa yang akan dihasilkan kode ini?


 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)

Jawabannya

b) [1, 2, tidak terdefinisi, 3, 4, 5]


Apa yang akan dihasilkan kode ini?


 let set = new Set([10, '10', new Number(10), 1e1, 0xA]); console.log(set.size); a) 5 b) 3 c) 2 d) 1

Jawabannya

b) 3


Apa yang akan dihasilkan kode ini?


 let obj = {}; let set = new Set([obj, obj, {}, {}, {...{}}, {...obj}]); console.log(set.size); a) 6 b) 5 c) 2 d) 1

Jawabannya

b) 5
Set adalah himpunan, dengan definisi tidak ada nilai identik di dalamnya. Pertanyaannya adalah bagaimana nilai-nilai ini dibandingkan. Primitif dibandingkan dengan nilai, dan objek dengan referensi.
Itu sendiri tidak mengutip tipe data dan dapat menyimpan nilai dari tipe 1e1 dan 0xA - akan dikonversi ke sistem desimal dan mendapatkan 10 .
Dan objek baru selalu tidak sama: console.log({} == {}) akan kembali false sejak objek akan dibuat dengan cara baru di berbagai tempat memori dan tautannya tidak akan sama.


Apa yang akan dihasilkan kode ini?


 console.log(Infinity / Infinity); a) NaN b) 1 c) Error d) Infinity

Jawabannya

a) NaN
Tidak mungkin membagi infinity menjadi infinity dan mengurangi infinity dari infinity dari sudut pandang matematika, diperoleh ketidakpastian, hal yang sama terjadi ketika Infinity dikalikan dan 0 kesalahan tidak menyebabkan operasi matematika - akan ada NaN


Pertanyaan tentang Penyebaran:


Apa yang akan dihasilkan kode ini?


 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)

Jawabannya

a) {a: 2, b: 2, c: 4, d: 8}


Apa yang akan dihasilkan kode ini?


 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)

Jawab + parsing

b) [1, 2, [3, 4], 5, 6]
Operator Spread berfungsi untuk menguraikan objek atau array menjadi bagian-bagian. Dibutuhkan nilai dari entitas setelah ... dan menyalinnya ke yang dibuat. Perlu dicatat bahwa untuk array dan objek terbuka ke 1 tingkat yaitu ...[[1]] akan mengembalikan array dengan satu elemen, bukan elemen itu sendiri. Tidak ada nilai duplikat dalam objek, oleh karena itu, nilai-nilai yang diungkapkan setelah akan ditimpa oleh orang-orang yang sebelumnya diungkapkan. Ini dapat digunakan untuk menentukan pengaturan default.


 const fn = (actualProps) => ({ ...defaultProps, ...actualProps })

Semua nilai default akan ditimpa oleh nilai yang diteruskan, jika ada.


Apa yang akan dihasilkan kode ini?


 console.log(parseInt(' -10,3   ')); a) -10,3 b) -10 c) TypeError d) NaN

Jawab + parsing

b) -10
Deskripsi lengkap dengan MDN :
Jika fungsi parseInt bertemu dengan karakter yang bukan angka dalam sistem angka yang ditentukan, itu melewatkan ini dan semua karakter berikutnya (bahkan jika mereka cocok) dan mengembalikan integer yang dikonversi dari bagian string sebelum karakter ini. parseInt memotong bagian pecahan dari angka. Spasi di awal dan akhir garis diperbolehkan.


Apa yang akan dihasilkan kode ini?


 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

Jawab + parsing

d) 12 12 18
Proxy memotong semua panggilan ke objek. Dalam hal ini, kami proksi hanya metode get dan selalu mengembalikan 12 tidak peduli bidang objek yang kita akses. Dalam hal ini, kami tidak menyentuh set, dan ketika mengakses proxy, nilai dalam objek akan diganti.


array:


Apa yang akan dihasilkan kode ini?


 let arr = []; arr[1] = 1; arr[5] = 10; console.log(arr.length); a) 1 b) 5 c) 6 d) 10

Jawabannya

c) 6


Apa yang akan dihasilkan kode ini?


 let arr = new Array(3); console.log(arr[1]); a) undefined b) 1 c) 3 d)

Jawab + parsing

a) tidak terdefinisi
Ketika kita membuat Array dengan satu argumen numerik, itu berarti panjang array. Array dibuat kosong, semua nilai tidak undefined . Hal yang sama terjadi jika Anda membuat akses ke bidang array yang tidak ada. Perlu dicatat bahwa jika Anda meneruskan angka ke Array , array dengan elemen ini akan dikembalikan yaitu. Array('a') akan mengembalikan ['a']


operasi logis && , || , == , dll.:


Apa yang akan dihasilkan kode ini?


 console.log([] && 'foo' && undefined && true && false); a) [] b) 'foo' c) undefined d) true

Jawabannya

c) tidak terdefinisi


Apa yang akan dihasilkan kode ini?


 console.log(0 || 1 && 2 || 3); a) 0 b) 1 c) 2 d) 3

Jawabannya

c) 2


Apa yang akan dihasilkan kode ini?


 console.log(0 || '' || 2 || undefined || true || false); a) 0 b) false c) 2 d) true

Jawabannya

c) 2


Apa yang akan dihasilkan kode ini?


 console.log(2 && '1' && null && undefined && true && false); a) 2 b) false c) undefined d) null

Jawabannya

d) nol


Apa yang akan dihasilkan kode ini?


 console.log([] && {} || null && 100 || ''); a) true b) 100 c) '' d) {}

Jawab + parsing

d) {}
Array kosong [] true seperti objek kosong {} .
String kosong '' , null , dan undefined false
Logis atau || - mengembalikan operan kiri, jika benar, sebaliknya mengembalikan operan kanan.
Logical dan && - mengembalikan operan kiri, jika itu salah, jika tidak mengembalikan operan kanan.


Ini kadang-kadang dapat ditemukan dalam kode, sebelum kemunculan parameter default, mereka sering menulis seperti ini - jika tidak ada parameter dalam fungsi, maka kita mengambil parameter default:


 function f(userParams) { var params = userParams || defaultParams; }

Sekarang Bereaksi sering memeriksa apakah kondisinya benar, maka kami memberikan sesuatu:


 { isDivVisible && <div>bla-bla</div> }

perbandingan array:


Apa yang akan dihasilkan kode ini?


 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)

Jawabannya

a) salah


Apa yang akan dihasilkan kode ini?


 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]

Jawabannya

d) [benar, benar, benar]


Apa yang akan dihasilkan kode ini?


 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)

Jawabannya

a) benar


Apa yang akan dihasilkan kode ini?


 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)

Jawab + parsing

b) benar
Ketika == bandingkan dengan referensi.
selama operasi >, >=, <, <= operan dikonversi menjadi primitif dan metode valueOf dipanggil pada arrayFoo , yang seharusnya mengembalikan arrayFoo nilai primitif, tetapi mengembalikan referensi ke array yang sama. Selanjutnya, konversi ke nilai primitif terjadi dengan memanggil metode toString , yang pada gilirannya akan mengembalikan representasi string dari array dalam bentuk "1,2,3,4" akan membandingkan dua array secara leksikografis dan mengembalikan true


Apa yang akan dihasilkan kode ini?


 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

Jawab + parsing

b) benar, benar, salah
Penjelasan komprehensif dengan MDN :
Perilaku metode ini (berbicara tentang Object.is ) tidak sama dengan operator === . Operator === (juga operator == ) menganggap nilai numerik -0 dan +0 sama, dan nilai Number.NaN tidak sama dengan dirinya sendiri.


Pertanyaan tentang pengangkatan:


Apa yang akan dihasilkan kode ini?


 console.log(str); const str = 'HeadHunter'; a) 'HeadHunter' b) undefined c)

Jawabannya

c) kesalahan


Apa yang akan dihasilkan kode ini?


 var arrayFunction = []; for (let i = 0; i <= 10; i++) { arrayFunction.push(() => i); } console.log(arrayFunction[3]()); a) 4 b) 0 c) 11 d) 3

Jawabannya

d) 3


Apa yang akan dihasilkan kode ini?


 console.log(str); var str = 'HeadHunter'; a) 'HeadHunter' b) undefined c) null c)

Jawabannya

b) tidak terdefinisi


Apa yang akan dihasilkan kode ini?


 console.log(foo); var foo; foo = foo ? 1 : 0; console.log(foo); a)  b) undefined 0 c) '' 1 d) 0 0

Jawabannya

b) tidak terdefinisi 0


Apakah panggilan fungsi berfungsi?


 getCompanyName(); function getCompanyName() { return 'HeadHunter'; } a)  b) ,     . c)

Jawabannya

a) ya


Apa yang akan dihasilkan kode ini?


 var arrayFunction = []; for (var i = 0; i <= 10; i++) { arrayFunction.push(() => i); } console.log(arrayFunction[3]()); a) 4 b) 0 c) 11 d) 3

Jawab + parsing

c) 11


Deklarasi fungsi muncul, tetapi tidak ada ekspresi.
var muncul, tetapi sampai inisialisasi tidak undefined .
let dan const tidak muncul dan memiliki ruang lingkup di blok yaitu terbatas pada {} .


Agar perulangan bekerja dengan benar dengan var Anda perlu menggunakan penutupan, nilainya akan disimpan di dalamnya.
(Ini dulunya merupakan tugas klasik untuk wawancara, tetapi sekarang kami telah membiarkannya)


 var arrayFunction = []; for (var i = 0; i <= 10; i++) { (function(i) { arrayFunction.push(() => i); })(i); } console.log(arrayFunction[3]());

Apa yang akan dihasilkan kode ini?


 console.log(true + false); a) true b) false c) 1 d) 0

Jawab + parsing

c) 1
Tidak ada operator yang merupakan string, + mengarah ke nomor. Ternyata 1 + 0


Apa yang akan dihasilkan kode ini?


 console.log([] - 100 + ![]); a) false b) '-100' c) -100 d) NaN

Jawab + parsing

c) -100
Array dilemparkan ke string, setelah itu, karena - kita melemparkan ke angka, ternyata -100 , lalu kita melemparkan array ke false , dan ini adalah 0


Apa yang akan dihasilkan kode ini?


 console.log([[], []] + 1); a) 1 b) '1' c) ',1' d) NaN

Jawab + parsing

c) ', 1'
Kami toString pada objek, sementara toString juga akan dipanggil pada semua elemen array. [].toString akan mengembalikan string kosong '' . Ternyata , + 1 - jawabannya ,1 .


Apa yang akan dihasilkan kode ini?


 console.log([] + 100 + 5); a) 105 b) '1005' c) 1005 d) NaN

Jawab + parsing

b) '1005'
Array dapat direduksi menjadi string, dan kemudian concatenation sudah terjadi.


Apa yang akan dihasilkan kode ini?


 console.log(1 + { a: 3 } + '2'); a) 6 b) '1[object Object]2' c) 3 d) NaN

Jawab + parsing

b) '1 [objek objek] 2'
Konversikan ke string - itu hanya penggabungan.


Apa yang akan dihasilkan kode ini?


 console.log(10.toString() + 10 + 0x1); a) '10101' b) 21 c) '10100x1' d)

Jawab + parsing

d) kesalahan
Untuk angka, satu titik . berarti awal dari bagian pecahan, kami mengharapkan angka di sana - akan ada kesalahan.
Agar contoh ini berfungsi dengan baik, Anda perlu menulis 10..toString()


Apa yang akan dihasilkan kode ini?


 console.log(5 + false - null + true); a) '0true' b) NaN c) 6 d)

Jawab + parsing

c) 6
Di sini semuanya direduksi menjadi angka, ternyata 5 + 0 - 0 + 1


Apa yang akan dihasilkan kode ini?


 console.log(true + NaN + false); a) true b) NaN c) false d) 1

Jawab + parsing

b) NaN
Kami mengurangi semuanya menjadi angka, saat menambahkan angka dengan NaN - kami mendapatkan NaN


Apa yang akan dihasilkan kode ini?


 console.log('0x1' + '1' - '1e1'); a) 17 b) 7 c) '0x111e1' d) NaN

Jawab + parsing

b) 7
Sudah ada baris setelah penggabungan pertama, kita mendapatkan: '0x11' - '1e1' . Karena tanda - kami membawa semuanya ke nomor.
0x11 - Angka heksadesimal dalam desimal adalah 17 .
1e1 - bentuk eksponensial sama dengan 1 * 10 ** 1 - i.e. hanya 10 .


jenis:


Apa yang akan dihasilkan kode ini?


 let foo = () => { return null; }; console.log( typeof typeof foo ); a) 'function' b) 'string' c) 'null' d)

Jawabannya

b) 'string'


Apa yang akan dihasilkan kode ini?


 typeof function() {}.prototype; a) 'function' b) 'object' c) 'undefined' d)

Jawab + parsing

b) 'objek'
typeof selalu mengembalikan string, memiliki prioritas lebih rendah daripada memanggil fungsi, jadi fungsi dijalankan terlebih dahulu, dan typeof diterapkan pada hasil yang dikembalikan padanya. Objek fungsi mewarisi dari Function.prototype. Speck secara eksplisit menentukan bahwa ini adalah objek.


loop acara:


Mari kita mulai dengan 2 pertanyaan tentang janji.


Apa yang akan dihasilkan kode ini?


 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

Jawabannya

c) 2 3


Apa yang akan dihasilkan kode ini?


 Promise.reject('foo') .then(() => Promise.resolve('bar'), () => {}) .then((a) => {console.log(a)}) a) foo b) bar c) undefined d)

Jawab + parsing

c) tidak terdefinisi
Promise.reject - mengembalikan janji dalam keadaan ditolak.
Harus diingat bahwa then mengambil 2 parameter, onFulfill dan onReject callbacks. Jika kesalahan terjadi sebelum ini, maka kita menuju panggilan balik onReject . Jika tidak ada kesalahan di dalamnya, maka kita akan ke onFulfill selanjutnya. Dan jangan lupa bahwa () => {} mengembalikan bukan objek kosong, tetapi undefined , untuk mengembalikan objek kosong Anda perlu menulis seperti ini: () => ({})


urutan tugas.


Apa yang akan dihasilkan kode ini?


 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

Jawabannya

b) 2.1


Apa yang akan dihasilkan kode ini?


 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

Jawabannya

b) setelah, dalam janji, dalam batas waktu


Apa yang akan dihasilkan kode ini?


 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

Jawabannya

a) 1, 2


Apa yang akan dihasilkan kode ini?


 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

Jawabannya

b) FUS DAH! RO


Apa yang akan dihasilkan kode ini?


 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'

Jawab + parsing

c) 1, 2, 3, 'janji1 diselesaikan', 'setTimeout'
Pertama, semua panggilan sinkron dipicu, setelah itu, ketika tumpukan panggilan kosong, apa yang ada dalam antrian dipanggil (tugas tidak sinkron). Pertama, microtask - janji dan mutation observer . Di akhir tugas saat ini, semua microtasks dieksekusi, sehubungan dengan microtask ini Anda dapat memblokir event loop, setelah tugas selesai di browser, rendering berlangsung. Setelah itu, tugas makro - batas waktu dijalankan.
Ini adalah contoh yang sangat sederhana, lebih terinci saya akan menyarankan Anda untuk melihat pidato Mikhail Bashurov


Dan janji pertanyaan terakhir vs menunggu


Apa yang akan dihasilkan kode ini?


 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


Jawab + parsing

c) 2 3 1


Menurut spec, janji-janji yang ditambahkan then harus dijalankan terlebih dahulu, dan hanya setelah itu Anda perlu melanjutkan
pelaksanaan fungsi asinkron. Bintik Untuk pemahaman yang lebih terperinci tentang mengapa demikian, saya menyarankan Anda untuk membaca artikel yang bagus tentang v8.dev

Source: https://habr.com/ru/post/id431698/

More articles:


All Articles