Click ⭐if you like the project. Pull Requests are highly appreciated. Follow me @azmu0520 for technical updates.
Go to Coding Exercise for coding specific questions
You can download the PDF and Epub version of this repository from the latest run on the actions tab.
- Take this JavaScript Projects course to go from a JavaScript beginner to confidently building your own projects
- Take this coding interview bootcamp if you’re serious about getting hired and don’t have a CS degree
- Take this Advanced JavaScript Course to learn advanced JS concepts and become a top JS developer
-
Quyidagi kabi javascriptda objektlar yaratishning ko'plab usullari mavjud
-
Object constructor:
Bo'sh objektni yaratishning eng oddiy usuli objekt konstruktoridan foydalanishdir. Hozirgi vaqtda bunday yondashuv tavsiya etilmaydi.
var object = new Object();
-
Object's create method:
Object ning yaratish usuli prototip objektini parametr sifatida o'tkazish orqali yangi objektni yaratadi
var object = Object.create(null);
-
Object literal syntax:
objektning so'zma-so'z sintaksisi (yoki objektni ishga tushiruvchisi) jingalak qavslarga o'ralgan nom-qiymat juftlarining vergul bilan ajratilgan to'plamidir.
var object = { name: "Sudheer" age: 34 }; objektning so'zma-so'z xossasi qiymatlari har qanday ma'lumot turiga, jumladan massiv, funksiya va ichki o'rnatilgan objekt bo'lishi mumkin.
Note: Bu objektni yaratishning eng oson usuli
-
Function constructor:
Har qanday funktsiyani yarating va objekt misollarini yaratish uchun yangi operatorni qo'llang
function Person(name) { this.name = name; this.age = 21; } var object = new Person('Sudheer');
-
Function constructor with prototype:
Bu funktsiya konstruktoriga o'xshaydi, lekin u xususiyatlari va usullari uchun prototipdan foydalanadi,
function Person() {} Person.prototype.name = 'Sudheer'; var object = new Person();
Bu funksiya prototipi bilan objekt yaratish usuli bilan yaratilgan misolga teng va keyin ushbu funktsiyani misol va parametrlar bilan argument sifatida chaqirish.
function func {}; new func(x, y, z);
(OR)
// Create a new instance using function prototype. var newInstance = Object.create(func.prototype) // Call the function var result = func.call(newInstance, x, y, z), // If the result is a non-null object then use it otherwise just use the new instance. console.log(result && typeof result === 'object' ? result : newInstance);
-
ES6 Class syntax:
ES6 objektlarni yaratish uchun sinf xususiyatini taqdim etadi
class Person { constructor(name) { this.name = name; } } var object = new Person('Sudheer');
-
Singleton pattern:
Singleton - bu faqat bir marta yaratilishi mumkin bo'lgan objekt. Uning konstruktoriga takroriy qo'ng'iroqlar bir xil misolni qaytaradi va shu bilan ular tasodifan bir nechta misollarni yaratmasligiga ishonch hosil qilish mumkin.
var object = new (function () { this.name = 'Sudheer'; })();
-
-
Prototype chaining mavjud objektlar asosida yangi turdagi objektlarni qurish uchun ishlatiladi. Bu sinfga asoslangan tilda merosga o'xshaydi.
Objekt namunasidagi prototip Object.getPrototypeOf(object) yoki **proto** xususiyati orqali, konstruktorlar funksiyasidagi prototip esa Object.prototype. orqali mavjud .
-
Call, Apply and Bind farqlarini quyidagi misollar bilan tushuntirish mumkin,,
Call:
thiscall() usuli berilgan qiymat va birma-bir taqdim etilgan argumentlarga ega funktsiyani chaqiradivar employee1 = { firstName: 'John', lastName: 'Rodson' }; var employee2 = { firstName: 'Jimmy', lastName: 'Baily' }; function invite(greeting1, greeting2) { console.log( greeting1 + ' ' + this.firstName + ' ' + this.lastName + ', ' + greeting2 ); } invite.call(employee1, 'Hello', 'How are you?'); // Hello John Rodson, How are you? invite.call(employee2, 'Hello', 'How are you?'); // Hello Jimmy Baily, How are you?
Apply: Berilgan qiymatga ega funktsiyani chaqiradi
thisva argumentlarni massiv sifatida o'tkazishga imkon beradi.var employee1 = { firstName: 'John', lastName: 'Rodson' }; var employee2 = { firstName: 'Jimmy', lastName: 'Baily' }; function invite(greeting1, greeting2) { console.log( greeting1 + ' ' + this.firstName + ' ' + this.lastName + ', ' + greeting2 ); } invite.apply(employee1, ['Hello', 'How are you?']); // Hello John Rodson, How are you? invite.apply(employee2, ['Hello', 'How are you?']); // Hello Jimmy Baily, How are you?
bind: har qanday miqdordagi argumentlarni o'tkazish imkonini beruvchi yangi funktsiyani qaytaradi
var employee1 = { firstName: 'John', lastName: 'Rodson' }; var employee2 = { firstName: 'Jimmy', lastName: 'Baily' }; function invite(greeting1, greeting2) { console.log( greeting1 + ' ' + this.firstName + ' ' + this.lastName + ', ' + greeting2 ); } var inviteEmployee1 = invite.bind(employee1); var inviteEmployee2 = invite.bind(employee2); inviteEmployee1('Hello', 'How are you?'); // Hello John Rodson, How are you? inviteEmployee2('Hello', 'How are you?'); // Hello Jimmy Baily, How are you?
Call va apply bir birini orginga ishlatilishi mumkin bolgan metodlar . Ikkalasi ham joriy funktsiyani darhol bajaradi. Argumentlarni massiv yoki vergul bilan ajratilgan roʻyxatida yuborish osonroqmi, qaror qabul qilishingiz kerak. You can remember by treating Call comma (ajratilgan list) uchun Apply esa Array uchun.
this Bind esa bind() ga o'tkazilgan birinchi parametrga o'rnatiladigan yangi funktsiyani yaratadi .
-
JSON bu JavaScript ob'yekt sintaksisiga asoslangan matnga asoslangan ma'lumotlar formati bo'lib, u tomonidan ommalashgan
Douglas Crockford. Bu tarmoq boʻylab maʼlumotlarni uzatmoqchi boʻlganingizda foydali boʻladi va u asosan .json kengaytmali matn fayli va MIME turi ilova/json boʻlsa.Parsing: satrni mahalliy objektga aylantirish
JSON.parse(text);
Stringification: mahalliy objektni tarmoq bo'ylab uzatilishi uchun stringa aylantirish
JSON.stringify(object);
-
slice() usuli massivdagi tanlangan elementlarni yangi massiv obyekti sifatida qaytaradi . U berilgan boshlang'ich argumentdan boshlanadigan elementlarni tanlaydi va oxirgi elementni qo'shmasdan berilgan ixtiyoriy yakuniy argumentda tugaydi. Agar siz ikkinchi argumentni o'tkazib yuborsangiz, u oxirigacha tanlaydi.
Ushbu usulning ba'zi misollari:
let arrayIntegers = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegers.slice(0, 2); // returns [1,2]
let arrayIntegers2 = arrayIntegers.slice(2, 3); // returns [3]
let arrayIntegers3 = arrayIntegers.slice(4); //returns [5]Note: Eslatma: Slice usuli asl massivni o'zgartirmaydi, lekin u kichik to'plamni yangi massiv sifatida qaytaradi.
-
Splice () usuli qatorga elementlarni qo'shish/o'chirish uchun ishlatiladi va keyin olib tashlangan elementni qaytaradi. Birinchi argument qo'shish yoki o'chirish uchun massiv o'rnini belgilaydi, ixtiyoriy ikkinchi argument esa o'chirilishi kerak bo'lgan elementlar sonini ko'rsatadi. Har bir qo'shimcha argument massivga qo'shiladi.
Ushbu usulning ba'zi misollari:
let arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal2 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal3 = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegersOriginal1.splice(0, 2); // returns [1, 2]; original array: [3, 4, 5]
let arrayIntegers2 = arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array: [1, 2, 3]
let arrayIntegers3 = arrayIntegersOriginal3.splice(3, 1, 'a', 'b', 'c'); //returns [4]; original array: [1, 2, 3, "a", "b", "c", 5]Note: Splice usuli asl massivni o'zgartiradi va o'chirilgan massivni qaytaradi.
Slice va splice o'rtasidagi farq nima
| Slice | Splice |
|---|---|
| Asl massivni o'zgartirmaydi (o'zgarmas) | Asl massivni o'zgartiradi (o'zgaruvchan) |
| Asl massivning pastki to'plamini qaytaradi | O'chirilgan elementlarni massiv sifatida qaytaradi |
| Massivdan elementlarni tanlash uchun foydalaniladi | Massivga/massivdan elementlarni kiritish yoki oʻchirish uchun foydalaniladi+ |
-
objektlar Maplarga o'xshaydi , chunki ikkalasi ham kalitlarni qiymatlarga o'rnatish, ushbu qiymatlarni olish, kalitlarni o'chirish va kalitda biror narsa saqlanganligini aniqlash imkonini beradi. Shu sababli, objektlar tarixan Maplar sifatida ishlatilgan. Lekin muhim farqlar borki, ular ma'lum holatlarda Mapdan foydalanishni afzal ko'radi.
- objektning kalitlari qatorlar va belgilar bo'lib, ular Map uchun har qanday qiymat, jumladan funktsiyalar, objektlar va har qanday ibtidoiy bo'lishi mumkin.
- Mapdagi kalitlar tartiblangan, objektga qo'shilgan kalitlar esa yo'q. Shunday qilib, uni takrorlashda Map objekti kalitlarni kiritish tartibida qaytaradi.
- Siz Map hajmini siz o'lcham xususiyati bilan osongina olishingiz mumkin, shu bilan birga objektdagi xususiyatlar soni qo'lda aniqlanishi kerak.
- Map takrorlanadigan va shuning uchun to'g'ridan-to'g'ri takrorlanishi mumkin, holbuki objektni takrorlash uchun uning kalitlarini qandaydir tarzda olish va ularni takrorlash kerak.
- objektning prototipi bor, shuning uchun Mapda ehtiyot bo'lmasangiz, kalitlaringiz bilan to'qnashishi mumkin bo'lgan standart kalitlar mavjud. ES5 dan boshlab map = Object.create(null) yordamida buni chetlab o'tish mumkin, lekin bu kamdan-kam hollarda amalga oshiriladi.
- Map kalit juftlarini tez-tez qo'shish va olib tashlashni o'z ichiga olgan stsenariylarda yaxshiroq ishlashi mumkin.
-
JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,
- Ikki satr bir xil belgilar ketma-ketligi, bir xil uzunlik va tegishli pozitsiyalarda bir xil belgilarga ega bo'lsa, qat'iy tengdir.
- Ikki raqam son jihatdan teng bo'lsa, ular qat'iy tengdir. ya'ni, bir xil raqam qiymatiga ega.
Bunda ikkita alohida holat mavjud,
- NaN hech narsaga teng emas, shu jumladan NaN.
- Ijobiy va manfiy nollar bir-biriga teng.
- Ikki mantiqiy operand, agar ikkalasi ham to'g'ri yoki ikkalasi ham yolg'on bo'lsa, qat'iy teng bo'ladi.
- Ikki objekt bir xil objektga tegishli bo'lsa, ular mutlaqo tengdir.
- Null va Undefined turlari === ga teng emas, lekin == ga teng. ya'ni, null===aniqlanmagan --> noto'g'ri, lekin null==aniqlanmagan --> rost
Yuqoridagi holatlarni qamrab oluvchi ba'zi misollar,
0 == false // true 0 === false // false 1 == "1" // true 1 === "1" // false null == undefined // true null === undefined // false '0' == false // true '0' === false // false []==[] or []===[] //false, refer different objects in memory {}=={} or {}==={} //false, refer different objects in memory
Arrow funksiyasi funksiya ifodasi uchun qisqaroq sintaksis bo‘lib, o‘ziga xos this, arguments, super yoki new.target ga ega emas . Bu funksiyalar usul bo'lmagan funksiyalar uchun eng mos keladi va ularni konstruktor sifatida ishlatib bo'lmaydi.
**[⬆ Back to Top](#table-of-contents)**
-
Javascriptda funksiyalar birinchi darajali objektlardir. Birinchi darajali funktsiyalar bu tildagi funktsiyalar boshqa o'zgaruvchilar kabi ko'rib chiqilishini anglatadi.
Masalan, bunday tilda funksiya boshqa funksiyalarga argument sifatida uzatilishi, boshqa funksiya tomonidan qaytarilishi va o‘zgaruvchiga qiymat sifatida berilishi mumkin. Misol uchun, quyidagi misolda tinglovchiga tayinlangan ishlov beruvchi funktsiyalari
const handler = () => console.log('This is a click handler function'); document.addEventListener('click', handler);
-
Birinchi darajali funktsiya boshqa funktsiyani argument sifatida qabul qilmaydigan va funktsiyani qaytarish qiymati sifatida qaytarmaydigan funktsiyadir.
const firstOrder = () => console.log('I am a first order function!');
-
Yuqori tartibli funktsiya boshqa funktsiyani argument sifatida qabul qiladigan yoki funktsiyani qaytarish qiymati yoki ikkalasini qaytaradigan funktsiyadir.
const firstOrderFunc = () => console.log('Hello, I am a First order function'); const higherOrder = (ReturnFirstOrderFunc) => ReturnFirstOrderFunc(); higherOrder(firstOrderFunc);
Unar funktsiya (ya'ni monad) - aynan bitta argumentni qabul qiladigan funksiya. Bu funktsiya tomonidan qabul qilingan bitta argumentni anglatadi.
Let us take an example of unary function,
```javascript
const unaryFunction = (a) => console.log(a + 10); // Add 10 to the given argument and display the value
```
**[⬆ Back to Top](#table-of-contents)**
Currying - bu bir nechta argumentli funktsiyani olish va uni har birida faqat bitta argumentga ega bo'lgan funktsiyalar ketma-ketligiga aylantirish jarayoni. Currying matematik Xaskell Karri sharafiga nomlangan . Korriingni qo'llash orqali n-ary funksiya uni birlik funktsiyaga aylantiradi.
Keling, n-ary funksiyasini va uning qanday qilib karriy funksiyaga aylanishini misol qilib olaylik.
```javascript
const multiArgFunction = (a, b, c) => a + b + c;
console.log(multiArgFunction(1, 2, 3)); // 6
const curryUnaryFunction = (a) => (b) => (c) => a + b + c;
curryUnaryFunction(1); // returns a function: b => c => 1 + b + c
curryUnaryFunction(1)(2); // returns a function: c => 3 + c
curryUnaryFunction(1)(2)(3); // returns the number 6
```
Curried funktsiyalari kodning qayta ishlatilishini va funktsional tarkibini yaxshilash uchun ajoyib .
**[⬆ Back to Top](#table-of-contents)**
Sof funktsiya - bu qaytariladigan qiymat faqat uning argumentlari bilan hech qanday nojo'ya ta'sirlarsiz aniqlanadigan funktsiyadir. ya'ni, agar siz bir xil argumentlarga ega funktsiyani "n" soni va ilovadagi joylar soni "n" bilan chaqirsangiz, u har doim bir xil qiymatni qaytaradi
Keling, sof va nopok funktsiyalar o'rtasidagi farqni ko'rish uchun misol keltiraylik,
```javascript
//Impure
let numberArray = [];
const impureAddNumber = (number) => numberArray.push(number);
//Pure
const pureAddNumber = (number) => (argNumberArray) =>
argNumberArray.concat([number]);
//Display the results
console.log(impureAddNumber(6)); // returns 1
console.log(numberArray); // returns [6]
console.log(pureAddNumber(7)(numberArray)); // returns [6, 7]
console.log(numberArray); // returns [6]
```
Yuqoridagi kod parchalariga ko'ra, Push funktsiyasi massivni o'zgartirish va parametr qiymatidan mustaqil bo'lgan surish raqami indeksini qaytarish orqali o'zini nopok qiladi. Boshqa tomondan, Concat massivni oladi va uni boshqa massiv bilan birlashtiradi va nojo'ya ta'sirlarsiz butunlay yangi massiv hosil qiladi. Bundan tashqari, qaytarish qiymati oldingi massivning birlashmasi hisoblanadi.
Esda tutingki, Pure funktsiyalari muhim ahamiyatga ega, chunki ular birlik sinovini hech qanday nojo'ya ta'sirlarsiz va qaramlik in'ektsiyasiga ehtiyoj sezmasdan soddalashtiradi. Ular, shuningdek, qattiq bog'lanishdan qochishadi va hech qanday nojo'ya ta'sirlarga ega bo'lmasdan, ilovangizni buzishni qiyinlashtiradi. Ushbu tamoyillar ES6 ning o'zgarmaslik kontseptsiyasi bilan birlashtirilib, ruxsat berishdan ko'ra const ga ustunlik beradi .
**[⬆ Back to Top](#table-of-contents)**
Bayonot blok doirasi mahalliy o'zgaruvchinilet e'lon qiladi . Shunday qilib, let kalit so'zi bilan aniqlangan o'zgaruvchilar u ishlatiladigan blok, bayonot yoki ifoda bilan cheklangan. Holbuki, kalit so'z bilan e'lon qilingan o'zgaruvchilar o'zgaruvchini global miqyosda yoki lokal ravishda blok doirasidan qat'i nazar, butun funktsiyani aniqlash uchun ishlatiladi.var
Foydalanishni ko'rsatish uchun misol keltiraylik,
```javascript
let counter = 30;
if (counter === 30) {
let counter = 31;
console.log(counter); // 31
}
console.log(counter); // 30 (because the variable in if block won't exist here)
```
**[⬆ Back to Top](#table-of-contents)**
-
Siz farqlarni jadval shaklida ko'rsatishingiz mumkin
var let U JavaScript boshidan beri mavjud ES6 ning bir qismi sifatida taqdim etilgan Funktsiya doirasiga ega U blok doirasiga ega O'zgaruvchilar ko'tariladi Ko'tarilgan, lekin ishga tushirilmagan Farqni ko'rish uchun misol keltiramiz,
function userDetails(username) { if (username) { console.log(salary); // undefined due to hoisting console.log(age); // ReferenceError: Cannot access 'age' before initialization let age = 30; var salary = 10000; } console.log(salary); //10000 (accessible to due function scope) console.log(age); //error: age is not defined(due to block scope) } userDetails('John');
-
letScheme va Basic kabi dastlabki dasturlash tillari tomonidan qabul qilingan matematik bayonotdir . U imkon qadar letyaqin an'anaviy kalit so'z sifatida ishlatadigan o'nlab boshqa tillardan olingan .var
-
Agar siz a dagi o'zgaruvchilarni qayta e'lon qilishga harakat qilsangiz, switch blocku xatolarga olib keladi, chunki faqat bitta blok mavjud. Misol uchun, quyidagi kod bloki quyidagi kabi sintaksis xatosini keltirib chiqaradi,
let counter = 1; switch (x) { case 0: let name; break; case 1: let name; // SyntaxError for redeclaration. break; }
Ushbu xatolikka yo'l qo'ymaslik uchun siz case bandi ichida ichki blok yaratishingiz va yangi blokli leksik muhitni yaratishingiz mumkin.
let counter = 1; switch (x) { case 0: { let name; break; } case 1: { let name; // No SyntaxError for redeclaration. break; } }
-
Vaqtinchalik o'lik zona - bu JavaScriptda o'zgaruvchini let va const kalit so'zlari bilan e'lon qilishda yuzaga keladigan xatti-harakatlar, lekin var bilan emas. ECMAScript 6 da letyoki consto'zgaruvchiga uning e'lon qilinishidan oldin (uning doirasi doirasida) kirish ReferenceErrorga olib keladi. Bu sodir bo'ladigan vaqt oralig'i, o'zgaruvchining bog'lanishi yaratilishi va uning e'lon qilinishi o'rtasidagi vaqt oralig'i vaqtinchalik o'lik zona deb ataladi.
Keling, bu xatti-harakatni misol bilan ko'rib chiqaylik,
function somemethod() { console.log(counter1); // undefined console.log(counter2); // ReferenceError var counter1 = 1; let counter2 = 2; }
-
IIFE (Immediately Invoked Function Expression) bu JavaScript funksiyasi boʻlib, u aniqlangan zahoti ishga tushadi. Uning imzosi quyidagicha bo'ladi,
(function () { // logic here })();
IIFE-dan foydalanishning asosiy sababi ma'lumotlar maxfiyligini olishdir, chunki IIFE ichida e'lon qilingan har qanday o'zgaruvchilarga tashqi dunyo kirishi mumkin emas. ya'ni, agar siz IIFE bilan o'zgaruvchilarga kirishga harakat qilsangiz, u quyidagi kabi xatoga yo'l qo'yadi,
(function () { var message = 'IIFE'; console.log(message); })(); console.log(message); //Error: message is not defined
-
encodeURI()funksiyasi URL manzilini kodlash uchun ishlatiladi. Bu funksiya parametr sifatida URL satrini talab qiladi va kodlangan qatorni qaytaradi. decodeURI()funksiya URL manzilini ochish uchun ishlatiladi. Bu funksiya parametr sifatida kodlangan URL satrini talab qiladi va bu dekodlangan qatorni qaytaradi.
Note: encodeURI()funksiyasi URL manzilini kodlash uchun ishlatiladi. Bu funksiya parametr sifatida URL satrini talab qiladi va kodlangan qatorni qaytaradi. decodeURI()funksiya URL manzilini ochish uchun ishlatiladi. Bu funksiya parametr sifatida kodlangan URL satrini talab qiladi va bu dekodlangan qatorni qaytaradi.
let uri = 'employeeDetails?name=john&occupation=manager'; let encoded_uri = encodeURI(uri); let decoded_uri = decodeURI(encoded_uri);
-
Memoizatsiya - bu avvaldan hisoblangan natijalarni keshlash orqali funktsiyaning ishlashini oshirishga harakat qiladigan dasturlash usuli. Har safar xotirada saqlangan funksiya chaqirilganda, uning parametrlari keshni indekslash uchun ishlatiladi. Agar ma'lumotlar mavjud bo'lsa, uni butun funktsiyani bajarmasdan qaytarish mumkin. Aks holda funktsiya bajariladi va natija keshga qo'shiladi. Keling, xotira bilan funksiya qo'shishga misol keltiraylik,
const memoizAddition = () => { let cache = {}; return (value) => { if (value in cache) { console.log('Fetching from cache'); return cache[value]; // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript identifier. Hence, can only be accessed using the square bracket notation. } else { console.log('Calculating result'); let result = value + 20; cache[value] = result; return result; } }; }; // returned function from memoizAddition const addition = memoizAddition(); console.log(addition(20)); //output: 40 calculated console.log(addition(20)); //output: 40 cached
-
Yuk ko'tarish JavaScript mexanizmi bo'lib, unda kod bajarilishidan oldin o'zgaruvchilar va funksiya deklaratsiyasi o'z doirasining yuqori qismiga ko'chiriladi. Esda tutingki, JavaScript faqat deklaratsiyalarni ko'taradi, ishga tushirishni emas. Keling, o'zgaruvchan yuk ko'tarishning oddiy misolini olaylik,
console.log(message); //output : undefined var message = 'The variable Has been hoisted';
Yuqoridagi kod tarjimon uchun quyidagi kabi ko'rinadi,
var message; console.log(message); message = 'The variable Has been hoisted';
-
ES6 da Javascript sinflari JavaScript-ning mavjud prototipiga asoslangan merosiga nisbatan asosan sintaktik shakar hisoblanadi. Masalan, prototipga asoslangan meros quyidagi funksiya ifodasida yozilgan,
function Bike(model, color) { this.model = model; this.color = color; } Bike.prototype.getDetails = function () { return this.model + ' bike has' + this.color + ' color'; };
ES6 sinflari esa muqobil sifatida belgilanishi mumkin
class Bike { constructor(color, model) { this.color = color; this.model = model; } getDetails() { return this.model + ' bike has' + this.color + ' color'; } }
-
Closure bu - funktsiya va ushbu funktsiya e'lon qilingan leksik muhitning kombinatsiyasi. ya'ni, bu tashqi yoki qo'shuvchi funksiya o'zgaruvchilariga kirish huquqiga ega bo'lgan ichki funktsiyadir. Yopish uchta ko'lamli zanjirga ega
- O'zgaruvchilar uning jingalak qavslar orasida aniqlangan o'z doirasi
- Tashqi funktsiya o'zgaruvchilari
- Global o'zgaruvchilar
Keling, yopish kontseptsiyasiga misol keltiraylik,
function Welcome(name) { var greetingInfo = function (message) { console.log(message + ' ' + name); }; return greetingInfo; } var myFunction = Welcome('John'); myFunction('Welcome '); //Output: Welcome John myFunction('Hello Mr.'); //output: Hello Mr.John
Yuqoridagi kodga ko'ra, ichki funksiya (ya'ni, greetingInfo) tashqi funksiya qaytganidan keyin ham tashqi funksiya doirasidagi (ya'ni Welcome) o'zgaruvchilarga kirish huquqiga ega.
-
Modullar mustaqil, qayta foydalanish mumkin bo'lgan kodning kichik birliklariga ishora qiladi va ko'plab JavaScript dizayn naqshlarining asosi bo'lib xizmat qiladi. Ko'pgina JavaScript modullari objektni, funktsiyani yoki konstruktorni eksport qiladi
-
Quyida JavaScript ekotizimidagi modullardan foydalanishning afzalliklari ro'yxati keltirilgan
- Saqlash imkoniyati
- Qayta foydalanish imkoniyati
- Namespacing
Amal qilish doirasi - bu ish vaqtida kodingizning ma'lum bir qismidagi o'zgaruvchilar, funktsiyalar va objektlarga kirish imkoniyati. Boshqacha qilib aytganda, qamrov sizning kodingiz sohalarida o'zgaruvchilar va boshqa resurslarning ko'rinishini aniqlaydi.
**[⬆ Back to Top](#table-of-contents)**
-
Xizmat xodimi asosan fonda ishlaydigan, veb-sahifadan ajratilgan va veb-sahifa yoki foydalanuvchi o'zaro ta'sirini talab qilmaydigan xususiyatlarni taqdim etadigan skript (JavaScript fayli). Xizmat xodimlarining asosiy xususiyatlaridan ba'zilari - bu boy oflayn tajribalar (oflayn birinchi veb-ilovalarni ishlab chiqish), davriy fon sinxronlash, push-bildirishnomalar, tarmoq so'rovlarini ushlab turish va boshqarish va javoblar keshini dasturiy ravishda boshqarish.
-
Xizmat xodimi DOMga to'g'ridan-to'g'ri kira olmaydi. Ammo u interfeys orqali yuborilgan xabarlarga javob berish orqali o'zi boshqaradigan sahifalar bilan postMessagebog'lanishi mumkin va bu sahifalar DOMni boshqarishi mumkin.
-
onfetchXizmat ishchisi bilan bog'liq muammo shundaki, u foydalanilmayotganda tugatiladi va keyingi kerak bo'lganda qayta ishga tushadi, shuning uchun siz xizmat ko'rsatuvchi ishchi va onmessageishlovchilar ichidagi global holatga tayanolmaysiz . Bunday holda, xizmat ko'rsatuvchi ishchilar qayta ishga tushirishda davom etish va qayta foydalanish uchun IndexedDB API ga kirish huquqiga ega bo'ladi.
-
IndexedDB - bu katta hajmdagi tuzilgan ma'lumotlarni, shu jumladan fayllar/bloblarni mijoz tomonidan saqlash uchun past darajadagi API. Ushbu API ushbu ma'lumotlarning yuqori samarali qidiruvlarini yoqish uchun indekslardan foydalanadi.
Veb-xotira - bu brauzerlar kalit/qiymat juftlarini foydalanuvchi brauzerida mahalliy sifatida cookie-fayllardan foydalanishdan ko'ra ancha intuitiv tarzda saqlashi mumkin bo'lgan mexanizmni ta'minlovchi API. Veb-xotira mijozga ma'lumotlarni saqlash uchun ikkita mexanizmni taqdim etadi.
1. **Local storage:** U amaldagi ma'lumotlarni amal qilish muddatisiz saqlaydi.
2. **Session storage:** U bir seans uchun ma'lumotlarni saqlaydi va brauzer yorlig'i yopilganda ma'lumotlar yo'qoladi.
**[⬆ Back to Top](#table-of-contents)**
-
Xabarni yuborish - bu Oyna objektlari (ya'ni, sahifa va u ochilgan qalqib chiquvchi oyna o'rtasida yoki sahifa va uning ichiga o'rnatilgan iframe o'rtasida) o'zaro bog'lanishni ta'minlaydigan usul. Odatda, turli sahifalardagi skriptlarga bir-biriga kirishga ruxsat beriladi, agar sahifalar bir xil manba siyosatiga (yaʼni, sahifalar bir xil protokol, port raqami va xostga ega boʻlsa) amal qilgan taqdirdagina.
-
Cookie - bu brauzeringiz kirishi uchun kompyuteringizda saqlanadigan ma'lumotlarning bir qismi. Cookie-fayllar kalit/qiymat juftligi sifatida saqlanadi. Masalan, foydalanuvchi nomi bilan quyidagi cookie faylini yaratishingiz mumkin:
document.cookie = 'username=John';
Cookie-fayllar foydalanuvchi profili (masalan, foydalanuvchi nomi) haqidagi ma'lumotlarni eslab qolish uchun ishlatiladi. Bu asosan ikki bosqichni o'z ichiga oladi,
1. Foydalanuvchi veb-sahifaga tashrif buyurganida, foydalanuvchi profili cookie faylida saqlanishi mumkin.
2. Keyingi safar foydalanuvchi sahifaga tashrif buyurganida, cookie foydalanuvchi profilini eslab qoladi.
**[⬆ Back to Top](#table-of-contents)**
-
TCookie uchun quyida bir nechta variant mavjud,
- Sukut bo'yicha, brauzer yopilganda cookie o'chiriladi, ammo amal qilish muddatini belgilash orqali bu xatti-harakatni o'zgartirishingiz mumkin (UTC vaqti bilan).
document.cookie = 'username=John; expires=Sat, 8 Jun 2019 12:00:00 UTC';
- Odatiy bo'lib, cookie joriy sahifaga tegishli. Lekin siz brauzerga cookie fayli qaysi yoʻlga tegishli ekanligini yoʻl parametri yordamida ayta olasiz.
document.cookie = 'username=John; path=/services';
-
Yaroqlilik muddatini o‘tgan sana sifatida belgilash orqali cookie faylini o‘chirishingiz mumkin. Bu holda cookie qiymatini belgilashingiz shart emas. Masalan, joriy sahifadagi foydalanuvchi nomi cookie-faylini quyidagi tarzda o'chirishingiz mumkin.
document.cookie = 'username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;';
Note: To'g'ri cookie-faylni o'chirib tashlashingizga ishonch hosil qilish uchun cookie-fayl yo'li opsiyasini belgilashingiz kerak. Ba'zi brauzerlar, agar siz yo'l parametrini ko'rsatmasangiz, cookie-fayllarni o'chirishga ruxsat bermaydi.
-
Quyida cookie, mahalliy saqlash va seans xotirasi oʻrtasidagi farqlar keltirilgan.
Feature Cookie Local storage Session storage Mijoz yoki server tomonidan kirish mumkin Ham server tomoni, ham mijoz tomoni faqat mijoz tomoni faqat mijoz tomoni Lifetime Muddati tugaydi opsiyasi yordamida sozlanganidek o'chirilgunga qadar yorliq yopilguncha SSL qo'llab-quvvatlaydi Qo'llab-quvvatlanadi Qo'llab-quvvatlanmaydi Qo'llab-quvvatlanmaydi Maksimal ma'lumotlar hajmi 4KB 5 MB 5MB -
LocalStorage SessionStorage bilan bir xil, lekin u brauzer yopilgan va qayta ochilganda ham maʼlumotlarni saqlab qoladi (yaʼni uning amal qilish muddati yoʻq), seansStorageʼda esa sahifa seansi tugashi bilan maʼlumotlar tozalanadi.
-
Window obyekti mos ravishda (window.localStorage) va (window.sessionStorage) xossalariga ega bo'lgan WindowLocalStorageva WindowSessionStorageobjektlarini amalga oshiradi. Ushbu xususiyatlar Saqlash objektining namunasini yaratadi, bu orqali ma'lum domen va saqlash turi (sessiya yoki mahalliy) uchun ma'lumotlar elementlarini o'rnatish, olish va o'chirish mumkin. Masalan, siz mahalliy saqlash objektlarida quyida ko'rsatilganidek o'qishingiz va yozishingiz mumkinlocalStoragesessionStorage
localStorage.setItem('logo', document.getElementById('logo').value); localStorage.getItem('logo');
-
Window obyekti mos ravishda (window.localStorage) va (window.sessionStorage) xossalariga ega bo'lgan WindowLocalStorageva WindowSessionStorageobjektlarini amalga oshiradi. Ushbu xususiyatlar Saqlash objektining namunasini yaratadi, bu orqali ma'lum domen va saqlash turi (sessiya yoki mahalliy) uchun ma'lumotlar elementlarini o'rnatish, olish va o'chirish mumkin. Masalan, siz mahalliy saqlash objektlarida quyida ko'rsatilganidek o'qishingiz va yozishingiz mumkinlocalStoragesessionStorage
// Save data to sessionStorage sessionStorage.setItem('key', 'value'); // Get saved data from sessionStorage let data = sessionStorage.getItem('key'); // Remove saved data from sessionStorage sessionStorage.removeItem('key'); // Remove all saved data from sessionStorage sessionStorage.clear();
-
StorageEvent - bu boshqa hujjat kontekstida saqlash joyi o'zgartirilganda paydo bo'ladigan hodisa. Holbuki, saqlash xususiyati saqlash hodisalarini qayta ishlash uchun EventHandler hisoblanadi. Sintaksis quyidagi kabi bo'ladi
window.onstorage = functionRef;
Keling, saqlash kaliti va uning qiymatlarini qayd qiluvchi xotira hodisasi ishlovchisidan foydalanish misolini olaylik
window.onstorage = function (e) { console.log( 'The ' + e.key + ' key has been changed from ' + e.oldValue + ' to ' + e.newValue + '.' ); };
-
Veb-saqlash yanada xavfsizroq va katta hajmdagi ma'lumotlar veb-sayt ishlashiga ta'sir qilmasdan mahalliy sifatida saqlanishi mumkin. Bundan tashqari, ma'lumotlar hech qachon serverga o'tkazilmaydi. Shuning uchun bu Cookie-fayllarga qaraganda ko'proq tavsiya etilgan yondashuv.
Veb-xotiradan foydalanishdan oldin brauzerning localStorage va sessionStorage uchun qo'llab-quvvatlanishini tekshirishingiz kerak,
```javascript
if (typeof Storage !== 'undefined') {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
```
**[⬆ Back to Top](#table-of-contents)**
-
Uni ishlatishdan oldin veb-xodimlar uchun brauzer yordamini tekshirishingiz kerak
if (typeof Worker !== 'undefined') { // code for Web worker support. } else { // Sorry! No Web Worker support.. }
-
Hisoblash misolida veb ishchilaridan foydalanishni boshlash uchun quyidagi bosqichlarni bajarishingiz kerak
- Veb ishchi faylini yarating: Hisoblash qiymatini oshirish uchun skript yozishingiz kerak. Keling, uni counter.js deb nomlaymiz
let i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout('timedCount()', 500); } timedCount();
Bu yerda postMessage() usuli xabarni HTML sahifasiga qaytarish uchun ishlatiladi
- Veb ishchi objektini yaratish: Brauzer qo'llab-quvvatlashini tekshirish orqali veb-ishchi objektini yaratishingiz mumkin. Keling, bu faylni web_worker_example.js deb nomlaymiz
if (typeof w == 'undefined') { w = new Worker('counter.js'); }
va biz veb-ishchidan xabarlar olishimiz mumkin
w.onmessage = function (event) { document.getElementById('message').innerHTML = event.data; };
- Veb ishchini tugatish: Veb ishchilari xabarlarni tinglashda davom etadilar (hatto tashqi skript tugagandan keyin ham) u tugatilmaguncha. Siz xabarlarni tinglashni tugatish uchun terminate() usulidan foydalanishingiz mumkin.
w.terminate();
- Veb ishchisini qayta ishlatish: Agar ishchi o'zgaruvchini aniqlanmagan qilib qo'ysangiz, kodni qayta ishlatishingiz mumkin
w = undefined;
WebWorkers quyida joylashgan JavaScript obyektlariga kirish huquqiga ega emas, chunki ular tashqi fayllarda aniqlangan
1. Window object
2. Document object
3. Parent object
**[⬆ Back to Top](#table-of-contents)**
-
Va'da - bu hal qilingan qiymat yoki hal qilinmagan sabab (masalan, tarmoq xatosi) bilan kelajakda bir muncha vaqt bitta qiymat ishlab chiqarishi mumkin bo'lgan objekt. U 3 ta mumkin bo'lgan holatdan birida bo'ladi: bajarilgan, rad etilgan yoki kutilayotgan.
Promise yaratish sintaksisi quyidagi kabi ko'rinadi:
```javascript
const promise = new Promise(function (resolve, reject) {
// promise description
});
```
Va'dadan foydalanish quyidagicha bo'ladi,
```javascript
const promise = new Promise(
(resolve) => {
setTimeout(() => {
resolve("I'm a Promise!");
}, 5000);
},
(reject) => {}
);
promise.then((value) => console.log(value));
```
Va'daning harakat oqimi quyidagicha bo'ladi:
**[⬆ Back to Top](#table-of-contents)**
-
Va'dalar asinxron operatsiyalarni bajarish uchun ishlatiladi. Ular callbacklar uchun muqobil yondashuvni taqdim etadilar, bu esa callbackni kamaytirish va toza kodni yozish orqali amalga oshiriladi.
-
Va'dalar uchta holatga ega:
- Pending: Bu operatsiya boshlanishidan oldingi va'daning dastlabki holati
- Fulfilled: Bu holat belgilangan operatsiya tugaganligini bildiradi.
- Rejected: Bu holat operatsiya tugallanmaganligini bildiradi. Bunday holda xato qiymati chiqariladi.
-
Callback funktsiyasi boshqa funktsiyaga argument sifatida o'tkaziladigan funktsiyadir. Bu funksiya amalni bajarish uchun tashqi funksiya ichida chaqiriladi. Callback funksiyasidan qanday foydalanishni oddiy misol qilib olaylik
function callbackFunction(name) { console.log('Hello ' + name); } function outerFunction(callback) { let name = prompt('Please enter your name.'); callback(name); } outerFunction(callbackFunction);
-
callbacklar kerak, chunki JavaScript voqealarga asoslangan tildir. Bu degani, javobni kutish o'rniga JavaScript boshqa hodisalarni tinglashda ishlashda davom etadi. API chaqiruvini chaqiruvchi birinchi funksiya (setTimeout tomonidan simulyatsiya qilingan) va xabarni qayd qiluvchi keyingi funksiyaga misol keltiraylik.
function firstFunction() { // Simulate a code delay setTimeout(function () { console.log('First function called'); }, 1000); } function secondFunction() { console.log('Second function called'); } firstFunction(); secondFunction(); Output; // Second function called // First function called
Natijadan ko'rinib turibdiki, JavaScript birinchi funktsiyaning javobini kutmagan va qolgan kod bloki bajarilgan. Shunday qilib, callback ma'lum kod boshqa kod bajarilishini tugatmaguncha bajarilmasligiga ishonch hosil qilish uchun ishlatiladi.
Chaqiruv jahannami asinxron mantiq bilan ishlashda kodni o‘qish va disk raskadrovka qilishni qiyinlashtiradigan bir nechta ichki qo‘ng‘iroqlarga ega anti-naqshdir. callback qilish jahannami quyida ko'rinadi,
```javascript
async1(function(){
async2(function(){
async3(function(){
async4(function(){
....
});
});
});
});
```
**[⬆ Back to Top](#table-of-contents)**
Server tomonidan yuborilgan voqealar (SSE) - bu serverni surish texnologiyasi bo'lib, brauzer so'rovga murojaat qilmasdan HTTP ulanishi orqali serverdan avtomatik yangilanishlarni olish imkonini beradi. Bular bir tomonlama aloqa kanali - hodisalar faqat serverdan mijozga o'tadi. Bu Facebook/Twitter yangilanishlarida, aksiyalar narxlari yangilanishlarida, yangiliklar tasmalarida va hokazolarda ishlatilgan.
**[⬆ Back to Top](#table-of-contents)**
-
EventSource obyekti server tomonidan yuborilgan voqea bildirishnomalarini olish uchun ishlatiladi. Masalan, siz serverdan quyidagi tarzda xabarlar olishingiz mumkin:
if (typeof EventSource !== 'undefined') { var source = new EventSource('sse_generator.js'); source.onmessage = function (event) { document.getElementById('output').innerHTML += event.data + '<br>'; }; }
-
Server tomonidan yuborilgan voqealar uchun brauzerni qo'llab-quvvatlashni quyidagi tarzda ishlatishdan oldin amalga oshirishingiz mumkin,
if (typeof EventSource !== 'undefined') { // Server-sent events supported. Let's have some code here! } else { // No server-sent events supported }
-
Quyida server tomonidan yuborilgan voqealar uchun mavjud voqealar roʻyxati keltirilgan
Event Description onopen U serverga ulanish ochilganda ishlatiladi onmessage Ushbu hodisa xabar qabul qilinganda ishlatiladi onerror Xatolik yuzaga kelganda sodir bo'ladi
Va'da muayyan qoidalar to'plamiga amal qilishi kerak,
1. `.then()` Va'da - bu standartga mos keladigan usulni ta'minlovchi objekt
2. Kutilayotgan va'da bajarilgan yoki rad etilgan holatga o'tishi mumkin
3. Bajarilgan yoki rad etilgan va'da hal qilinadi va u boshqa hech qanday holatga o'tmasligi kerak.
4. Va'da bajarilgandan so'ng, qiymat o'zgarmasligi kerak.
**[⬆ Back to Top](#table-of-contents)**
-
Harakatlarni birma-bir bajarish uchun siz bitta callbackni boshqa callbackqa joylashtirishingiz mumkin. Bu callbacklarda callbacklar sifatida tanilgan.
loadScript('/script1.js', function (script) { console.log('first script is loaded'); loadScript('/script2.js', function (script) { console.log('second script is loaded'); loadScript('/script3.js', function (script) { console.log('third script is loaded'); // after all scripts are loaded }); }); });
-
Va'dalar yordamida birin-ketin asinxron vazifalarni bajarish jarayoni va'da zanjiri deb nomlanadi. Yakuniy natijani hisoblash uchun va'da zanjiriga misol keltiraylik,
new Promise(function (resolve, reject) { setTimeout(() => resolve(1), 1000); }) .then(function (result) { console.log(result); // 1 return result * 2; }) .then(function (result) { console.log(result); // 2 return result * 3; }) .then(function (result) { console.log(result); // 6 return result * 4; });
Yuqoridagi ishlov beruvchilarda natija quyidagi ish oqimi bilan .then() ishlov beruvchilari zanjiriga uzatiladi,
- Dastlabki va'da 1 soniyada hal qilinadi,
- Shundan so'ng .thenishlov beruvchi natijani (1) jurnalga kiritish orqali chaqiriladi va natijada * 2 qiymati bilan va'da qaytariladi..
- Shundan so'ng, qiymat .thennatijani (2) qayd qilish orqali keyingi ishlov beruvchiga o'tdi va natija * 3 bilan va'dani qaytaring.
- Nihoyat, natijani (6) qayd qilish orqali qiymat oxirgi .thenishlov beruvchiga o'tdi va natija * 4 bilan va'dani qaytaring.
-
Promise.all - bu bir qator va'dalarni kiritish (takrorlash) sifatida qabul qiladigan va'da va u barcha va'dalar hal qilinganda yoki ulardan biri rad etilganda hal qilinadi. Masalan, prod.all usulining sintaksisi quyida keltirilgan,
Promise.all([Promise1, Promise2, Promise3]) .then(result) => { console.log(result) }) .catch(error => console.log(`Error in promises ${error}`))
Note: Va'dalar tartibi (natijani chiqarish) kiritish tartibiga muvofiq saqlanadi.
-
Promise.race() usuli birinchi navbatda hal qilingan yoki rad etilgan va'da namunasini qaytaradi. Keling, race() usulini misol qilib olaylik, bunda birinchi navbatda vad2 hal qilinadi
var promise1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'one'); }); var promise2 = new Promise(function (resolve, reject) { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then(function (value) { console.log(value); // "two" // Both promises will resolve, but promise2 is faster });
-
Qattiq rejim - bu ECMAScript 5-dagi yangi xususiyat bo'lib, u sizga dastur yoki funksiyani "qat'iy" operatsion kontekstda joylashtirish imkonini beradi. Shunday qilib, u muayyan harakatlarning bajarilishini oldini oladi va ko'proq istisnolarni keltirib chiqaradi. To'g'ridan-to'g'ri ifoda "use strict";brauzerga javascript kodini qattiq rejimda ishlatishni buyuradi.
-
Qattiq rejim haqiqiy xatolarga "yomon sintaksis" haqida xabar berib, "xavfsiz" JavaScript yozish uchun foydalidir. Masalan, xatolik yo'li bilan tasodifan global o'zgaruvchini yaratishni bartaraf qiladi va yozilmaydigan xususiyatga, faqat qabul qiluvchi xususiyatga, mavjud bo'lmagan xususiyatga, mavjud bo'lmagan o'zgaruvchiga yoki bo'lmagan xususiyatga tayinlash uchun xatolik chiqaradi. mavjud objekt. ⬆ Back to Top
-
Qat'iy rejim "qat'iy foydalanish" qo'shilishi bilan e'lon qilinadi; skript yoki funksiya boshiga. Agar skript boshida e'lon qilingan bo'lsa, u global miqyosga ega.
'use strict'; x = 3.14; // This will cause an error because x is not declared
va agar siz funktsiya ichida e'lon qilsangiz, u mahalliy doiraga ega
x = 3.14; // This will not cause an error. myFunction(); function myFunction() { 'use strict'; y = 3.14; // This will cause an error }
-
Qo'sh undov yoki inkor (!!) natijada turning mantiqiy ekanligini ta'minlaydi. Agar u noto'g'ri bo'lsa (masalan, 0, null, aniqlanmagan va hokazo), u noto'g'ri, aks holda rost bo'ladi. Misol uchun, siz quyidagi ibora yordamida IE versiyasini sinab ko'rishingiz mumkin,
let isIE8 = false; isIE8 = !!navigator.userAgent.match(/MSIE 8.0/); console.log(isIE8); // returns true or false
Agar siz ushbu ifodani ishlatmasangiz, u asl qiymatni qaytaradi.
console.log(navigator.userAgent.match(/MSIE 8.0/)); // returns either an Array or null
Note: ifoda !! operator emas, lekin u faqat ikki marta! operator.
-
Delete kalit so'zi mulkni va uning qiymatini o'chirish uchun ishlatiladi.
var user = { name: 'John', age: 20 }; delete user.age; console.log(user); // {name: "John"}
-
JavaScript o'zgaruvchisining turini topish uchun JavaScript typeof operatoridan foydalanishingiz mumkin. U o'zgaruvchi yoki ifoda turini qaytaradi.
typeof 'John Abraham'; // Returns "string" typeof (1 + 2); // Returns "number"
-
Qiymatni aniqlanmagan qilib belgilash orqali har qanday o'zgaruvchini bo'shatish mumkin.
var user; // Value is undefined, type is undefined console.log(typeof user); //undefined
Qiymatni aniqlanmagan qilib belgilash orqali har qanday o'zgaruvchini bo'shatish mumkin.
user = undefined;
-
Null qiymati har qanday objekt qiymatining ataylab yo'qligini ifodalaydi. Bu JavaScript-ning ibtidoiy qiymatlaridan biridir. Null qiymat turi objekt hisoblanadi. Qiymatni null ga o'rnatish orqali o'zgaruvchini bo'shatish mumkin.
var user = null; console.log(typeof user); //object
-
Quyida null va undefined o'rtasidagi asosiy farqlar keltirilgan,
Null Undefined Bu o'zgaruvchining hech qanday objektga ishora qilmasligini ko'rsatadigan tayinlash qiymati. Bu o'zgaruvchi e'lon qilingan, lekin hali qiymat tayinlanmagan tayinlash qiymati emas. Type of null is object Type of undefined is undefined Null qiymat nol, bo'sh yoki mavjud bo'lmagan havolani ifodalovchi ibtidoiy qiymatdir. Aniqlanmagan qiymat o'zgaruvchiga qiymat berilmaganda ishlatiladigan ibtidoiy qiymatdir. O'zgaruvchi uchun qiymat yo'qligini ko'rsatadi O'zgaruvchining o'zi yo'qligini ko'rsatadiitself Primitiv amallarni bajarishda nolga (0) aylantiriladi Primitiv operatsiyalarni bajarishda NaN ga aylantiriladi -
eval() funktsiyasi satr sifatida taqdim etilgan JavaScript kodini baholaydi. Satr JavaScript ifodasi, o'zgaruvchi, bayonot yoki bayonotlar ketma-ketligi bo'lishi mumkin.
console.log(eval('1 + 2')); // 3
-
Quyida oyna va hujjat o'rtasidagi asosiy farqlar keltirilgan,
Window Document Bu har qanday veb-sahifadagi ildiz darajasining elementidir Bu oyna objektining bevosita bolasi. Bu Document Object Model (DOM) sifatida ham tanilgan. Odatiy bo'lib oyna objekti bevosita sahifada mavjud Siz unga window.document yoki hujjat orqali kirishingiz mumkin. Unda alert(), confirm() kabi usullar va hujjat, joylashuv kabi xususiyatlar mavjud U getElementById, getElementsByTagName, createElement va boshqalar kabi usullarni taqdim etadi -
window.history obyekti brauzer tarixini o'z ichiga oladi. Tarixdagi oldingi va keyingi URL-larni back() va next() usullaridan foydalanib yuklashingiz mumkin.
function goBack() { window.history.back(); } function goForward() { window.history.forward(); }
Note: Siz window.history prefiksisiz ham kirishingiz mumkin.
-
Belgilangan mouseEvent getModifierState()modifikator kaliti faollashtirilgan yoki yoqilmaganligini ko'rsatadigan mantiqiy qiymatni qaytarish uchun ishlatiladi. CapsLock, ScrollLock va NumLock kabi modifikatorlar bosilganda faollashadi va yana bosilganda o'chiriladi.
Misol bilan CapsLock-ni yoqish/o'chirish harakatini aniqlash uchun kirish elementini olaylik,
<input type="password" onmousedown="enterInput(event)" /> <p id="feedback"></p> <script> function enterInput(e) { var flag = e.getModifierState('CapsLock'); if (flag) { document.getElementById('feedback').innerHTML = 'CapsLock activated'; } else { document.getElementById('feedback').innerHTML = 'CapsLock not activated'; } } </script>
-
isNaN() funksiyasi qiymat noqonuniy son (Not-a-Number) yoki yoʻqligini aniqlash uchun ishlatiladi. ya'ni, agar qiymat NaN ga teng bo'lsa, bu funktsiya true ni qaytaradi. Aks holda u false qaytaradi.
isNaN('Hello'); //true isNaN('100'); //false
-
Quyida e'lon qilinmagan va aniqlanmagan o'zgaruvchilar o'rtasidagi asosiy farqlar keltirilgan,
undeclared undefined Bu o'zgaruvchilar dasturda mavjud emas va e'lon qilinmaydi Ushbu o'zgaruvchilar dasturda e'lon qilingan, ammo hech qanday qiymat bermagan Agar siz e'lon qilinmagan o'zgaruvchining qiymatini o'qishga harakat qilsangiz, ish vaqti xatosi paydo bo'ladi. Agar siz aniqlanmagan o'zgaruvchining qiymatini o'qishga harakat qilsangiz, aniqlanmagan qiymat qaytariladi. -
Global o'zgaruvchilar kodning butun uzunligi bo'ylab hech qanday qamrovsiz mavjud bo'lganlardir. Var kalit so'zi mahalliy o'zgaruvchini e'lon qilish uchun ishlatiladi, lekin agar uni o'tkazib yuborsangiz, u global o'zgaruvchiga aylanadi.
msg = 'Hello'; // var is missing, it becomes global variable
Global o'zgaruvchilar bilan bog'liq muammo mahalliy va global miqyosdagi o'zgaruvchilar nomlarining ziddiyatidir. Global o'zgaruvchilarga tayanadigan kodni disk raskadrovka qilish va sinab ko'rish ham qiyin.
**[⬆ Back to Top](#table-of-contents)**
-
NaN xususiyati global xususiyat bo'lib, u "Raqam emas" qiymatini ifodalaydi. ya'ni, bu qiymat qonuniy raqam emasligini bildiradi. Dasturda NaN dan foydalanish juda kam uchraydi, lekin uni bir necha hollarda qaytarish qiymati sifatida ishlatish mumkin
Math.sqrt(-1); parseInt('Hello');
isFinite() funksiyasi sonning cheklangan, qonuniy son ekanligini aniqlash uchun ishlatiladi. Qiymat +infinity, -infinity yoki NaN (Not-a-Number) bo'lsa, u noto'g'ri, aks holda u haqiqatni qaytaradi.
```javascript
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false
isFinite(100); // true
```
**[⬆ Back to Top](#table-of-contents)**
-
Voqealar oqimi - veb-sahifada voqea qabul qilish tartibi. Turli xil boshqa elementlarga joylashtirilgan elementni bosganingizda, bosishingiz oʻz manziliga yoki maqsad elementiga yetib borgunga qadar, u global oyna obyekti bilan yuqoridan boshlab, birinchi navbatda, har bir asosiy element uchun bosish hodisasini ishga tushirishi kerak. Voqealar oqimining ikki yo'li mavjud
- Yuqoridan pastga (hodisani suratga olish)
- Pastdan tepaga (voqea ko‘pirish)
-
Voqealar ko'piklanishi - bu hodisa tarqalishining bir turi bo'lib, unda hodisa birinchi navbatda eng ichki maqsad elementida ishga tushadi, so'ngra eng tashqi DOM elementiga yetguncha bir xil joylashtirish ierarxiyasidagi maqsad elementning ajdodlarida (ota-onalarida) ketma-ket ishga tushadi.
-
Voqealarni suratga olish - hodisani tarqatishning bir turi bo'lib, unda hodisa birinchi navbatda eng tashqi element tomonidan ushlanib, so'ngra eng ichki DOM elementiga yetguncha bir xil joylashtirish ierarxiyasidagi maqsadli elementning avlodlarida (bolalarida) ketma-ket ishga tushadi.
-
document.forms[0].submit() dan foydalanib ariza yuborishingiz mumkin. Shaklga kiritilgan barcha ma'lumotlar onsubmit voqea ishlov beruvchisi yordamida yuboriladi
function submit() { document.forms[0].submit(); }
-
window.navigator objekti tashrif buyuruvchining brauzeri OS tafsilotlari haqidagi ma'lumotlarni o'z ichiga oladi. Ba'zi OS xususiyatlari platforma mulki ostida mavjud,
console.log(navigator.platform);
-
Hodisa DOMContentLoadedboshlang'ich HTML hujjati to'liq yuklangan va tahlil qilinganda, aktivlar (uslublar jadvallari, tasvirlar va pastki ramkalar) yuklashni tugatilishini kutmasdan ishga tushiriladi. Holbuki, load hodisasi butun sahifa, shu jumladan barcha bog'liq manbalar (uslublar jadvallari, tasvirlar) yuklanganda ishga tushiriladi.
-
Native objectsECMAScript spetsifikatsiyasi bilan belgilangan JavaScript tilining bir qismi bo'lgan objektlardir. Masalan, ECMAScript spetsifikatsiyasida belgilangan String, Math, RegExp, Object, Function va hokazo asosiy objektlar. Host objectsbrauzer yoki ish vaqti muhiti (tugun) tomonidan taqdim etilgan objektlardir. Masalan, window, XmlHttpRequest, DOM tugunlari va boshqalar xost objektlari sifatida qabul qilinadi. User objectsjavascript kodida belgilangan objektlardir. Masalan, profil ma'lumotlari uchun yaratilgan Foydalanuvchi objektlari.
-
JavaScript kodini tuzatish(debugging) uchun qanday vositalar yoki usullar qo'llaniladiJavaScript code
Javascriptni nosozliklarni tuzatish uchun quyidagi vositalar yoki usullardan foydalanishingiz mumkin
- Chrome Devtools
- debugger statement
- Good old console.log statement
-
Quyida callbacklar bo'yicha va'dalarning ijobiy va salbiy tomonlari ro'yxati keltirilgan,
Pros:
- Bu o'qib bo'lmaydigan callback qilishning oldini oladi
- then() bilan ketma-ket asinxron kodni yozish oson.
- Promise.all() bilan parallel asinxron kodni yozish oson.
- Callbacklarning ba'zi umumiy muammolarini hal qiladi (callback ni juda kech, juda erta, ko'p marta qo'ng'iroq qiling va xatolar/istisnolarni yutib yuboring)
Cons:
- U ozgina murakkab kod yaratadi
- U ozgina murakkab kod yaratadi
-
Atributlar HTML belgilashda, xususiyatlar esa DOMda aniqlanadi. Masalan, quyidagi HTML elementi 2 ta atribut turi va qiymatiga ega,
<input type="text" value="Name:">
Quyidagi kabi atribut qiymatini olishingiz mumkin,
const input = document.querySelector('input'); console.log(input.getAttribute('value')); // Good morning console.log(input.value); // Good morning
Va matn maydonining qiymatini "Xayrli oqshom" ga o'zgartirganingizdan so'ng, u shunday bo'ladi
```javascript
console.log(input.getAttribute('value')); // Good morning
console.log(input.value); // Good evening
```
**[⬆ Back to Top](#table-of-contents)**
-
Bir xil kelib chiqish siyosati JavaScript-ni domen chegaralari bo'ylab so'rovlar qilishiga to'sqinlik qiluvchi siyosatdir. Boshlanish URI sxemasi, xost nomi va port raqamining kombinatsiyasi sifatida aniqlanadi. Agar siz ushbu siyosatni yoqsangiz, u Document Object Model (DOM) yordamida bir sahifadagi zararli skript boshqa veb-sahifadagi maxfiy maʼlumotlarga kirishini oldini oladi.
Void(0) sahifani yangilanishini oldini olish uchun ishlatiladi. Bu kiruvchi nojo'ya ta'sirni bartaraf etishda foydali bo'ladi, chunki u aniqlanmagan ibtidoiy qiymatni qaytaradi. U odatda href="JavaScript:Void(0);" ishlatadigan HTML hujjatlari uchun ishlatiladi. element ichida . ya'ni havolani bosganingizda brauzer yangi sahifani yuklaydi yoki xuddi shu sahifani yangilaydi. Ammo bu ibora yordamida bu xatti-harakatning oldini oladi. Masalan, quyidagi havola sahifani qayta yuklamasdan xabarni bildiradi
```javascript
<a href='JavaScript:void(0);' onclick="alert('Well done!')">
Click Me!
</a>
```
**[⬆ Back to Top](#table-of-contents)**
-
JavaScript kompilyatsiya qilingan til emas, balki talqin qilinadigan tildir. Brauzerdagi tarjimon JavaScript kodini o'qiydi, har bir satrni sharhlaydi va uni ishga tushiradi. Hozirgi vaqtda zamonaviy brauzerlar JavaScript-ni ishga tushirish arafasida bajariladigan bayt-kodga kompilyatsiya qiladigan Just-In-Time (JIT) kompilyatsiyasi deb nomlanuvchi texnologiyadan foydalanadilar.
-
Ha, JavaScript katta-kichik harflarga sezgir tildir. Til kalit so'zlari, o'zgaruvchilar, funksiya va objekt nomlari va boshqa identifikatorlar har doim harflarning izchil bosh harflari bilan kiritilishi kerak. ⬆ Back to Top
-
Yo'q, ular butunlay ikki xil dasturlash tillari va bir-biriga hech qanday aloqasi yo'q. Ammo ularning ikkalasi ham objektga yo'naltirilgan dasturlash tillari va boshqa ko'plab tillar singari, ular asosiy funktsiyalar uchun o'xshash sintaksisga amal qiladilar (agar, boshqacha, uchun, o'tish, buzish, davom ettirish va hokazo).
-
Hodisalar HTML elementlari bilan sodir bo'ladigan "narsalar"dir. HTML sahifalarida JavaScript ishlatilsa, JavaScript reactbu hodisalarda ham bo'lishi mumkin. HTML hodisalariga ba'zi misollar:
- Veb-sahifa yuklash tugallandi
- Kirish maydoni o'zgartirildi
- Tugma bosildi
Keling, tugma elementi uchun bosish hodisasining harakatini tasvirlaylik,
<!doctype html> <html> <head> <script> function greeting() { alert('Hello! Good morning'); } </script> </head> <body> <button type="button" onclick="greeting()">Click me</button> </body> </html>
-
JavaScript Brendan Eich tomonidan 1995 yilda Netscape Communications kompaniyasida ishlagan vaqtida yaratilgan. Dastlab u nomi ostida ishlab chiqilgan , ammo keyinchalik Netscape-ning beta-versiyalarida birinchi marta yuborilganida, Mochatil rasmiy ravishda nomlangan .LiveScript
-
preventDefault() usuli, agar u bekor qilinadigan bo'lsa, hodisani bekor qiladi, ya'ni hodisaga tegishli bo'lgan standart harakat yoki xatti-harakatlar sodir bo'lmaydi. Masalan, “Yuborish” tugmasini bosganingizda shaklni yuborishni oldini olish va giperhavolani bosganda sahifaning URL manzilini ochishning oldini olish keng tarqalgan foydalanish holatlaridir.
document .getElementById('link') .addEventListener('click', function (event) { event.preventDefault(); });
Note: Esda tutingki, barcha tadbirlarni bekor qilish mumkin emas.
-
StopPropagation usuli hodisaning hodisalar zanjirida ko'payishini to'xtatish uchun ishlatiladi. Misol uchun, stopPropagation usuli bilan quyida joylashgan ichki divlar ichki o'rnatilgan div(Div1) ni bosganda standart hodisa tarqalishini oldini oladi.
<p>Click DIV1 Element</p> <div onclick="secondFunc()">DIV 2 <div onclick="firstFunc(event)">DIV 1</div> </div> <script> function firstFunc(event) { alert("DIV 1"); event.stopPropagation(); } function secondFunc() { alert("DIV 2"); } </script>
-
Hodisa ishlov beruvchilarida noto'g'ri xabarni qaytarish quyidagi amallarni bajaradi:
- Avval u brauzerning standart harakatini yoki harakatini to'xtatadi.
- Bu hodisaning DOMni targ'ib qilishiga to'sqinlik qiladi
- Callbackni bajarishni to'xtatadi va chaqirilganda darhol qaytadi..
-
Brauzer obyekti modeli (BOM) JavaScript-ga brauzer bilan “suhbatlashish” imkonini beradi. U navigator, tarix, ekran, joylashuv va oynaning bolalari bo'lgan hujjatdan iborat. Brauzer objekt modeli standartlashtirilmagan va turli brauzerlar asosida o'zgarishi mumkin.
-
setTimeout() usuli funktsiyani chaqirish yoki belgilangan millisekundlardan keyin ifodani baholash uchun ishlatiladi. Masalan, setTimeout usuli yordamida 2 soniyadan so'ng xabarni tizimga kiritamiz,
setTimeout(function () { console.log('Good morning'); }, 2000);
-
setInterval() usuli funksiyani chaqirish yoki ifodani belgilangan oraliqlarda (millisekundlarda) baholash uchun ishlatiladi. Masalan, setInterval usuli yordamida 2 soniyadan so'ng xabarni tizimga kiritamiz,
setInterval(function () { console.log('Good morning'); }, 2000);
-
JavaScript - bu bitta oqimli til. Chunki til spetsifikatsiyasi dasturchiga kod yozishga imkon bermaydi, shunda tarjimon uning qismlarini bir nechta ip yoki jarayonlarda parallel ravishda ishga tushirishi mumkin. Java, go, C++ kabi tillar ko'p bosqichli va ko'p jarayonli dasturlarni yaratishi mumkin.
-
Voqealar delegatsiyasi - bu voqealarni tinglash usuli bo'lib, unda siz asosiy elementni uning ichida sodir bo'ladigan barcha voqealar uchun tinglovchi sifatida topshirasiz.
Misol uchun, agar siz ma'lum bir shakl ichidagi maydon o'zgarishlarini aniqlamoqchi bo'lsangiz, voqea delegatsiyasi texnikasidan foydalanishingiz mumkin,
var form = document.querySelector('#registration-form'); // Listen for changes to fields inside the form form.addEventListener( 'input', function (event) { // Log the field that was changed console.log(event.target); }, false );
-
ECMAScript JavaScript asosini tashkil etuvchi skript tilidir. ECMAScript ECMA xalqaro standartlar tashkiloti tomonidan ECMA-262 va ECMA-402 spetsifikatsiyalarida standartlashtirilgan. ECMAScript ning birinchi nashri 1997 yilda chiqarilgan.
-
JSON (JavaScript Object Notation) - bu ma'lumotlarni almashish uchun ishlatiladigan engil format. U JavaScriptda objektlarni qurish usulida JavaScript tilining kichik to'plamiga asoslangan.
-
Quyida JSON sintaksisi qoidalari ro'yxati keltirilgan
- Ma'lumotlar nom/qiymat juftliklarida
- Ma'lumotlar vergul bilan ajratiladi
- Jingalak qavslar narsalarni ushlab turadi
- Kvadrat qavslar massivlarni ushlab turad
-
Veb-serverga ma'lumotlarni yuborishda ma'lumotlar string formatida bo'lishi kerak. Bunga JSON obyektini stringify() usuli yordamida satrga aylantirish orqali erishishingiz mumkin.
var userJSON = { name: 'John', age: 31 }; var userString = JSON.stringify(user); console.log(userString); //"{"name":"John","age":31}"
-
Veb-serverdan ma'lumotlarni qabul qilishda ma'lumotlar har doim string formatida bo'ladi. Lekin bu satr qiymatini parse() usuli yordamida JavaScript obyektiga aylantirishingiz mumkin.
var userString = '{"name":"John","age":31}'; var userJSON = JSON.parse(userString); console.log(userJSON); // {name: "John", age: 31}
-
Brauzer va server o'rtasida ma'lumot almashishda ma'lumotlar faqat matn bo'lishi mumkin. JSON faqat matn bo'lgani uchun uni serverga va serverdan osongina yuborish va istalgan dasturlash tili tomonidan ma'lumotlar formati sifatida foydalanish mumkin.
-
Progressiv veb-ilovalar (PWA) HTML, CSS va JavaScript-ni o'z ichiga olgan umumiy veb-texnologiyalar yordamida yaratilgan veb-sayt orqali etkazib beriladigan mobil ilovaning bir turi. Ushbu PWA'lar serverlarga joylashtiriladi, URL manzillari orqali kirish mumkin va qidiruv tizimlari tomonidan indekslanadi.
-
ClearTimeout() funksiyasi javascriptda setTimeout() funktsiyasi tomonidan o'rnatilgan vaqt tugashini o'chirish uchun ishlatiladi. ya'ni, setTimeout() funksiyasining qaytish qiymati o'zgaruvchida saqlanadi va taymerni tozalash uchun clearTimeout() funksiyasiga o'tkaziladi.
Masalan, quyidagi setTimeout usuli xabarni 3 soniyadan keyin ko'rsatish uchun ishlatiladi. Bu vaqt tugashi clearTimeout() usuli bilan tozalanishi mumkin.
```javascript
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg =setTimeout(greeting, 3000);
}
function stop() {
clearTimeout(msg);
}
</script>
```
**[⬆ Back to Top](#table-of-contents)**
-
ClearInterval() funksiyasi javascriptda setInterval() funktsiyasi tomonidan o'rnatilgan intervalni tozalash uchun ishlatiladi. ya'ni, setInterval() funktsiyasi tomonidan qaytarilgan qiymat o'zgaruvchida saqlanadi va intervalni tozalash uchun clearInterval() funksiyasiga o'tkaziladi.
Masalan, har 3 soniyada xabarni ko'rsatish uchun quyidagi setInterval usuli qo'llaniladi. Ushbu intervalni clearInterval() usuli bilan tozalash mumkin.
```javascript
<script>
var msg;
function greeting() {
alert('Good morning');
}
function start() {
msg = setInterval(greeting, 3000);
}
function stop() {
clearInterval(msg);
}
</script>
```
**[⬆ Back to Top](#table-of-contents)**
-
locationVanilla JavaScriptda siz oyna objektining xususiyatidan foydalanib, yangi sahifaga yo'naltirishingiz mumkin . Sintaksis quyidagicha bo'ladi:
function redirect() { window.location.href = 'newPage.html'; }
-
Satrda pastki satr bor yoki yo'qligini tekshirishning 3 ta mumkin bo'lgan usuli mavjud,
- Using includes: ES6 tomonidan taqdim etilgan String.prototype.includesqatorni sinash uchun pastki qator mavjud
var mainString = 'hello', subString = 'hell'; mainString.includes(subString);
- Using indexOf: ES5 yoki undan yuqoriroq muhitda siz String.prototype.indexOfpastki qator indeksini qaytaradiganidan foydalanishingiz mumkin. Agar indeks qiymati -1 ga teng bo'lmasa, bu pastki satr asosiy satrda mavjudligini anglatadi.
var mainString = 'hello', subString = 'hell'; mainString.indexOf(subString) !== -1;
- Using RegEx: Kengaytirilgan yechim muntazam ifodalarni sinovdan o'tkazish usulidan ( RegExp.test) foydalanadi.
var mainString = 'hello', regex = /hell/; regex.test(mainString);
-
Oddiy iboralar yordamida JavaScriptda elektron pochta xabarini tasdiqlashingiz mumkin. Tasdiqlashlarni mijoz tomoni o'rniga server tomonida qilish tavsiya etiladi. Chunki javascript mijoz tomonida o'chirib qo'yilishi mumkin.
function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }
The above regular expression accepts unicode characters.
-
window.location.hrefJoriy url yo'lini olish uchun ifodadan foydalanishingiz mumkin va URLni yangilash uchun ham xuddi shu ifodadan foydalanishingiz mumkin . Siz document.URLfaqat o'qish uchun ham foydalanishingiz mumkin, ammo bu yechim FFda muammolarga ega.
console.log('location.href', window.location.href); // Returns full URL
-
Quyidagi Locationobyekt xususiyatlari sahifaning URL komponentlariga kirish uchun ishlatilishi mumkin,
-
href - butun URL - protokol - URL manzilining protokoli
- xost - URL manzilining xost nomi va porti
- hostname - URL manzilining xost nomi
- port - URL manzilidagi port raqami
- pathname - URL manzilining yo'l nomi
- qidiruv - URLning so'rov qismi
- xesh - URLning langar qismi
-
-
Javascriptda so'rovlar qatori qiymatlarini olish uchun URLSearchParams dan foydalanishingiz mumkin. URL so'rovlar qatoridan mijoz kodi qiymatini olish uchun misolni ko'rib chiqaylik,
const urlParams = new URLSearchParams(window.location.search); const clientCode = urlParams.get('clientCode');
-
objektda kalit mavjudligi yoki yo'qligini uchta yondashuv yordamida tekshirishingiz mumkin,
- Using in operator: objektda kalit mavjudmi yoki yo'qmi, in operatoridan foydalanishingiz mumkin
'key' in obj;
Agar kalit mavjud emasligini tekshirishni istasangiz, qavsdan foydalanishni unutmang,
!('key' in obj);
- Using hasOwnProperty method: Siz hasOwnPropertyobjekt namunasining xususiyatlarini (va meros qilib olingan xususiyatlarni emas) ayniqsa sinab ko'rish uchun foydalanishingiz mumkin.
obj.hasOwnProperty('key'); // true
- Using undefined comparison: Agar objektdan mavjud bo'lmagan xususiyatga kirsangiz, natija aniqlanmagan. Mulkning mavjudligini aniqlash uchun xususiyatlarni undefined bilan solishtiramiz.
const user = { name: 'John', }; console.log(user.name !== undefined); // true console.log(user.nickName !== undefined); // false
-
for-inJavascript objekti bo'ylab aylanish uchun tsikldan foydalanishingiz mumkin . Shuningdek, siz olgan kalit objektning haqiqiy mulki ekanligiga va prototipdan foydalanish hasOwnPropertyusulidan kelib chiqmasligiga ishonch hosil qilishingiz mumkin.
var object = { k1: 'value1', k2: 'value2', k3: 'value3', }; for (var key in object) { if (object.hasOwnProperty(key)) { console.log(key + ' -> ' + object[key]); // k1 -> value1 ... } }
-
ECMAScript versiyalariga asoslangan turli xil echimlar mavjud
- Using Object entries(ECMA 7+): Siz konstruktor turi bilan birga objekt yozuvlari uzunligidan foydalanishingiz mumkin.
Object.entries(obj).length === 0 && obj.constructor === Object; // Since date object length is 0, you need to check constructor check as well
- Using Object keys(ECMA 5+): Konstruktor turi bilan birga objekt tugmachalari uzunligidan ham foydalanishingiz mumkin.
Object.keys(obj).length === 0 && obj.constructor === Object; // Since date object length is 0, you need to check constructor check as well
- Using for-in with hasOwnProperty(Pre-ECMA 5): bilan for-in dan foydalanish: hasOwnProperty bilan birga for-in tsiklidan foydalanishingiz mumkin
function isEmpty(obj) { for (var prop in obj) { if (obj.hasOwnProperty(prop)) { return false; } } return JSON.stringify(obj) === JSON.stringify({}); }
-
Argumentlar obyekti funksiyalar ichida foydalanish mumkin boʻlgan massivga oʻxshash obyekt boʻlib, u funksiyaga uzatilgan argumentlar qiymatlarini oʻz ichiga oladi. Masalan, sum funktsiyasi ichida argumentlar objektidan qanday foydalanishni ko'rib chiqamiz,
function sum() { var total = 0; for (var i = 0, len = arguments.length; i < len; ++i) { total += arguments[i]; } return total; } sum(1, 2, 3); // returns 6
Note: Argumentlar obyektida massiv usullarini qo‘llay olmaysiz. Lekin siz quyidagi kabi oddiy massivga aylantira olasiz.
var argsArray = Array.prototype.slice.call(arguments);
-
Siz bosh harfdagi birinchi harf bilan satr yaratish uchun charAt, toUpperCase va slice usullari kabi qator usullardan foydalanadigan funksiya yaratishingiz mumkin.
function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }
-
For-loop javascriptda tez-tez ishlatiladigan iteratsiya sintaksisidir. Buning ham ijobiy, ham salbiy tomonlari bor
- Har qanday muhitda ishlaydi
- Siz tanaffus va davom etish oqimini boshqarish bayonotlaridan foydalanishingiz mumkin
- Too verbose
- Imperative
- You might face one-by-off errors
-
new Date()Joriy sana va vaqtni o'z ichiga olgan yangi Sana objektini yaratish uchun foydalanishingiz mumkin . Masalan, joriy sanani mm/dd/yyyy da ko'rsatamiz
var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; document.write(today);
-
Taqqoslash operatorlari (==, !=, === va !== operatorlari) oʻrniga sana qiymatlarini solishtirish uchun date.getTime() usulidan foydalanishingiz kerak.
var d1 = new Date(); var d2 = new Date(d1); console.log(d1.getTime() === d2.getTime()); //True console.log(d1 === d2); // False
-
String.prototype.startsWith()Satrning boshqa satr bilan boshlanishi yoki boshlanmasligini tekshirish uchun ECMAScript 6 usulidan foydalanishingiz mumkin . Ammo u hali barcha brauzerlarda qo'llab-quvvatlanmaydi. Keling, ushbu foydalanishni ko'rish uchun misolni ko'rib chiqaylik,
'Good morning'.startsWith('Good'); // true 'Good morning'.startsWith('morning'); // false
-
JavaScript satrning boshida yoki oxirida mavjud bo'lgan bo'shliqlarni kesish uchun satr turlari bo'yicha kesish usulini taqdim etdi.
' Hello World '.trim(); //Hello World
Agar brauzeringiz(<IE9) bu usulni qo'llab-quvvatlamasa, quyida polyfilldan foydalanishingiz mumkin.
if (!String.prototype.trim) { (function () { // Make sure we trim BOM and NBSP var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; String.prototype.trim = function () { return this.replace(rtrim, ''); }; })(); }
-
objektga yangi xususiyatlar qo'shishning ikkita mumkin bo'lgan echimi mavjud. Ushbu yechimlarni tushuntirish uchun oddiy objektni olaylik.
var object = { key1: value1, key2: value2, };
- Using dot notation: Bu yechim xususiyat nomini bilganingizda foydalidir
object.key3 = 'value3';
- Using square bracket notation: Bu yechim xususiyat nomi dinamik ravishda aniqlanganda foydalidir.
obj['key3'] = 'value3';
-
Yo'q, bu maxsus operator emas. Ammo bu birin-ketin ikkita standart operatorning kombinatsiyasi,
- Mantiqiy emas (!)
- Prefiksning kamayishi (--)
Avvaliga qiymat bittaga kamaydi, so'ngra haqiqat/noto'g'ri qiymatni aniqlash uchun nolga teng yoki yo'qligini tekshirish uchun sinovdan o'tkazildi.
-
||Standart qiymatni berish uchun tayinlash ifodasida mantiqiy yoki operatordan foydalanishingiz mumkin . Sintaksis quyidagi kabi ko'rinadi,
var a = b || c;
Yuqoridagi ifodaga ko'ra, "a" o'zgaruvchisi "b" noto'g'ri bo'lsa (agar null, noto'g'ri, aniqlanmagan, 0, bo'sh satr yoki NaN bo'lsa), aks holda "a" o'zgaruvchisi "c" qiymatini oladi. "b" qiymati.
-
Siz “\” belgisidan keyin qator terminatori yordamida koʻp qatorli satr harflarini belgilashingiz mumkin.
var str = 'This is a \ very lengthy \ sentence!';
Ammo "" belgisidan keyin bo'sh joy bo'lsa, kod aynan bir xil ko'rinadi, lekin u SyntaxErrorni keltirib chiqaradi.
-
Ilova qobig'i (yoki ilovalar qobig'i) arxitekturasi mahalliy ilovalarda ko'rganingiz kabi foydalanuvchilaringiz ekraniga ishonchli va bir zumda yuklanadigan Progressive Web ilovasini yaratish usullaridan biridir. Bu tarmoqsiz ekranga dastlabki HTML-ni tezda olish uchun foydalidir.
-
Ha, biz funktsiyalar uchun xususiyatlarni belgilashimiz mumkin, chunki funktsiyalar ham objektlardir.
fn = function (x) { //Function code goes here }; fn.name = 'John'; fn.profile = function (y) { //Profile code goes here };
-
function.lengthFunktsiya kutayotgan parametrlar sonini topish uchun sintaksisdan foydalanishingiz mumkin . sumKeling , raqamlar yig'indisini hisoblash uchun funktsiyaga misol keltiraylik ,
function sum(num1, num2, num3, num4) { return num1 + num2 + num3 + num4; } sum.length; // 4 is the number of parameters expected.
-
Polyfill - bu uni qo'llab-quvvatlamaydigan eski brauzerlarda zamonaviy funksiyalarni ta'minlash uchun ishlatiladigan JS kodining bir qismi. Masalan, Silverlight plaginining polyfill dasturidan Microsoft Internet Explorer 7 da HTML Canvas elementining funksionalligini taqlid qilish uchun foydalanish mumkin.
-
Break iborasi tsikldan “sakrab chiqish” uchun ishlatiladi. ya'ni, tsiklni buzadi va tsikldan keyin kodni bajarishda davom etadi.
for (i = 0; i < 10; i++) { if (i === 5) { break; } text += 'Number: ' + i + '<br>'; }
Davom etish iborasi tsikldagi bir iteratsiyadan "sakrab o'tish" uchun ishlatiladi. ya'ni, agar belgilangan shart yuzaga kelsa, u bir iteratsiyani (siklda) buzadi va tsikldagi keyingi iteratsiya bilan davom etadi.
for (i = 0; i < 10; i++) { if (i === 5) { continue; } text += 'Number: ' + i + '<br>'; }
-
Yorliq bayonoti bizga JavaScriptda tsikllar va bloklarni nomlash imkonini beradi. Keyin biz ushbu teglardan kodga keyinroq murojaat qilish uchun foydalanishimiz mumkin. Masalan, yorliqli quyidagi kod raqamlar bir xil bo'lganda chop etishdan saqlaydi,
var i, j; loop1: for (i = 0; i < 3; i++) { loop2: for (j = 0; j < 3; j++) { if (i === j) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // Output is: // "i = 1, j = 0" // "i = 2, j = 0" // "i = 2, j = 1"
-
Barcha deklaratsiyalarni har bir skript yoki funksiyaning yuqori qismida saqlash tavsiya etiladi. Buni amalga oshirishning afzalliklari,
- Tozaroq kod beradi
- Bu mahalliy o'zgaruvchilarni qidirish uchun yagona joyni ta'minlaydi
- Keraksiz global o'zgaruvchilardan qochish oson
- Bu istalmagan qayta deklaratsiyalar ehtimolini kamaytiradi
-
Quyidagi imtiyozlar tufayli o'zgaruvchilarni ishga tushirish tavsiya etiladi,
- Bu toza kodni beradi
- U o'zgaruvchilarni ishga tushirish uchun yagona joyni taqdim etadi
- Kodda aniqlanmagan qiymatlardan saqlaning
-
dan foydalangan holda yangi objektlar yaratishdan qochish tavsiya etiladi new Object(). Buning o'rniga objektlarni yaratish uchun uning turiga qarab qiymatlarni ishga tushirishingiz mumkin.
- Yangi Object() oʻrniga {} ni belgilang
- new String() o'rniga "" belgilang
- Yangi raqam o'rniga 0 belgilang()
- new Boolean() o'rniga yolg'onni belgilang
- Yangi Array() oʻrniga [] ni belgilang
- Yangi RegExp() oʻrniga /()/ ni belgilang
- Yangi Function() oʻrniga (){} funksiyasini tayinlang
Siz ularni misol sifatida belgilashingiz mumkin,
var v1 = {}; var v2 = ''; var v3 = 0; var v4 = false; var v5 = []; var v6 = /()/; var v7 = function () {};
-
JSON massivlari kvadrat qavslar ichida yoziladi va massivlar javascript objektlarini o'z ichiga oladi. Masalan, foydalanuvchilarning JSON massivi quyidagi kabi bo'ladi
"users":[ {"firstName":"John", "lastName":"Abrahm"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Shane", "lastName":"Warn"} ]
-
Tasodifiy butun sonlarni qaytarish uchun Math.random() funksiyasini Math.floor() bilan ishlatishingiz mumkin. Misol uchun, agar siz 1 dan 10 gacha bo'lgan tasodifiy butun sonlarni yaratmoqchi bo'lsangiz, ko'paytirish koeffitsienti 10 bo'lishi kerak,
Math.floor(Math.random() * 10) + 1; // returns a random integer from 1 to 10 Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100
Note: Math.random() 0 (shu jumladan) va 1 (eksklyuziv) orasidagi tasodifiy sonni qaytaradi.
-
Butun sonlarni malum miqdor orasida chop etish uchun tasodifiy butun sonlar funksiyasini yoza olasizmi?with in a range
Ha, siz min va maksimal o'rtasidagi tasodifiy sonni qaytarish uchun tegishli tasodifiy funktsiyani yaratishingiz mumkin (ikkalasi ham kiritilgan)
function randomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } randomInteger(1, 100); // returns a random integer from 1 to 100 randomInteger(1, 1000); // returns a random integer from 1 to 1000
-
Daraxtning silkinishi o'lik kodni yo'q qilishning bir shaklidir. Bu shuni anglatadiki, foydalanilmagan modullar qurish jarayonida to'plamga kiritilmaydi va buning uchun u ES2015 modul sintaksisining statik tuzilishiga (ya'ni import va eksport) tayanadi. Dastlab bu ES2015 modul to'plami tomonidan ommalashgan rollup.
-
Tree Shaking har qanday dasturda kod hajmini sezilarli darajada kamaytirishi mumkin. Ya'ni, biz sim orqali qancha kamroq kod yuborsak, dastur shunchalik samarali bo'ladi. Misol uchun, agar biz shunchaki SPA ramkalaridan foydalangan holda "Salom dunyo" ilovasini yaratmoqchi bo'lsak, u bir necha MB vaqtni oladi, lekin daraxtni silkitib, uning hajmini atigi bir necha yuz KBgacha kamaytirishi mumkin. Daraxtlarni silkitish Rollup va Webpack bundlerlarida amalga oshiriladi.
-
Yo'q, bu xavfsizlik muammosini keltirib chiqaradigan o'zboshimchalik kodini ishga tushirishga imkon beradi. Bizga ma'lumki, eval() funksiyasi matnni kod sifatida ishlatish uchun ishlatiladi. Ko'pgina hollarda, uni ishlatish shart emas.
-
Muntazam ibora qidiruv sxemasini tashkil etuvchi belgilar ketma-ketligidir. Matndagi ma'lumotlarni qidirish uchun ushbu qidiruv namunasidan foydalanishingiz mumkin. Bulardan matn qidirish va matnni almashtirish operatsiyalarining barcha turlarini bajarish uchun foydalanish mumkin. Keling, sintaksis formatini ko'rib chiqaylik,
/pattern/modifiers;
Masalan, katta-kichik harflarga sezgir bo'lmagan foydalanuvchi nomi bilan muntazam ifoda yoki qidiruv namunasi:
/John/i;
-
Muntazam ifodalarda ikkita string usuli mavjud: search() va replace(). Search() usuli moslikni qidirish uchun ifodadan foydalanadi va mos keladigan joyni qaytaradi.
var msg = 'Hello John'; var n = msg.search(/John/i); // 6
Replace() usuli naqsh almashtirilgan o'zgartirilgan satrni qaytarish uchun ishlatiladi.
var msg = 'Hello John'; var n = msg.replace(/John/i, 'Buttler'); // Hello Buttler
-
Modifikatorlar katta-kichik va global qidiruvlarni amalga oshirish uchun ishlatilishi mumkin. Keling, ba'zi modifikatorlarni sanab o'tamiz,
Modifier Description i Katta-kichik harflarni sezmaydigan moslikni bajaring g Birinchi o'yinda to'xtamasdan, global o'yinni bajaring m Ko'p qatorli moslikni bajaring Keling, global modifikatorga misol keltiraylik,
var text = 'Learn JS one by one'; var pattern = /one/g; var result = text.match(pattern); // one,one
-
Muntazam ifodalar belgilarni moslashtirish uchun naqshlar guruhini taqdim etadi. Asosan, ular 3 turga bo'linadi,
- Brackets: Bu belgilar qatorini topish uchun ishlatiladi. Masalan, quyida ba'zi foydalanish holatlari keltirilgan,
- [abc]: Qavslar (a,b,c) orasidagi har qanday belgilarni topish uchun ishlatiladi.
- [0-9]: Qavslar orasidagi istalgan raqamlarni topish uchun ishlatiladi
- (a|b): | bilan ajratilgan har qanday muqobillarni topish uchun ishlatiladi
- Metacharacters: Bular alohida ma'noga ega bo'lgan belgilar, Masalan, quyida ba'zi foydalanish holatlari,
- \d: raqamni topish uchun ishlatiladi
- \s: bo'shliq belgisini topish uchun ishlatiladi
- \b: so'z boshida yoki oxirida moslikni topish uchun ishlatiladi
- Quantifiers: Bu miqdorlarni aniqlash uchun foydalidir Masalan, quyida ba'zi foydalanish holatlari keltirilgan,
- n+: kamida bitta n ni o'z ichiga olgan har qanday satr uchun mosliklarni topish uchun ishlatiladi
- n*: n ning nol yoki undan ortiq takrorlanishini o‘z ichiga olgan har qanday satr uchun mosliklarni topish uchun foydalaniladi.
- n?: n ning nol yoki bitta takrorlanishini o'z ichiga olgan har qanday satr uchun mosliklarni topish uchun ishlatiladi
- Brackets: Bu belgilar qatorini topish uchun ishlatiladi. Masalan, quyida ba'zi foydalanish holatlari keltirilgan,
-
RegExp objekti oldindan belgilangan xususiyatlar va usullarga ega muntazam ifoda objektidir. Keling, RegExp objektidan oddiy foydalanishni ko'rib chiqaylik,
var regexp = new RegExp('\\w+'); console.log(regexp); // expected output: /\w+/
-
Siz naqsh uchun satrni izlash va natijaga qarab rost yoki yolgʻonni qaytarish uchun test() muntazam ifoda usulidan foydalanishingiz mumkin.
var pattern = /you/; console.log(pattern.test('How are you?')); //true
-
Exec usulining maqsadi test usuliga o'xshaydi, lekin u ko'rsatilgan satrda moslikni qidirishni amalga oshiradi va rost/noto'g'ri qaytarish o'rniga natija massivini yoki nullni qaytaradi.
var pattern = /you/; console.log(pattern.exec('How are you?')); //["you", index: 8, input: "How are you?", groups: undefined]
-
HTML elementining ichki uslubi yoki sinf nomini JavaScript yordamida o'zgartirishingiz mumkin
- Using style property: Inline uslubini uslub xususiyatidan foydalanib o'zgartirishingiz mumkin
document.getElementById('title').style.fontSize = '30px';
- **Using ClassName property:**className xususiyatidan foydalanib, element sinfini o'zgartirish oson
document.getElementById('title').className = 'custom-title';
-
Chiqish bo'ladi 33. Raqamli qiymatlar bo'lganligi sababli 1, 2birinchi ikki raqamning natijasi raqamli qiymat bo'ladi 3. Keyingi raqam qator tipidagi qiymatdir, chunki raqamli qiymat 3va satr turi qiymatining qo'shilishi 3faqat birlashtiruvchi qiymat bo'ladi 33.
-
Nosozliklarni tuzatuvchi bayonot to'xtash nuqtasini o'rnatish kabi har qanday mavjud disk raskadrovka funksiyasini chaqiradi. Agar nosozliklarni tuzatish funksiyasi mavjud bo'lmasa, bu bayonot hech qanday ta'sir qilmaydi. Masalan, quyidagi funksiyada tuzatuvchi bayonoti kiritilgan. Shunday qilib, skript manbasidagi to'xtash nuqtasi kabi tuzatuvchi bayonotida bajarish to'xtatiladi.
function getProfile() { // code goes here debugger; // code goes here }
-
Nosozliklarni tuzatuvchi bayonot bajarilgandan so'ng va disk raskadrovka oynasi ochilgandan so'ng JavaScript kodida to'xtash nuqtalarini o'rnatishingiz mumkin. Har bir to'xtash nuqtasida JavaScript ishlashni to'xtatadi va sizga JavaScript qiymatlarini tekshirish imkonini beradi. Qiymatlarni tekshirgandan so'ng, o'ynash tugmasi yordamida kodning bajarilishini davom ettirishingiz mumkin.
-
Yo'q, siz ajratilgan so'zlarni o'zgaruvchilar, teglar, objektlar yoki funktsiyalar nomi sifatida ishlata olmaysiz. Keling, bitta oddiy misolni ko'rib chiqaylik,
var else = "hello"; // Uncaught SyntaxError: Unexpected token else
-
Siz foydalanuvchining mobil qurilmani ko'rish yoki ko'rmasligiga qarab haqiqiy yoki noto'g'ri qiymatni qaytaradigan regexdan foydalanishingiz mumkin.
window.mobilecheck = function () { var mobileCheck = false; (function (a) { if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( a ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( a.substr(0, 4) ) ) mobileCheck = true; })(navigator.userAgent || navigator.vendor || window.opera); return mobileCheck; };
-
Siz shunchaki qurilmalar ro'yxatini ko'rib chiqish va foydalanuvchi agenti biror narsaga mos kelishini tekshirish orqali mobil brauzerlarni aniqlashingiz mumkin. Bu RegExp-dan foydalanish uchun muqobil yechim,
function detectmob() { if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ) { return true; } else { return false; } }
-
Javascript yordamida tasvirni dasturiy ravishda olishingiz va o'lchamlarni (kenglik va balandlik) tekshirishingiz mumkin.
var img = new Image(); img.onload = function () { console.log(this.width + 'x' + this.height); }; img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
-
Brauzerlar JavaScriptdan sinxron HTTP so'rovlarini amalga oshirish uchun ishlatilishi mumkin bo'lgan XMLHttpRequest obyektini taqdim etadi.
function httpGet(theUrl) { var xmlHttpReq = new XMLHttpRequest(); xmlHttpReq.open('GET', theUrl, false); // false for synchronous request xmlHttpReq.send(null); return xmlHttpReq.responseText; }
-
Brauzerlar XMLHttpRequest objektini taqdim etadi, undan JavaScriptdan 3-parametrni rost deb o'tkazish orqali asinxron HTTP so'rovlarini amalga oshirish uchun foydalanish mumkin.
function httpGetAsync(theUrl, callback) { var xmlHttpReq = new XMLHttpRequest(); xmlHttpReq.onreadystatechange = function () { if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) callback(xmlHttpReq.responseText); }; xmlHttp.open('GET', theUrl, true); // true for asynchronous xmlHttp.send(null); }
-
Bir vaqt mintaqasidagi sanalarni boshqasiga aylantirish uchun toLocaleString() usulidan foydalanishingiz mumkin. Misol uchun, hozirgi sanani quyida keltirilgan Britaniya ingliz vaqt mintaqasiga aylantiramiz,
console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //29/06/2019, 09:56:00
-
Oyna hajmini topish uchun siz innerWidth, innerHeight, clientWidth, clientHeight xususiyatlaridan, hujjat elementidan va hujjat tanasi obyektlaridan foydalanishingiz mumkin. Keling, oyna yoki hujjat hajmini hisoblash uchun ushbu xususiyatlarning kombinatsiyasidan foydalanamiz,
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-
Shartli (uchlik) operator uchta operandni qabul qiladigan yagona JavaScript operatori bo'lib, if operatorlari uchun yorliq vazifasini bajaradi.
var isAuthenticated = false; console.log( isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated' ); //Sorry, you are not authenticated
-
Ha, zanjirni if … else if … else if … else zanjiriga oʻxshash shartli operatorlarda qoʻllashingiz mumkin. Sintaksis quyidagi kabi bo'ladi,
function traceValue(someParam) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } // The above conditional operator is equivalent to: function traceValue(someParam) { if (condition1) { return value1; } else if (condition2) { return value2; } else if (condition3) { return value3; } else { return value4; } }
-
Sahifani yuklagandan so'ng JavaScript-ni turli yo'llar bilan bajarishingiz mumkin,
- window.onload:
window.onload = function ...
- document.onload:
document.onload = function ...
- body onload:
<body onload="script();">
-
Objekt - bu
__proto__qidirish zanjirida usullarni va hokazolarni hal qilish uchun ishlatiladigan haqiqiy objekt. Holbuki , yangi objekt bilan objekt yaratishda prototypequrish uchun foydalaniladigan objekt.__proto__new Employee().__proto__ === Employee.prototype; new Employee().prototype === undefined;
-
JavaScriptdagi har bir bayonotdan keyin nuqta-vergul qo'yish tavsiya etiladi. Misol uchun, quyidagi holatda nuqtali vergul yo'qligi sababli ish vaqtida ".. bu funktsiya emas" xatosini chiqaradi.
// define a function var fn = (function () { //... })( // semicolon missing at this line // then execute some code inside a closure function () { //... } )();
and it will be interpreted as
var fn = (function () { //... })(function () { //... })();
Bunday holda, biz ikkinchi funktsiyani birinchi funktsiyaga argument sifatida o'tkazamiz va keyin birinchi funktsiya chaqiruvining natijasini funktsiya sifatida chaqirishga harakat qilamiz. Demak, ikkinchi funksiya ish vaqtida "... funksiya emas" xatosi bilan ishlamay qoladi.
-
objektni muzlatish uchun freeze() usuli qo'llaniladi. objektni muzlatish objektga yangi xususiyatlar qo'shishga imkon bermaydi, mavjud xususiyatlarning sanab o'tishini, sozlanishini yoki yozilishini o'chirishni va o'zgartirishni oldini oladi. ya'ni, u o'tgan objektni qaytaradi va muzlatilgan nusxani yaratmaydi.
const obj = { prop: 100, }; Object.freeze(obj); obj.prop = 200; // Throws an error in strict mode console.log(obj.prop); //100
Note: Agar o'tkazilgan argument objekt bo'lmasa, u TypeErrorni keltirib chiqaradi.
-
Quyida muzlatish usulidan foydalanishning asosiy afzalliklari keltirilgan,
- U objektlar va massivlarni muzlatish uchun ishlatiladi.
- U objektni o'zgarmas qilish uchun ishlatiladi.
-
objektga yo'naltirilgan paradigmada mavjud API mavjud kontekstdan tashqari kengaytirilishi, o'zgartirilishi yoki qayta ishlatilishi mo'ljallanmagan ayrim elementlarni o'z ichiga oladi. Shuning uchun u finalturli tillarda ishlatiladigan kalit so'z sifatida ishlaydi.
-
Quyidagi kabi brauzer tilini afzal ko'rish uchun navigator objektidan foydalanishingiz mumkin,
var language = (navigator.languages && navigator.languages[0]) || // Chrome / Firefox navigator.language || // All browsers navigator.userLanguage; // IE <= 10 console.log(language);
-
Sarlavha har bir so'zning birinchi harfi bosh harf bilan yozilishini anglatadi. Quyidagi funksiyadan foydalanib, satrni sarlavha holatiga aylantirishingiz mumkin,
function toTitleCase(str) { return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); } toTitleCase('good morning john'); // Good Morning John
-
JavaScript o'chirilgan yoki o'chirilganligini aniqlash uchun tegdan foydalanishingiz mumkin . Ichki kod bloki JavaScript o'chirilganida bajariladi va odatda sahifa JavaScriptda yaratilganda muqobil tarkibni ko'rsatish uchun ishlatiladi.
<script type="javascript"> // JS related code goes here </script> <noscript> <a href="next_page.html?noJS=true">JavaScript is disabled in the page. Please click Next Page</a> </noscript>
-
Operator ma'lum bir qiymat yoki operandni (matematik va mantiqiy hisob-kitoblar) boshqarishga qodir. Quyidagi kabi JavaScript tomonidan qo'llab-quvvatlanadigan turli operatorlar mavjud,
- Arithmetic Operators: + (Qo‘shish),– (ayirish), * (ko‘paytirish), / (bo‘lish), % (modul), + + (ko‘paytirish) va – – (kamaytirish) ni o‘z ichiga oladi.
- Comparison Operators: &&(Mantiqiy VA),||(Mantiqiy OR),!(Mantiqiy EMAS) ni oʻz ichiga oladi.
- Logical Operators: &&(Mantiqiy VA),||(Mantiqiy OR),!(Mantiqiy EMAS) ni oʻz ichiga oladi.
- Assignment Operators: o'z ichiga oladi: = (topshiriq operatori), += (qo'shish va tayinlash operatori), – = (ayirish va belgilash operatori), *= (ko'paytirish va belgilash), /= (bo'lish va belgilash), %= (modullar va tayinlash )
- Ternary Operators: U shartli(: ?) operatorni o'z ichiga oladi
- typeof Operator: o'zgaruvchining turini topish uchun foydalaniladi. Sintaksis o'xshayditypeof variable
-
Rest parametri funksiya parametrlarini boshqarishning takomillashtirilgan usuli bo‘lib, u bizga cheksiz miqdordagi argumentlarni massiv sifatida ko‘rsatishga imkon beradi. Sintaksis quyidagi kabi bo'ladi,
function f(a, b, ...theArgs) { // ... }
Masalan, parametrlarning dinamik soni bo'yicha hisoblash uchun yig'indi misolini olaylik,
function total(…args){ let sum = 0; for(let i of args){ sum+=i; } return sum; } console.log(fun(1,2)); //3 console.log(fun(1,2,3)); //6 console.log(fun(1,2,3,4)); //13 console.log(fun(1,2,3,4,5)); //15
Note: Rest parametri ES2015 yoki ES6 da qo'shilgan
-
Quyida JavaScriptda ishlatiladigan bitli mantiqiy operatorlar ro'yxati keltirilgan
function someFunc(a,…b,c){ //You code goes here return; }
-
Below are the list of bitwise logical operators used in JavaScript
- Bit boʻyicha VA ( & )
- Bit bo'yicha YOKI ( | )
- Bitwise XOR ( ^ )
- Bit yo'nalishi bo'yicha EMAS ( ~ )
- Chapga siljitish ( << )
- O'ngga siljish ( >> )
- Nol toʻldirish Oʻngga siljish ( >>> )
-
Spread operatori takrorlanuvchilarni (massivlar / objektlar / satrlar) bitta argumentlar / elementlarga kengaytirilishiga imkon beradi. Keling, bu xatti-harakatni ko'rish uchun misol keltiraylik,
function calculateSum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(calculateSum(...numbers)); // 6
-
Object.isFrozen() usuli objektning muzlatilgan yoki muzlatilmaganligini aniqlash uchun ishlatiladi. Agar quyidagi shartlarning barchasi to'g'ri bo'lsa, objekt muzlatilgan hisoblanadi,
- Agar u kengaytirilmaydigan bolsa (not extandable).
- Agar uning barcha xususiyatlari konfiguratsiya qilinmasa.
- Agar uning barcha ma'lumotlar xususiyatlari yozilmaydigan bo'lsa. Foydalanish quyidagicha bo'ladi,
const object = { property: 'Welcome JS world', }; Object.freeze(object); console.log(Object.isFrozen(object));
-
Object.is() usuli ikkita qiymat bir xil qiymat ekanligini aniqlaydi. Misol uchun, har xil turdagi qiymatlar bilan foydalanish,
Object.is('hello', 'hello'); // true Object.is(window, window); // true Object.is([], []); // false
Quyidagilardan biri bajarilsa, ikkita qiymat bir xil bo'ladi:
- both undefined
- both null
- both true or both false
- both strings of the same length with the same characters in the same order
- both the same object (means both object have same reference)
- both numbers and both +0 both -0 both NaN both non-zero and both not NaN and both have the same value.
-
Objekt isusulining ba'zi ilovalari quyidagilardir:
- It is used for comparison of two strings.
- It is used for comparison of two numbers.
- It is used for comparing the polarity of two numbers.
- It is used for comparison of two objects.
-
Bir yoki bir nechta manba objektlaridan maqsadli objektga qiymatlar va xususiyatlarni nusxalash uchun ishlatiladigan Object.assign() usulidan foydalanishingiz mumkin. U maqsadli objektdan ko'chirilgan xususiyatlar va qiymatlarga ega bo'lgan maqsadli objektni qaytaradi. Sintaksis quyidagi kabi bo'ladi,
Object.assign(target, ...sources);
Keling, bitta manba va bitta maqsadli objekt bilan misol qilaylik,
const target = { a: 1, b: 2 }; const source = { b: 3, c: 4 }; const returnedTarget = Object.assign(target, source); console.log(target); // { a: 1, b: 3, c: 4 } console.log(returnedTarget); // { a: 1, b: 3, c: 4 }
Yuqoridagi kodda kuzatilganidek, bmanbadan maqsadgacha umumiy xususiyat( ) mavjud, shuning uchun uning qiymati qayta yozildi.
-
Quyida Object.assign() usulining asosiy ilovalari keltirilgan.
- U objektni klonlash uchun ishlatiladi.
- U bir xil xususiyatlarga ega objektlarni birlashtirish uchun ishlatiladi.
-
Proksi-server objekti mulkni qidirish, tayinlash, ro'yxatga olish, funktsiyani chaqirish va hokazo kabi asosiy operatsiyalar uchun maxsus xatti-harakatni aniqlash uchun ishlatiladi. Sintaksis quyidagicha bo'ladi:
var p = new Proxy(target, handler);
Keling, proksi obyektiga misol keltiraylik,
var handler = { get: function (obj, prop) { return prop in obj ? obj[prop] : 100; }, }; var p = new Proxy({}, handler); p.a = 10; p.b = null; console.log(p.a, p.b); // 10, null console.log('c' in p, p.c); // false, 100
Yuqoridagi kodda getproksi-serverda operatsiya bajarilganda uning xatti-harakatlarini belgilaydigan ishlov beruvchidan foydalanadi
-
Object.seal () usuli objektga yangi xususiyatlar qo'shilishining oldini olish va barcha mavjud xususiyatlarni sozlanmaydigan qilib belgilash orqali uni muhrlash uchun ishlatiladi. Ammo mavjud xususiyatlarning qiymatlari yozilishi mumkin ekan, o'zgartirilishi mumkin. Seal() usuli haqida ko'proq tushunish uchun quyidagi misolni ko'rib chiqaylik
const object = { property: 'Welcome JS world', }; Object.seal(object); object.property = 'Welcome to object world'; console.log(Object.isSealed(object)); // true delete object.property; // You cannot delete when sealed console.log(object.property); //Welcome to object world
-
Quyida Object.seal() usulining asosiy ilovalari keltirilgan,
- U objektlar va massivlarni muhrlash uchun ishlatiladi.
- U objektni o'zgarmas qilish uchun ishlatiladi.
-
Agar objekt Object.freeze() usuli yordamida muzlatilgan bo'lsa, uning xususiyatlari o'zgarmas bo'lib qoladi va ularda hech qanday o'zgartirishlar kiritilmaydi, objekt Object.seal() usuli yordamida muhrlangan bo'lsa, o'zgarishlar mavjud xususiyatlarda amalga oshirilishi mumkin. objektning.
-
Objekt muhrlangan yoki muhrlanmaganligini aniqlash uchun Object.isSealed() usuli qo'llaniladi. Agar quyidagi shartlarning barchasi to'g'ri bo'lsa, objekt muhrlangan hisoblanadi
- If it is not extensible.
- If all of its properties are non-configurable.
- If it is not removable (but not necessarily non-writable). Let's see it in the action
const object = { property: 'Hello, Good morning', }; Object.seal(object); // Using seal() method to seal the object console.log(Object.isSealed(object)); // checking whether the object is sealed or not
-
Object.entries() usuli ma'lum bir objektning o'z sanab bo'ladigan qatorli kalitli [kalit, qiymat] juftliklari massivini for...in siklida taqdim etilgan tartibda qaytarish uchun ishlatiladi. Misolda object.entries() usulining funksionalligini ko'rib chiqamiz,
const object = { a: 'Good morning', b: 100, }; for (let [key, value] of Object.entries(object)) { console.log(`${key}: ${value}`); // a: 'Good morning' // b: 100 }
Note: The order is not guaranteed as object defined.
-
Object.values() usulining xatti-harakati Object.entries() usuliga o'xshaydi, lekin u [kalit, qiymat] juftlari o'rniga qiymatlar qatorini qaytaradi.
const object = { a: 'Good morning', b: 100, }; for (let value of Object.values(object)) { console.log(`${value}`); // 'Good morning' 100; }
-
Siz Object.keys()ma'lum bir objektning o'z mulk nomlari massivini qaytarish uchun ishlatiladigan usuldan, biz odatdagi tsikl bilan bir xil tartibda foydalanishingiz mumkin. Masalan, siz foydalanuvchi objektining kalitlarini olishingiz mumkin,
const user = { name: 'John', gender: 'male', age: 40, }; console.log(Object.keys(user)); //['name', 'gender', 'age']
-
Object.create() usuli ko'rsatilgan prototip objekti va xususiyatlariga ega yangi objektni yaratish uchun ishlatiladi. Ya'ni, yangi yaratilgan objektning prototipi sifatida mavjud objektdan foydalanadi. Belgilangan prototip objekti va xususiyatlari bilan yangi objektni qaytaradi.
const user = { name: 'John', printInfo: function () { console.log(`My name is ${this.name}.`); }, }; const admin = Object.create(user); admin.name = 'Nick'; // Remember that "name" is a property set on "admin" but not on "user" object admin.printInfo(); // My name is Nick
-
WeakSet zaif (zaif havolalar) saqlanadigan objektlar to'plamini saqlash uchun ishlatiladi. Sintaksis quyidagicha bo'ladi:
new WeakSet([iterable]);
Uning xatti-harakatini tushuntirish uchun quyidagi misolni ko'rib chiqaylik,
var ws = new WeakSet(); var user = {}; ws.add(user); ws.has(user); // true ws.delete(user); // removes user from the set ws.has(user); // false, user has been removed
-
Asosiy farq shundaki, Set-dagi objektlarga havolalar kuchli, WeakSet-dagi objektlarga havolalar zaif. Ya'ni, WeakSet-dagi objektga boshqa havola bo'lmasa, axlat yig'ilishi mumkin. Boshqa farqlar,
- To'plamlar har qanday qiymatni saqlashi mumkin, WeakSets esa faqat objektlar to'plamini saqlashi mumkin
- WeakSet Setdan farqli o'laroq o'lcham xususiyatiga ega emas
- WeakSet-da aniq, kalitlar, qiymatlar, yozuvlar, forEach kabi usullar mavjud emas.
- WeakSet takrorlanmaydi.
-
Quyida WeakSet-da mavjud usullar ro'yxati keltirilgan,
- Quyida WeakSet-da mavjud usullar ro'yxati keltirilgan,
- Delete(value): Qiymatni WeakSet to'plamidan o'chiradi.
- has(value): Agar qiymat WeakSet to'plamida mavjud bo'lsa, u haqiqatni qaytaradi, aks holda u noto'g'ri qaytaradi.
Keling, yuqoridagi barcha usullarning funksionalligini misolda ko'rib chiqaylik,
var weakSetObject = new WeakSet(); var firstObject = {}; var secondObject = {}; // add(value) weakSetObject.add(firstObject); weakSetObject.add(secondObject); console.log(weakSetObject.has(firstObject)); //true weakSetObject.delete(secondObject);
-
WeakMap objekti - bu kalitlarga zaif havola qilingan kalit/qiymat juftliklari to'plami. Bunday holda, kalitlar objektlar bo'lishi kerak va qiymatlar ixtiyoriy qiymatlar bo'lishi mumkin. Sintaksis quyidagi kabi ko'rinadi,
new WeakMap([iterable]);
Uning xatti-harakatini tushuntirish uchun quyidagi misolni ko'rib chiqaylik,
var ws = new WeakMap(); var user = {}; ws.set(user); ws.has(user); // true ws.delete(user); // removes user from the map ws.has(user); // false, user has been removed
-
Asosiy farq shundaki, Map-dagi asosiy objektlarga havolalar kuchli, WeakMap-dagi asosiy objektlarga havolalar zaif. Ya'ni, WeakMap'dagi asosiy objekt, agar unga boshqa havola bo'lmasa, axlat yig'ilishi mumkin. Boshqa farqlar,
- Xaritalar har qanday kalit turini saqlashi mumkin, WeakMaps esa faqat asosiy objektlar to'plamini saqlashi mumkin
- WeakMap xaritadan farqli o'laroq o'lcham xususiyatiga ega emas
- WeakMap-da aniq, kalitlar, qiymatlar, yozuvlar, forEach kabi usullar mavjud emas.
- WWeakMap takrorlanmaydi.
-
Quyida WeakMap-da mavjud usullar ro'yxati keltirilgan,
- set(kalit, qiymat): WeakMap obyektidagi kalit uchun qiymatni o'rnatadi. WeakMap obyektini qaytaradi.
- o'chirish (kalit): Kalit bilan bog'liq har qanday qiymatni o'chiradi.
- has(key): Qiymat WeakMap obyektidagi kalit bilan bog‘langan yoki bog‘lanmaganligini tasdiqlovchi mantiqiy qiymatni qaytaradi.
- get(key): Kalit bilan bog'langan qiymatni qaytaradi yoki agar mavjud bo'lmasa, aniqlanmagan. Keling, yuqoridagi barcha usullarning funksionalligini misolda ko'rib chiqaylik,
var weakMapObject = new WeakMap(); var firstObject = {}; var secondObject = {}; // set(key, value) weakMapObject.set(firstObject, 'John'); weakMapObject.set(secondObject, 100); console.log(weakMapObject.has(firstObject)); //true console.log(weakMapObject.get(firstObject)); // John weakMapObject.delete(secondObject);
-
uneval() o'rnatilgan funksiya bo'lib, u objekt manba kodining satrli tasvirini yaratish uchun ishlatiladi. Bu yuqori darajadagi funksiya va hech qanday objekt bilan bog'lanmagan. Uning funksionalligi haqida ko'proq bilish uchun quyidagi misolni ko'rib chiqaylik,
var a = 1; uneval(a); // returns a String containing 1 uneval(function user() {}); // returns "(function user(){})"
-
EncodeURI() funksiyasi (, / ? : @ & = + $ #) belgilardan tashqari maxsus belgilarga ega boʻlgan toʻliq URI kodini kodlash uchun ishlatiladi.
var uri = 'https://mozilla.org/?x=шеллы'; var encoded = encodeURI(uri); console.log(encoded); // https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B
-
DecodeURI() funksiyasi avval encodeURI() tomonidan yaratilgan Yagona Resurs Identifikatorini (URI) dekodlash uchun ishlatiladi.
var uri = 'https://mozilla.org/?x=шеллы'; var encoded = encodeURI(uri); console.log(encoded); // https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B try { console.log(decodeURI(encoded)); // "https://mozilla.org/?x=шеллы" } catch (e) { // catches a malformed URI console.error(e); }
-
Oyna obyekti joriy oynaning mazmunini chop etish uchun ishlatiladigan print() usulini taqdim etdi. U turli xil chop etish opsiyalaridan birini tanlash imkonini beruvchi Chop etish dialog oynasini ochadi. Misolda chop etish usulidan foydalanishni ko'rib chiqaylik,
<input type="button" value="Print" onclick="window.print()" />
Note: Ko'pgina brauzerlarda chop etish dialog oynasi ochiq bo'lsa, u bloklanadi.
-
Funktsiya unevalberilgan objektning manbasini qaytaradi; Holbuki, evalfunktsiya bu manba kodini boshqa xotira sohasida baholash orqali aksincha qiladi. Farqni aniqlashtirish uchun misolni ko'rib chiqaylik,
var msg = uneval(function greeting() { return 'Hello, Good morning'; }); var greeting = eval(msg); greeting(); // returns "Hello, Good morning"
-
Anonim funksiya - bu nomsiz funksiya! Anonim funktsiyalar odatda o'zgaruvchi nomiga tayinlanadi yoki callback funktsiyasi sifatida ishlatiladi. Sintaksis quyidagi kabi bo'ladi,
function (optionalParameters) { //do something } const myFunction = function(){ //Anonymous function assigned to a variable //do something }; [1, 2, 3].map(function(element){ //Anonymous function used as a callback function //do something });
Keling, yuqoridagi anonim funktsiyani misolda ko'rib chiqaylik,
var x = function (a, b) { return a * b; }; var z = x(5, 10); console.log(z); // 50
-
Mahalliy o'zgaruvchi bir xil nomdagi global o'zgaruvchidan ustun turadi. Keling, bu xatti-harakatni misolda ko'rib chiqaylik.
var msg = 'Good morning'; function greeting() { msg = 'Good Evening'; console.log(msg); } greeting();
-
ECMAScript 5 getter va setterlar orqali javascript objektiga kirish yoki hisoblangan xususiyatlarni taqdim etdi. Getters getkalit so'zdan foydalanadi, Setters esa kalit so'zdan foydalanadi set.
var user = { firstName: "John", lastName : "Abraham", language : "en", get lang() { return this.language; } set lang(lang) { this.language = lang; } }; console.log(user.lang); // getter access lang as en user.lang = 'fr'; console.log(user.lang); // setter used to set lang as fr
-
Object.defineProperty() statik usuli to'g'ridan-to'g'ri objektda yangi xususiyatni aniqlash yoki objektdagi mavjud xususiyatni o'zgartirish uchun ishlatiladi va objektni qaytaradi. Mulkni qanday aniqlashni bilish uchun misolni ko'rib chiqaylik,
const newObject = {}; Object.defineProperty(newObject, 'newProperty', { value: 100, writable: false, }); console.log(newObject.newProperty); // 100 newObject.newProperty = 200; // It throws an error in strict mode due to writable setting
-
Classlardan foydalanmaguningizcha ikkalasi ham xuddi shunday natijalarga ega. Agar siz foydalansangiz get, xususiyat objektning prototipida aniqlanadi, Object.defineProperty()xususiyatdan foydalanish esa u qo'llaniladigan misolda aniqlanadi.
-
Quyida Getters va Setters afzalliklari ro'yxati keltirilgan,
- Ular oddiyroq sintaksisni ta'minlaydi
- Ular JSda hisoblangan xususiyatlarni yoki yordamchilarni aniqlash uchun ishlatiladi.
- Xususiyatlar va usullar o'rtasidagi ekvivalentlik munosabatini ta'minlash uchun foydalidir
- Ular yaxshiroq ma'lumot sifatini ta'minlashi mumkin
- Kapsüllangan mantiq bilan sahna ortida narsalarni qilish uchun foydalidir.
-
DefineProperty usuli yordamida qabul qiluvchilar(getter) va sozlagichlarni(setter) qo'shishim mumkinmi
Ha, siz Object.defineProperty()Getters va Setters qo'shish uchun usuldan foydalanishingiz mumkin. Masalan, quyidagi hisoblagich objekti oshirish, kamaytirish, qo'shish va ayirish xususiyatlaridan foydalanadi,
var obj = { counter: 0 }; // Define getters Object.defineProperty(obj, 'increment', { get: function () { this.counter++; }, }); Object.defineProperty(obj, 'decrement', { get: function () { this.counter--; }, }); // Define setters Object.defineProperty(obj, 'add', { set: function (value) { this.counter += value; }, }); Object.defineProperty(obj, 'subtract', { set: function (value) { this.counter -= value; }, }); obj.add = 10; obj.subtract = 5; console.log(obj.increment); //6 console.log(obj.decrement); //5
-
JavaScriptdagi switch case bayonoti qaror qabul qilish uchun ishlatiladi. Ba'zi hollarda switch case bayonotidan foydalanish if-else iboralariga qaraganda qulayroq bo'ladi. Sintaksis quyidagi kabi bo'ladi,
switch (expression) { case value1: statement1; break; case value2: statement2; break; . . case valueN: statementN; break; default: statementDefault; }
Yuqoridagi ko'p tomonlama filial bayonoti ifoda qiymatiga asoslangan kodning turli qismlariga bajarilishini jo'natishning oson yo'lini taqdim etadi.
-
Quyida e'tiborga olinishi kerak bo'lgan konventsiyalar ro'yxati keltirilgan.
- Ifoda raqam yoki satr turi bo'lishi mumkin.
- Ifoda uchun takroriy qiymatlarga ruxsat berilmaydi.
- Standart bayonot ixtiyoriy. Agar kommutatorga uzatilgan ifoda hech qanday registr qiymatiga mos kelmasa, u holda birlamchi holat ichidagi bayonot bajariladi.
- Break iborasi kommutator ichida gaplar ketma-ketligini tugatish uchun ishlatiladi.
- Break bayonoti ixtiyoriy. Ammo agar u o'tkazib yuborilsa, ijro keyingi ishda davom etadi.
Ibtidoiy ma'lumotlar turi - bu ibtidoiy qiymatga ega bo'lgan ma'lumotlar (uning xususiyatlari yoki usullari yo'q). 7 turdagi ibtidoiy ma'lumotlar turlari mavjud.
1. string
2. number
3. boolean
4. null
5. undefined
6. bigint
7. symbol
**[⬆ Back to Top](#table-of-contents)**
-
Objekt xususiyatiga kirishning 3 ta mumkin bo'lgan usuli mavjud.
- Dot notation: Xususiyatlarga kirish uchun nuqtadan foydalanadi
objectName.property;
- Square brackets notation: mulkka kirish uchun kvadrat qavslardan foydalanadi
objectName['property'];
- Expression notation: U kvadrat qavs ichidagi ifodadan foydalanadi
objectName[expression];
-
JavaScript funksiyalari parametrlar uchun quyidagi qoidalarga amal qiladi,
- Funktsiya ta'riflari parametrlar uchun ma'lumotlar turlarini aniqlamaydi.
- O'tkazilgan argumentlar turini tekshirishni amalga oshirmang.
- Qabul qilingan argumentlar sonini tekshirmang. ya'ni, quyidagi funktsiya yuqoridagi qoidalarga amal qiladi,
function functionName(parameter1, parameter2, parameter3) { console.log(parameter1); // 1 } functionName(1);
-
Xato objekti xatolik yuzaga kelganda xato haqida ma'lumot beruvchi o'rnatilgan xato objektidir. U ikkita xususiyatga ega: ism va xabar. Masalan, quyidagi funksiya xato tafsilotlarini qayd qiladi,
try { greeting('Welcome'); } catch (err) { console.log(err.name + '<br>' + err.message); }
-
Sintaksis xatosi bilan kodni baholashga harakat qilsangiz, SyntaxError chiqariladi. Misol uchun, funktsiya parametri uchun quyida etishmayotgan tirnoq sintaksis xatosini keltirib chiqaradi
try { eval("greeting('welcome)"); // Missing ' will produce an error } catch (err) { console.log(err.name); }
-
Xato obyektidan qaytarilgan 6 xil turdagi xato nomlari mavjud,
Error Name Description EvalError Eval() funksiyasida xatolik yuz berdi RangeError Raqam “diapazondan tashqarida” xatolik yuz berdi ReferenceError Noqonuniy havola tufayli xato SyntaxError Sintaksis xatosi tufayli yuzaga kelgan xato TypeError Tur xatosi tufayli yuzaga kelgan xato URIError EncodeURI() tufayli xatolik -
Quyida xatolarni qayta ishlashda ishlatiladigan bayonotlar ro'yxati keltirilgan,
- try: Ushbu bayonot kod blokini xatolarni tekshirish uchun ishlatiladi
- catch: Ushbu bayonot xatoni boshqarish uchun ishlatiladi
- throw: Ushbu bayonot maxsus xatolar yaratish uchun ishlatiladi.
- finally: Ushbu ibora natijadan qat'iy nazar try and catchdan keyin kodni bajarish uchun ishlatiladi.
-
- Entry Controlled loops: Ushbu turdagi halqa turida sinov holati halqa tanasiga kirishdan oldin tekshiriladi. Masalan, For Loop va While Loop ushbu turkumga kiradi.
- Exit Controlled Loops: bu turdagi halqa turida sinov holati halqa tanasining oxirida tekshiriladi yoki baholanadi. ya'ni, test sharti rost yoki noto'g'ri bo'lishidan qat'i nazar, pastadir tanasi kamida bir marta bajariladi. Masalan, do-while sikli ushbu turkumga kiradi.
-
Node.js tezkor va kengaytiriladigan tarmoq ilovalarini osongina yaratish uchun Chrome JavaScript ish vaqti asosida yaratilgan server tomoni platformasidir. Bu Google'ning V8 JavaScript dvigateli va libuv kutubxonasidan foydalanadigan voqealarga asoslangan, bloklanmagan, asinxron kiritish-chiqarish ish vaqti.
-
Intl objekti ECMAScript Internationalization API uchun nom maydoni bo'lib, u tilga sezgir qatorlarni taqqoslashni, raqamlarni formatlashni va sana va vaqtni formatlashni ta'minlaydi. U bir nechta konstruktorlar va tilga sezgir funktsiyalarga kirishni ta'minlaydi.
-
Intl.DateTimeFormatTilga sezgir sana va vaqtni formatlashni ta'minlaydigan objektlar uchun konstruktor bo'lgan objektdan foydalanishingiz mumkin . Keling, bu xatti-harakatni misol bilan ko'rib chiqaylik,
var date = new Date(Date.UTC(2019, 07, 07, 3, 0, 0)); console.log(new Intl.DateTimeFormat('en-GB').format(date)); // 07/08/2019 console.log(new Intl.DateTimeFormat('en-AU').format(date)); // 07/08/2019
-
Iterator - bu ketma-ketlikni va uning tugashi bilan qaytariladigan qiymatni belgilaydigan objekt. U Iterator protokolini next()ikkita xususiyatga ega objektni qaytaradigan usul bilan amalga oshiradi: value(ketma-ketlikdagi keyingi qiymat) va done(agar ketma-ketlikdagi oxirgi qiymat iste'mol qilingan bo'lsa, bu to'g'ri bo'ladi).
-
Sinxron iteratsiya ES6 da joriy qilingan va u quyidagi komponentlar to'plami bilan ishlaydi,
Iterable: Bu kaliti Symbol.iterator bo'lgan usul orqali takrorlanishi mumkin bo'lgan objekt. Iterator: Bu takrorlanadigan chaqiruv orqali qaytariladigan objekt Symbol.iterator. Ushbu iterator objekti har bir takrorlangan elementni objektga o'rab oladi va uni next()usul orqali birma-bir qaytaradi. IteratorResult: Bu usul bilan qaytarilgan objekt next(). objekt ikkita xususiyatni o'z ichiga oladi; valuexususiyat takrorlangan elementni o'z ichiga oladi va xususiyat doneelement oxirgi element yoki yo'qligini aniqlaydi.
Keling, quyidagi kabi massiv bilan sinxron iteratsiyani namoyish qilaylik,
const iterable = ['one', 'two', 'three']; const iterator = iterable[Symbol.iterator](); console.log(iterator.next()); // { value: 'one', done: false } console.log(iterator.next()); // { value: 'two', done: false } console.log(iterator.next()); // { value: 'three', done: false } console.log(iterator.next()); // { value: 'undefined, done: true }
Voqealar davri - bu callback funktsiyalari navbati. Asinx funksiyasi bajarilganda, callback funktsiyasi navbatga suriladi. JavaScript mexanizmi asinxronizatsiya funksiyasi kodni bajarishni tugatmaguncha voqea siklini qayta ishlashni boshlamaydi. Eslatma: Bu Node.js-ga JavaScript-ning bir torli bo'lishiga qaramay, bloklanmagan kiritish-chiqarish operatsiyalarini bajarishga imkon beradi.
**[⬆ Back to Top](#table-of-contents)**
-
Call Stack - bu JavaScript tarjimonlari uchun dasturdagi funktsiya chaqiruvlarini kuzatib borish uchun ma'lumotlar tuzilmasi. Uning ikkita asosiy harakati bor,
- Har safar funktsiyani bajarish uchun chaqirsangiz, uni stekga surasiz.
- Bajarish tugallanganda, funktsiya stekdan chiqariladi.
Keling, misol qilib olaylik va bu holatni diagramma formatida tasvirlash
function hungry() { eatFruits(); } function eatFruits() { return "I'm eating fruits"; } // Invoke the `hungry` function hungry();
Yuqoridagi kod quyidagi kabi qo'ng'iroqlar to'plamida qayta ishlanadi,
hungry()ni call stack listga funksiyasiga qo'shing va kodni yurgazing.eatFruits()ni call stack listga funksiyasiga qo'shing va kodni yurgazing.eatFruits()funksiayni call stack listdan o'chirib tashlang.hungry()funksiayni call stack listdan o'chirib tashlang chunki endi listda hech qanday malumot qolmadi.
-
Dekorator - bu funktsiyani baholovchi va maqsad, nom va dekorator deskriptorini argument sifatida qabul qiluvchi ifoda. Bundan tashqari, u ixtiyoriy ravishda maqsadli objektga o'rnatish uchun dekorativ identifikatorni qaytaradi. Dizayn vaqtida foydalanuvchi sinfi uchun administrator dekoratorini aniqlaymiz,
function admin(isAdmin) { return function(target) { target.isAdmin = isAdmin; } } @admin(true) class User() { } console.log(User.isAdmin); //true @admin(false) class User() { } console.log(User.isAdmin); //false
-
Quyida Intl objektida mavjud xususiyatlar ro'yxati keltirilgan,
- Collator: Bular tilga sezgir satrlarni taqqoslash imkonini beruvchi objektlardir.
- DateTimeFormat: Bular tilga sezgir sana va vaqtni formatlashni ta'minlaydigan objektlardir.
- ListFormat: Bular tilga sezgir roʻyxat formatlash imkonini beruvchi obʼyektlardir.
- NumberFormat: tilga sezgir raqamlarni formatlashni ta'minlaydigan objektlar.
- PluralRules: ko'plikka sezgir formatlash va ko'plik uchun tilga xos qoidalarni faollashtiradigan objektlar.
- RelativeTimeFormat: Tilga sezgir nisbiy vaqt formatlash imkonini beruvchi objektlar.
-
Birlik(+) operator oʻzgaruvchini raqamga aylantirish uchun ishlatiladi.Agar oʻzgaruvchini oʻzgartirib boʻlmasa, u baribir raqamga aylanadi, lekin qiymati NaN. Keling, bu xatti-harakatni harakatda ko'rib chiqaylik.
var x = '100'; var y = +x; console.log(typeof x, typeof y); // string, number var a = 'Hello'; var b = +a; console.log(typeof a, typeof b, b); // string, number, NaN
-
Sort() usuli massiv elementlarini joyida tartiblash uchun ishlatiladi va tartiblangan massivni qaytaradi. Foydalanish misoli quyidagi kabi bo'ladi,
var months = ['Aug', 'Sep', 'Jan', 'June']; months.sort(); console.log(months); // ["Aug", "Jan", "June", "Sep"]
-
Tartiblash tartibini aniqlash uchun compareFunction funksiyasidan foydalaniladi. Agar o'tkazib yuborilsa, massiv elementlari satrlarga aylantiriladi, so'ngra har bir belgining Unicode kod nuqtasi qiymatiga ko'ra tartiblanadi. Keling, compareFunction dan foydalanishni ko'rish uchun misol keltiramiz,
let numbers = [1, 2, 5, 3, 4]; numbers.sort((a, b) => b - a); console.log(numbers); // [5, 4, 3, 2, 1]
-
Massivdagi minimal va maksimal elementlarni topish uchun massiv oʻzgaruvchilari Math.minva usullaridan foydalanishingiz mumkin . Math.maxMassivdagi min va maksimal qiymatlarni topish uchun ikkita funktsiya yarataylik,
let numbers = [1, 2, 5, 3, 4]; numbers.sort((a, b) => b - a); numbers.reverse(); console.log(numbers); // [1, 2, 3, 4 ,5]
-
Minimal va maksimal qiymatlarni topish uchun har bir qiymatni eng past yoki eng yuqori qiymat bilan solishtirgan holda massivda aylanib yuradigan funksiyalarni yozishingiz mumkin. Keling, minimal va maksimal qiymatlarni topish uchun ushbu funktsiyalarni yarataylik,
var marks = [50, 20, 70, 60, 45, 30]; function findMin(arr) { return Math.min.apply(null, arr); } function findMax(arr) { return Math.max.apply(null, arr); } console.log(findMin(marks)); console.log(findMax(marks));
-
Bo'sh bayonot nuqta-vergul (;) bo'lib, JavaScript sintaksisi talab qilsa ham, hech qanday bayonot bajarilmasligini bildiradi. Bo'sh bayonot bilan hech qanday harakat yo'qligi sababli siz undan kamroq foydalanish deb o'ylashingiz mumkin, ammo bo'sh ibora vaqti-vaqti bilan bo'sh tanaga ega bo'lgan tsikl yaratmoqchi bo'lganingizda foydali bo'ladi. Masalan, siz nol qiymatga ega massivni quyidagi tarzda ishga tushirishingiz mumkin,
var marks = [50, 20, 70, 60, 45, 30]; function findMin(arr) { var length = arr.length; var min = Infinity; while (length--) { if (arr[length] < min) { min = arr[len]; } } return min; } function findMax(arr) { var length = arr.length; var max = -Infinity; while (len--) { if (arr[length] > max) { max = arr[length]; } } return max; } console.log(findMin(marks)); console.log(findMax(marks));
-
Bo'sh bayonot nuqta-vergul (;) bo'lib, JavaScript sintaksisi talab qilsa ham, hech qanday bayonot bajarilmasligini bildiradi. Bo'sh bayonot bilan hech qanday harakat yo'qligi sababli siz undan kamroq foydalanish deb o'ylashingiz mumkin, ammo bo'sh ibora vaqti-vaqti bilan bo'sh tanaga ega bo'lgan tsikl yaratmoqchi bo'lganingizda foydali bo'ladi. Masalan, siz nol qiymatga ega massivni quyidagi tarzda ishga tushirishingiz mumkin,
// Initialize an array a for(int i=0; i < a.length; a[i++] = 0) ;
-
Siz import.metaJavaScript moduliga kontekstga xos meta-ma'lumotlarni ochib beruvchi meta-xususiyat bo'lgan objektdan foydalanishingiz mumkin. U modulning URL manzili kabi joriy modul haqidagi ma'lumotlarni o'z ichiga oladi. Brauzerlarda siz NodeJS-dan farqli meta-ma'lumotlarni olishingiz mumkin.
<script type='module' src='welcome-module.js'></script>; console.log(import.meta); // { url: "file:///home/user/welcome-module.js" }
-
Vergul operatori uning har bir operandini chapdan o'ngga baholash uchun ishlatiladi va oxirgi operandning qiymatini qaytaradi. Bu massivlar, objektlar va funksiya argumentlari va parametrlarida verguldan foydalanishdan butunlay farq qiladi. Masalan, raqamli iboralar uchun foydalanish quyidagicha bo'ladi:
var x = 1; x = (x++, x); console.log(x); // 2
-
Odatda bitta ifodani talab qiladigan joyga bir nechta iboralarni kiritish uchun ishlatiladi. Ushbu vergul operatorining keng tarqalgan qo'llanilishidan biri tsiklda bir nechta parametrlarni taqdim foretishdir. Misol uchun, quyida keltirilgan for tsikli vergul operatori yordamida bitta joyda bir nechta ifodalardan foydalanadi,
for (var a = 0, b =10; a <= 10; a++, b--)
Vergul operatoridan qaytishdan oldin qayta ishlanadigan qaytarish bayonotida ham foydalanishingiz mumkin.
function myFunction() { var a = 1; return (a += 10), a; // 11 }
-
TypeScript - bu Microsoft tomonidan yaratilgan JavaScript-ning terilgan to'plami bo'lib, u ixtiyoriy turlar, sinflar, asinxron/kutish va boshqa ko'plab xususiyatlarni qo'shadi va oddiy JavaScript-ga kompilyatsiya qiladi. Angular butunlay TypeScript-da qurilgan va asosiy til sifatida ishlatiladi. Siz uni global miqyosda o'rnatishingiz mumkin
npm install -g typescript
Keling, TypeScript-dan foydalanishning oddiy misolini ko'rib chiqaylik,
function greeting(name: string): string { return 'Hello, ' + name; } let user = 'Sudheer'; console.log(greeting(user));
Salomlashish usuli argument sifatida faqat string turiga ruxsat beradi.
-
Quyida javascript va typescript o'rtasidagi farqlar ro'yxati keltirilgan,
feature typescript javascript Language paradigm objektga yo'naltirilgan dasturlash tili Scripting language Typing support Statik yozishni qo'llab-quvvatlaydi U dinamik yozishga ega Modules Qo'llab-quvvatlanadi Qo'llab-quvvatlanmaydi Interface U interfeys tushunchasiga ega nterfeyslarni qo'llab-quvvatlamaydi Optional parameters Funktsiyalar ixtiyoriy parametrlarni qo'llab-quvvatlaydi Funktsiyalar uchun ixtiyoriy parametrlarni qo'llab-quvvatlamaydi -
Quyida matn terishning javascriptdan ba'zi afzalliklari keltirilgan,
- TypeScript kompilyatsiya vaqtidagi xatolarni faqat ishlab chiqish vaqtida topishi mumkin va bu ish vaqtidagi xatolarni kamroq qiladi. Holbuki, javascript talqin qilinadigan tildir.
- TypeScript qattiq terilgan yoki statik yozishni qo'llab-quvvatlaydi, bu kompilyatsiya vaqtida turdagi to'g'riligini tekshirish imkonini beradi. Bu javascriptda mavjud emas.
- TypeScript kompilyatori .ts fayllarini ES3, ES4 va ES5 ga kompilyatsiya qilishi mumkin, ba'zi brauzerlarda qo'llab-quvvatlanmaydigan javascriptning ES6 xususiyatlaridan farqli o'laroq.
-
objektni ishga tushirish - bu objektni ishga tushirishni tavsiflovchi ifoda. Ushbu iboraning sintaksisi jingalak qavslar ({}) ichiga olingan nol yoki undan koʻp xususiyat nomlari va obʼyektning bogʻlangan qiymatlarining vergul bilan ajratilgan roʻyxati sifatida ifodalanadi. Bu literal notation sifatida ham tanilgan. Bu objektni yaratish usullaridan biridir.
var initObject = { a: 'John', b: 50, c: {} }; console.log(initObject.a); // John
-
Konstruktor usuli - bu sinf ichida yaratilgan objektni yaratish va ishga tushirish uchun maxsus usul. Agar siz konstruktor usulini ko'rsatmasangiz, standart konstruktor ishlatiladi. Konstruktordan foydalanish misoli quyidagicha bo'ladi,
class Employee { constructor() { this.name = 'John'; } } var employeeObject = new Employee(); console.log(employeeObject.name); // John
-
Classda "konstruktor" maxsus usul bo'lib, u sinfda faqat bir marta aniqlanishi kerak. ya'ni, agar siz konstruktor usulini sinfda bir necha marta yozsangiz, u SyntaxErrorxatoga yo'l qo'yadi.
class Employee { constructor() { this.name = "John"; } constructor() { // Uncaught SyntaxError: A class may only have one constructor this.age = 30; } } var employeeObject = new Employee(); console.log(employeeObject.name);
-
Siz superkalit so'zni ota-sinf konstruktoriga qo'ng'iroq qilish uchun ishlatishingiz mumkin. Esda tutingki, super()"bu" havolasidan foydalanishdan oldin uni chaqirish kerak. Aks holda, bu havola xatosiga olib keladi. Keling, undan foydalanish,
class Square extends Rectangle { constructor(length) { super(length, length); this.name = 'Square'; } get area() { return this.width * this.height; } set area(value) { this.area = value; } }
-
Object.getPrototypeOf(obj)Belgilangan objektning prototipini qaytarish uchun usuldan foydalanishingiz mumkin . ya'ni ichki prototypemulkning qiymati. Agar meros qilib olingan xususiyatlar bo'lmasa null, qiymat qaytariladi.
const newPrototype = {}; const newObject = Object.create(newPrototype); console.log(Object.getPrototypeOf(newObject) === newPrototype); // true
-
ES5 da, agar obj parametri objekt bo'lmasa, u TypeError istisnosini chiqaradi. Holbuki ES2015 da parametr .ga majburlanadi Object.
// ES5 Object.getPrototypeOf('James'); // TypeError: "James" is not an object // ES2015 Object.getPrototypeOf('James'); // String.prototype
-
Object.setPrototypeOf()Belgilangan objektning prototipini (ya'ni, ichki Prototypexususiyatni) boshqa objektga yoki nullga o'rnatadigan usuldan foydalanishingiz mumkin . Misol uchun, agar siz kvadrat objektning prototipini to'rtburchak objektga o'rnatmoqchi bo'lsangiz, quyidagicha bo'ladi:
Object.setPrototypeOf(Square.prototype, Rectangle.prototype); Object.setPrototypeOf({}, null);
-
Usul Object.isExtensible()objektning kengaytirilishi mumkin yoki yo'qligini aniqlash uchun ishlatiladi. ya'ni, unga yangi xususiyatlar qo'shilishi mumkinmi yoki yo'qmi.
const newObject = {}; console.log(Object.isExtensible(newObject)); //true
Note: Odatiy bo'lib, barcha objektlar kengaytirilishi mumkin. ya'ni, yangi xususiyatlar qo'shilishi yoki o'zgartirilishi mumkin.
-
Usul Object.preventExtensions()objektga yangi xususiyatlar qo'shilishining oldini olish uchun ishlatiladi. Boshqacha qilib aytganda, u objektga kelajakdagi kengaytmalarni oldini oladi. Keling, ushbu mulkdan foydalanishni ko'rib chiqaylik,
const newObject = {}; Object.preventExtensions(newObject); // NOT extendable try { Object.defineProperty(newObject, 'newProperty', { // Adding new property value: 100, }); } catch (e) { console.log(e); // TypeError: Cannot define property newProperty, object is not extensible }
-
Siz kengaytirilmaydigan objektni 3 usulda belgilashingiz mumkin,
- Object.preventExtensions
- Object.seal
- Object.freeze
var newObject = {}; Object.preventExtensions(newObject); // Prevent objects are non-extensible Object.isExtensible(newObject); // false var sealedObject = Object.seal({}); // Sealed objects are non-extensible Object.isExtensible(sealedObject); // false var frozenObject = Object.freeze({}); // Frozen objects are non-extensible Object.isExtensible(frozenObject); // false
-
Usul Object.defineProperties()to'g'ridan-to'g'ri objektda yangi xususiyatlarni aniqlash yoki mavjud xususiyatlarni o'zgartirish va objektni qaytarish uchun ishlatiladi. Bo'sh objektda bir nechta xususiyatni aniqlaymiz,
const newObject = {}; Object.defineProperties(newObject, { newProperty1: { value: 'John', writable: true, }, newProperty2: {}, });
-
MEAN (MongoDB, Express, AngularJS va Node.js) stek - bu dinamik veb-ilovalarni yaratish uchun mavjud bo'lgan eng mashhur ochiq manbali JavaScript dasturiy ta'minot stekidir, bunda siz veb-loyihaning server tomoni va mijoz tomonini yozishingiz mumkin. butunlay JavaScriptda.
-
Obfuscation - bu odamlar tushunishi qiyin bo'lgan tushunarsiz JavaScript kodini (ya'ni, manba yoki mashina kodi) yaratishning ataylab harakati. Bu shifrlashga o'xshash narsa, lekin mashina kodni tushunishi va uni bajarishi mumkin. Obfuscationdan oldin quyidagi funktsiyani ko'rib chiqaylik,
function greeting() { console.log('Hello, welcome to JS world'); }
Va Obfuscation kodidan keyin u quyidagi ko'rinishda bo'ladi,
eval( (function (p, a, c, k, e, d) { e = function (c) { return c; }; if (!''.replace(/^/, String)) { while (c--) { d[c] = k[c] || c; } k = [ function (e) { return d[e]; }, ]; e = function () { return '\\w+'; }; c = 1; } while (c--) { if (k[c]) { p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); } } return p; })( "2 1(){0.3('4, 7 6 5 8')}", 9, 9, 'console|greeting|function|log|Hello|JS|to|welcome|world'.split('|'), 0, {} ) );
-
Quyida chalkashlikning bir necha sabablari keltirilgan,
- Kod hajmi kamayadi. Shunday qilib, server va mijoz o'rtasida ma'lumotlarni uzatish tez bo'ladi.
- U biznes mantiqini tashqi dunyodan yashiradi va kodni boshqalardan himoya qiladi
- Teskari muhandislik juda qiyin
- Teskari muhandislik juda qiyin
-
Kichkinalashtirish - bu barcha keraksiz belgilarni olib tashlash jarayoni (bo'sh joylar olib tashlanadi) va o'zgaruvchilar uning funksionalligini o'zgartirmasdan qayta nomlanadi. Bu, shuningdek, chalkashlikning bir turi.
-
Odatda og'ir trafik va resurslarning intensiv talablari uchun minimallashtirishdan foydalanish tavsiya etiladi. Bu quyidagi afzalliklarga ega bo'lgan fayl o'lchamlarini kamaytiradi,
- Veb-sahifani yuklash vaqtini qisqartiradi
- Tarmoqli kengligidan foydalanishni tejaydi
-
Quyida obfuscation va shifrlash o'rtasidagi asosiy farqlar keltirilgan,
Feature Obfuscation Encryption Definition Har qanday boshqa shakldagi har qanday ma'lumotlar shaklini o'zgartirish Kalit yordamida ma'lumot shaklini o'qib bo'lmaydigan formatga o'zgartirish A key to decode Uni hech qanday kalitsiz dekodlash mumkin Bu talab qilinadi Target data format U murakkab shaklga aylanadi O'qib bo'lmaydigan formatga aylantirildi -
Javascript fayllarini kichiklashtirish uchun ko'plab onlayn/oflayn vositalar mavjud,
- Google's Closure Compiler
- UglifyJS2
- jsmin
- javascript-minifier.com/
- prettydiff.com
-
JavaScript HTML formasini tekshirish uchun ishlatilishi mumkin. Misol uchun, agar forma maydoni bo'sh bo'lsa, shakl yuborilishiga yo'l qo'ymaslik uchun funktsiya xabar berishi va "false" ni qaytarishi kerak. Keling, html shaklida foydalanuvchi loginini amalga oshiramiz,
<form name="myForm" onsubmit="return validateForm()" method="post"> User name: <input type="text" name="uname" /> <input type="submit" value="Submit" /> </form>
Va foydalanuvchi loginni tekshirish quyida keltirilgan,
function validateForm() { var x = document.forms['myForm']['uname'].value; if (x == '') { alert("The username shouldn't be empty"); return false; } }
-
HTML formasini tekshirishni JavaScriptdan foydalanmasdan avtomatik ravishda amalga oshirishingiz mumkin. requiredKirish boʻsh boʻlganida shaklni yuborishni oldini olish uchun atributni qoʻllash orqali tekshirish yoqilgan .
<form method="post"> <input type="text" name="uname" required /> <input type="submit" value="Submit" /> </form>
Note: Shaklni avtomatik tekshirish Internet Explorer 9 yoki undan oldingi versiyalarida ishlamaydi.
-
Quyidagi DOM usullari noto'g'ri kiritishda cheklovlarni tekshirish uchun mavjud,
- checkValidity(): Agar kirish elementida to'g'ri ma'lumotlar mavjud bo'lsa, u rostni qaytaradi.
- setCustomValidity(): U kiritish elementining validationMessage xususiyatini o'rnatish uchun ishlatiladi. Keling, DOM tekshiruvlari bilan foydalanuvchi login formasini olaylik
function myFunction() { var userName = document.getElementById('uname'); if (!userName.checkValidity()) { document.getElementById('message').innerHTML = userName.validationMessage; } else { document.getElementById('message').innerHTML = 'Entered a valid username'; } }
-
Quyida mavjud bo'lgan cheklashlarni tekshirishning ba'zi DOM xususiyatlarining ro'yxati keltirilgan,
- validity: u kirish elementining haqiqiyligi bilan bog'liq boolean xususiyatlar ro'yxatini taqdim etadi.
- validationMessage: Yaroqlilik noto'g'ri bo'lsa, u xabarni ko'rsatadi.
- willValidate: Bu kirish elementi tekshiriladimi yoki yo'qligini bildiradi.
-
Kirish elementining haqiqiylik xususiyati ma'lumotlarning haqiqiyligi bilan bog'liq xususiyatlar to'plamini ta'minlaydi.
- customError: Agar moslashtirilgan toʻgʻrilik xabari oʻrnatilgan boʻlsa, u haqiqatni qaytaradi.
- patternMismatch: Agar elementning qiymati uning naqsh atributiga mos kelmasa, u haqiqatni qaytaradi.
- rangeOverflow: Agar element qiymati uning maksimal atributidan katta bo'lsa, u haqiqatni qaytaradi.
- rangeUnderflow: Agar element qiymati uning min atributidan kichik bo'lsa, u haqiqatni qaytaradi.
- stepMismatch: Agar elementning qiymati step atributiga ko'ra noto'g'ri bo'lsa, u haqiqatni qaytaradi.
- tooLong: Agar element qiymati uning maxLength atributidan oshsa, u rostni qaytaradi.
- typeMismatch: Agar elementning qiymati type atributiga ko'ra noto'g'ri bo'lsa, u rostni qaytaradi.
- valueMissing: Agar talab qilinadigan atributga ega element hech qanday qiymatga ega bo'lmasa, u haqiqatni qaytaradi.
- valid: Agar elementning qiymati to'g'ri bo'lsa, u haqiqatni qaytaradi.
-
Agar element qiymati uning maksimal atributidan katta bo'lsa, rangeOverflow xususiyati haqiqatni qaytaradi. Misol uchun, agar qiymat 100 dan ortiq bo'lsa, quyidagi shaklni yuborish xato qiladi,
<input id="age" type="number" max="100" /> <button onclick="myOverflowFunction()">OK</button>
function myOverflowFunction() { if (document.getElementById('age').validity.rangeOverflow) { alert('The mentioned age is not allowed'); } }
-
Yo'q, JavaScript enumlarni qo'llab-quvvatlamaydi. Ammo ularni simulyatsiya qilish uchun turli xil echimlar mavjud, garchi ular aniq ekvivalentlarni taqdim etmasa ham. Masalan, siz objektda muzlatish yoki muhrni ishlatishingiz mumkin,
var DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})
-
Enum - bu o'zgaruvchilarni oldindan belgilangan doimiylar to'plamidan bitta qiymat bilan cheklovchi tur. JavaScriptda raqamlar yo'q, lekin typescript o'rnatilgan enum yordamini ta'minlaydi.
enum Color { RED, GREEN, BLUE }
-
Object.getOwnPropertyNames()To'g'ridan-to'g'ri berilgan objektda topilgan barcha xususiyatlar qatorini qaytaradigan usuldan foydalanishingiz mumkin . Keling, uni misolda ishlatishni ko'rib chiqaylik,
const newObject = { a: 1, b: 2, c: 3, }; console.log(Object.getOwnPropertyNames(newObject)); ['a', 'b', 'c'];
-
Siz Object.getOwnPropertyDescriptors()berilgan objektning barcha o'ziga xos xususiyat identifikatorlarini qaytaradigan usuldan foydalanishingiz mumkin. Ushbu usuldan foydalanish misoli quyida keltirilgan,
const newObject = { a: 1, b: 2, c: 3, }; const descriptorsObject = Object.getOwnPropertyDescriptors(newObject); console.log(descriptorsObject.a.writable); //true console.log(descriptorsObject.a.configurable); //true console.log(descriptorsObject.a.enumerable); //true console.log(descriptorsObject.a.value); // 1
-
Xususiyat deskriptori - bu quyidagi atributlarga ega bo'lgan yozuv
- value: mulk bilan bog'liq qiymat
- writable: Mulk bilan bog'liq qiymatni o'zgartirish mumkinmi yoki yo'qligini aniqlaydi
- configurable: Agar ushbu xususiyat identifikatorining turini o'zgartirish mumkin bo'lsa va xususiyat mos keladigan objektdan o'chirilishi mumkin bo'lsa, true qiymatini qaytaradi.
- enumerable: Xususiyat tegishli objektdagi xususiyatlarni sanab o'tishda paydo bo'ladimi yoki yo'qligini aniqlaydi.
- set: Xususiyat uchun o'rnatuvchi sifatida xizmat qiluvchi funktsiya
- get: Mulk uchun oluvchi sifatida xizmat qiluvchi funktsiya
-
extendsKalit so'z sinf deklaratsiyasida/iboralarida boshqa sinfning farzandi bo'lgan sinf yaratish uchun ishlatiladi . Undan maxsus sinflarni, shuningdek, o'rnatilgan objektlarni pastki sinflarga ajratish uchun foydalanish mumkin. Sintaksis quyidagi kabi bo'ladi,
class ChildClass extends ParentClass { ... }
Polygon ota-klassidan Square kichik sinfiga misol keltiraylik,
class Square extends Rectangle { constructor(length) { super(length, length); this.name = 'Square'; } get area() { return this.width * this.height; } set area(value) { this.area = value; } }
-
Mulk window.location.urlurlni o'zgartirish uchun foydali bo'ladi, lekin u sahifani qayta yuklaydi. HTML5 tegishli ravishda tarix yozuvlarini qo'shish va o'zgartirish imkonini beruvchi history.pushState()va usullarini taqdim etdi. history.replaceState()Masalan, pushState-dan quyidagi kabi foydalanishingiz mumkin,
window.history.pushState('page2', 'Title', '/page2.html');
-
Usul Array#includes()massiv o'z yozuvlari orasida ma'lum bir qiymatni o'z ichiga oladi yoki yo'qligini aniqlash uchun ishlatiladi yoki rost yoki yolg'on. Massiv ichidagi elementni (raqamli va satr) topish misolini ko'rib chiqaylik.
var numericArray = [1, 2, 3, 4]; console.log(numericArray.includes(3)); // true var stringArray = ['green', 'yellow', 'blue']; console.log(stringArray.includes('blue')); //true
-
Ikki skaler (to'g'ridan-to'g'ri === yordamida solishtirilgan) massivlarni solishtirish uchun uzunlik va massivlarning har bir usulidan foydalanishingiz mumkin. Ushbu iboralarning kombinatsiyasi kutilgan natijani berishi mumkin,
const arrayFirst = [1, 2, 3, 4, 5]; const arraySecond = [1, 2, 3, 4, 5]; console.log( arrayFirst.length === arraySecond.length && arrayFirst.every((value, index) => value === arraySecond[index]) ); // true
Agar siz tartibdan qat'i nazar massivlarni solishtirmoqchi bo'lsangiz, ularni avval tartiblashingiz kerak,
const arrayFirst = [2, 3, 1, 4, 5]; const arraySecond = [1, 2, 3, 4, 5]; console.log( arrayFirst.length === arraySecond.length && arrayFirst .sort() .every((value, index) => value === arraySecond[index]) ); //true
-
new URL()objekt url qatorini qabul qiladi va bu searchParamsobyektning xususiyati get parametrlariga kirish uchun ishlatilishi mumkin. window.locationEsda tutingki , eski brauzerlarda (jumladan, IE) URL-manzilga kirish uchun polyfill-dan foydalanish kerak bo'lishi mumkin .
let urlString = 'http://www.some-domain.com/about.html?x=1&y=2&z=3'; //window.location.href let url = new URL(urlString); let parameterZ = url.searchParams.get('z'); console.log(parameterZ); // 3
-
Siz Number.prototype.toLocaleString()ushbu raqamning ming ajratuvchisi, valyutasi va boshqalar kabi tilga sezgir ko'rinishga ega satrni qaytaradigan usuldan foydalanishingiz mumkin.
function convertToThousandFormat(x) { return x.toLocaleString(); // 12,345.679 } console.log(convertToThousandFormat(12345.6789));
-
Ikkalasi ham mutlaqo bog'liq bo'lmagan dasturlash tillari va ular o'rtasida aloqa yo'q. Java statik tarzda teriladi, kompilyatsiya qilinadi, o'z VM da ishlaydi. Holbuki, Javascript dinamik ravishda yoziladi, talqin qilinadi va brauzer va nodejs muhitida ishlaydi. Keling, jadval formatidagi asosiy farqlarni ko'rib chiqaylik,
Feature Java JavaScript Typed Bu kuchli terilgan til Bu dinamik terilgan til Paradigm objektga yo'naltirilgan dasturlash Prototipga asoslangan dasturlash Scoping Block scoped Function-scoped Concurrency Mavzuga asoslangan voqeaga asoslangan Memory Ko'proq xotiradan foydalanadi Kamroq xotiradan foydalanadi. Shuning uchun u veb-sahifalar uchun ishlatiladi -
JavaScript sukut bo'yicha nom maydonini qo'llab-quvvatlamaydi. Shunday qilib, agar siz biron bir element (funktsiya, usul, objekt, o'zgaruvchi) yaratsangiz, u global bo'lib, global nomlar maydonini ifloslantiradi. Hech qanday nom maydonisiz ikkita funktsiyani aniqlashga misol keltiraylik,
function func1() { console.log('This is a first definition'); } function func1() { console.log('This is a second definition'); } func1(); // This is a second definition
U har doim ikkinchi funktsiya ta'rifini chaqiradi. Bunday holda, nom maydoni nomlarning to'qnashuvi muammosini hal qiladi.
-
JavaScriptda nom bo'shliqlari bo'lmasa ham, nomlar bo'shliqlarini yaratish uchun Objects, IIFE dan foydalanishimiz mumkin.
- Using Object Literal Notation: O'zgaruvchilar va funktsiyalarni nom maydoni vazifasini bajaradigan objekt literaliga o'tkazamiz. Shundan so'ng siz ularga objekt belgilaridan foydalanib kirishingiz mumkin
var namespaceOne = { function func1() { console.log("This is a first definition"); } } var namespaceTwo = { function func1() { console.log("This is a second definition"); } } namespaceOne.func1(); // This is a first definition namespaceTwo.func1(); // This is a second definition
- Using IIFE (Immediately invoked function expression): IIFE ning tashqi qavslar juftligi uning ichidagi barcha kodlar uchun mahalliy qamrovni yaratadi va anonim funksiyani funksiya ifodasiga aylantiradi. Shu sababli, nom maydoni sifatida ishlash uchun ikkita turli funktsiya ifodalarida bir xil funktsiyani yaratishingiz mumkin.
(function () { function fun1() { console.log('This is a first definition'); } fun1(); })(); (function () { function fun1() { console.log('This is a second definition'); } fun1(); })();
- Using a block and a let/const declaration: ECMAScript 6 da o'zgaruvchi doirasini blok bilan cheklash uchun siz shunchaki blok va let deklaratsiyasidan foydalanishingiz mumkin.
{ let myFunction = function fun1() { console.log('This is a first definition'); }; myFunction(); } //myFunction(): ReferenceError: myFunction is not defined. { let myFunction = function fun1() { console.log('This is a second definition'); }; myFunction(); } //myFunction(): ReferenceError: myFunction is not defined.
-
document.getElementByDastlab iFrame-ga yoki yordamida kirish kerak window.frames. Shundan so'ng contentWindowiFrame xususiyati targetFunction uchun ruxsat beradi
document.getElementById('targetFrame').contentWindow.targetFunction(); window.frames[0].frameElement.contentWindow.targetFunction(); // Accessing iframe this way may not work in latest versions chrome and firefox
-
getTimezoneOffsetSana obyektining usulidan foydalanishingiz mumkin . Bu usul vaqt mintaqasi farqini, daqiqalarda, joriy tildan (xost tizimi sozlamalari) UTCgacha qaytaradi
var offset = new Date().getTimezoneOffset(); console.log(offset); // -480
-
Siz DOM da havola va skript elementlarini yaratishingiz va ularni bosh tegga bola sifatida qo'shishingiz mumkin. Quyidagi kabi skript va uslub resurslarini qo'shish funksiyasini yarataylik,
function loadAssets(filename, filetype) { if (filetype == 'css') { // External CSS file var fileReference = document.createElement('link'); fileReference.setAttribute('rel', 'stylesheet'); fileReference.setAttribute('type', 'text/css'); fileReference.setAttribute('href', filename); } else if (filetype == 'js') { // External JavaScript file var fileReference = document.createElement('script'); fileReference.setAttribute('type', 'text/javascript'); fileReference.setAttribute('src', filename); } if (typeof fileReference != 'undefined') document.getElementsByTagName('head')[0].appendChild(fileReference); }
-
Agar siz HTML sahifasining istalgan elementiga kirishni istasangiz, hujjat objektiga kirishdan boshlashingiz kerak. Keyinchalik HTML elementini topish uchun quyidagi usullardan birini qo'llashingiz mumkin,
- document.getElementById(id): Id boʻyicha elementni topadi
- document.getElementsByTagName(name): Teg nomi boʻyicha elementni topadi
- document.getElementsByClassName(name): U elementni sinf nomi bilan topadi
-
jQuery mashhur JavaScript-brauzerlar kutubxonasi boʻlib, u Hujjat Obyekt Modeli (DOM) oʻtishini, hodisalarni boshqarishni, animatsiyalarni va brauzerlar orasidagi tafovutlarni minimallashtirish orqali AJAX oʻzaro taʼsirini taʼminlaydi. U "Kamroq yoz, ko'proq ish qil" falsafasi bilan mashhur. Masalan, jQuery-dan foydalanib, sahifa yuklanishida salomlash xabarini quyidagi tarzda ko'rsatishingiz mumkin,
$(document).ready(function () { // It selects the document and apply the function on page load alert('Welcome to jQuery world'); });
Note: Siz uni jQuery rasmiy saytidan yuklab olishingiz yoki google kabi CDN-lardan o'rnatishingiz mumkin.
-
V8 - bu C++ tilida yozilgan Google Chrome brauzeri tomonidan qo'llaniladigan ochiq manbali yuqori samarali JavaScript dvigatelidir. U node.js loyihasida ham foydalanilmoqda. U ECMAScript va WebAssembly’ni amalga oshiradi va Windows 7 yoki undan keyingi versiyalarida, macOS 10.12+ va x64, IA-32, ARM yoki MIPS protsessorlaridan foydalanadigan Linux tizimlarida ishlaydi. Eslatma: U mustaqil ishlashi mumkin yoki istalgan C++ dasturiga kiritilishi mumkin.
-
JavaScript erkin terilgan yoki dinamik tildir, chunki JavaScriptdagi o'zgaruvchilar biron bir qiymat turi bilan bevosita bog'lanmagan va har qanday o'zgaruvchi barcha turdagi qiymatlar bilan tayinlanishi/qayta tayinlanishi mumkin.
let age = 50; // age is a number now age = 'old'; // age is a string now age = true; // age is a boolean
-
Operator voidberilgan ifodani baholaydi va keyin aniqlanmagan (ya'ni, qiymatni qaytarmasdan) qaytaradi. Sintaksis quyidagi kabi bo'ladi,
void expression; void expression;
Xabarni hech qanday yo'naltirish yoki qayta yuklamasdan ko'rsataylik
<a href="javascript:void(alert('Welcome to JS world'))"> Click here to see a message </a>
Note: Bu operator ko'pincha "void (0)" yordamida aniqlanmagan ibtidoiy qiymatni olish uchun ishlatiladi.
-
Kursor "kursor" xususiyatidan foydalanib, JavaScriptda kutishga o'rnatilishi mumkin. Quyidagi funksiyadan foydalanib, sahifa yuklashda ushbu xatti-harakatni bajaramiz.
function myFunction() { window.document.body.style.cursor = 'wait'; }
and this function invoked on page load
<body onload="myFunction()"></body>
-
Hech qanday ifoda ishlatmasdan for va while sikllaridan foydalanib cheksiz tsikllar yaratishingiz mumkin. For loop tuzilishi yoki sintaksisi ESLint va kod optimallashtiruvchi vositalari nuqtai nazaridan yaxshiroq yondashuv,
for (;;) {} while (true) {}
-
JavaScript-ning with bayonoti objektlarga takroriy kirishlarni yozish uchun stenografiyani ta'minlash uchun mo'ljallangan. Shunday qilib, u uzoq objekt havolasini ishlash jazosisiz takrorlash zaruratini kamaytirish orqali fayl hajmini kamaytirishga yordam beradi. objektga bir necha marta kirishda ortiqchalikni oldini olish uchun ishlatiladigan misolni olaylik.
a.b.c.greeting = 'welcome'; a.b.c.age = 32;
Undan foydalanish with buni quyidagilarga aylantiradi:
with (a.b.c) { greeting = 'welcome'; age = 32; }
Ammo bu with bayonot ishlash muammolarini keltirib chiqaradi, chunki argument haqiqiy o'zgaruvchiga yoki with argumenti ichidagi xususiyatga murojaat qilishini oldindan aytib bo'lmaydi.
-
for (var i = 0; i < 4; i++) { // global scope setTimeout(() => console.log(i)); } for (let i = 0; i < 4; i++) { // block scope setTimeout(() => console.log(i)); }
Yuqoridagi for looplarning chiqishi 4 4 4 4 va 0 1 2 3 ga teng
Explanation: Javascriptning voqea navbati/siklasi tufayli setTimeoutcallback funksiyasi sikl bajarilgandan so'ng chaqiriladi. i o'zgaruvchisi kalit so'z bilan e'lon qilinganligi varsababli u global o'zgaruvchiga aylandi va vaqt setTimeoutfunksiyasi chaqirilganda iteratsiya yordamida qiymat 4 ga teng bo'ldi. Demak, birinchi tsiklning chiqishi 4 4 4 4.
Ikkinchi siklda esa i oʻzgaruvchisi letkalit soʻz sifatida eʼlon qilingan boʻlsa, u bloklangan oʻzgaruvchiga aylanadi va u har bir iteratsiya uchun yangi qiymatga ega boʻladi (0, 1, 2 3). Demak, birinchi tsiklning chiqishi 0 1 2 3.
-
Quyida ES6 ning ba'zi yangi xususiyatlari ro'yxati keltirilgan.
- Konstantalar yoki o'zgarmas o'zgaruvchilarni qo'llab-quvvatlash
- O'zgaruvchilar, konstantalar va funktsiyalar uchun blok-ko'lamli yordam
- Ok funksiyalari
- Standart parametrlar
- Dam olish va tarqalish parametrlari
- Shablon harflari
- Ko'p qatorli satrlar
- Topshiriqni buzish
- Kengaytirilgan objekt harflari
- Va'dalar
- Sinflar
- Modullar
-
ES6 javascript tilining oltinchi nashri boʻlib, 2015-yil iyun oyida chiqarilgan. U dastlab ECMAScript 6 (ES6) nomi bilan tanilgan va keyinchalik ECMAScript 2015 deb oʻzgartirilgan. Deyarli barcha zamonaviy brauzerlar ES6ʼni qoʻllab-quvvatlaydi, lekin eski brauzerlar uchun koʻplab transpilerlar mavjud. , Babel.js va boshqalar kabi.
-
Yo'q, siz let va const o'zgaruvchilarini qayta e'lon qila olmaysiz. Agar shunday qilsangiz, u quyidagi xatoni chiqaradi
Uncaught SyntaxError: Identifier 'someVariable' has already been declaredExplanation: Kalit so'z bilan o'zgaruvchini e'lon qilish varfunksiya doirasiga ishora qiladi va o'zgaruvchiga ko'tarish xususiyati tufayli u qo'shimcha doiraning yuqori qismida e'lon qilingandek ishlanadi. Shunday qilib, bir xil ko'tarilgan o'zgaruvchiga hech qanday xatosiz hissa qo'shadigan barcha bir nechta deklaratsiyalar. Keling, var va let/const o'zgaruvchilari uchun bir xil doiradagi o'zgaruvchilarni qayta e'lon qilish misolini olaylik.
var name = 'John'; function myFunc() { var name = 'Nick'; var name = 'Abraham'; // Re-assigned in the same function block alert(name); // Abraham } myFunc(); alert(name); // John
Blok ko'lamli ko'p deklaratsiya sintaksis xatosini keltirib chiqaradi,
let name = 'John'; function myFunc() { let name = 'Nick'; let name = 'Abraham'; // Uncaught SyntaxError: Identifier 'name' has already been declared alert(name); } myFunc(); alert(name);
-
Yo'q, const o'zgaruvchisi qiymatni o'zgarmas qilib qo'ymaydi. Ammo u keyingi topshiriqlarga ruxsat bermaydi (ya'ni, siz topshiriq bilan e'lon qilishingiz mumkin, lekin keyinroq boshqa qiymat tayinlay olmaysiz)
const userList = []; userList.push('John'); // Can mutate even though it can't re-assign console.log(userList); // ['John']
-
E5 da biz funktsiya parametrlarining standart qiymatlarini boshqarish uchun mantiqiy OR operatorlariga bog'lanishimiz kerak. ES6 da standart funksiya parametrlari xususiyati hech qanday qiymat yoki aniqlanmagan holda parametrlarni standart qiymatlar bilan ishga tushirishga imkon beradi. Keling, xatti-harakatlarni misollar bilan taqqoslaylik,
//ES5 var calculateArea = function (height, width) { height = height || 50; width = width || 60; return width * height; }; console.log(calculateArea()); //300
Standart parametrlar ishga tushirishni soddalashtiradi,
//ES6 var calculateArea = function (height = 50, width = 60) { return width * height; }; console.log(calculateArea()); //300
-
Shablon literallari yoki shablon satrlari o'rnatilgan ifodalarga ruxsat beruvchi satr harflaridir. Ular ikkita yoki bitta tirnoq o'rniga orqaga belgi (`) bilan o'ralgan. E6 da bu xususiyat quyidagi kabi dinamik ifodalardan foydalanish imkonini beradi,
var greeting = `Welcome to JS World, Mr. ${firstName} ${lastName}.`;
ES5 da sizga quyidagi kabi uzilish qatori kerak bo'ladi,
var greeting = 'Welcome to JS World, Mr. ' + firstName + ' ' + lastName.`
Note: Shablon harflari bilan ko'p qatorli satrlar va satr interpolyatsiyasi xususiyatlaridan foydalanishingiz mumkin.
-
ES5 da ko'p qatorli satrlarni olish uchun yangi satrdan qochish belgilaridan ('\n') va birlashtiruvchi belgilardan (+) foydalanishingiz kerak bo'ladi.
console.log('This is string sentence 1\n' + 'This is string sentence 2');
Holbuki ES6 da yangi qator belgilarini eslatib o'tish shart emas,
console.log(`This is string sentence 'This is string sentence 2`);
-
Joylashtiruvchi shablon shablondagi ${ } toʻldiruvchisi ichida ichki orqa belgilarga ruxsat berish uchun shablon harflari sintaksisida qoʻllab-quvvatlanadigan xususiyatdir. Misol uchun, quyida joylashgan shablon foydalanuvchi ruxsatiga asoslangan piktogrammalarni ko'rsatish uchun ishlatiladi, tashqi shablon esa platforma turini tekshiradi,
const iconStyles = `icon ${ isMobilePlatform() ? '' : `icon-${user.isAuthorized ? 'submit' : 'disabled'}` }`;
Yuqoridagi foydalanish holatini shablon xususiyatlarini joylashtirmasdan ham yozishingiz mumkin. Biroq, joylashtirish shablonlari xususiyati yanada ixcham va o'qilishi mumkin.
//Without nesting templates const iconStyles = `icon ${ isMobilePlatform() ? '' : (user.isAuthorized ? 'icon-submit' : 'icon-disabled'}`;
-
Teglangan andozalar shablonlarning ilg'or shakli bo'lib, unda teglar funksiya yordamida shablon harflarini tahlil qilish imkonini beradi. Teg funksiyasi birinchi parametrni satrlar massivi, qolgan parametrlarni esa ifoda sifatida qabul qiladi. Ushbu funktsiya parametrlar asosida manipulyatsiya qilingan satrlarni ham qaytarishi mumkin. Keling, tashkilotda IT-professional mahorat to'plamining ushbu tegli shablon xatti-harakatlaridan foydalanishni ko'rib chiqaylik,
var user1 = 'John'; var skill1 = 'JavaScript'; var experience1 = 15; var user2 = 'Kane'; var skill2 = 'JavaScript'; var experience2 = 5; function myInfoTag(strings, userExp, experienceExp, skillExp) { var str0 = strings[0]; // "Mr/Ms. " var str1 = strings[1]; // " is a/an " var str2 = strings[2]; // "in" var expertiseStr; if (experienceExp > 10) { expertiseStr = 'expert developer'; } else if (skillExp > 5 && skillExp <= 10) { expertiseStr = 'senior developer'; } else { expertiseStr = 'junior developer'; } return `${str0}${userExp}${str1}${expertiseStr}${str2}${skillExp}`; } var output1 = myInfoTag`Mr/Ms. ${user1} is a/an ${experience1} in ${skill1}`; var output2 = myInfoTag`Mr/Ms. ${user2} is a/an ${experience2} in ${skill2}`; console.log(output1); // Mr/Ms. John is a/an expert developer in JavaScript console.log(output2); // Mr/Ms. Kane is a/an junior developer in JavaScript
-
String.raw()ES6 shablon satrlarining xom string shaklini olish uchun ishlatiladigan usuldan foydalangan holda xom satrlar xususiyatini taqdim etadi . Bu xususiyat sizga kirish ketma-ketligini qayta ishlamasdan, xom satrlarga kirish imkonini beradi. Masalan, foydalanish quyidagicha bo'ladi,
var calculationString = String.raw`The sum of numbers is \n${ 1 + 2 + 3 + 4 }!`; console.log(calculationString); // The sum of numbers is 10
Agar siz xom satrlardan foydalanmasangiz, yangi qator belgilar ketma-ketligi chiqishni bir nechta satrlarda ko'rsatish orqali qayta ishlanadi.
var calculationString = `The sum of numbers is \n${1 + 2 + 3 + 4}!`; console.log(calculationString); // The sum of numbers is // 10
Shuningdek, raw xususiyati teg funksiyasining birinchi argumentida mavjud
function tag(strings) { console.log(strings.raw[0]); }
-
Strukturani buzish topshirig'i - bu massivlardagi qiymatlarni yoki objektlardan xususiyatlarni alohida o'zgaruvchilarga ochish imkonini beruvchi JavaScript ifodasi. Keling, massivdan oy qiymatlarini tuzilmani buzish topshirig'idan foydalanib olamiz
var [one, two, three] = ['JAN', 'FEB', 'MARCH']; console.log(one); // "JAN" console.log(two); // "FEB" console.log(three); // "MARCH"
va siz tuzilmani buzish topshirig'i yordamida objektning foydalanuvchi xususiyatlarini olishingiz mumkin,
var { name, age } = { name: 'John', age: 32 }; console.log(name); // John console.log(age); // 32
-
O'zgaruvchiga massiv yoki objektdan ajratilgan qiymat tuzilmani buzish paytida aniqlanmagan bo'lsa, standart qiymat tayinlanishi mumkin. Bu har bir topshiriq uchun standart qiymatlarni alohida o'rnatishdan qochishga yordam beradi. Keling, massivlar va objektlardan foydalanish holatlariga misol keltiraylik,
Arrays destructuring:
var x, y, z; [x = 2, y = 4, z = 6] = [10]; console.log(x); // 10 console.log(y); // 4 console.log(z); // 6
Objects destructuring:
var { x = 2, y = 4, z = 6 } = { x: 10 }; console.log(x); // 10 console.log(y); // 4 console.log(z); // 6
-
Agar siz tuzilmani buzish topshirig'idan foydalanmasangiz, ikkita qiymatni almashtirish uchun vaqtinchalik o'zgaruvchi kerak bo'ladi. Vayron qiluvchi xususiyatdan foydalangan holda, ikkita o'zgaruvchan qiymatni bitta destruktiv ifodada almashtirish mumkin. Keling, massiv tuzilmasini buzishda ikkita raqamli o'zgaruvchini almashtiramiz,
var x = 10, y = 20; [x, y] = [y, x]; console.log(x); // 20 console.log(y); // 10
-
objekt harflari jingalak qavslar ichida xossalarga ega objektlarni tezda yaratishni osonlashtiradi. Misol uchun, u quyidagi kabi umumiy objekt xususiyatini aniqlash uchun qisqaroq sintaksisni taqdim etadi.
//ES6 var x = 10, y = 20; obj = { x, y }; console.log(obj); // {x: 10, y:20} //ES5 var x = 10, y = 20; obj = { x: x, y: y }; console.log(obj); // {x: 10, y:20}
-
Funktsiya sintaksisidan foydalangan holda dinamik importlar import()bizga va'dalar yoki asinxron/kutish sintaksisi yordamida talab bo'yicha modullarni yuklash imkonini beradi. Hozirda bu xususiyat 4- bosqich taklifida . Dinamik importning asosiy afzalligi - bu to'plam o'lchamlarini qisqartirish, so'rovlarimizning hajmi/to'lovli javobi va foydalanuvchi tajribasining umumiy yaxshilanishi. Dinamik importning sintaksisi quyidagi kabi bo'ladi:
import('./Module').then((Module) => Module.method());
-
Quyida statik importga nisbatan dinamik importdan foydalanishning ayrim holatlari keltirilgan.
- Modulni talab bo'yicha yoki shartli ravishda import qiling. Misol uchun, agar siz eski brauzerga polyfillni yuklamoqchi bo'lsangiz
if (isLegacyBrowser()) { import(···) .then(···); }
- Modul o'rniga oddiy skript ichidan modul import qiling.
import(`messages_${getLocale()}.js`).then(···);
- Import a module from within a regular script instead a module.
-
Yozilgan massivlar ikkilik ma'lumotlarni qayta ishlash uchun ECMAScript 6 API'dan massivga o'xshash objektlardir. JavaScript 8 ta terilgan massiv turlarini taqdim etadi,
- Int8Array: An array of 8-bit imzolangan butun sonlar massivi
- Int16Array: An array of 16-bit imzolangan butun sonlar massivi
- Int32Array: An array of 32-bit imzolangan butun sonlar massivi
- Uint8Array: An array of 8-bit imzolangan butun sonlar massivi
- Uint16Array: An array of 16-bit imzolangan butun sonlar massivi
- Uint32Array: An array of 32-bit imzolangan butun sonlar massivi
- Float32Array: An array of 32-bit floating point numbers
- Float64Array: An array of 64-bit floating point numbers
Misol uchun, siz quyida ko'rsatilgandek 8 bitli imzolangan tamsayılar qatorini yaratishingiz mumkin
const a = new Int8Array(); // You can pre-allocate n bytes const bytes = 1024; const a = new Int8Array(bytes);
-
Modul yuklagichlari quyidagi xususiyatlarni taqdim etadi:
- Dynamic loading
- State isolation
- Global namespace isolation
- Compilation hooks
- Nested virtualization
-
Harmanlama satrlar to'plamini saralash va qatorlar to'plami ichida qidirish uchun ishlatiladi. U mahalliy parametr bo'yicha parametrlangan va Unicode-dan xabardor. Keling, taqqoslash va saralash xususiyatlarini olaylik,
- Comparison:
var list = ['ä', 'a', 'z']; // In German, "ä" sorts with "a" Whereas in Swedish, "ä" sorts after "z" var l10nDE = new Intl.Collator('de'); var l10nSV = new Intl.Collator('sv'); console.log(l10nDE.compare('ä', 'z') === -1); // true console.log(l10nSV.compare('ä', 'z') === +1); // true
- Sorting:
var list = ['ä', 'a', 'z']; // In German, "ä" sorts with "a" Whereas in Swedish, "ä" sorts after "z" var l10nDE = new Intl.Collator('de'); var l10nSV = new Intl.Collator('sv'); console.log(list.sort(l10nDE.compare)); // [ "a", "ä", "z" ] console.log(list.sort(l10nSV.compare)); // [ "a", "z", "ä" ]
-
For...of iborasi takrorlanadigan objektlar yoki o'rnatilgan String, Array, Massivga o'xshash objektlar (masalan, argumentlar yoki NodeList), TypedArray, Map, Set va foydalanuvchi tomonidan aniqlangan takrorlanuvchilar kabi elementlar ustidan takrorlanuvchi tsikl yaratadi. Massivlarda for...of iborasining asosiy qo'llanilishi quyida keltirilgan bo'ladi:
let arrayIterable = [10, 20, 30, 40, 50]; for (let value of arrayIterable) { value++; console.log(value); // 11 21 31 41 51 }
-
[...'John Resig'];
Massivning chiqishi ['J', 'o', 'h', 'n', '', 'R', 'e', 's', 'i', 'g'] Izoh: Satr. bu takrorlanadigan tur va massiv ichidagi tarqalish operatori iteratsiya qilinadigan har bir belgini bitta element bilan taqqoslaydi. Demak, satrning har bir belgisi Massiv ichidagi elementga aylanadi.
-
Ha, agar dasturchi/ishlab chiquvchi kelgan xabarning kelib chiqishi va manbasini tekshirishda ehtiyot bo'lsa, postMessages juda xavfsiz deb hisoblanishi mumkin. Ammo agar siz xabarni manbasini tasdiqlamasdan yuborishga/qabul qilishga harakat qilsangiz, saytlararo skript hujumlarini keltirib chiqaradi.
-
Joyker belgisi sifatida postxabar maqsadli kelib chiqishi bilan bog'liq qanday muammolar mavjud]origin as wildcard
PostMessage usulining ikkinchi argumenti xabarni qaysi manbadan qabul qilishiga ruxsat berilganligini belgilaydi. Agar argument sifatida “*” joker belgisidan foydalansangiz, xabarni har qanday manbaga qabul qilishga ruxsat beriladi. Bunday holda, jo'natuvchi oynasi xabarni jo'natishda maqsadli oyna maqsadli manbada ekanligini bilishning hech qanday usuli yo'q. Agar maqsadli oyna boshqa manbaga yo'naltirilgan bo'lsa, boshqa manba ma'lumotlarni oladi. Shunday qilib, bu XSS zaifliklariga olib kelishi mumkin.
targetWindow.postMessage(message, '*');
-
Tinglovchi har qanday xabarni tinglaganligi sababli, tajovuzkor tajovuzkorning kelib chiqishidan xabar yuborish orqali dasturni aldashi mumkin, bu esa qabul qiluvchiga xabarni haqiqiy jo'natuvchining oynasidan olgandek taassurot qoldiradi. “message.origin” atributidan foydalanib, qabul qiluvchining oxiridagi xabarning kelib chiqishini tekshirish orqali bu muammodan qochishingiz mumkin. Misol uchun, jo'natuvchining kelib chiqishini tekshirib ko'raylik http://www.some-sender.com qabul qiluvchi tomonida www.some-receiver.com ,
//Listener on http://www.some-receiver.com/ window.addEventListener("message", function(message){ if(/^http://www\.some-sender\.com$/.test(message.origin)){ console.log('You received the data from valid sender', message.data); } });
-
Siz postMessages-dan butunlay (yoki 100%) foydalana olmaysiz. Ilovangiz xavflarni hisobga olgan holda postMessage-dan foydalanmasa ham, ko'plab uchinchi tomon skriptlari uchinchi tomon xizmati bilan bog'lanish uchun postMessage-dan foydalanadi. Demak, ilovangiz sizning xabaringizsiz postMessage dan foydalanayotgan bo‘lishi mumkin.
-
PostMessages IE8 brauzerida sinxrondir, lekin ular IE9 va boshqa barcha zamonaviy brauzerlarda (masalan, IE9+, Firefox, Chrome, Safari) asinxrondir. Ushbu asinxron xatti-harakat tufayli biz postMessage qaytarilganda callback mexanizmidan foydalanamiz.
-
JavaScript ko'p paradigmali til bo'lib, imperativ/protsessual dasturlashni, objektga yo'naltirilgan dasturlashni va funktsional dasturlashni qo'llab-quvvatlaydi. JavaScript prototip merosga ega objektga yo'naltirilgan dasturlashni qo'llab-quvvatlaydi.
-
Internal JavaScript: Bu skript tegidagi manba kodi. External JavaScript: Manba kodi tashqi faylda saqlanadi (.js kengaytmasi bilan saqlanadi) va tegda havola qilinadi.
-
Ha, JavaScript server tomonidagi skriptga qaraganda tezroq. JavaScript mijoz tomoni skripti bo'lgani uchun uni hisoblash yoki hisoblash uchun hech qanday veb-server yordamini talab qilmaydi. Shunday qilib, JavaScript har doim ASP, PHP va boshqalar kabi server tomonidagi skriptlardan tezroq.
-
Siz checkedxususiyatni DOM-dagi tanlangan katakchaga qo'llashingiz mumkin. Agar qiymat bo'lsa True, belgilash katakchasi belgilanganligini bildiradi, aks holda belgilanmaydi. Misol uchun, quyidagi HTML belgilash katakchasi elementiga quyidagi kabi javascript yordamida kirish mumkin,
<input type="checkbox" name="checkboxname" value="Agree" /> Agree the conditions<br />
console.log(document.getElementById(‘checkboxname’).checked); // true or false
-
Ikki tomonlama tilda operatori (~~) ikki tomonlama EMAS bitli operator sifatida tanilgan. Bu operator Math.floor() ni tezroq almashtiradi.
-
Siz String.prototype.charCodeAt()satr belgilarini ASCII raqamlariga aylantirish uchun usuldan foydalanishingiz mumkin. Masalan, "ABC" qatorining birinchi harfi uchun ASCII kodini topamiz,
'ABC'.charCodeAt(0); // returns 65
Usul String.fromCharCode()raqamlarni teng ASCII belgilariga aylantiradi.
String.fromCharCode(65, 66, 67); // returns 'ABC'
-
ArrayBuffer objekti umumiy, qattiq uzunlikdagi xom ikkilik ma'lumotlar buferini ko'rsatish uchun ishlatiladi. Siz uni quyidagi tarzda yaratishingiz mumkin,
let buffer = new ArrayBuffer(16); // create a buffer of length 16 alert(buffer.byteLength); // 16
ArrayBuffer-ni boshqarish uchun biz "view" objektidan foydalanishimiz kerak.
//Create a DataView referring to the buffer let view = new DataView(buffer);
-
console.log('Welcome to JS world'[0]);
Yuqoridagi ifodaning chiqishi "W" dir Explanation: Satrdagi maxsus indeksli qavs belgisi ma'lum bir joyda belgini qaytaradi. Demak, u satrning "W" belgisini qaytaradi. Bu IE7 va undan past versiyalarda qo'llab-quvvatlanmaganligi sababli, kerakli natijaga erishish uchun .charAt() usulidan foydalanishingiz kerak bo'lishi mumkin.
-
Xato konstruktori xato objektini yaratadi va xatolik objektlarining misollari ish vaqti xatolari yuzaga kelganda tashlanadi. Xato obyekti foydalanuvchi tomonidan belgilangan istisnolar uchun asosiy obyekt sifatida ham foydalanish mumkin. Xato objektining sintaksisi quyidagicha bo'ladi,
new Error([message[, fileName[, lineNumber]]])
Quyidagi kabi try...catch blokidagi Error obyekti yordamida foydalanuvchi tomonidan belgilangan istisnolar yoki xatolarni tashlashingiz mumkin,
try { if (withdraw > balance) throw new Error("Oops! You don't have enough balance"); } catch (e) { console.log(e.name + ': ' + e.message); }
-
EvalError obyekti global eval()funksiya bilan bog'liq xatoni bildiradi. Garchi bu istisno JavaScript tomonidan endi tashlanmasa ham, EvalError obyekti moslik uchun qoladi. Ushbu iboraning sintaksisi quyidagi kabi bo'ladi:
new EvalError([message[, fileName[, lineNumber]]])
Quyidagi kabi try...catch blokida EvalError-ni tashlashingiz mumkin,
try { throw new EvalError('Eval function error', 'someFile.js', 100); } catch (e) { console.log(e.message, e.name, e.fileName); // "Eval function error", "EvalError", "someFile.js"
-
Qattiy bo'lmagan rejimdan qat'iy rejimga o'tkazilgan xatolar ro'yxati qanday]non-strict mode to strict mode
Qachon 'use strict'; Sintaksis bo'lsa, quyidagi holatlarning ba'zilari skriptni bajarishdan oldin SyntaxError beradi
- Oktal sintaksisidan foydalanganda
var n = 022;
- Statement
bilanfoydalanganda - O'zgaruvchi nomida o'chirish operatoridan foydalanganda
- O'zgaruvchi yoki funktsiya argument nomi sifatida baholash yoki argumentlardan foydalanish
- Yangi zahiralangan kalit so'zlardan foydalanganda
- Blokdagi funktsiyani e'lon qilganingizda
if (someCondition) { function f() {} }
Shunday qilib, yuqoridagi holatlardagi xatolar ishlab chiqish/ishlab chiqarish muhitidagi xatolardan qochishga yordam beradi.
-
Yo'q. Foydalanuvchi tomonidan yaratilgan asosiy objekt yoki new kalit so'zi yordamida yaratilgan objektdan tashqari barcha objektlar prototiplariga ega.
-
Parametr funksiya taʼrifining oʻzgaruvchan nomi, argument esa funksiya chaqirilganda unga berilgan qiymatni ifodalaydi. Keling, buni oddiy funksiya bilan tushuntiramiz
function myFunction(parameter1, parameter2, parameter3) { console.log(arguments[0]); // "argument1" console.log(arguments[1]); // "argument2" console.log(arguments[2]); // "argument3" } myFunction('argument1', 'argument2', 'argument3');
-
Some() usuli massivdagi kamida bitta element taqdim etilgan funksiya tomonidan amalga oshirilgan testdan o'tishini tekshirish uchun ishlatiladi. Usul mantiqiy qiymatni qaytaradi. Keling, har qanday g'alati elementlarni sinab ko'rish uchun misol keltiraylik,
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var odd = (element) => element % 2 !== 0; console.log(array.some(odd)); // true (the odd element exists)
-
Concat() usuli barcha elementlarni o'z ichiga olgan yangi massivni qaytarish orqali ikki yoki undan ortiq massivlarni birlashtirish uchun ishlatiladi. Sintaksis quyidagi kabi bo'ladi,
array1.concat(array2, array3, ..., arrayX)
Keling, massivning sabzavot va mevalar massivlari bilan bog'lanishiga misol keltiraylik,
var veggies = ['Tomato', 'Carrot', 'Cabbage']; var fruits = ['Apple', 'Orange', 'Pears']; var veggiesAndFruits = veggies.concat(fruits); console.log(veggiesAndFruits); // Tomato, Carrot, Cabbage, Apple, Orange, Pears
-
objektni nusxalashning ikki yo'li mavjud:
Shallow Copy: objektning bitli nusxasi. Asl objektdagi qiymatlarning aniq nusxasiga ega bo'lgan yangi objekt yaratiladi. Agar objektning biron bir maydoni boshqa objektlarga havolalar bo'lsa, faqat mos yozuvlar manzillari ko'chiriladi, ya'ni faqat xotira manzili ko'chiriladi.
Example
var empDetails = { name: 'John', age: 25, expertise: 'Software Developer', };
dublikat yaratish uchun
var empDetailsShallowCopy = empDetails; //Shallow copying!
agar biz dublikatdagi ba'zi mulk qiymatini shunday o'zgartirsak:
empDetailsShallowCopy.name = 'Johnson';
Yuqoridagi bayonot ning nomini ham o'zgartiradi empDetails, chunki bizda sayoz nusxa mavjud. Bu shuni anglatadiki, biz asl ma'lumotlarni ham yo'qotamiz.
Deep copy (chuuqur nusxalash): Chuqur nusxa barcha maydonlardan nusxa ko'chiradi va maydonlar tomonidan ko'rsatilgan dinamik ravishda ajratilgan xotira nusxalarini yaratadi. Chuqur nusxa objekt unga tegishli bo'lgan objektlar bilan birga nusxalanganda sodir bo'ladi.
Example
var empDetails = { name: 'John', age: 25, expertise: 'Software Developer', };
Asl objektdan yangi o'zgaruvchiga xususiyatlardan foydalanib, chuqur nusxasini yarating
var empDetailsDeepCopy = { name: empDetails.name, age: empDetails.age, expertise: empDetails.expertise, };
Endi agar siz o'zgartirsangiz empDetailsDeepCopy.name, u faqat ta'sir qiladi empDetailsDeepCopyva ta'sir qilmaydiempDetails
-
Usul repeat()yangi satrni yaratish va qaytarish uchun ishlatiladi, unda u chaqirilgan qatorning birlashtirilgan nusxalarining belgilangan sonini o'z ichiga oladi. Ushbu usul ECMAScript 2015 spetsifikatsiyasiga qo'shilganligini unutmang. Keling, uni 4 marta takrorlash uchun Hello stringiga misol keltiraylik,
'Hello'.repeat(4); // 'HelloHelloHelloHello'
-
Usul matchAll()muntazam ifodaga qarshi satrga mos keladigan barcha natijalarning iteratorini qaytarish uchun ishlatilishi mumkin. Misol uchun, quyidagi misol muntazam ifodaga nisbatan mos keladigan qator natijalarini qaytaradi,
let regexp = /Hello(\d?))/g; let greeting = 'Hello1Hello2Hello3'; let greetingList = [...greeting.matchAll(regexp)]; console.log(greetingList[0]); //Hello1 console.log(greetingList[1]); //Hello2 console.log(greetingList[2]); //Hello3
-
String prototipi trimusuli satrning ikkala tomonini kesish uchun ishlatiladi. Ammo, ayniqsa, satrning boshida yoki oxirida kesishni istasangiz, unda siz trimStart/trimLeft va trimEnd/trimRight usullardan foydalanishingiz mumkin. Keling, salomlashishda ushbu usullarning namunasini ko'rib chiqaylik,
var greeting = ' Hello, Goodmorning! '; console.log(greeting); // " Hello, Goodmorning! " console.log(greeting.trimStart()); // "Hello, Goodmorning! " console.log(greeting.trimLeft()); // "Hello, Goodmorning! " console.log(greeting.trimEnd()); // " Hello, Goodmorning!" console.log(greeting.trimRight()); // " Hello, Goodmorning!"
-
Quyida keltirilgan unary operator bilan konsol bayonotini olaylik,
console.log(+'Hello');
Yuqoridagi konsol jurnali bayonotining chiqishi NaNni qaytaradi. Chunki element unar operator tomonidan prefiksga ega va JavaScript tarjimoni ushbu elementni raqam turiga aylantirishga harakat qiladi. Konvertatsiya bajarilmagani uchun bayonotning qiymati NaN qiymatiga olib keladi.
-
Mixin umumiy objektga yo'naltirilgan dasturlash atamasi bo'lib, u boshqa sinflar tomonidan meros qilib olinishi kerak bo'lmagan holda ishlatilishi mumkin bo'lgan usullarni o'z ichiga olgan sinfdir. JavaScriptda biz faqat bitta objektdan meros olishimiz mumkin. ya'ni. [[prototype]] objekt uchun faqat bitta bo'lishi mumkin .
Ammo ba'zida biz bir nechtasini kengaytirishni talab qilamiz, buni bartaraf etish uchun biz Mixin-dan foydalanishimiz mumkin, bu usullarni boshqa sinf prototipiga nusxalashga yordam beradi.
Masalan, bizda ikkita sinf bor Userva CleanRoom. Aytaylik , foydalanuvchi xonani talabiga ko'ra tozalashi uchun CleanRoom funksiyani ga qo'shishimiz kerak. UserBu erda miksinlar deb ataladigan tushuncha paydo bo'ladi.
// mixin let cleanRoomMixin = { cleanRoom() { alert(`Hello ${this.name}, your room is clean now`); }, sayBye() { alert(`Bye ${this.name}`); }, }; // usage: class User { constructor(name) { this.name = name; } } // copy the methods Object.assign(User.prototype, cleanRoomMixin); // now User can clean the room new User('Dude').cleanRoom(); // Hello Dude, your room is clean now!
-
Thunk - bu qiymatni baholashni kechiktiradigan funksiya. Bu hech qanday argumentlarni talab qilmaydi, lekin har safar thunkni chaqirganingizda qiymat beradi. ya'ni, u hozir bajarilmaydi, lekin kelajakda bo'ladi. Keling, sinxron misolni olaylik,
const add = (x, y) => x + y; const thunk = () => add(2, 3); thunk(); // 5
-
Asinxron thunklar tarmoq so'rovlarini amalga oshirish uchun foydalidir. Keling, tarmoq so'rovlarining misolini ko'rib chiqaylik,
function fetchData(fn) { fetch('https://jsonplaceholder.typicode.com/todos/1') .then((response) => response.json()) .then((json) => fn(json)); } const asyncThunk = function () { return fetchData(function getData(data) { console.log(data); }); }; asyncThunk();
Funktsiya getData darhol chaqirilmaydi, lekin u faqat API so'nggi nuqtasidan ma'lumotlar mavjud bo'lganda chaqiriladi. setTimeout funksiyasi bizning kodimizni asinxron qilish uchun ham ishlatiladi. Haqiqiy vaqtda eng yaxshi misol - jo'natish uchun harakatlarni kechiktirish uchun asinxron thunklardan foydalanadigan redux davlat boshqaruvi kutubxonasi.
-
Code snippet:
const circle = { radius: 20, diameter() { return this.radius * 2; }, perimeter: () => 2 * Math.PI * this.radius, };
console.log(circle.diameter()); console.log(circle.perimeter());
Output:
The output 40 va NaN ni tashkil qiladi. Esda tutingki, diametr oddiy funktsiyadir, perimetr qiymati esa o'q funktsiyasidir. Muntazam thisfunktsiyaning kalit so'zi (ya'ni, diametr) sinf (ya'ni, Shakl objekti) bo'lgan atrofdagi doiraga ishora qiladi. Perimetr funktsiyasining ushbu kalit so'zi oyna objekti bo'lgan atrofdagi doiraga ishora qiladi. Oyna objektlarida radius xususiyati yo'qligi sababli u aniqlanmagan qiymatni qaytaradi va son qiymatining ko'pligi NaN qiymatini qaytaradi.
-
Eng oson yondashuv - bu satrdagi yangi qatorlarni aniqlash va almashtirish uchun muntazam iboralardan foydalanish. Bunday holda biz almashtirish funktsiyasidan satr bilan birga foydalanamiz, bu bizning holatlarimizda bo'sh qatordir.
function remove_linebreaks( var message ) { return message.replace( /[\r\n]+/gm, "" ); }
Yuqoridagi ifodada g va m global va ko'p qatorli bayroqlar uchundir.
-
Qayta bo'yash elementning ko'rinishiga ta'sir qiladigan o'zgarishlar kiritilganda sodir bo'ladi, lekin uning tartibiga emas. Bunga misollar kontur, ko'rinish yoki fon rangini o'z ichiga oladi. Qayta ishlash sahifaning bir qismining (yoki butun sahifaning) tartibiga ta'sir qiluvchi o'zgarishlarni o'z ichiga oladi. Brauzer oynasining o'lchamini o'zgartirish, shriftni o'zgartirish, tarkibni o'zgartirish (foydalanuvchi matni kabi), hisoblangan uslublarni o'z ichiga olgan JavaScript usullarini qo'llash, DOMga elementlarni qo'shish yoki o'chirish va element sinflarini o'zgartirish - bu qayta ishlashni boshlashi mumkin bo'lgan bir nechta narsalar. Elementni qayta o'tkazish DOMdagi barcha asosiy va ajdod elementlari hamda undan keyingi barcha elementlarning keyingi qayta oqimiga sabab bo'ladi.
-
Belgili massivni inkor etish massivni mantiqiy qiymatga !majburlaydi. Massivlar to'g'ri deb hisoblanganligi sababli, inkor qilinsa, u qaytib keladi false.
console.log(![]); // false
-
Agar siz ikkita massivni birga qo'shsangiz, u ikkalasini ham satrlarga aylantiradi va ularni birlashtiradi. Masalan, massivlarni qo'shish natijasi quyidagicha bo'ladi,
console.log(['a'] + ['b']); // "ab" console.log([] + []); // "" console.log(![] + []); // "false", because ![] returns false.
-
Agar siz qo'shimcha (+) operatorini noto'g'ri qiymatlar (null, undefined, NaN, false, "") ustiga qo'ysangiz, noto'g'ri qiymat nolga aylanadi. Keling, ularni brauzer konsolida quyidagi tarzda ko'rsatamiz,
console.log(+null); // 0 console.log(+undefined); // NaN console.log(+false); // 0 console.log(+NaN); // NaN console.log(+''); // 0
-
O'z-o'zidan qator !+belgilar kombinatsiyasi bilan tuzilishi mumkin. Ushbu naqshga erishish uchun quyidagi konventsiyalarni eslab qolishingiz kerak.
- Massivlar toʻgʻri qiymatlar boʻlgani uchun massivlarni inkor etish notoʻgʻri maʼnoni keltirib chiqaradi: ![] === false
- Massivlar toʻgʻri qiymatlar boʻlgani uchun massivlarni inkor etish notoʻgʻri maʼnoni keltirib chiqaradi: ![] === false
- Massiv oldiga + operatori qoʻyilsa, massiv “false”ga oʻzgaradi, inkor qilish uni rost qiladi va natijani oʻzgartirish “1” qiymatini hosil qiladi: +(!(+[])) === 1
Yuqoridagi qoidalarni qo'llash orqali biz quyidagi shartlarni olishimiz mumkin
(![] + [] === 'false' + !+[]) === 1;
Endi belgilar namunasi quyidagi tarzda yaratiladi,
s e l f ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ (![] + [])[3] + (![] + [])[4] + (![] + [])[2] + (![] + [])[0] ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ ^^^^^^^^^^^^^ (![] + [])[+!+[]+!+[]+!+[]] + (![] + [])[+!+[]+!+[]+!+[]+!+[]] + (![] + [])[+!+[]+!+[]] + (![] + [])[+[]] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (![]+[])[+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]+!+[]+!+[]]+(![]+[])[+!+[]+!+[]]+(![]+[])[+[]]
-
Parametr sifatida mantiqiy ni o'tkazish orqali massivda filtr usulini qo'llashingiz mumkin. Shunday qilib, u massivdan barcha noto'g'ri qiymatlarni (0, aniqlanmagan, null, noto'g'ri va "") olib tashlaydi.
const myArray = [false, null, 1, 5, undefined]; myArray.filter(Boolean); // [1, 5] // is same as myArray.filter(x => x);
-
Set Siz va qolgan ifoda/spread(...) sintaksisining kombinatsiyasi bilan massivning noyob qiymatlarini olishingiz mumkin .
console.log([...new Set([1, 2, 4, 4, 3])]); // [1, 2, 4, 3]
-
Ba'zan siz mulk nomidan boshqa nomga ega vayron qilingan o'zgaruvchiga ega bo'lishni xohlaysiz. Bunday holda, : newName o'zgaruvchining nomini belgilash uchun a dan foydalanasiz. Bu jarayon taxalluslarni buzish deb ataladi.
const obj = { x: 1 }; // Grabs obj.x as as { otherName } const { x: otherName } = obj;
-
Massiv qiymatlarini mapfaqat Massiv usuli yordamida metoddan foydalanmasdan xaritalash mumkin from. Mamlakatlar massividan shahar nomlarini xaritaga keltiramiz,
const countries = [ { name: 'India', capital: 'Delhi' }, { name: 'US', capital: 'Washington' }, { name: 'Russia', capital: 'Moscow' }, { name: 'Singapore', capital: 'Singapore' }, { name: 'China', capital: 'Beijing' }, { name: 'France', capital: 'Paris' }, ]; const cityNames = Array.from(countries, ({ capital }) => capital); console.log(cityNames); // ['Delhi, 'Washington', 'Moscow', 'Singapore', 'Beijing', 'Paris']
-
Massiv uzunligini nolga o'rnatish orqali massivni tezda bo'shatish mumkin.
let cities = ['Singapore', 'Delhi', 'London']; cities.length = 0; // cities becomes []
-
toFixed Mahalliy JavaScript usulidan foydalanib, raqamlarni ma'lum miqdordagi o'nli kasrlarga yaxlitlashingiz mumkin .
let pie = 3.141592653; pie = pie.toFixed(3); // 3.142
-
Spread(...) operatori yordamida massivni bir xil ma’lumotlarga ega ob’ektga aylantirishingiz mumkin.
var fruits = ['banana', 'apple', 'orange', 'watermelon']; var fruitsObject = { ...fruits }; console.log(fruitsObject); // {0: "banana", 1: "apple", 2: "orange", 3: "watermelon"}
-
fill Usul yordamida siz ba'zi ma'lumotlarga ega massiv yoki bir xil qiymatlarga ega massiv yaratishingiz mumkin .
var newArray = new Array(5).fill('0'); console.log(newArray); // ["0", "0", "0", "0", "0"]
-
Quyida konsol objektida mavjud bo'lgan to'ldiruvchilar ro'yxati keltirilgan,
-
%o — object oladi,
-
%s — string oladi,
-
%d — Oʻnlik yoki butun son uchun ishlatiladi.
These placeholders can be represented in the console.log as below
const user = { name: 'John', id: 1, city: 'Delhi' }; console.log( 'Hello %s, your details %o are available in the object form', 'John', user ); // Hello John, your details {name: "John", id: 1, city: "Delhi"} are available in object
-
-
Ha, siz CSS uslublarini veb-sahifadagi html matniga o'xshash konsol xabarlariga qo'llashingiz mumkin.
console.log( '%c The text has blue color, with large font and red background', 'color: blue; font-size: x-large; background: red' );
The text will be displayed as below,
Note: Barcha CSS uslublari konsol xabarlariga qo'llanilishi mumkin.
-
Belgilangan console.dir() JavaScript obyekti xususiyatlarining interaktiv roʻyxatini JSON sifatida koʻrsatish uchun ishlatiladi.
const user = { name: 'John', id: 1, city: 'Delhi' }; console.dir(user);
SON ko'rinishida ko'rsatilgan foydalanuvchi objekti
-
Ha, xuddi elementlarni tekshirish kabi konsolda HTML elementlarini olish va disk raskadrovka qilish mumkin.
const element = document.getElementsByTagName('body')[0]; console.log(element);
U HTML elementini konsolda chop etadi,
-
console.table() Murakkab massivlar yoki objektlarni ko'rish uchun konsoldagi ma'lumotlarni jadval ko'rinishida ko'rsatish uchun ishlatiladi .
const users = [ { name: 'John', id: 1, city: 'Delhi' }, { name: 'Max', id: 2, city: 'London' }, { name: 'Rod', id: 3, city: 'Paris' }, ]; console.table(users);
Jadval formatida tasvirlangan ma'lumotlar,
Not: console.table() IE da qo'llab-quvvatlanmasligini unutmang . -
IsNaN va isFinite usullarining kombinatsiyasi argument son yoki yo'qligini tasdiqlash uchun ishlatiladi.
function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); }
-
Kirish elementining mazmunini (.select() usuli yordamida) tanlashingiz va execCommand (ya'ni, execCommand('copy')) bilan nusxa ko'chirish buyrug'ini bajarishingiz kerak. Kesish va joylashtirish kabi boshqa tizim buyruqlarini ham bajarishingiz mumkin.
document.querySelector('#copy-button').onclick = function () { // Select the content document.querySelector('#copy-input').select(); // Copy to the clipboard document.execCommand('copy'); };
-
new Date().getTime() Joriy vaqt tamg'asini olish uchun foydalanishingiz mumkin . Qiymatni olish uchun muqobil yorliq mavjud.
console.log(+new Date()); console.log(Date.now());
-
Ikki o'lchovli massivlarni tekislash Spread operatori bilan ahamiyatsiz.
const biDimensionalArr = [11, [22, 33], [44, 55], [66, 77], 88, 99]; const flattenArr = [].concat(...biDimensionalArr); // [11, 22, 33, 44, 55, 66, 77, 88, 99]
Lekin siz uni rekursiv qo'ng'iroqlar orqali ko'p o'lchovli massivlar bilan ishlashingiz mumkin,
function flattenMultiArray(arr) { const flattened = [].concat(...arr); return flattened.some((item) => Array.isArray(item)) ? flattenMultiArray(flattened) : flattened; } const multiDimensionalArr = [ 11, [22, 33], [44, [55, 66, [77, [88]], 99]], ]; const flatArr = flattenMultiArray(multiDimensionalArr); // [11, 22, 33, 44, 55, 66, 77, 88, 99]
-
indexOf Har bir qiymatni bitta shart sifatida tekshirish o'rniga, kirishni bir nechta qiymatlar bilan solishtirish uchun foydalanishingiz mumkin .
// Verbose approach if ( input === 'first' || input === 1 || input === 'second' || input === 2 ) { someFunction(); } // Shortcut if (['first', 1, 'second', 2].indexOf(input) !== -1) { someFunction(); }
-
Usul window.onbeforeunload brauzerning orqaga tugmasi hodisalarini yozib olish uchun ishlatiladi. Bu foydalanuvchilarni joriy ma'lumotlarni yo'qotish haqida ogohlantirish uchun foydalidir.
window.onbeforeunload = function () { alert('You work will be lost'); };
-
oncontextmenu Body elementidagi atributdan false qiymatini qaytarish orqali sahifani o'ng tugmasini bosishni o'chirib qo'yish mumkin .
<body oncontextmenu="return false;"></body>
-
String, raqam va mantiqiy kabi ibtidoiy qiymatlar xossa va usullarga ega emas, lekin ular ustida amallarni bajarishga harakat qilganingizda ular vaqtincha objektga (Wrapper objekti) aylantiriladi yoki majburlanadi. Misol uchun, agar siz ibtidoiy satr qiymatida toUpperCase() usulini qo'llasangiz, u xatoga yo'l qo'ymaydi, lekin satrning bosh harfini qaytaradi.
let name = 'john'; console.log(name.toUpperCase()); // Behind the scenes treated as console.log(new String(name).toUpperCase());
Ya'ni, null va undefineddan tashqari har bir ibtidoiy o'rash objektlariga ega va o'rash objektlari ro'yxati: String, Number, Boolean, Symbol va BigInt.
-
AJAX asinxron JavaScript va XML degan ma'noni anglatadi va u ma'lumotlarni asinxron tarzda ko'rsatish uchun ishlatiladigan tegishli texnologiyalar (HTML, CSS, JavaScript, XMLHttpRequest API va boshqalar) guruhidir. ya'ni veb-sahifani qayta yuklamasdan serverga ma'lumotlarni yuborishimiz va serverdan ma'lumotlarni olishimiz mumkin.
-
Quyida asenkron kod bilan ishlashning turli usullari ro'yxati keltirilgan.
- Callbacks
- Promises
- Async/await
- Third-party libraries such as async.js,bluebird etc
-
Bir necha kun oldin, mahalliy va'dalarning bitta kamchiliklari olib kelish so'rovini bekor qilishning bevosita usuli emas. Ammo AbortControllerjs spetsifikatsiyasining yangisi bir yoki bir nechta chaqiruvlarni bekor qilish uchun signaldan foydalanishga imkon beradi. Yuklab olish so'rovini bekor qilishning asosiy oqimi quyidagicha bo'ladi:
- AbortController Misol yarating
- Misolning signal xususiyatini oling va signalni signalni olish varianti sifatida uzating
- Ushbu signaldan foydalanadigan barcha chaqiruvlarni bekor qilish uchun AbortController-ning bekor qilish xususiyatiga chaqiradi Masalan, bir xil signalni bir nechta chaqiruv qo'ng'iroqlariga o'tkazamiz, bu signal bilan barcha so'rovlarni bekor qiladi,
const controller = new AbortController(); const { signal } = controller; fetch('http://localhost:8000', { signal }) .then((response) => { console.log(`Request 1 is complete!`); }) .catch((e) => { if (e.name === 'AbortError') { // We know it's been canceled! } }); fetch('http://localhost:8000', { signal }) .then((response) => { console.log(`Request 2 is complete!`); }) .catch((e) => { if (e.name === 'AbortError') { // We know it's been canceled! } }); // Wait 2 seconds to abort both requests setTimeout(() => controller.abort(), 2000);
-
Veb nutq API-si zamonaviy brauzerlarga nutqni (ya'ni, ovozli ma'lumotlarni veb-ilovalarda) tanib olish va sintez qilish imkonini berish uchun ishlatiladi. Ushbu API 2012 yilda W3C hamjamiyati tomonidan taqdim etilgan. U ikkita asosiy qismdan iborat:
- SpeechRecognition (Asynchronous Speech Recognition or Speech-to-Text): Bu audio kiritishdan ovozli kontekstni tanib olish va shunga mos ravishda javob berish imkoniyatini beradi. Bunga SpeechRecognition interfeys orqali kirish mumkin. Quyidagi misol nutqdan matn olish uchun ushbu APIdan qanday foydalanishni ko'rsatadi,
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; // webkitSpeechRecognition for Chrome and SpeechRecognition for FF const recognition = new window.SpeechRecognition(); recognition.onresult = (event) => { // SpeechRecognitionEvent type const speechToText = event.results[0][0].transcript; console.log(speechToText); }; recognition.start();
Ushbu API-da brauzer sizdan mikrofoningizdan foydalanishga ruxsat so'raydi
- SpeechSynthesis (Text-to-Speech): Bu audio kiritishdan ovozli kontekstni tanib olish va javob berish imkoniyatini beradi. Bunga SpeechSynthesisinterfeys orqali kirish mumkin.
Masalan, matndan ovoz/nutq olish uchun quyidagi kod ishlatiladi,
if ('speechSynthesis' in window) { var speech = new SpeechSynthesisUtterance('Hello World!'); speech.lang = 'en-US'; window.speechSynthesis.speak(speech); }
Yuqoridagi misollarni chrome(33+) brauzerining dasturchi konsolida sinab ko'rish mumkin. Note: Bu API hali ham ishlayotgan qoralama va faqat Chrome va Firefox brauzerlarida mavjud (albatta Chrome faqat spetsifikatsiyani amalga oshirgan)
-
Brauzer va NodeJS javascript muhitlari 0 ms dan ortiq minimal kechikish bilan siqiladi. Bu shuni anglatadiki, 0ms kechikish bir zumda sodir bo'lmaydi. Browsers: Ularda kamida 4ms kechikish bor. callbacklarni joylashtirish (ma'lum bir chuqurlik) tufayli yoki ma'lum bir qator ketma-ket oraliqlardan keyin ketma-ket qo'ng'iroqlar ishga tushirilganda, bu regulyator sodir bo'ladi. Eslatma: Eski brauzerlarda kamida 10 ms kechikish mavjud. Nodejs: Ularda kamida 1ms kechikish bor. Bu drossel kechikish 2147483647 dan kattaroq yoki 1 dan kamroq bo'lsa sodir bo'ladi. Bu vaqt tugashini qisqartirish xatti-harakatini tushuntirishga eng yaxshi misol quyida keltirilgan kod parchasi tartibidir.
function runMeFirst() { console.log('My script is initialized'); } setTimeout(runMeFirst, 0); console.log('Script loaded');
va natija mana shunday boladi
Script loaded My script is initialized
dan foydalanmasangiz
setTimeout, jurnallar tartibi ketma-ket bo'ladi.function runMeFirst() { console.log('My script is initialized'); } runMeFirst(); console.log('Script loaded');
and the output is,
My script is initialized Script loaded
-
0ms dan ortiq minimal kechikish tufayli kodni darhol bajarish uchun setTimeout(fn, 0) dan foydalana olmaysiz. Ammo bu xatti-harakatga erishish uchun window.postMessage() dan foydalanishingiz mumkin.
-
Vazifa - bu dasturni ishga tushirishni boshlash, voqeani callbackni boshlash yoki ishdan bo'shatilgan interval yoki vaqt tugashi kabi standart mexanizmlar tomonidan ishga tushirilishi rejalashtirilgan har qanday JavaScript kodi/dasturidir. Bu vazifalarning barchasi vazifa navbatida rejalashtirilgan. Quyida vazifalar navbatiga vazifalar qo'shish uchun foydalanish holatlari ro'yxati keltirilgan,
- Yangi JavaScript dasturi to'g'ridan-to'g'ri konsoldan yoki
<script>element tomonidan ishga tushirilganda, vazifa vazifalar qatoriga qo'shiladi. - Voqea sodir bo'lganda, voqeani callback vazifa navbatiga qo'shiladi
- SetTimeout yoki setIntervalga erishilganda, tegishli callback vazifa navbatiga qo'shiladi
- Yangi JavaScript dasturi to'g'ridan-to'g'ri konsoldan yoki
-
Microtask bu hozir bajarilayotgan vazifa/mikrotask bajarilgandan so'ng darhol bajarilishi kerak bo'lgan javascript kodi. Ular tabiatan to'siq bo'ladi. ya'ni, mikrovazifalar navbati bo'sh bo'lgunga qadar asosiy mavzu bloklanadi. Mikrotopshiriqlarning asosiy manbalari Promise.resolve, Promise.reject, MutationObservers, IntersectionObservers va boshqalar.
Note: Ushbu mikrovazifalarning barchasi voqea tsiklining bir xil aylanishida qayta ishlanadi. ⬆ Back to Top
-
Ma'lumki, hamma JavaScript kutubxonalari yoki ramkalarida TypeScript deklaratsiya fayllari mavjud emas. Ammo agar siz hali ham TypeScript fayllarimizdagi kutubxonalar yoki ramkalardan kompilyatsiya xatosiga yo'l qo'ymasdan foydalanmoqchi bo'lsangiz, yagona yechim - declareo'zgaruvchan deklaratsiya bilan birga kalit so'z. Misol uchun, sizda customLibraryTypeScript deklaratsiyasiga ega bo'lmagan va customLibraryglobal nomlar maydonida nom maydoniga ega bo'lgan kutubxonangiz bor deb tasavvur qilaylik. Siz ushbu kutubxonadan quyidagi matn kodida foydalanishingiz mumkin,
declare var customLibrary;
Ishlash vaqtida typescript customLibraryo'zgaruvchiga tur sifatida anyturni beradi. Declare kalit so'zini ishlatmasdan boshqa alternativa quyida keltirilgan
var customLibrary: any;
-
Jadval shaklidagi asosiy farqlardan ba'zilari
Promises Observables Bir vaqtning o'zida faqat bitta qiymat chiqaradi Muayyan vaqt davomida bir nechta qiymatlarni chiqaradi (0 dan bir nechta qiymatlar oqimi) Tabiatda ishtiyoqli; ular darhol chaqiriladi Tabiatan dangasa; ular obunani chaqirishni talab qiladi Va'da darhol hal qilingan bo'lsa ham, har doim asinxrondir Kuzatiladigan sinxron yoki asinxron bo'lishi mumkin Hech qanday operatorni taqdim etmaydi Map, forEach, filtrlash, kamaytirish, qayta urinish va retryWhen kabi operatorlarni taqdim etadi Bekor qilish mumkin emas unsubscribe() usuli yordamida bekor qilindi -
Heap(Yoki xotira uyasi) - bu o'zgaruvchilarni aniqlaganimizda objektlar saqlanadigan xotira joyi. Ya'ni, bu barcha xotira taqsimoti va ajratish joyi bo'lgan joy. Uyma va qo'ng'iroqlar to'plami ham JS ish vaqtining ikkita konteyneridir. Ish vaqti kodda o'zgaruvchilar va funksiya deklaratsiyasiga duch kelganda, ularni Uyumda saqlaydi.
-
Voqealar jadvali - bu ma'lum vaqt oralig'idan keyin yoki ba'zi API so'rovlari hal qilinganidan keyin asinxron tarzda bajariladigan barcha hodisalarni saqlaydigan va kuzatib boruvchi ma'lumotlar tuzilmasi. ya'ni setTimeout funksiyasini chaqirganingizda yoki asinxron operatsiyani chaqirganingizda, u Voqealar jadvaliga qo'shiladi. U o'z-o'zidan funktsiyalarni bajarmaydi. Voqealar jadvalining asosiy maqsadi voqealarni kuzatib borish va ularni quyidagi diagrammada ko'rsatilganidek, voqea navbatiga yuborishdir.
-
Microtask Queue - bu va'da qilingan objektlar tomonidan boshlangan barcha vazifalar callback qilish navbatidan oldin qayta ishlanadigan yangi navbat. Mikrovazifalar navbati keyingi renderlash va bo'yash ishlaridan oldin qayta ishlanadi. Ammo agar bu mikrovazifalar uzoq vaqt davomida ishlayotgan bo'lsa, bu vizual buzilishlarga olib keladi.
-
Shim bu faqat shu muhit vositalaridan foydalangan holda eski muhitga yangi API olib keladigan kutubxona. Bu veb-ilova bilan cheklanishi shart emas. Masalan, es5-shim.js eski brauzerlarda (asosan IE9-dan oldingi) ES5 xususiyatlarini taqlid qilish uchun ishlatiladi. Holbuki, polyfill bu kod (yoki plagin) boʻlagi boʻlib, u siz, ishlab chiquvchi, brauzer mahalliy sifatida taqdim etishini kutgan texnologiyani taʼminlaydi. Oddiy jumla bilan aytganda, polyfill brauzer API uchun shimdir.
-
JavaScriptda ibtidoiy turlarga boolean, string, number, BigInt, null, Symbol va undefined kiradi. Holbuki, ibtidoiy bo'lmagan turlarga objektlar kiradi. Lekin siz ularni quyidagi funksiya bilan osongina aniqlashingiz mumkin,
var myPrimitive = 30; var myNonPrimitive = {}; function isPrimitive(val) { return Object(val) !== val; } isPrimitive(myPrimitive); isPrimitive(myNonPrimitive);
Agar qiymat ibtidoiy ma'lumotlar turi bo'lsa, objekt konstruktori qiymat uchun yangi o'rash objektini yaratadi. Ammo agar qiymat ibtidoiy bo'lmagan ma'lumotlar turi (objekt) bo'lsa, objekt konstruktori xuddi shu objektni beradi.
-
Babel - bu ECMAScript 2015+ kodini joriy va eski brauzerlar yoki muhitlarda JavaScript-ning orqaga qarab mos keladigan versiyasiga aylantirish uchun JavaScript transpilyatoridir. Ba'zi asosiy xususiyatlar quyida keltirilgan,
- Transform syntax
- Maqsadli muhitda etishmayotgan Polyfill xususiyatlari (@babel/polyfill yordamida)
- Manba kodini o'zgartirish (yoki kod modlari)
-
Node bu bitta ip (single thread), lekin Node.js standart kutubxonasiga kiritilgan ba'zi funksiyalar (masalan, fs moduli funktsiyalari) bitta tishli emas. ya'ni, ularning mantig'i dasturning tezligi va ishlashini yaxshilash uchun Node.js bitta ish zarrachasidan tashqarida ishlaydi.
-
Kuzatiladigan qurilmalardan foydalanishning eng keng tarqalgan holatlaridan ba'zilari push-bildirishnomalari, foydalanuvchi kiritishidagi o'zgarishlar, takroriy intervallar va boshqalar bilan veb-rozetkalardir.
-
RxJS (Reactive Extensions for JavaScript) bu asinxron yoki callbackqa asoslangan kodni yaratishni osonlashtiradigan kuzatiladiganlardan foydalangan holda reaktiv dasturlashni amalga oshirish uchun kutubxona. Shuningdek, u kuzatiladiganlarni yaratish va ular bilan ishlash uchun yordamchi funksiyalarni taqdim etadi.
-
Funktsiya konstruktori va funksiya deklaratsiyasi o'rtasidagi farq nimaconstructor and function declaration
Bilan yaratilgan funksiyalar Function constructoro'zlarining yaratilish kontekstlariga chek qo'ymaydi, lekin ular doimo global miqyosda yaratiladi. ya'ni, funksiya faqat o'zining mahalliy o'zgaruvchilari va global qamrov o'zgaruvchilariga kirishi mumkin. Holbuki, funktsiya deklaratsiyasi tashqi funktsiya o'zgaruvchilariga (yopiqlar) ham kirishi mumkin.
Keling, bu farqni misol bilan ko'rib chiqaylik,
**Function Constructor:**
```javascript
var a = 100;
function createFunction() {
var a = 200;
return new Function('return a;');
}
console.log(createFunction()()); // 100
```
**Function declaration:**
```javascript
var a = 100;
function createFunction() {
var a = 200;
return function func() {
return a;
};
}
console.log(createFunction()()); // 200
```
**[⬆ Back to Top](#table-of-contents)**
-
Qisqa tutashuv shartlari oddiy if iboralarini siqilgan tarzda yozish uchun mo'ljallangan. Keling, misol yordamida stsenariyni namoyish qilaylik. Agar siz autentifikatsiya sharti bilan portalga kirmoqchi boʻlsangiz, quyidagi ifoda boʻladi:
if (authenticate) { loginToPorta(); }
Javascript mantiqiy operatorlari chapdan o'ngga qarab baholanganligi sababli, yuqoridagi ifodani && mantiqiy operatori yordamida soddalashtirish mumkin.
authenticate && loginToPorta();
-
Massivning uzunlik xossasi massiv o‘lchamini o‘zgartirish yoki tezda bo‘shatish uchun foydalidir. Elementlar sonini 5 dan 2 gacha o'zgartirish uchun raqamlar massivida uzunlik xususiyatini qo'llaymiz,
var array = [1, 2, 3, 4, 5]; console.log(array.length); // 5 array.length = 2; console.log(array.length); // 2 console.log(array); // [1,2]
and the array can be emptied too va array ham boshatilishi mumkin
var array = [1, 2, 3, 4, 5]; array.length = 0; console.log(array.length); // 0 console.log(array); // []
-
Kuzatiladigan funksiya asosan qiymatlar oqimini kuzatuvchiga vaqt o‘tishi bilan sinxron yoki asinxron tarzda qaytarishi mumkin bo‘lgan funksiyadir. Iste'molchi qo'ng'iroq subscribe()qilish usuli orqali qiymatni olishi mumkin. Keling, kuzatilishi mumkin bo'lgan oddiy misolni ko'rib chiqaylik
import { Observable } from 'rxjs'; const observable = new Observable((observer) => { setTimeout(() => { observer.next('Message from a Observable!'); }, 3000); }); observable.subscribe((value) => console.log(value));
Note: Kuzatiladiganlar hali JavaScript tilining bir qismi emas, lekin ularni tilga qo'shish taklif qilinmoqda
-
unktsiya deklaratsiyasi va class deklaratsiyasi o'rtasidagi asosiy farq shundaki
hoisting. Funktsiya deklaratsiyasi ko'tariladi, lekin sinf deklaratsiyasi emas.Classes:
const user = new User(); // ReferenceError class User {}
Constructor Function:
const user = new User(); // No error function User() {}
-
Asinx funksiya asynckalit so'z bilan e'lon qilingan funksiya bo'lib, asinxron, va'daga asoslangan xatti-harakatlarni va'da zanjirlaridan qochib, toza uslubda yozish imkonini beradi. Bu funktsiyalar nol yoki undan ko'p awaitifodalarni o'z ichiga olishi mumkin.
Keling, quyida async funktsiyasi misolini olaylik,
async function logger() { let data = await fetch('http://someapi.com/users'); // pause until fetch returns console.log(data); } logger();
Bu asosan ES2015 va'dalari va generatorlari bo'yicha sintaksis shakaridir.
-
Asinxron koddan foydalanganda, JavaScript-ning ES6 va'dalari callback piramidalarisiz va har ikkinchi qatorda xatoliklarni bartaraf qilmasdan hayotingizni ancha osonlashtirishi mumkin. Ammo va'dalarning ba'zi tuzoqlari bor va eng kattasi sukut bo'yicha xatolarni yutishdir.
Aytaylik, siz quyidagi barcha holatlar uchun konsolda xatolikni chop etishni kutmoqdasiz,
Promise.resolve('promised value').then(function () { throw new Error('error'); }); Promise.reject('error value').catch(function () { throw new Error('error'); }); new Promise(function (resolve, reject) { throw new Error('error'); });
Biroq, hech qanday xatoliklarni chop etmaydigan ko'plab zamonaviy JavaScript muhitlari mavjud. Siz bu muammoni turli yo'llar bilan hal qilishingiz mumkin,
-
Har bir zanjirning oxiriga ushlash blokini qo'shing: har bir va'da qilingan zanjirning oxiriga tutib olish blokini qo'shishingiz mumkin
Promise.resolve('promised value') .then(function () { throw new Error('error'); }) .catch(function (error) { console.error(error.stack); });
Ammo har bir va'da zanjiri va batafsil ma'lumot uchun yozish juda qiyin.
-
Bajarilgan usulni qo'shish: Birinchi yechimni keyin o'zgartirishingiz va bloklarni bajarilgan usul bilan ushlashingiz mumkin
Promise.resolve('promised value').done(function () { throw new Error('error'); });
Aytaylik, siz HTTP yordamida ma'lumotlarni olishni xohlaysiz va keyinchalik olingan ma'lumotlarga asinxron tarzda ishlov berishni xohlaysiz.
doneBlokni quyidagi tarzda yozishingiz mumkin ,getDataFromHttp() .then(function (result) { return processDataAsync(result); }) .done(function (processed) { displayData(processed); });
Kelajakda, agar qayta ishlash kutubxonasi API sinxronlashtirilsa, siz
doneblokni quyidagi tarzda olib tashlashingiz mumkin,getDataFromHttp().then(function (result) { return displayData(processDataAsync(result)); });
va keyin siz jim xatolarga olib keladigan blokirovka qilish uchun blok done qo'shishni unutdingiz.then
-
Extend ES6 Promises by Bluebird: Bluebird ikkinchi yechimdagi muammoning oldini olish uchun ES6 Promises API-ni kengaytiradi. Ushbu kutubxonada rad etilgan va'dalardan stderrgacha bo'lgan barcha xatolarni chop etadigan "standart" onRejection ishlov beruvchisi mavjud. O'rnatishdan so'ng, ishlov berilmagan rad etishlarni qayta ishlashingiz mumkin
Promise.onPossiblyUnhandledRejection(function (error) { throw error; });
va rad etishni rad eting, uni faqat bo'sh ushlash bilan bajaring
Promise.reject('error value').catch(function () {});
-
-
Deno - bu V8 JavaScript dvigateli va Rust dasturlash tilidan foydalanadigan JavaScript va TypeScript uchun oddiy, zamonaviy va xavfsiz ish vaqti.
-
Odatiy bo'lib, oddiy objektlar takrorlanmaydi. Lekin siz objektga xossani belgilash orqali uni iterable qilishingiz mumkin
Symbol.iterator.Buni misol bilan ko'rsatamiz,
const collection = { one: 1, two: 2, three: 3, [Symbol.iterator]() { const values = Object.keys(this); let i = 0; return { next: () => { return { value: this[values[i++]], done: i > values.length, }; }, }; }, }; const iterator = collection[Symbol.iterator](); console.log(iterator.next()); // → {value: 1, done: false} console.log(iterator.next()); // → {value: 2, done: false} console.log(iterator.next()); // → {value: 3, done: false} console.log(iterator.next()); // → {value: undefined, done: true}
Yuqoridagi jarayonni generator funktsiyasi yordamida soddalashtirish mumkin,
const collection = { one: 1, two: 2, three: 3, [Symbol.iterator]: function* () { for (let key in this) { yield this[key]; } }, }; const iterator = collection[Symbol.iterator](); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} console.log(iterator.next()); // {value: undefined, done: true}
-
Birinchidan, "Proper Tail Call" haqida gapirishdan oldin quyruq haqida bilishimiz kerak. Quyi qo'ng'iroq - chaqiruvchi funktsiyaning yakuniy harakati sifatida bajariladigan pastki dastur yoki funktsiya chaqiruvi. Holbuki , Proper tail call(PTC) - bu funktsiya chaqiruvi quyruq chaqiruvi bo'lganda, dastur yoki kod rekursiya uchun qo'shimcha stek ramkalarini yaratmaydigan usul.
Masalan, faktorial funktsiyaning quyidagi klassik yoki bosh rekursiyasi har bir qadam uchun stekga tayanadi. Har bir bosqichga qadar ishlov berish kerak
n * factorial(n - 1)function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); } console.log(factorial(5)); //120
Ammo agar siz Tail rekursiya funksiyalaridan foydalansangiz, ular stekga tayanmasdan, kerakli barcha kerakli ma’lumotlarni rekursiyaga o‘tkazishda davom etadi.
function factorial(n, acc = 1) { if (n === 0) { return acc; } return factorial(n - 1, n * acc); } console.log(factorial(5)); //120
Yuqoridagi naqsh birinchisi bilan bir xil natijani qaytaradi. Ammo akkumulyator rekursiv qo'ng'iroqlarda stek xotirasidan foydalanmasdan jami argument sifatida hisobini yuritadi.
-
Agar qiymat va'dami yoki yo'qligini bilmasangiz, va'dani
Promise.resolve(value)qaytaradigan qiymat sifatida o'rashfunction isPromise(object) { if (Promise && Promise.resolve) { return Promise.resolve(object) == object; } else { throw 'Promise not supported in your environment'; } } var i = 1; var promise = new Promise(function (resolve, reject) { resolve(); }); console.log(isPromise(i)); // false console.log(isPromise(promise)); // true
Yana bir usul -
.then()ishlov beruvchi turini tekshirishfunction isPromise(value) { return Boolean(value && typeof value.then === 'function'); } var i = 1; var promise = new Promise(function (resolve, reject) { resolve(); }); console.log(isPromise(i)); // false console.log(isPromise(promise)); // true
-
new.targetPseudo-xususiyatdan funktsiya konstruktor (yangi operator yordamida) yoki oddiy funksiya chaqiruvi sifatida chaqirilganligini aniqlash uchun foydalanishingiz mumkin .- Agar konstruktor yoki funksiya new operatori yordamida chaqirilsa, new.target konstruktor yoki funksiyaga havolani qaytaradi.
- Funktsiya chaqiruvlari uchun new.target aniqlanmagan.
function Myfunc() { if (new.target) { console.log('called with new'); } else { console.log('not called with new'); } } new Myfunc(); // called with new Myfunc(); // not called with new Myfunc.call({}); not called with new
-
Argumentlar objekti va dam olish parametrlari o'rtasida uchta asosiy farq mavjud
- Argumentlar objekti massivga o'xshaydi, lekin massiv emas. Qolgan parametrlar esa massiv misollaridir.
- Argumentlar obyekti tartiblash, xaritalash, forEach yoki pop kabi usullarni qo‘llab-quvvatlamaydi. Holbuki, bu usullar dam olish parametrlarida ishlatilishi mumkin.
- Qolgan parametrlar faqat alohida nom berilmagan parametrlardir, argumentlar obyekti esa funksiyaga oʻtkazilgan barcha argumentlarni oʻz ichiga oladi.
-
Rest parametri qolgan barcha elementlarni massivga to'playdi. Holbuki, Spread operatori takrorlanuvchilarni (massivlar / objektlar / satrlar) bitta argumentlar / elementlarga kengaytirilishiga imkon beradi. ya'ni, Rest parametri tarqalish operatoriga qarama-qarshidir.
-
Besh turdagi generatorlar mavjud,
-
Generator function declaration:
function* myGenFunc() { yield 1; yield 2; yield 3; } const genObj = myGenFunc();
-
Generator function expressions:
const myGenFunc = function* () { yield 1; yield 2; yield 3; }; const genObj = myGenFunc();
-
Generator method definitions in object literals:
const myObj = { *myGeneratorMethod() { yield 1; yield 2; yield 3; }, }; const genObj = myObj.myGeneratorMethod();
-
Generator method definitions in class:
class MyClass { *myGeneratorMethod() { yield 1; yield 2; yield 3; } } const myObject = new MyClass(); const genObj = myObject.myGeneratorMethod();
-
Generator as a computed property:
const SomeObj = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; }, }; console.log(Array.from(SomeObj)); // [ 1, 2, 3 ]
-
-
Quyida JavaScriptda o'rnatilgan iterativlar ro'yxati keltirilgan,
- Arrays and TypedArrays
- Strings: Har bir belgi yoki Unicode kod nuqtalari ustida takrorlang
- Maps: ikalit-qiymat juftliklarini takrorlash
- Sets: kalit-qiymat juftliklarini takrorlash
- arguments: Funktsiyalarda massivga o'xshash maxsus o'zgaruvchi
- NodeList kabi DOM to'plami
-
Js maʼlumotlar tuzilmalari boʻyicha ham for...in, ham for...of iboralari takrorlanadi. Yagona farq ular takrorlagan narsada:
- for..in objektning barcha sanab o'tiladigan xususiyat kalitlari bo'ylab takrorlanadi
- for..of iteratsiya qilinadigan objektning qiymatlari ustidan takrorlanadi.
Keling, bu farqni misol bilan tushuntiramiz,
let arr = ['a', 'b', 'c']; arr.newProp = 'newVlue'; // key are the property keys for (let key in arr) { console.log(key); } // value are the property values for (let value of arr) { console.log(value); }
For..in tsikli objekt tugmalari ustida takrorlanganligi sababli, birinchi sikl massiv objekti bo'ylab takrorlanayotganda 0, 1, 2 va newProp ni qayd qiladi. For..of sikli arr maʼlumotlar strukturasi qiymatlari ustidan takrorlanadi va konsolda a, b, c jurnallarini qayd qiladi.
-
Instance xususiyatlari sinf usullari ichida aniqlanishi kerak. Masalan, ism va yosh xususiyatlari insayder konstruktorni quyidagi tarzda aniqlaydi,
class Person { constructor(name, age) { this.name = name; this.age = age; } }
Statik (sinf) va prototip ma'lumotlar xususiyatlari ClassBody deklaratsiyasidan tashqarida aniqlanishi kerak. Keling, Person sinfi uchun yosh qiymatini quyida belgilaymiz,
Person.staticAge = 30; Person.prototype.prototypeAge = 40;
-
- isNaN: Global funktsiya
isNaNargumentni Raqamga aylantiradi va natijada olingan qiymat NaN bo'lsa, true qiymatini qaytaradi. - Number.isNaN: Bu usul argumentni aylantirmaydi. Lekin u Raqam turi va NaN qiymati bo'lsa, u haqiqatni qaytaradi.
Keling, farqni misol bilan ko'rib chiqaylik,
isNaN(‘hello’); // true Number.isNaN('hello'); // false
- isNaN: Global funktsiya
-
Darhol chaqiriladigan funktsiya ifodalari (IIFE) bayonotlar to'plamini o'z ichiga olgan funktsiyani o'rash uchun bir juft qavsni talab qiladi.
(function (dt) { console.log(dt.toLocaleTimeString()); })(new Date());
Ikkala IIFE ham, void operatori ham ifoda natijasini bekor
void operatorqilganligi sababli, quyidagi kabi IIFE uchun qo'shimcha qavslardan qochishingiz mumkin,void (function (dt) { console.log(dt.toLocaleTimeString()); })(new Date());
-
Siz almashtirish holatida ishlatiladigan iboralarni ko'rgan bo'lishingiz mumkin, lekin almashtirish holati uchun haqiqiy qiymatni belgilash orqali almashtirish holatlari uchun ham foydalanish mumkin. Misol tariqasida haroratga asoslangan ob-havo sharoitini ko'rib chiqaylik,
const weather = (function getWeather(temp) { switch (true) { case temp < 0: return 'freezing'; case temp < 10: return 'cold'; case temp < 24: return 'cool'; default: return 'unknown'; } })(10);
-
Va'da qilingan xatolarga e'tibor bermaslikning eng oson va xavfsiz usuli bu xatoni bekor qilishdir. Ushbu yondashuv ESLint-ga ham mos keladi.
await promise.catch((e) => void e);
-
Konsol chiqishiga CSS formati kontent spetsifikatsiyasi %c yordamida CSS uslubini qo'shishingiz mumkin. Konsol satri xabari boshqa argumentda spetsifikatsiya va CSS uslubidan keyin qo'shilishi mumkin. Quyidagi kabi console.log va CSS spetsifikatsiyasi yordamida qizil rangli matnni chop qilaylik,
console.log('%cThis is a red text', 'color:red');
Bundan tashqari, tarkibga ko'proq uslublar qo'shish mumkin. Masalan, yuqoridagi matn uchun shrift o'lchamini o'zgartirish mumkin
console.log( '%cThis is a red text with bigger font', 'color:red; font-size:20px' );
-
Bu mantiqiy operator bo'lib, agar chap tomondagi operand nol yoki aniqlanmagan bo'lsa, o'zining o'ng tomoni operandini qaytaradi, aks holda chap tomon operandini qaytaradi. Buni mantiqiy OR (||) operatori bilan taqqoslash mumkin, agar chap operand faqat null yoki aniqlanmagan bo'lsa, o'ng tomondagi operandni qaytaradi.
console.log(null ?? true); // true console.log(false ?? true); // false console.log(undefined ?? true); // true
-
Jurnallarni
console.group()osongina o'qish va guruhni yopish uchun console.groupEnd() dan foydalanish uchun tegishli jurnal xabarlarini guruhlash uchun foydalanish mumkin. Shu bilan birga, siz xabarlarni ierarxik tarzda chiqarish imkonini beruvchi guruhlarni joylashtirishingiz mumkin.Misol uchun, agar siz foydalanuvchi ma'lumotlarini qayd qilsangiz:
console.group('User Details'); console.log('name: Sudheer Jonna'); console.log('job: Software Developer'); // Nested Group console.group('Address'); console.log('Street: Commonwealth'); console.log('City: Los Angeles'); console.log('State: California'); console.groupEnd();
Agar siz guruhlar sukut bo'yicha yopilishini xohlasangiz,
console.groupCollapsed()o'rniga foydalanishingiz mumkin.console.group() -
Birinchi(0) dan oxirgi (array.length - 1) gacha bo'lgan har bir indeksdagi elementlarni o'z ichiga olgan massiv zich massiv deb ataladi. Har qanday indeksda kamida bitta element yo'q bo'lsa, massiv siyrak deb nomlanadi.
Keling, quyidagi ikki turdagi massivlarni ko'rib chiqaylik,
const avengers = ['Ironman', 'Hulk', 'CaptainAmerica']; console.log(avengers[0]); // 'Ironman' console.log(avengers[1]); // 'Hulk' console.log(avengers[2]); // 'CaptainAmerica' console.log(avengers.length); // 3 const justiceLeague = ['Superman', 'Aquaman', , 'Batman']; console.log(justiceLeague[0]); // 'Superman' console.log(justiceLeague[1]); // 'Aquaman' console.log(justiceLeague[2]); // undefined console.log(justiceLeague[3]); // 'Batman' console.log(justiceLeague.length); // 4
-
JavaScriptda siyrak massivlarni yaratishning 4 xil usuli mavjud
-
Array literal: massiv literalidan foydalanganda qiymatni o'tkazib yuboring
const justiceLeague = ['Superman', 'Aquaman', , 'Batman']; console.log(justiceLeague); // ['Superman', 'Aquaman', empty ,'Batman']
-
Array() constructor: Massivni (uzunlik) yoki yangi massivni (uzunlik) chaqirish
const array = Array(3); console.log(array); // [empty, empty ,empty]
-
Delete operator: massivda o'chirish[index] operatoridan foydalanish const justiceLeague = ['Superman', 'Aquaman', 'Batman']; delete justiceLeague[1]; console.log(justiceLeague); // ['Superman', empty, ,'Batman']
-
Increase length property: massivning uzunlik xususiyatini oshirish
js const justiceLeague = ['Superman', 'Aquaman', 'Batman']; justiceLeague.length = 5; console.log(justiceLeague); // ['Superman', 'Aquaman', 'Batman', empty, empty]⬆ Back to Top
-
-
setTimeout, setImmediate va process.nextTick o'rtasidagi farq nima]setImmediate and process.nextTick?
- Set Timeout: setTimeout() millisekundlar kechikishidan keyin bir martalik callbackning bajarilishini rejalashtirishdir.
- Set Immediate: setImmediate funksiyasi joriy voqea tsikli tugagandan so'ng darhol funktsiyani bajarish uchun ishlatiladi.
- Process NextTick: Agar ma'lum bir bosqichda process.nextTick() chaqirilsa, process.nextTick() ga o'tkazilgan barcha callbacklar voqea tsikli davom etgunga qadar hal qilinadi. Agar process.nextTick() rekursiv chaqirilsa, bu hodisa siklini bloklaydi va I/U ochligini yaratadi.
-
Usul
reverse()massivdagi elementlarning tartibini o'zgartiradi, lekin asl massivni o'zgartiradi. Bu holatni isbotlash uchun oddiy misol keltiraylik,const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.reverse(); console.log(newArray); // [ 5, 4, 3, 2, 1] console.log(originalArray); // [ 5, 4, 3, 2, 1]
Asl massivni o'zgartirmaydigan bir nechta echimlar mavjud. Keling, bir ko'rib chiqaylik.
-
Using slice and reverse methods: Bunday holda,
slice()sayoz nusxa yaratish uchun massivdagi usuldan so'ng nusxadagi usulni chaqirish kifoyareverse().const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.slice().reverse(); //Slice an array gives a new copy console.log(originalArray); // [1, 2, 3, 4, 5] console.log(newArray); // [ 5, 4, 3, 2, 1]
-
Using spread and reverse methods: Bu holda, massivning nusxasini yaratish uchun tarqalish sintaksisidan (...) foydalanamiz va undan so'ng
reverse()nusxada usul chaqiramiz.const originalArray = [1, 2, 3, 4, 5]; const newArray = [...originalArray].reverse(); console.log(originalArray); // [1, 2, 3, 4, 5] console.log(newArray); // [ 5, 4, 3, 2, 1]
-
Using reduce and spread methods: Bu yerda massiv elementlarida reduktor funksiyasini bajaring va tarqalish sintaksisi yordamida to‘plangan massivni o‘ng tomonga qo‘shing.
const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.reduce((accumulator, value) => { return [value, ...accumulator]; }, []); console.log(originalArray); // [1, 2, 3, 4, 5] console.log(newArray); // [ 5, 4, 3, 2, 1]
-
Using reduceRight and spread methods: Bu yerda massiv elementlarida o‘ng reduktor funksiyasini (ya’ni kamaytirish usulining teskari yo‘nalishini) bajaring va tarqalish sintaksisi yordamida to‘plangan massivni chap tomonga qo‘shing.
const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.reduceRight((accumulator, value) => { return [...accumulator, value]; }, []); console.log(originalArray); // [1, 2, 3, 4, 5] console.log(newArray); // [ 5, 4, 3, 2, 1]
-
Using reduceRight and push methods: Bu yerda massiv elementlarida o‘ng reduktor funksiyasini (ya’ni kamaytirish usulining qarama-qarshi yo‘nalishini) bajaring va takrorlangan qiymatni akkumulyatorga suring.
const originalArray = [1, 2, 3, 4, 5]; const newArray = originalArray.reduceRight((accumulator, value) => { accumulator.push(value); return accumulator; }, []); console.log(originalArray); // [1, 2, 3, 4, 5] console.log(newArray); // [ 5, 4, 3, 2, 1]
-
var car = new Vehicle('Honda', 'white', '2010', 'UK');
console.log(car);
function Vehicle(model, color, year, country) {
this.model = model;
this.color = color;
this.year = year;
this.country = country;
}- 1: Undefined
- 2: ReferenceError
- 3: null
- 4: {model: "Honda", color: "white", year: "2010", country: "UK"}
Answer
Funktsiya deklaratsiyasi har qanday o'zgaruvchilarga o'xshash tarzda ko'tariladi. Shunday qilib, Vehicle funktsiya deklaratsiyasini joylashtirish hech qanday farq qilmaydi.
function foo() {
let x = (y = 0);
x++;
y++;
return x;
}
console.log(foo(), typeof x, typeof y);- 1: 1, undefined and undefined
- 2: ReferenceError: X is not defined
- 3: 1, undefined and number
- 4: 1, number and number
Answer
Albatta ning qaytish qiymati foo()o'sish operatori tufayli 1 ga teng. Lekin bayonot let x = y = 0mahalliy x o'zgaruvchini e'lon qiladi. Holbuki y tasodifan global o'zgaruvchi sifatida e'lon qilingan. Bu bayonot tengdir,
let x;
window.y = 0;
x = window.y;Blok doirasidagi x o'zgaruvchisi funksiyadan tashqarida aniqlanmaganligi sababli, tur ham aniqlanmagan bo'ladi. Global o'zgaruvchi yfunktsiyadan tashqarida mavjud bo'lsa, qiymat 0 va turi raqam.
function main() {
console.log('A');
setTimeout(function print() {
console.log('B');
}, 0);
console.log('C');
}
main();- 1: A, B and C
- 2: B, A and C
- 3: A and C
- 4: A, C and B
Answer
Bayonotlar tartibi voqealar tsikli mexanizmiga asoslanadi. Bayonotlar tartibi quyidagi tartibda bo'ladi,
- Dastlab, asosiy funktsiya stekga suriladi.
- Keyin brauzer asosiy funktsiyaning birinchi bayonotini (ya'ni, A ning console.log) stekga surib, darhol ishga tushadi va chiqadi.
- Ammo setTimeout callback uchun kechikishni qo'llash uchun bayonot Brauzer API-ga ko'chirildi.
- Bu orada, C ning console.log stekga qo'shildi, bajarildi va chiqdi.
- Callback setTimeoutBrauzer API-dan xabarlar navbatiga ko'chirildi.
- Funktsiya mainstekdan chiqib ketdi, chunki bajariladigan bayonotlar yo'q
- Callback xabarlar navbatdan stekga ko'chirildi, chunki stek bo'sh.
- B uchun console.log stekga qo'shiladi va konsolda ko'rsatiladi.
console.log(0.1 + 0.2 === 0.3);- 1: false
- 2: true
Answer
Bu float nuqta matematik muammosiga bog'liq. Suzuvchi nuqta raqamlari ikkilik formatda kodlanganligi sababli, ulardagi qo'shish operatsiyalari yaxlitlash xatolariga olib keladi. Demak, suzuvchi nuqtalarni taqqoslash kutilgan natijani bermaydi. Tushuntirish haqida batafsil ma'lumotni bu yerda topishingiz mumkin 0.30000000000000004.com/
var y = 1;
if (function f() {}) {
y += typeof f;
}
console.log(y);- 1: 1function
- 2: 1object
- 3: ReferenceError
- 4: 1undefined
Answer
Yuqoridagi kod parchalaridagi asosiy fikrlar quyidagilardir:
- If iborasi ichida funktsiya deklaratsiyasi o'rniga funktsiya ifodasini ko'rishingiz mumkin. Shunday qilib, u har doim haqiqatga qaytadi.
- U hech qanday joyda e'lon qilinmagan (yoki tayinlanmagan) uchun f aniqlanmagan va f turi ham aniqlanmagan.
Boshqacha qilib aytganda, xuddi shunday
var y = 1;
if ('foo') {
y += typeof f;
}
console.log(y);Note: MS Edge brauzeri uchun 1 objektni qaytaradi
function foo() {
return;
{
message: 'Hello World';
}
}
console.log(foo());- 1: Hello World
- 2: Object {message: "Hello World"}
- 3: Undefined
- 4: SyntaxError
Answer
Bu nuqta-vergul muammosi. Odatda JavaScriptda nuqta-vergul ixtiyoriy. Shunday qilib, agar biron bir ibora (bu holda, qaytish) mavjud bo'lsa, nuqta-vergul yo'q bo'lsa, u darhol avtomatik ravishda kiritiladi. Shunday qilib, funktsiya aniqlanmagan sifatida qaytarildi.
Agar ochiladigan jingalak qavs return kalit so'zi bilan birga bo'lsa, funktsiya kutilganidek qaytariladi.
function foo() {
return {
message: 'Hello World',
};
}
console.log(foo()); // {message: "Hello World"}var myChars = ['a', 'b', 'c', 'd'];
delete myChars[0];
console.log(myChars);
console.log(myChars[0]);
console.log(myChars.length);- 1: [empty, 'b', 'c', 'd'], empty, 3
- 2: [null, 'b', 'c', 'd'], empty, 3
- 3: [empty, 'b', 'c', 'd'], undefined, 4
- 4: [null, 'b', 'c', 'd'], undefined, 4
Answer
Operator deleteobjekt xususiyatini o'chiradi, lekin u massivni qayta indekslamaydi yoki uning uzunligini o'zgartirmaydi. Shunday qilib, massivning soni yoki elementlari yoki uzunligi o'zgarmaydi. Agar siz myChars-ni chop qilmoqchi bo'lsangiz, u noaniq qiymat o'rnatmasligini, aksincha xususiyat massivdan o'chirilganligini kuzatishingiz mumkin. Chrome-ning yangi versiyalari farqni biroz aniqroq qilish emptyo'rniga foydalanadi.undefined
var array1 = new Array(3);
console.log(array1);
var array2 = [];
array2[2] = 100;
console.log(array2);
var array3 = [, , ,];
console.log(array3);- 1: [undefined × 3], [undefined × 2, 100], [undefined × 3]
- 2: [empty × 3], [empty × 2, 100], [empty × 3]
- 3: [null × 3], [null × 2, 100], [null × 3]
- 4: [], [100], []
Answer
Eng so'nggi Chrome versiyalari sparse arrayushbu bo'sh xn belgisi yordamida ko'rsatiladi (ular teshiklar bilan to'ldirilgan). Holbuki eski versiyalarda aniqlanmagan xn yozuvlari mavjud. Eslatma: FF ning so'nggi versiyasi n empty slotsnotatsiyani ko'rsatadi.
const obj = {
prop1: function () {
return 0;
},
prop2() {
return 1;
},
['prop' + 3]() {
return 2;
},
};
console.log(obj.prop1());
console.log(obj.prop2());
console.log(obj.prop3());- 1: 0, 1, 2
- 2: 0, { return 1 }, 2
- 3: 0, { return 1 }, { return 2 }
- 4: 0, 1, undefined
Answer
ES6 objektlar uchun usul ta'riflari va xususiyat qisqartmalarini taqdim etadi. Shunday qilib, prop2 va prop3 ham muntazam funktsiya qiymatlari sifatida ko'rib chiqiladi.
console.log(1 < 2 < 3);
console.log(3 > 2 > 1);- 1: true, true
- 2: true, false
- 3: SyntaxError, SyntaxError,
- 4: false, false
Answer
Muhim nuqta shundaki, agar bayonot bir xil operatorlarni o'z ichiga olgan bo'lsa (masalan, < yoki >), uni chapdan o'ngga qarab baholash mumkin. Birinchi bayonot quyidagi tartibda bo'ladi,
- console.log(1 < 2 < 3);
- console.log(true < 3);
- console.log(1 < 3); // Taqqoslash paytidagidek true aylantirildi
- True
Ikkinchi bayonot quyidagi tartibda bo'lsa,
- console.log(3 > 2 > 1);
- console.log(true > 1);
- console.log(1 > 1); // Taqqoslash paytidagidek false aylantirildi
- False
function printNumbers(first, second, first) {
console.log(first, second, first);
}
printNumbers(1, 2, 3);- 1: 1, 2, 3
- 2: 3, 2, 3
- 3: SyntaxError: Duplicate parameter name not allowed in this context
- 4: 1, 2, 1
Answer
Qattiq bo'lmagan rejimda odatiy JavaScript funktsiyalari nomli parametrlarni takrorlash imkonini beradi. Yuqoridagi kod parchasi 1 va 3 parametrlarda takroriy parametrlarga ega. Birinchi parametrning qiymati funksiyaga uzatiladigan uchinchi argumentga moslashtiriladi. Demak, 3-argument birinchi parametrni bekor qiladi.
Eslatma: Qattiq rejimda takroriy parametrlar Sintaksis xatosini keltirib chiqaradi.
const printNumbersArrow = (first, second, first) => {
console.log(first, second, first);
};
printNumbersArrow(1, 2, 3);- 1: 1, 2, 3
- 2: 3, 2, 3
- 3: SyntaxError: Duplicate parameter name not allowed in this context
- 4: 1, 2, 1
Answer
Oddiy funktsiyalardan farqli o'laroq, o'q funktsiyalari qat'iy yoki qat'iy bo'lmagan rejimda takroriy parametrlarga ruxsat bermaydi. SyntaxErrorShunday qilib, siz konsolda ko'rishingiz mumkin .
const arrowFunc = () => arguments.length;
console.log(arrowFunc(1, 2, 3));- 1: ReferenceError: arguments is not defined
- 2: 3
- 3: undefined
- 4: null
Answer
O'q funktsiyalarida arguments, super, this, or new.targetbog'lanish mavjud emas. Shunday qilib, o'zgaruvchiga har qanday havola argumentsleksik jihatdan o'ralgan muhitda bog'lanishni hal qilishga harakat qiladi. Bunday holda, argumentlar o'zgaruvchisi o'q funktsiyasidan tashqarida aniqlanmaydi. Shunday qilib, siz mos yozuvlar xatosini olasiz.
Oddiy funktsiya funksiyaga uzatiladigan argumentlar sonini ta'minlaydi
const func = function () {
return arguments.length;
};
console.log(func(1, 2, 3));Ammo agar siz hali ham o'q funksiyasidan foydalanmoqchi bo'lsangiz, argumentlar bo'yicha rest operatori kutilgan argumentlarni taqdim etadi
const arrowFunc = (...args) => args.length;
console.log(arrowFunc(1, 2, 3));console.log(String.prototype.trimLeft.name === 'trimLeft');
console.log(String.prototype.trimLeft.name === 'trimStart');- 1: True, False
- 2: False, True
Answer
kabi funktsiyalarga mos kelishi String.prototype.padStartuchun bo'shliqlarni kesish uchun standart usul nomi sifatida qabul qilinadi trimStart. Veb-veb-moslashuv sabablari tufayli, eski usul nomi "trimLeft" hali ham "trimStart" uchun taxallus sifatida ishlaydi. Shunday qilib, "trimLeft" prototipi har doim "trimStart" dir.
console.log(Math.max());- 1: undefined
- 2: Infinity
- 3: 0
- 4: -Infinity
Answer
-Infinity boshlang'ich taqqoslanuvchi hisoblanadi, chunki deyarli barcha boshqa qiymatlar kattaroqdir. Shunday qilib, hech qanday dalillar keltirilmaganda, -Infinity qaytariladi. Eslatma: Argumentlarning nol soni haqiqiy holat hisoblanadi.
console.log(10 == [10]);
console.log(10 == [[[[[[[10]]]]]]]);- 1: True, True
- 2: True, False
- 3: False, False
- 4: False, True
Answer
ECMAScript spetsifikatsiyasidagi (ECMA-262) taqqoslash algoritmiga ko'ra, yuqoridagi ifoda quyidagi tarzda JS ga aylantirildi
10 === Number([10].valueOf().toString()); // 10Demak, raqam atrofidagi raqamli qavslar ([]) muhim emas, u har doim ifodadagi raqamga aylantiriladi.
console.log(10 + '10');
console.log(10 - '10');- 1: 20, 0
- 2: 1010, 0
- 3: 1010, 10-10
- 4: NaN, NaN
Answer
Birlashtirish operatori (+) ham son, ham qator turlari uchun qo'llaniladi. Shunday qilib, agar biron bir operand satr turi bo'lsa, ikkala operand ham satrlar sifatida birlashtiriladi. Ayirma (-) operatori operandlarni raqam turiga aylantirishga harakat qiladi.
console.log([0] == false);
if ([0]) {
console.log("I'm True");
} else {
console.log("I'm False");
}- 1: True, I'm True
- 2: True, I'm False
- 3: False, I'm True
- 4: False, I'm False
Answer
Taqqoslash operatorlarida ifoda [0]Number([0].valueOf().toString()) ga aylantirildi, u noto'g'ri deb hal qilinadi. Holbuki [0], taqqoslash operatori yo'qligi sababli hech qanday konvertatsiya qilmasdan haqiqiy qiymatga aylanadi.
console.log([1, 2] + [3, 4]);- 1: [1,2,3,4]
- 2: [1,2][3,4]
- 3: SyntaxError
- 4: 1,23,4
Answer
- operatori massivlar uchun mo'ljallanmagan yoki aniqlanmagan. Shunday qilib, u massivlarni satrlarga aylantiradi va ularni birlashtiradi.
const numbers = new Set([1, 1, 2, 3, 4]);
console.log(numbers);
const browser = new Set('Firefox');
console.log(browser);- 1: {1, 2, 3, 4}, {"F", "i", "r", "e", "f", "o", "x"}
- 2: {1, 2, 3, 4}, {"F", "i", "r", "e", "o", "x"}
- 3: [1, 2, 3, 4], ["F", "i", "r", "e", "o", "x"]
- 4: {1, 1, 2, 3, 4}, {"F", "i", "r", "e", "f", "o", "x"}
Answer
Set objekt noyob qiymatlar to'plami bo'lgani uchun u to'plamdagi takroriy qiymatlarga ruxsat bermaydi . Shu bilan birga, bu katta-kichik harflarga sezgir ma'lumotlar tuzilmasi.
console.log(NaN === NaN);- 1: True
- 2: False
Answer
JavaScript IEEE 754 spetsifikatsiya standartlariga amal qiladi. Ushbu spetsifikatsiyaga ko'ra, NaN'lar suzuvchi nuqtali raqamlar uchun hech qachon teng bo'lmaydi.
let numbers = [1, 2, 3, 4, NaN];
console.log(numbers.indexOf(NaN));- 1: 4
- 2: NaN
- 3: SyntaxError
- 4: -1
Answer
Ichkarida indexOf qat'iy tenglik operatoridan (===) foydalanadi va NaN === NaNnoto'g'ri deb baholaydi. indexOf massiv ichida NaN ni topa olmagani uchun u har doim -1 ni qaytaradi. Ammo siz Array.prototype.findIndexmassiv dagi NaN indeksini aniqlash uchun usuldan foydalanishingiz mumkin yoki NaN massivda bor yoki Array.prototype.includesyo'qligini tekshirish uchun foydalanishingiz mumkin.
let numbers = [1, 2, 3, 4, NaN];
console.log(numbers.findIndex(Number.isNaN)); // 4
console.log(numbers.includes(NaN)); // truelet [a, ...b] = [1, 2, 3, 4, 5];
console.log(a, b);- 1: 1, [2, 3, 4, 5]
- 2: 1, {2, 3, 4, 5}
- 3: SyntaxError
- 4: 1, [2, 3, 4]
Answer
Dam olish parametrlaridan foydalanganda, keyingi vergullarga ruxsat berilmaydi va SyntaxError paydo bo'ladi. Agar siz keyingi vergulni olib tashlasangiz, u 1-javobni ko'rsatadi
let [a, ...b] = [1, 2, 3, 4, 5];
console.log(a, b); // 1, [2, 3, 4, 5]async function func() {
return 10;
}
console.log(func());- 1: Promise {<fulfilled>: 10}
- 2: 10
- 3: SyntaxError
- 4: Promise {<rejected>: 10}
Answer
Async funktsiyalari har doim va'da beradi. Biroq, asinxronizatsiya funktsiyasining qaytish qiymati aniq va'da bo'lmasa ham, u va'da bilan o'ralgan bo'ladi. Yuqoridagi asinxron funksiyasi quyidagi ifodaga teng,
function func() {
return Promise.resolve(10);
}async function func() {
await 10;
}
console.log(func());- 1: Promise {<fulfilled>: 10}
- 2: 10
- 3: SyntaxError
- 4: Promise {<resolved>: undefined}
Answer
Kutish ifodasi va'da qilingan aniqlik bilan 10 qiymatini qaytaradi va har bir kutish ifodasidan keyingi kod .thenqayta qo'ng'iroqda mavjud sifatida ko'rib chiqilishi mumkin. Bunday holda, funktsiya oxirida hech qanday qaytarish ifodasi mavjud emas. Shunday qilib, standart qaytish qiymati undefinedva'daning qarori sifatida qaytariladi. Yuqoridagi asinxron funksiyasi quyidagi ifodaga teng,
func func ( ) {
function func() {
return Promise.resolve(10).then(() => undefined);
}function delay() {
return new Promise(resolve => setTimeout(resolve, 2000));
}
async function delayedLog(item) {
await delay();
console.log(item);
}
async function processArray(array) {
array.forEach(item => {
await delayedLog(item);
})
}
processArray([1, 2, 3, 4]);- 1: SyntaxError
- 2: 1, 2, 3, 4
- 3: 4, 4, 4, 4
- 4: 4, 3, 2, 1
Answer
Garchi "processArray" asinxron funksiya bo'lsa ham, biz foydalanadigan anonim funksiya sinxrondir forEach. Sinxron funksiya ichida await dan foydalansangiz, u sintaksis xatosini keltirib chiqaradi.
function delay() {
return new Promise((resolve) => setTimeout(resolve, 2000));
}
async function delayedLog(item) {
await delay();
console.log(item);
}
async function process(array) {
array.forEach(async (item) => {
await delayedLog(item);
});
console.log('Process completed!');
}
process([1, 2, 3, 5]);- 1: 1 2 3 5 and Process completed!
- 2: 5 5 5 5 and Process completed!
- 3: Process completed! and 5 5 5 5
- 4: Process completed! and 1 2 3 5
Answer
ForEach usuli barcha elementlar tugashini kutmaydi, lekin u faqat vazifalarni bajaradi va keyingi bosqichga o'tadi. Shunday qilib, oxirgi bayonot birinchi navbatda va'da qilingan qarorlar ketma-ketligi bilan ko'rsatiladi.
Lekin siz massivlar ketma-ketligini for..of loop yordamida boshqarasiz,
async function processArray(array) {
for (const item of array) {
await delayedLog(item);
}
console.log('Process completed!');
}var set = new Set();
set.add('+0').add('-0').add(NaN).add(undefined).add(NaN);
console.log(set);- 1: Set(4) {"+0", "-0", NaN, undefined}
- 2: Set(3) {"+0", NaN, undefined}
- 3: Set(5) {"+0", "-0", NaN, undefined, NaN}
- 4: Set(4) {"+0", NaN, undefined, NaN}
Answer
To'plamda tenglikni tekshirishdan istisnolar mavjud,
- Barcha NaN qiymatlari teng
- Har ikkala +0 va -0 turli qiymatlar sifatida qabul qilinadi
const sym1 = Symbol('one');
const sym2 = Symbol('one');
const sym3 = Symbol.for('two');
const sym4 = Symbol.for('two');
cnsooe.log(sym1 === sym2, sym3 === sym4);- 1: true, true
- 2: true, false
- 3: false, true
- 4: false, false
Answer
Belgisi quyidagi konventsiyalardan keyin,
- Symbol() dan qaytarilgan har bir belgi qiymati ixtiyoriy qatordan qat'iy nazar noyobdir.
Symbol.for()funktsiya global belgilar ro'yxati ro'yxatida belgi yaratadi. Lekin u har bir qo‘ng‘iroqda yangi belgi yaratishi shart emas, u avval berilgan kalitga ega bo‘lgan belgi reestrda mavjudligini tekshiradi va agar topilsa, belgini qaytaradi. Aks holda, ro'yxatga olish kitobida yangi belgi yaratiladi.
Note: Belgi tavsifi faqat disk raskadrovka maqsadlarida foydalidir.
const sym1 = new Symbol('one');
console.log(sym1);- 1: SyntaxError
- 2: one
- 3: Symbol('one')
- 4: Symbol
Answer
Symbol bu objekt konstruktori emas, shunchaki standart funksiyadir (boshqa ibtidoiylardan farqli o'laroq, yangi Boolean, yangi String va yangi raqam). Shunday qilib, agar siz yangi operator bilan qo'ng'iroq qilmoqchi bo'lsangiz, TypeError paydo bo'ladi
let myNumber = 100;
let myString = '100';
if (!typeof myNumber === 'string') {
console.log('It is not a string!');
} else {
console.log('It is a string!');
}
if (!typeof myString === 'number') {
console.log('It is not a number!');
} else {
console.log('It is a number!');
}- 1: SyntaxError
- 2: It is not a string!, It is not a number!
- 3: It is not a string!, It is a number!
- 4: It is a string!, It is a number!
Answer
Qaytish qiymati typeof myNumber (OR) typeof myStringhar doim haqiqiy qiymatdir ("raqam" yoki "string"). beri! operator qiymatni mantiqiy qiymatga o'zgartiradi, ikkalasining qiymati !typeof myNumber or !typeof myStringhar doim noto'g'ri. Shuning uchun if sharti bajarilmaydi va boshqaruv else blokiga o'tadi.
console.log(
JSON.stringify({ myArray: ['one', undefined, function () {}, Symbol('')] })
);
console.log(
JSON.stringify({ [Symbol.for('one')]: 'one' }, [Symbol.for('one')])
);- 1: {"myArray":['one', undefined, {}, Symbol]}, {}
- 2: {"myArray":['one', null,null,null]}, {}
- 3: {"myArray":['one', null,null,null]}, "{ [Symbol.for('one')]: 'one' }, [Symbol.for('one')]"
- 4: {"myArray":['one', undefined, function(){}, Symbol('')]}, {}
Answer
The symbols has below constraints,
- The undefined, Functions, and Symbols are not valid JSON values. So those values are either omitted (in an object) or changed to null (in an array). Hence, it returns null values for the value array.
- All Symbol-keyed properties will be completely ignored. Hence it returns an empty object({}).
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A();
new B();- 1: A, A
- 2: A, B
Answer
Using constructors, new.target refers to the constructor (points to the class definition of class which is initialized) that was directly invoked by new. This also applies to the case if the constructor is in a parent class and was delegated from a child constructor.
const [x, ...y] = [1, 2, 3, 4];
console.log(x, y);- 1: 1, [2, 3, 4]
- 2: 1, [2, 3]
- 3: 1, [2]
- 4: SyntaxError
Answer
It throws a syntax error because the rest element should not have a trailing comma. You should always consider using a rest operator as the last element.
const { a: x = 10, b: y = 20 } = { a: 30 };
console.log(x);
console.log(y);- 1: 30, 20
- 2: 10, 20
- 3: 10, undefined
- 4: 30, undefined
Answer
The object property follows below rules,
- The object properties can be retrieved and assigned to a variable with a different name
- The property assigned a default value when the retrieved value is
undefined
function area({ length = 10, width = 20 }) {
console.log(length * width);
}
area();- 1: 200
- 2: Error
- 3: undefined
- 4: 0
Answer
If you leave out the right-hand side assignment for the destructuring object, the function will look for at least one argument to be supplied when invoked. Otherwise you will receive an error Error: Cannot read property 'length' of undefined as mentioned above.
You can avoid the error with either of the below changes,
- Pass at least an empty object:
function area({ length = 10, width = 20 }) {
console.log(length * width);
}
area({});- Assign default empty object:
function area({ length = 10, width = 20 } = {}) {
console.log(length * width);
}
area();const props = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jack' },
{ id: 3, name: 'Tom' },
];
const [, , { name }] = props;
console.log(name);- 1: Tom
- 2: Error
- 3: undefined
- 4: John
Answer
It is possible to combine Array and Object destructuring. In this case, the third element in the array props accessed first followed by name property in the object.
function checkType(num = 1) {
console.log(typeof num);
}
checkType();
checkType(undefined);
checkType('');
checkType(null);- 1: number, undefined, string, object
- 2: undefined, undefined, string, object
- 3: number, number, string, object
- 4: number, number, number, number
Answer
If the function argument is set implicitly(not passing argument) or explicitly to undefined, the value of the argument is the default parameter. Whereas for other falsy values('' or null), the value of the argument is passed as a parameter.
Hence, the result of function calls categorized as below,
- The first two function calls logs number type since the type of default value is number
- The type of '' and null values are string and object type respectively.
function add(item, items = []) {
items.push(item);
return items;
}
console.log(add('Orange'));
console.log(add('Apple'));- 1: ['Orange'], ['Orange', 'Apple']
- 2: ['Orange'], ['Apple']
Answer
Since the default argument is evaluated at call time, a new object is created each time the function is called. So in this case, the new array is created and an element pushed to the default empty array.
function greet(greeting, name, message = greeting + ' ' + name) {
console.log([greeting, name, message]);
}
greet('Hello', 'John');
greet('Hello', 'John', 'Good morning!');- 1: SyntaxError
- 2: ['Hello', 'John', 'Hello John'], ['Hello', 'John', 'Good morning!']
Answer
Since parameters defined earlier are available to later default parameters, this code snippet doesn't throw any error.
function outer(f = inner()) {
function inner() {
return 'Inner';
}
}
outer();- 1: ReferenceError
- 2: Inner
Answer
The functions and variables declared in the function body cannot be referred from default value parameter initializers. If you still try to access, it throws a run-time ReferenceError(i.e, inner is not defined).
function myFun(x, y, ...manyMoreArgs) {
console.log(manyMoreArgs);
}
myFun(1, 2, 3, 4, 5);
myFun(1, 2);- 1: [3, 4, 5], undefined
- 2: SyntaxError
- 3: [3, 4, 5], []
- 4: [3, 4, 5], [undefined]
Answer
The rest parameter is used to hold the remaining parameters of a function and it becomes an empty array if the argument is not provided.
const obj = { key: 'value' };
const array = [...obj];
console.log(array);- 1: ['key', 'value']
- 2: TypeError
- 3: []
- 4: ['key']
Answer
Spread syntax can be applied only to iterable objects. By default, Objects are not iterable, but they become iterable when used in an Array, or with iterating functions such as map(), reduce(), and assign(). If you still try to do it, it still throws TypeError: obj is not iterable.
function* myGenFunc() {
yield 1;
yield 2;
yield 3;
}
var myGenObj = new myGenFunc();
console.log(myGenObj.next().value);- 1: 1
- 2: undefined
- 3: SyntaxError
- 4: TypeError
Answer
Generators are not constructible type. But if you still proceed to do, there will be an error saying "TypeError: myGenFunc is not a constructor"
function* yieldAndReturn() {
yield 1;
return 2;
yield 3;
}
var myGenObj = yieldAndReturn();
console.log(myGenObj.next());
console.log(myGenObj.next());
console.log(myGenObj.next());- 1: { value: 1, done: false }, { value: 2, done: true }, { value: undefined, done: true }
- 2: { value: 1, done: false }, { value: 2, done: false }, { value: undefined, done: true }
- 3: { value: 1, done: false }, { value: 2, done: true }, { value: 3, done: true }
- 4: { value: 1, done: false }, { value: 2, done: false }, { value: 3, done: true }
Answer
A return statement in a generator function will make the generator finish. If a value is returned, it will be set as the value property of the object and done property to true. When a generator is finished, subsequent next() calls return an object of this form: {value: undefined, done: true}.
const myGenerator = (function* () {
yield 1;
yield 2;
yield 3;
})();
for (const value of myGenerator) {
console.log(value);
break;
}
for (const value of myGenerator) {
console.log(value);
}- 1: 1,2,3 and 1,2,3
- 2: 1,2,3 and 4,5,6
- 3: 1 and 1
- 4: 1
Answer
The generator should not be re-used once the iterator is closed. i.e, Upon exiting a loop(on completion or using break & return), the generator is closed and trying to iterate over it again does not yield any more results. Hence, the second loop doesn't print any value.
const num = 0o38;
console.log(num);- 1: SyntaxError
- 2: 38
Answer
If you use an invalid number(outside of 0-7 range) in the octal literal, JavaScript will throw a SyntaxError. In ES5, it treats the octal literal as a decimal number.
const squareObj = new Square(10);
console.log(squareObj.area);
class Square {
constructor(length) {
this.length = length;
}
get area() {
return this.length * this.length;
}
set area(value) {
this.area = value;
}
}- 1: 100
- 2: ReferenceError
Answer
Unlike function declarations, class declarations are not hoisted. i.e, First You need to declare your class and then access it, otherwise it will throw a ReferenceError "Uncaught ReferenceError: Square is not defined".
Note: Class expressions also applies to the same hoisting restrictions of class declarations.
function Person() {}
Person.prototype.walk = function () {
return this;
};
Person.run = function () {
return this;
};
let user = new Person();
let walk = user.walk;
console.log(walk());
let run = Person.run;
console.log(run());- 1: undefined, undefined
- 2: Person, Person
- 3: SyntaxError
- 4: Window, Window
Answer
When a regular or prototype method is called without a value for this, the methods return an initial this value if the value is not undefined. Otherwise global window object will be returned. In our case, the initial this value is undefined so both methods return window objects.
class Vehicle {
constructor(name) {
this.name = name;
}
start() {
console.log(`${this.name} vehicle started`);
}
}
class Car extends Vehicle {
start() {
console.log(`${this.name} car started`);
super.start();
}
}
const car = new Car('BMW');
console.log(car.start());- 1: SyntaxError
- 2: BMW vehicle started, BMW car started
- 3: BMW car started, BMW vehicle started
- 4: BMW car started, BMW car started
Answer
The super keyword is used to call methods of a superclass. Unlike other languages the super invocation doesn't need to be a first statement. i.e, The statements will be executed in the same order of code.
const USER = { age: 30 };
USER.age = 25;
console.log(USER.age);- 1: 30
- 2: 25
- 3: Uncaught TypeError
- 4: SyntaxError
Answer
Even though we used constant variables, the content of it is an object and the object's contents (e.g properties) can be altered. Hence, the change is going to be valid in this case.
console.log('🙂' === '🙂');- 1: false
- 2: true
Answer
Emojis are unicodes and the unicode for smile symbol is "U+1F642". The unicode comparision of same emojies is equivalent to string comparison. Hence, the output is always true.
console.log(typeof typeof typeof true);- 1: string
- 2: boolean
- 3: NaN
- 4: number
Answer
The typeof operator on any primitive returns a string value. So even if you apply the chain of typeof operators on the return value, it is always string.
let zero = new Number(0);
if (zero) {
console.log('If');
} else {
console.log('Else');
}- 1: If
- 2: Else
- 3: NaN
- 4: SyntaxError
Answer
- The type of operator on new Number always returns object. i.e, typeof new Number(0) --> object.
- Objects are always truthy in if block
Hence the above code block always goes to if section.
let msg = 'Good morning!!';
msg.name = 'John';
console.log(msg.name);- 1: ""
- 2: Error
- 3: John
- 4: Undefined
Answer
It returns undefined for non-strict mode and returns Error for strict mode. In non-strict mode, the wrapper object is going to be created and get the mentioned property. But the object get disappeared after accessing the property in next line.
let count = 10;
(function innerFunc() {
if (count === 10) {
let count = 11;
console.log(count);
}
console.log(count);
})();- 1: 11, 10
- 2: 11, 11
- 3: 10, 11
- 4: 10, 10
Answer
11 and 10 is logged to the console.
The innerFunc is a closure which captures the count variable from the outerscope. i.e, 10. But the conditional has another local variable count which overwrites the ourter count variable. So the first console.log displays value 11.
Whereas the second console.log logs 10 by capturing the count variable from outerscope.
- 1: console.log(true && 'hi');
- 2: console.log(true && 'hi' && 1);
- 3: console.log(true && '' && 0);
Answer
- 1: hi
- 2: 1
- 3: ''
Reason : The operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.
Note: Below these values are consider as falsy value
- 1: 0
- 2: ''
- 3: null
- 4: undefined
- 5: NAN
let arr = [1, 2, 3];
let str = '1,2,3';
console.log(arr == str);- 1: false
- 2: Error
- 3: true
Answer
Arrays have their own implementation of toString method that returns a comma-separated list of elements. So the above code snippet returns true. In order to avoid conversion of array type, we should use === for comparison.
The questions provided in this repository are the summary of frequently asked questions across numerous companies. We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus on memorizing all of them. The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you don't know the answer to all of them — that is ok!
Good luck with your interview 😊
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent