200 pertanyaan JavaScript teoretis

Selamat siang teman!



Berikut adalah daftar dari seratus pertanyaan dasar JavaScript kedua dari repositori ini, dengan jawaban singkat dan tautan ke Tutorial JavaScript Modern (JSR) Ilya Kantor dan MDN.



Daftar ini dan 300+ soal latihan tersedia di aplikasi saya .



Aplikasi menerapkan mekanisme untuk menghafal pertanyaan yang dipelajari, dan juga menyediakan pekerjaan offline.



Saya mohon maaf atas kemungkinan kesalahan dan kesalahan ketik. Segala bentuk umpan balik sangat dihargai.



Edisi dari 14.09.



Lihat 100 pertanyaan pertama di sini .

101. Untuk apa stopPropagation () digunakan?

Metode ini digunakan untuk mencegah peristiwa menggelembung atau naik rantai dari leluhur elemen target. Dengan kata lain, itu berhenti mengirim acara dari elemen target ke leluhurnya. Mari pertimbangkan sebuah contoh:

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

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

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

Saat Anda mengklik penampung bersarang, pesan "Penampung dalam" ditampilkan di konsol. Jika Anda menghapus event.stopPropagation (), maka saat Anda mengklik penampung bersarang, kedua pesan akan ditampilkan di konsol.



JSR

MDN

102. Apa fungsi return false?

Pernyataan ini digunakan dalam event handler untuk:

• Membatalkan perilaku browser default
• Mencegah penyebaran peristiwa melalui DOM
• Menghentikan eksekusi callback dan mengembalikan kontrol ke fungsi panggilan

Perhatikan bahwa tanpa menentukan nilai pengembalian, pernyataan pengembalian mengembalikan tidak terdefinisi.



JSR

MDN

103. Apakah BOM itu?

BOM atau (Browser Object Model) memungkinkan JavaScript untuk berinteraksi dengan browser. Model ini mencakup objek seperti navigator, lokasi, riwayat, layar, XMLHttpRequest, dll. Dengan kata lain, BOM adalah objek tambahan yang disediakan oleh browser untuk bekerja dengan semua hal kecuali dokumen.

Harap dicatat bahwa BOM tidak terstandarisasi, jadi implementasinya mungkin berbeda di browser yang berbeda.







JSR

104. Untuk apa setTimeout () digunakan?

Metode ini digunakan untuk eksekusi tugas yang ditangguhkan. Dengan kata lain, ini memungkinkan Anda menjalankan eksekusi fungsi atau evaluasi ekspresi setelah waktu tertentu (dalam milidetik). Dalam contoh berikut, kami mencetak pesan ke konsol setelah 2 detik:

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

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

JSR

MDN

105. Untuk apa setInterval () digunakan?

Metode ini digunakan untuk menjalankan tugas secara berkala. Dengan kata lain, ini memungkinkan Anda menjalankan eksekusi fungsi atau evaluasi ekspresi setelah jangka waktu tertentu (dalam milidetik). Dalam contoh berikut, kami mencetak pesan ke konsol setiap 2 detik:

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

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

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

Pada contoh kedua, pesan "Halo!" akan mencetak ke konsol dua kali, setelah itu timer akan dihentikan



JSR

MDN

106. Mengapa JavaScript disebut single threated?

JavaScript adalah bahasa pemrograman utas tunggal atau sinkron. Ini berarti bahwa hanya satu tugas yang dapat dijalankan dalam satu waktu. Jika tugasnya rumit, perlu waktu lama untuk menyelesaikannya, dan selama itu thread utama eksekusi kode akan diblokir. Memblokir aliran, pada gilirannya, berarti tidak ada interaktivitas di halaman tersebut. Browser berhenti merespons tindakan pengguna dan acara lainnya. Untuk mengatasi masalah ini, callback, promise, async / await, pekerja, dan alat lain untuk bekerja dengan kode asinkron digunakan. Dalam JavaScript, tidak seperti, misalnya, Java, Go atau C ++, tidak ada cara untuk membuat utas atau proses tambahan.



JSR

MDN

107. Apakah delegasi acara itu?

Delegasi acara adalah teknik di mana acara didaftarkan pada induk untuk menangani acara yang dibesarkan oleh anak-anak.

Sering digunakan untuk menangani klik tombol dalam wadah pengelompokan atau untuk mengubah bidang entri teks dalam formulir, misalnya:

<form>
    <input type="text" class="first-input">
    <input type="text" class="second-input">
</form>

<div>
    <button class="first-button">click</button>
    <button class="second-button">click</button>
</div>

const form = document.querySelector('form')
const buttons = document.querySelector('div')

form.addEventListener('input', event => {
    console.log(event.target.className)
})

buttons.addEventListener('click', event => {
    console.log(event.target.className)
})

Dalam contoh di atas, alih-alih mendaftarkan penangan pada elemen anak, kami mendaftarkannya pada elemen induk. Memasukkan teks di bidang atau menekan tombol akan menghasilkan keluaran nama kelas dari elemen yang sesuai ke konsol.



JSR

108. Apa itu ECMAScript?

ECMAScript adalah bahasa pemrograman di belakang JavaScript. Ini adalah sejenis pola atau cetak biru yang "dibangun" oleh JavaScript. ECMAScript distandarisasi dalam spesifikasi ECMA-262 oleh organisasi standar Ecma International.



JSR

MDN

109. Sebutkan fitur sintaks JSON

Sintaks JSON memiliki beberapa fitur berikut:

• Data adalah pasangan kunci / nilai
• Kunci dan nilai dibungkus dengan tanda kutip ganda, kecuali nilainya adalah angka ("key": "value")
• Data dipisahkan dengan koma
• Objek dibungkus dengan kurung kurawal
• Array - menjadi persegi

JSR

MDN

110. Apa yang dilakukan JSON.stringify ()?

Saat mengirim data ke server, itu harus memiliki format string khusus. Metode JSON.stringify () digunakan untuk mengonversi objek menjadi string JSON:

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

JSR

MDN

111. Apa yang dilakukan JSON.parse ()?

Saat menerima data dari server, mereka memiliki format string khusus. Metode JSON.parse () digunakan untuk mengonversi data ini menjadi objek JavaScript:

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

JSR

MDN

112. Untuk apa JSON?

Saat bertukar data antara klien dan server, data ini hanya dapat berupa string. Karena JSON adalah teks, itu sempurna untuk ini. Ini juga dapat digunakan sebagai format data oleh bahasa pemrograman apa pun, bersama dengan format lain seperti XML atau Protobuf.



JSR

MDN

113. Apakah PWA (Aplikasi Web Progresif - aplikasi web progresif)?

Singkatnya, PWA adalah situs web yang berperilaku seperti aplikasi asli. Mereka dapat dipasang di ponsel atau komputer, dan, biasanya, mereka bekerja secara offline. Untuk yang terakhir, pekerja layanan dan antarmuka caching digunakan. Keuntungan PWA dibandingkan aplikasi seluler adalah ukuran dan kemudahan pengembangannya. Selain itu, Anda tidak perlu menghabiskan sumber daya untuk membuat dua aplikasi untuk satu situs - web dan seluler. Ini juga mempertahankan pengalaman pengguna yang baik.



MDN

114. Untuk apa clearTimeout () digunakan?

Metode ini digunakan untuk menghentikan timer yang dimulai oleh setTimeout (). Untuk melakukan ini, pengenal pengatur waktu ditulis ke variabel, yang kemudian diteruskan ke clearTimeout () sebagai argumen.

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

Dalam contoh di atas, dua detik kemudian, pesan “Halo!” Ditampilkan di konsol, setelah itu pengatur waktu berhenti. Hal ini dilakukan agar pengumpul sampah dapat menghapus pengatur waktu yang telah berjalan.



JSR

MDN

115. Untuk apa clearInterval () digunakan?

Metode ini digunakan untuk menghentikan timer yang dimulai dengan setInterval (). Untuk melakukan ini, pengenal pengatur waktu ditulis ke variabel, yang kemudian diteruskan ke clearInterval () sebagai argumen.

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

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

Dalam contoh di atas, nilai variabel i dicetak ke konsol setiap detik, yang bertambah 1 (1, 2) setiap kali. Ketika saya menjadi 3, pengatur waktu berhenti.



JSR

MDN

116. Bagaimana cara saya mengalihkan?

Untuk melakukan ini, Anda dapat menggunakan properti lokasi dari objek jendela:

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

MDN

117. Bagaimana cara memeriksa apakah substring ada dalam string?

Setidaknya ada tiga cara untuk melakukan ini.

String.prototype.includes ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.includes(subStr) // true

String.prototype.indexOf ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.indexOf(subStr) !== -1 // true

Ekspresi Reguler

const mainStr = 'hello'
const regex = /hel/
regex.test(mainStr) // true

JSR

MDN - termasuk

MDN - indexOf

MDN - test

118. Bagaimana cara memeriksa kebenaran alamat email?

Ini dapat dilakukan menggunakan HTML dengan menyetel jenis bidang masukan ke nilai email (<input type = "email">). Namun, metode ini dianggap tidak dapat diandalkan. Oleh karena itu, biasanya email divalidasi dengan regular expression. Sebaiknya lakukan ini di sisi server karena JavaScript mungkin dinonaktifkan di klien:

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

Contoh ini menggunakan salah satu ekspresi reguler paling sederhana untuk memvalidasi alamat email. Ekspresi yang lebih dapat diandalkan terlihat seperti ini (RFC 2822): [a-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] + (?:. [A-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] +) * @ (?: [a-z0-9] (?: [a-z0-9 -] * [a-z0- 9]) ?.) + [A-z0-9] (?: [A-z0-9 -] * [a-z0-9])?

119. Bagaimana cara mendapatkan URL saat ini?

Untuk melakukan ini, Anda dapat menggunakan properti lokasi dari objek jendela atau properti URL dari objek dokumen:

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

MDN - lokasi

MDN - document.URL

120. Properti apa yang dimiliki objek lokasi?

Properti objek lokasi dapat digunakan untuk mendapatkan bagian dari URL halaman saat ini:

• href - URL lengkap
• origin - protokol, host dan port (asal, digunakan dalam Common Origin Policy (SOP) dan Resource Sharing (CORS))
• protokol
• host - host dan port
• nama host - host
• Pelabuhan
• pathname - path
• pencarian - string kueri setelah?
• hash - string kueri setelah # (jangkar)
• username - username sebelum domain
• password - password sebelum domain

MDN

121. Bagaimana cara mendapatkan string kueri?

Anda dapat menggunakan konstruktor URL untuk ini:

const url = new URL('https://example.com?foo=1&bar=2')
console.log(url.search) // ?foo=1&bar=2
console.log(url.searchParams.get('foo')) // 1

MDN

122. Bagaimana cara memeriksa apakah suatu properti ada dalam suatu objek?

Setidaknya ada tiga cara untuk melakukan ini.

Di operator

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

HasOwnProperty ()

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

Perbandingan dengan undefined

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

JSR

MDN - untuk ... di

MDN - hasOwnProperty

123. Bagaimana cara mengulang properti enumerasi dari suatu objek?

Untuk melakukannya, Anda bisa menggunakan for ... in loop dengan metode hasOwnProperty () untuk mengecualikan properti yang diwariskan.

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

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

JSR

MDN

124. Bagaimana cara memeriksa bahwa benda tersebut kosong?

Setidaknya ada tiga cara untuk melakukan ini.

Object.entries ()

const obj = {}
console.log(Object.entries(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.entries(obj2).length === 0 && obj2.constructor === Object) // false

Object.keys () metode

const obj = {}
console.log(Object.keys(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.keys(obj2).length === 0 && obj2.constructor === Object) // false

Untuk ... dalam loop dan metode Object.hasOwnProperty ()

const obj = {}
const obj2 = {key: 'value'}

const isEmpty = obj => {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) return false
    }
    return true
}

console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false

JSR - Objek JSR

- Object.keys, nilai, entri

MDN - Object.entries

MDN - Object.keys

MDN - untuk ... di

MDN - Object.hasOwnProperty

125. Apakah objek argumen?

argumen adalah objek seperti larik (pseudo-array) yang berisi argumen yang diteruskan ke fungsi:

function sum () {
    let total = 0
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total

    // 
    let total = 0
    for (const i of arguments) {
        total += i
    }
    return total

    // 
    return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

Perhatikan bahwa fungsi panah tidak memiliki argumen. Alih-alih argumen, disarankan untuk menggunakan operator rest ... (parameter lain), yang berfungsi di fungsi biasa dan panah:

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

sum(1, 2, 3) // 6

JSR

MDN

126. Bagaimana cara membuat huruf besar pada huruf pertama dari string?

Ini bisa dilakukan dengan menggunakan metode charAt (), toUpperCase () dan slice ():

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

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

JSR

MDN - karakter

MDN - toUpperCase

MDN - slice

127. Bagaimana cara mendapatkan tanggal sekarang?

Ini bisa dilakukan dengan menggunakan objek Date atau konstruktor Intl.DateTimeFormat:

console.log(new Date().toLocaleDateString()) // 02.09.2020

console.log(new Intl.DateTimeFormat(
    'ru-Ru',
    {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    }
).format(new Date())) // , 2  2020 .

JSR - Tanggal

JSR =

MDN Internasional - Tanggal

MDN - Intl.DateTimeFormat

128. Bagaimana membandingkan dua objek Tanggal?

Untuk melakukan ini, Anda tidak boleh membandingkan objek itu sendiri, tetapi, misalnya, nilai yang dikembalikan oleh metode getTime ():

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

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

JSR

MDN

129. Bagaimana cara memeriksa bahwa sebuah garis dimulai pada garis yang berbeda?

Anda bisa menggunakan metode startWith () bawaan untuk melakukan ini:

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

Menurut CanIUse, hampir 94% browser MDN



JSR mendukung metode ini

130. Bagaimana cara menghilangkan masalah dalam satu baris?

Untuk melakukan ini, Anda dapat menggunakan metode bawaan trimStart () (awal baris), trimEnd () (akhir baris), dan trim () (awal dan akhir baris):

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

trim tidak berfungsi untuk spasi antar kata. Dalam kasus ini, Anda dapat menggunakan metode replace () dan ekspresi reguler:

console.log('hello   world'.replace(/s+/, ' ')) // hello world
//    
console.log('hello   world'.replace(/s{2,}/, ' ')) // hello world
console.log('key   value'.replace(/s{2,}/, ' -> ')) // key -> value

Menurut CanIUse , trimStart () dan trimEnd () didukung oleh 93% browser.



MDN

131. Bagaimana cara menambahkan properti baru ke objek?

Ada dua cara untuk melakukannya. Mari kita asumsikan kita memiliki objek seperti ini:

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

Kita dapat menambahkan properti baru ke dalamnya menggunakan notasi titik atau tanda kurung:

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

Salah satu perbedaan antara metode ini adalah saat menggunakan notasi tanda kurung, kunci yang ditambahkan bisa berupa angka:

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

JSR

MDN

132. Apakah ekspresinya! - operator khusus?

Tidak. Ini adalah kombinasi dari dua operator: operator! (logika tidak) dan operator - (penurunan). Jika Anda menggunakan ekspresi yang ditentukan dengan nilai apa pun, pertama-tama nilai ini akan dikurangi satu, lalu dikonversi ke tipe boolean dan dibalik:

const fun = val => !--val
const a = 1
const b = 2
console.log(fun(a)) // !0 -> not false -> true
console.log(fun(b)) // !1 -> not true -> false

JSR

MDN - Logis BUKAN

MDN - Penurunan

133. Bagaimana cara menetapkan nilai default ke variabel?

Untuk melakukan ini, Anda dapat menggunakan || (boolean atau):

const a = b || 'default'

Dalam hal ini, variabel a akan diberi nilai default jika nilai variabel b salah (false, undefined, null, NaN, 0, '').

Jika kita berbicara tentang nilai standar dari parameter fungsi, maka mereka dapat diberikan sebagai berikut:

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

Selain itu, parameter selanjutnya dapat menggunakan nilai dari yang sebelumnya sebagai nilai standar:

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

JSR

MDN

134. Bagaimana cara membuat string multiline?

Sebelumnya, itu dilakukan seperti ini (karakter kontrol penggabungan dan pemutusan baris):

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

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

Sekarang mereka melakukannya seperti ini (template literal):

const str =
    \` 
     
    !\`

JSR

MDN

135. Bisakah kita menambahkan properti ke fungsi?

Karena fungsi adalah objek juga, kita dapat dengan mudah menambahkan properti padanya. Nilai properti fungsi dapat berupa fungsi lain:

function someFun () {}
someFun.somePropName = 'somePropValue'

console.log(someFun.somePropName) // somePropValue
//  
console.log(someFun.name) // someFun

const sum = (x, y) => x + y
console.log(sum(1, 2)) // 3

sum.curry = x => y => x + y
console.log(sum.curry(1)(2)) // 3

JSR

MDN

136. Bagaimana cara mengetahui berapa banyak argumen yang diharapkan untuk diterima suatu fungsi?

Properti panjang dapat digunakan untuk ini:

const sum = (a, b, c) => +a + +b + +c
console.log(sum(1, '1', true)) // 3
console.log(sum(0, '', [])) // 0

console.log(sum.length) // 3

MDN

137. Apa itu polyfill?

Polyfills digunakan untuk membuat JavaScript modern berfungsi di peramban lama. Ini dilakukan dengan mengimplementasikan fitur baru dari bahasa menggunakan sintaks lama. Proses mengubah kode baru menjadi kode lama disebut transpilasi. Transpiler paling populer untuk kode JavaScript adalah Babel.

Misalnya, salah satu fitur JavaScript terbaru adalah metode Promise.allSettled (), yang, tidak seperti Promise.all (), tidak berhenti ketika janji yang diteruskan ditolak.

Namun, saat ini, dukungan browsernya sesuai dengan data CanIUse adalah 80%, jadi diperlukan polyfill:

const promise1 = Promise.resolve('promise1')
const promise2 = Promise.reject('promise2')
const promise3 = Promise.resolve('promise3')

//     Promise.allSettled()
Promise
    .allSettled([promise1, promise2, promise3])
    .then(console.log)
/*
    [
        {status: "fulfilled", value: "promise1"},
        {status: "rejected", reason: "promise2"},
        {status: "fulfilled", value: "promise3"},
    ]
*/

//    
//  Promise.all() = 94%
const allSettled = promises => {
    const wrappedPromises = promises
        .map(p => Promise.resolve(p)
        .then(
            val => ({
                status: 'fulfilled',
                value: val
            }),
            err => ({
                status: 'rejected',
                reason: err
            })))
    return Promise.all(wrappedPromises)
}
allSettled([promise1,promise2,promise3])
    .then(console.log)

JSR

MDN

138. Untuk apa pernyataan lanjutkan dan hentikan?

Pernyataan break digunakan untuk keluar dari loop. Setelah menghentikan iterasi, kode melanjutkan:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible'
}

for (key in obj) {
    if (obj[key] === 'impossible') break

    console.log(obj[key]) // Everything is
}

console.log('possible') // possible

Pernyataan lanjutkan digunakan untuk melewati iterasi:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible',
    4: 'possible'
}

for (key in obj) {
    if (obj[key] === 'impossible') continue

    console.log(obj[key]) // Everything is possible
}

MDN -

hentikan MDN - lanjutkan

139. Apakah label itu?

Label memungkinkan Anda memberi nama loop dan blok kode. Mereka dapat digunakan, misalnya, untuk keluar dari loop atau sebagai syarat untuk mengeksekusi kode:

loop1:
for (let i = 0; i < 3; i++) {
    loop2:
    for (let j = 0; j < 3; j++) {
        if (i === j) continue loop1

        console.log(\`i = ${i}, j = ${j}\`)
    }
}

/*
    i = 1, j = 0
    i = 2, j = 0
    i = 2, j = 1
*/

Menggunakan label dianggap praktik yang buruk.



MDN

140. Apa keuntungan mendeklarasikan variabel di awal kode?

Direkomendasikan untuk mendeklarasikan variabel di awal setiap skrip atau fungsi. Ini memberikan manfaat berikut:

• Menjaga kode tetap bersih
• Semua variabel ada di satu tempat
• Menghindari pembuatan variabel global yang tidak disengaja
• Mencegah penggantian variabel yang tidak diinginkan

JSR

MDN

141. Apa keuntungan menginisialisasi variabel ketika dideklarasikan?

Direkomendasikan untuk menginisialisasi semua variabel pada saat deklarasi. Ini memberikan manfaat berikut:

• Menjaga kode tetap bersih
• Variabel dan nilainya berada di satu tempat
• Mencegah variabel yang tidak diinisialisasi agar tidak ditetapkan

JSR

MDN

142. Apa rekomendasi utama untuk membuat sebuah objek

Untuk membuat objek, sebagai ganti konstruktor objek baru Object (), disarankan untuk menggunakan notasi tanda kurung {}. Selain itu, bergantung pada jenis nilainya, disarankan untuk menggunakan yang berikut ini:

• string seperti '' bukan baru String ()
• angka, misalnya 0, bukan angka baru ()
• nilai boolean seperti false, bukan Boolean baru ()
• [] sebagai ganti Array baru ()
• // alih-alih RegExp baru ()
• function () {} alih-alih baru Function ()

JSR

MDN

143. Bagaimana cara mendefinisikan array dalam format JSON?

Array JSON adalah larik objek JSON, contoh:

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

JSR

MDN

144. Bagaimana menerapkan fungsi yang mengembalikan bilangan bulat acak dalam kisaran tertentu?

Fungsi ini dapat diimplementasikan menggunakan metode Math.random () dan Math.floor () dari objek Math:

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

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. Apakah pohon bergetar?

Tree shaking adalah penghapusan kode modul yang tidak digunakan. Modul semacam itu tidak termasuk dalam perakitan akhir (bundel). Agar pembuat modul (bundler) menentukan modul mana yang sedang digunakan dan mana yang tidak, struktur program harus didasarkan pada modul ES6. Teknik ini dipopulerkan oleh bundler Rollup.



MDN

146. Untuk apa goyangan pohon digunakan?

Pohon gemetar dapat secara signifikan mengurangi ukuran rakitan (bundel) dengan menghapus kode modul yang tidak digunakan darinya. Semakin kecil ukuran perakitan, semakin baik kinerja aplikasinya. Pengocokan pohon diimplementasikan dalam pembuat modul seperti Rollup dan Webpack.



MDN

147. Apa itu ekspresi reguler?

Ekspresi reguler adalah urutan karakter yang membentuk pola pencarian. Pola ini dapat digunakan untuk mencari data dalam teks, seperti substring dalam string. Ekspresi reguler banyak digunakan oleh banyak bahasa pemrograman untuk operasi pencarian dan penggantian teks. Pola regex umum terlihat seperti ini:

//

Contoh:

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

Anda juga dapat menggunakan konstruktor RegExp untuk membuat ekspresi reguler:

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

JSR

MDN

148. Metode apa yang digunakan dalam ekspresi reguler?

Ada dua metode utama yang digunakan dalam ekspresi reguler: exec () dan test ().

Metode exec () mencari kecocokan ekspresi reguler dalam string yang diteruskan sebagai argumen. Perilaku metode ini bergantung pada apakah ekspresi reguler memiliki tanda g. Jika tidak, kecocokan pertama dikembalikan. Jika bendera g ada, maka:

• Panggilan exec () mengembalikan kecocokan pertama dan menyimpan posisi setelahnya di properti lastIndex.
• Panggilan serupa berikutnya memulai pencarian di posisi lastIndex, mengembalikan kecocokan berikutnya, dan mengingat posisi setelahnya di lastIndex.
• Jika tidak ada lagi kecocokan, exec () mengembalikan null dan lastIndex disetel ke 0.

const str = 'Java  JavaScript -   '
const regex = /Java/g

let result
while (result = regex.exec(str)) {
    console.log(
        \` ${result[0]}   ${result.index}\`
    )
}
/*
     Java   0
     Java   7
*/

Metode test () mengembalikan nilai boolean bergantung pada apakah kecocokan ditemukan dalam string:

const str = '  JavaScript'

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

JSR

MDN

149. Bendera apa yang digunakan dalam ekspresi reguler?

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

JSR

MDN

150. Karakter khusus apa yang digunakan dalam ekspresi reguler?

Karakter khusus yang digunakan dalam ekspresi reguler dapat dibagi menjadi beberapa grup.

Kelas karakter dasar:



Set karakter:



Perbatasan:



Pengelompokan:



Pengukur:



JSR

MDN

151. Bagaimana cara mengubah gaya elemen HTML?

Ini dapat dilakukan baik dengan menggunakan properti style atau dengan menetapkan kelas yang sesuai ke elemen:

document
    .querySelector(selector)
    .style.property = value
document
    .querySelector('title')
    .fontSize = '2rem'

document.querySelector(selector)
    .className = 'class-name'
document.querySelector(selector)
    .classList.add('class-name')
document.querySelector('button')
    .classList.add('active')

JSR

MDN - gaya

MDN - className

MDN - classList

152. Apa itu debugger?

Ekspresi debugger menyediakan akses ke fungsionalitas debugging yang tersedia di lingkungan tertentu, misalnya, menyetel breakpoints (breakpoints, breakpoints). Jika fungsionalitas debugging tidak tersedia saat runtime, ekspresi ini tidak akan berpengaruh:

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

JSR

MDN

153. Untuk apa breakpoint debugger digunakan?

Checkpoint digunakan untuk menghentikan sementara pelaksanaan suatu fungsi atau kode lain di lokasi tertentu untuk mengetahui mengapa program tidak bekerja dengan baik. Setelah dihentikan, fungsinya bisa dilanjutkan.



JSR

MDN

154. Dapatkah kata-kata khusus digunakan sebagai pengenal?

Tidak, Anda tidak dapat menggunakan kata yang dicadangkan sebagai nama untuk variabel, label, fungsi, atau objek:

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

155. Bagaimana cara menentukan lebar dan tinggi gambar?

Ini dapat dilakukan dengan berbagai cara. Ini salah satunya:

const getImgSize = src => {
    const img = new Image()
    img.src = src
    img.addEventListener('load', () => console.log(\`${img.width} x ${img.height}\`)) // 276 x 110
    document.body.append(img)
}
getImgSize('http://www.google.com/ intl/en_ALL/images/logo.gif')

MDN

156. Bagaimana cara mengirim permintaan HTTP sinkron?

Untuk melakukan ini, Anda bisa menggunakan objek XMLHttpRequest dengan meneruskannya ke metode open () dengan argumen opsional ketiga dengan nilai false:

const getUsers = url => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.send()
    console.table(xhr.response)

    const response = JSON.parse(xhr.response)
    const template = \`
        <table>
            ${response.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body
        .insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

157. Bagaimana cara membuat permintaan HTTP asynchronous?

Metode fetch () bisa digunakan untuk ini:

const getUsers = async url => {
    const response = await fetch(url)
    const data = await response.json()
    console.table(data)

    const template = \`
        <table>
            ${data.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body.insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

158. Bagaimana cara mendapatkan tanggal dalam format yang diminta?

Metode toLocaleString () bisa digunakan untuk ini:

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

MDN

159. Bagaimana cara mendapatkan ukuran halaman yang maksimal?

Untuk melakukan ini, Anda perlu menemukan nilai maksimum properti scrollWidth, offsetWidth, clientWidth dan scrollHeight, offsetHeight, clientHeight dari objek document.body dan document.documentElement:

const pageWidth = Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
)
const pageHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
)
const pageSize = {
    width: pageWidth,
    heigth: pageHeight
}
console.log(pageSize)

const pageCenter = {
    centerX: pageWidth / 2,
    centerY: pageHeight / 2
}
console.log(pageCenter)

JSR

160. Apakah yang dimaksud dengan operator bersyarat atau terner?

Operator terner adalah cara singkat untuk menulis blok if ... else:

let accesAllowed
const age = propmt('  ?')

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

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

JSR

MDN

161. Dapatkah Anda menggunakan rantai operator terner?

Ya, dalam hal ini operator terner adalah alternatif dari blok if ... else if ... else:

let accessAllowed
const getAge = () => prompt('  ?')

//     -    
// if...else if...else
const checkAge = (age = getAge()) => {
    console.log(age)
    if (isNaN(age)) {
        Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
    } else if (age === null || age === '') {
        Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
    } else if (age < 0) {
        Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
    } else if (age > 100) {
        Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
    } else if (age < 18) {
        Promise.resolve(alert(',   ')).then(accessAllowed = false)
    } else {
        Promise.resolve(alert(' !')).then(accessAllowed = true)
    }
    console.log(accessAllowed)
}

//  
const checkAge = (age = getAge()) => {
    isNaN(age)
        ? Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
        : (age === null || age === '')
          ? Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
          : (age < 0)
            ? Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
            : (age > 100)
            ? Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
            : (age < 18)
                ? Promise.resolve(alert(',   ')).then(accessAllowed = false)
                : Promise.resolve(alert(' !')).then(accessAllowed = true)
    console.log(accessAllowed)
}

JSR

MDN

162. Bagaimana cara menjalankan kode setelah halaman terisi penuh?

Hal ini dapat dilakukan dengan beberapa cara.

Tempatkan tag skrip sebelum tag badan penutup atau tambahkan atribut defer padanya:

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

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

Jika skrip Anda adalah modul, alih-alih atribut defer, Anda perlu menentukan atribut type dengan modul nilai:

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

Tambahkan atribut onload ke tag body:

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

Tambahkan kode sebagai penangan untuk acara pemuatan objek jendela:

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

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

Lakukan hal yang sama untuk document.body:

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

163. Apa perbedaan antara __proto__ dan prototipe?

Properti __proto__ ([[Prototipe]] properti tersembunyi internal) adalah objek dari mana sebuah instance mewarisi bidang dan metode. Dan prototipe adalah sebuah objek yang digunakan untuk membuat __proto__ ketika dibuat menggunakan kata kunci baru:

class Person {
    constructor(firstName, secondName) {
        this.firstName = firstName
        this.secondName = secondName
    }
    getFullName() {
        return \`${this.firstName} ${this.secondName}\`
    }

}

const user = new Person('', '')
console.log(user.getFullName()) //  
console.log(user.__proto__.getFullName === Person.prototype.getFullName) // true
console.log(Person.prototype) // {constructor: ƒ, getFullName: ƒ}
console.log(user.prototype === undefined) // true

JSR

MDN

164. Berikan contoh penggunaan wajib titik koma

Salah satu penggunaan wajib titik koma adalah penggunaan IIFE (Immediately Invoked Fuction Expression):

Misalnya kode berikut ini:

try {
    const x = ''

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

Akan diartikan seperti ini:

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

Oleh karena itu, di blok try, kita mendapatkan TypeError: "To be" bukan fungsi, kontrol dilewatkan ke blok catch, dan "Not to be" adalah keluaran ke konsol.

Agar kode berfungsi seperti yang diharapkan, akan terlihat seperti ini:

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

Selain itu, jangan lupa tentang kasus penempatan titik koma otomatis.

165. Untuk apa metode freeze () digunakan?

Metode ini, seperti namanya, berfungsi untuk "membekukan" sebuah objek. Objek yang dibekukan tidak dapat diubah (tidak dapat diubah). Ini berarti Anda tidak dapat menambahkan properti baru ke objek seperti itu, menghapus atau mengubah yang sudah ada. Juga metode ini menetapkan configurable: false dan writable: false untuk properti yang sudah ada. Metode ini mengembalikan objek yang dibekukan.

'use strict'
const obj = {
    mission: 'possible'
}

Object.freeze(obj)
obj.mission = 'impossible' // TypeError: Cannot assign to read only property 'mission' of object '#<Object>'

delete obj.mission // TypeError: Cannot delete property 'mission' of #<Object>

Perhatikan bahwa dalam mode non-ketat, tidak ada pengecualian yang dilempar, kode tidak dieksekusi.



JSR

MDN

166. Mengapa kita membutuhkan metode freeze ()?

Paradigma pemrograman berorientasi objek mengatakan bahwa antarmuka yang berisi sejumlah elemen harus tidak dapat diubah, yaitu. tidak mungkin untuk memperluas, memodifikasi atau menggunakan elemen di luar konteks saat ini. Metode ini adalah alias untuk kata kunci terakhir dalam beberapa bahasa pemrograman lain.



JSR

MDN

167. Bagaimana cara menggunakan huruf besar pada huruf pertama dari setiap kata dalam satu baris?

Salah satu cara untuk melakukannya adalah sebagai berikut:

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

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

168. Bagaimana saya tahu jika JavaScript dinonaktifkan pada halaman?

Anda dapat menggunakan tag noscript untuk ini. Kode di dalam tag ini hanya akan dijalankan jika JavaScript dinonaktifkan di halaman:

    console.log('JavaScript ')

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

Untuk menonaktifkan JavaScript di Chrome, buka pengaturan -> bagian "Privasi dan keamanan" -> Pengaturan situs -> bagian "Konten" -> JavaScript.



MDN

169. Operator apa yang didukung oleh JavaScript?

Operator terbiasa bekerja dengan nilai atau operan. JavaScript mendukung operator berikut:

• Aritmatika: + (penjumlahan, casting ke angka, rangkaian), - (pengurangan), * (perkalian), / (pembagian),% (modulo, dengan sisa), ++ (kenaikan), - (penurunan), * * (eksponen)
• operator perbandingan: == (abstrak, kesetaraan longgar) ,! = (ketidaksetaraan abstrak), === (kesetaraan ketat, pemeriksaan identitas) ,! == (ketidaksetaraan ketat),>,> =, <, <=
• logis: && (dan), || (atau),! (tidak) (!!! (negasi ganda) bukan operator terpisah)
• operator penugasan: =, + =, - =, * =, / =,% =
• terner :? ...: (jika ... lain)
• typeof operator: mendefinisikan jenis operan
• bitwise: & (dan), | (atau), ^ (eksklusif atau), ~ (tidak), << (shift kiri), >> (shift kanan), >>> (shift kanan dengan padding nol)
• baru :? .. ​​(rantai opsional), ?? (penggabungan nol)

//  
const obj = {
    foo: {
        baz: {
            qux: 'bar'
        }
    }
}

// 
console.log(obj.foo.bar.baz.qux) // TypeError: Cannot read property 'baz' of undefined

if (
    obj.foo !== undefined &&
    obj.foo.bar !== undefined &&
    obj.foo.bar.baz !== undefined
) {
    console.log(obj.foo.bar.baz.qux) //   
}

// 
console.log(obj?.foo?.bar?.baz?.qux) // undefined

//   null
console.log(
    0 || 'default null', // 'default null'
    0 ?? 'default null', // 0
    '' || 'default string', // default string
    '' ?? 'default string', // ''
)

JSR - Operator JSR - Operator

Logis

JSR - Operator Pembanding JSR - Operator

JSR Bersyarat

-

Operator MDN Bitwise - Operator Urutan Opsional

MDN - Operator Penggabungan Null

170. Untuk apa operator lainnya ... (parameter lain) digunakan?

Operator rest adalah alternatif dari objek argumen dan mengembalikan larik argumen yang diteruskan ke fungsi:

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

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

Harap dicatat bahwa operator lainnya harus diberikan sebagai argumen terakhir:

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

JSR

MDN

171. Untuk apa operator menyebar?

Operator penyebaran digunakan untuk memperluas (membongkar, memperluas) entitas yang dapat diulang (array, string). Membongkar berarti mengonversi, misalnya, larik angka menjadi sekumpulan nilai sederhana:

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

const nums = [1, 2, 3]

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

JSR

MDN

172. Bagaimana menentukan apakah suatu benda membeku?

Untuk menentukan apakah suatu objek dibekukan, mis. apakah tidak dapat diubah (tidak dapat diubah) metode isFreeze () digunakan:

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

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

MDN

173. Bagaimana menentukan persamaan nilai menggunakan suatu benda?

Metode is () dapat digunakan untuk ini:

Object.is('  ', '  ') // true
Object.is(0.1 + 0.2, 0.3) // false
Object.is(window, window) // true
Object.is(+0, -0) // false

const objA = {}
const objB = objA
Object.is(objA, objB) // true
Object.is({}, {}) // false

Nilainya sama jika:

• keduanya tidak ditentukan
• keduanya nol
• keduanya benar atau salah
• keduanya adalah string dengan panjang yang sama dengan karakter yang sama
• keduanya mengacu pada objek yang sama
• keduanya adalah angka, +0, -0 atau NaN

JSR

MDN

174. Bagaimana cara membuat salinan sebuah objek?

Salah satu cara paling andal untuk melakukannya adalah dengan menggunakan metode assign ():

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

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

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

Selain itu, metode ini memungkinkan Anda untuk menggabungkan objek, tidak termasuk duplikat:

const objA = {a: 1, b: 2}
const objB = {b: 2, c: 3}

const objC = Object.assign(objA, objB)
console.log(objC) {a: 1, b: 2, c: 3}

Anda dapat menggunakan pengikatan JSON.parse-JSON.stringify untuk menyalin objek sederhana:

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

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

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

JSR

MDN

175. Apa itu proxy?

Objek Proxy "membungkus" objek lain dan dapat mencegat (dan, jika diinginkan, memproses secara independen) berbagai tindakan dengannya, misalnya, membaca / menulis properti dan lainnya.

const handler = {
    get: (obj, prop) => prop in obj
        ? obj[prop]
        : 0
}

// new Proxy(, )
const p = new Proxy({}, handler)

p.a = 1
p.b = true

console.log(p.a, p.b) // 1 true
console.log( 'c' in p, p.c) // false 0

176. Untuk apa metode seal () digunakan?

Metode ini "menyegel" objek, mencegah penambahan / penghapusan properti. Ini juga menyetel konfigurasi: false untuk semua properti yang ada. Namun, nilai properti dari objek semacam itu dapat diubah. Metode isSealed () digunakan untuk memeriksa apakah suatu objek disegel.

'use strict'
const obj = {
    prop: '    JavaScript!'
}

Object.seal(obj)

obj.prop = ' ,   '
console.log(Object.isSealed(obj)) // true
delete obj.prop // TypeError: Cannot delete property 'prop' of #<Object>
console.log(obj.prop) //  ,   

Perhatikan bahwa dalam mode lax, upaya untuk menghapus properti pada objek yang disegel akan gagal secara diam-diam.



JSR

MDN

177. Apa perbedaan antara metode freeze () dan seal ()?

Metode Object.seal (), tidak seperti metode Object.freeze (), memungkinkan Anda untuk mengubah properti objek yang ada.

'use strict'
const objA = {
    prop: ''
}
Object.freeze(objA)
objA.prop = ' ' // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

const objB = {
    prop: ' '
}
Object.seal(objB)
objB.prop = ''
console.log(objB.prop) // 

178. Bagaimana cara mendapatkan pasangan kunci / nilai yang disebutkan dari suatu objek?

Metode Object.entries () mengembalikan larik pasangan kunci / nilai objek yang disebutkan sebagai subarray dalam urutan yang sama seperti for ... in loop:

const obj = {
    x: 1,
    y: 2
}

console.log(Object.entries(obj)) // [["x", 1], ["y", 2]]

for (let [key, value] of Object.entries(obj)) {
    console.log(\`${key}: ${value}\`) // x: 1 y: 2
}

JSR

MDN

179. Apa perbedaan utama antara metode Object.keys (), Object.values ​​() dan Object.entries ()?

Metode Object.keys () mengembalikan kunci suatu objek, metode Object.values ​​() mengembalikan nilai propertinya, dan Object.entries () mengembalikan larik pasangan kunci / nilai:

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

console.log(Object.keys(user)) // ["name", "age"]
console.log(Object.values(user)) // ["", 30]
console.log(Object.entries(user)) // [["name", ""], ["age", 30]]

JSR

MDN - Object.keys ()

MDN - Object.values ​​()

MDN - Object.entries ()

180. Bagaimana cara membuat objek dengan prototipe tertentu tanpa menggunakan fungsi dan kelas konstruktor?

Metode Object.create () dapat digunakan untuk ini:

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

const secondUser = Object.create(firstUser)

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

JSR

MDN

181. Untuk apa WeakSet digunakan?

WeakSet digunakan untuk menyimpan kumpulan objek referensi lemah. Dengan kata lain, ini berfungsi sebagai penyimpanan tambahan untuk objek yang digunakan oleh kode lain. Objek seperti itu secara otomatis dihapus oleh pengumpul sampah ketika menjadi tidak terjangkau (tidak digunakan), mis. ketika hanya kunci yang tersisa di WeakSet.

const ws = new WeakSet()
let user = {}

ws.add(user)
console.log(ws.has(user)) // true

user = null
console.log(ws.has(user)) // false,    

JSR

MDN

182. Apa perbedaan antara Set dan WeakSet?

Perbedaan utama mereka adalah bahwa objek yang disimpan di WeakSet direferensikan dengan lemah, yaitu. dihapus secara otomatis segera setelah tidak terjangkau. Perbedaan lainnya adalah sebagai berikut:

• Set dapat menyimpan nilai apa pun, dan WeakSet hanya dapat menyimpan objek.
• WeakSet tidak memiliki properti ukuran
• WeakSet tidak memiliki metode clear (), keys (), values ​​(), forEach ()
• WeakSet bukanlah entitas yang dapat berulang

JSR

MDN

183. Metode apa yang tersedia di WeakSet?

WeakSet memiliki metode berikut:

• add (): menambahkan objek ke koleksi
• delete (): menghapus objek dari koleksi
• has (): menentukan apakah suatu objek ada dalam koleksi
• length (): mengembalikan panjang koleksi

const ws = new WeakSet()
const objA = {}
const objB = {}

ws.add(objA)
ws.add(objB)
console.log(ws.has(objA)) // true
console.log(ws.lenghth()) // 2
ws.delete(objA)
console.log(ws.has(objA)) // false

JSR

MDN

184. Untuk apa WeakMap digunakan?

WeakMap digunakan untuk menyimpan pasangan kunci / nilai di mana kunci direferensikan dengan lemah. Dengan kata lain, ini berfungsi sebagai repositori tambahan untuk kunci yang digunakan oleh kode lain. Kunci tersebut secara otomatis dihapus oleh pengumpul sampah ketika menjadi tidak dapat dijangkau (tidak digunakan), mis. saat hanya kunci yang tersisa di WeakMap.

const wm = new WeakMap()
let user = {}
wm.set(user, 'user')
console.log(wm.has(user)) // true
user = null
console.log(wm.has(user)) // false,    

JSR

MDN

185. Apa perbedaan antara Map dan WeakMap?

Perbedaan utamanya adalah kunci yang disimpan di WeakMap memiliki referensi yang lemah, yaitu. dihapus secara otomatis segera setelah tidak terjangkau. Perbedaan lainnya adalah sebagai berikut:

• Nilai apa pun dapat digunakan sebagai kunci di Peta, dan hanya objek yang dapat digunakan di WeakMap
• WeakMap tidak memiliki properti ukuran
• WeakMap tidak memiliki metode clear (), keys (), values ​​(), entries (), forEach ()
• WeakMap bukanlah entitas yang dapat berulang

JSR

MDN

186. Metode apa yang tersedia di WeakMap?

WeakMap memiliki metode berikut:

• set (): menambahkan pasangan kunci / nilai ke objek
• delete (): menghapus nilai dengan kunci
• has (): menentukan apakah suatu nilai diberikan oleh kunci
• get (): mengembalikan nilai dengan kunci

const wm = new WeakMap()
const firstUser = {}
const secondUser = {}

wm.set(firstUser, '')
wm.set(secondUser, '')
console.log(wm.has(firstUser)) // true
console.log(wm.get(firstUser)) // 
wm.delete(secondUser)
console.log(wm.has(secondUser)) // false

JSR

MDN

187. Bagaimana cara menyandikan URL?

Anda dapat menggunakan metode encodeURI () untuk ini. Metode ini mengonversi semua karakter khusus kecuali /?: @ = + $ #

const url = 'https://ru.wikipedia.org/wiki/,__'
const encoded = encodeURI(url)
console.log(encoded) // https://ru.wikipedia.org/wiki/%D0%9B%D0...

JSR

MDN

188. Bagaimana cara memecahkan kode URL?

Anda dapat menggunakan metode decodeURI () untuk ini:

const url = 'https://ru.wikipedia.org/wiki/%D0%9B%D0...'
const decoded = decodeURI(url)
console.log(decoded) // https://ru.wikipedia.org/wiki/,__

JSR

MDN

189. Bagaimana cara mencetak konten halaman?

Anda dapat menggunakan metode global print () untuk ini. Metode ini membuka kotak dialog khusus dengan pengaturan cetak:

<button></button>

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

MDN

190. Apakah fungsi anonim?

Fungsi anonim adalah fungsi tanpa nama. Fungsi seperti itu sering kali ditetapkan ke variabel dan juga digunakan sebagai callback:

const sayHi = function () {
    console.log('')
}
sayHi() // 
// 
const sayBye = () => console.log('')
sayBye() // 

window.addEventListener('click', function () {
    console.log('  ,   ')
})
// 
window.addEventListener('contextmenu', e => {
    e.preventDefault()
    console.log('  -   ')
})

JSR

MDN

191. Apa prioritas menggunakan variabel lokal dan global?

Variabel lokal lebih diutamakan daripada variabel global dengan nama yang sama:

let question = ' '

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

JSR

MDN

192. Apakah pengakses itu?

Aksesor atau properti yang dihitung adalah pengambil dan penyetel. Getter digunakan untuk mendapatkan nilai properti objek, dan penyetel digunakan untuk menyetelnya:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    get access () {
        return this.#access
    }

    set access (bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.access) // false
user.access = true
console.log(user.access) // true

Getter dan setter adalah properti, dan metode adalah fungsi:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    getAccess () {
        return this.#access
    }

    setAccess(bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.getAccess()) // false
user.setAccess(true)
console.log(user.getAccess()) // true

JSR

193. Bagaimana mendefinisikan properti dalam konstruktor objek?

Metode Object.defineProperty () bisa digunakan untuk ini. Metode ini memungkinkan Anda untuk menambahkan properti baru ke objek dan memodifikasi yang sudah ada, serta mengubah pengaturan untuk mengakses objek:

'use strict'
const obj = {}

Object.defineProperty(obj, 'prop', {
    value: 1,
    writable: false
})

console.log(obj.prop) // 1
obj.prop = 2 // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

Dalam mode lax, upaya untuk mengubah properti read-only akan gagal secara diam-diam.



JSR

MDN

194. Apa sajakah fitur getter dan setter?

Fitur utama getter dan setter adalah sebagai berikut:

• Mereka memiliki sintaks yang lebih sederhana dibandingkan dengan metode.
• Digunakan untuk mendefinisikan properti yang dihitung - pengakses
• Mengaktifkan hubungan yang sama antara properti dan metode
• Dapat memberikan kualitas data yang lebih baik
• Memungkinkan Anda melakukan tugas di belakang layar dalam hal enkapsulasi

JSR

195. Bisakah getter dan setter ditambahkan ke objek menggunakan metode Object.defineProperty ()?

Cukup:

const obj = {counter: 0}

Object.defineProperty(obj, 'increment', {
    get() {return ++this.counter}
})
Object.defineProperty(obj, 'decrement', {
    get() {return --this.counter}
})

Object.defineProperty(obj, 'sum', {
    set(val) {return this.counter += val}
})
Object.defineProperty(obj, 'sub', {
    set(val) {return this.counter -= val}
})

obj.sum = 10
obj.sub = 5
console.log(obj) // {counter: 5}
console.log(obj.increment) // 6
console.log(obj.decrement) // 5

JSR

MDN

196. Untuk apa switch ... case digunakan?

switch ... case adalah alternatif dari if ... else dan merupakan cara yang lebih visual untuk mengeksekusi kode bergantung pada kondisi yang diteruskan:

const calc = (x, y, operator) => {
    let result

    try {
        switch (operator) {
            case '+':
                result = x + y
                break
            case '-':
                result = x - y
                break
            case '*':
                result = x * y
                break
            case '/':
                result = x / y
                break
            default:
                throw new Error(' ')
        }

        if (isNaN(result)) {
            throw new Error('   ')
        }

        console.log(result)
        return result
    } catch (e) {
        console.error(e.message)
    }
}

calc(1, 2, '+') // 3
calc(3, 4, '*') // 12
calc('a', 1, '-') //    
calc(5, 6, 'x') //  

JSR

MDN

197. Sebutkan aturan untuk menggunakan switch ... case

Saat menggunakan sakelar ... konstruksi casing, Anda harus mematuhi aturan berikut:

• kondisinya bisa berupa angka atau string
• nilai duplikat tidak diperbolehkan
• pernyataan default adalah opsional. Jika tidak ada kasus yang ditemukan, blok default dijalankan
• break digunakan untuk menghentikan loop
• break juga opsional, tetapi tanpa itu, eksekusi loop akan terus berlanjut

JSR

MDN

198. Sebutkan tipe data primitif.

Jenis data primitif ("primitif") di JavaScript adalah nilai berikut:

• number : , ±2⁵³
• bigint
• string . ,
• boolean true/false
• null – , null
• undefined – , undefined
• symbol

MDN

Habr — JavaScript?

Habr — JavaScript ?

JavaScript ?

Medium — Advanced JavaScript ES6 — Temporal Dead Zone, Default Parameters And Let vs Var — Deep dive!

JavaScript:

̆ JavaScript

Medium — JavaScript.

Habr — JavaScript

Medium — Understanding Prototypes in JavaScript

Medium — apply(), call() bind(), JavaScript

JavaScript:

Medium — JavaScript Classes: An In-Depth look (Part 1)

Medium — JavaScript slice(), splice() split()

JavaScript

JavaScript- .map(), .filter() .reduce()

reduce() JavaScript

̆ ̆ ECMAScript 2019, for-of

ES2020,

DigitalOcean — map set JavaScript

Medium — JavaScript

Medium — What is Memoization in Javascript?

Redd — Debounce vs Throttle: Definitive Visual Guide

JavaScript

Habr — 5 JSON.stringify()

Habr — () «» JavaScript

Habr — JavaScript- : . 1

Habr — -

GoogleDevelopers — Service Workers: an Introduction

Habr —

WebDevBlog — IndexedDB

GoogleDevelopers — Working with IndexedDB

Habr — Web Storage API:

Habr — -

Medium — A Simple Introduction to Web Workers in JavaScript

Habr — JavaScript,

Habr — Async/Await

Habr — CORS: