JS 2020

JavaScript 2020 dagi yangi imkoniyatlar

Xususiyat	Tavsif
BigInt	JavaScript number tipida saqlab bo‘lmaydigan darajada katta qiymatlarni saqlaydi
String matchAll()	String ichida boshqa stringning barcha uchrashlarini qidiradi
Promise.allSettled()	Promiselarni kirish sifatida qabul qiladi va bitta Promise qaytaradi
Dynamic Import	Loads JavaScript modules at runtime
globalThis	Kod muhitidan mustaqil global obyektga ishora qiladi
import.meta	Modulning asosiy URL manzilini ko‘rsatuvchi obyektni qaytaradi
Namespace Exports	Moduldan to‘liq nom maydonini avval import qilmasdan eksport qiling

2020-yildagi yangi JavaScript operatorlari

Oper	Tavsif
??	Nullish birlashmasi null emas, birinchi argumentni qaytaradi
?.	Obyekt aniqlanmagan yoki null bo‘lsa, ixtiyoriy zanjirlash aniqlanmagan qaytariladi
&&=	Mantiqiy AND belgilash, agar birinchi qiymat rost bo‘lsa, ikkinchi qiymatni belgilaydi
\|\|=	Mantiqiy OR tayinlash, agar birinchi qiymat noto‘g‘ri bo‘lsa, ikkinchi qiymatni belgilaydi
??=	Agar birinchi qiymat aniqlanmagan yoki null bo‘lsa, nol birlashtiruvchi tayinlash ikkinchi qiymatni belgilaydi

Brauzerlarda qo‘llab-quvvatlash

ECMAScript 2020 2021-yil aprelidan boshlab barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi.


Chrome 80	Edge 80	Firefox 80	Safari 14.1	Opera 67
Feb 2020	Feb 2020	Aug 2020	Apr 2021	Mar 2020

JavaScript BigInt

JavaScript BigInt o‘zgaruvchilari katta butun qiymatlarni saqlash uchun ishlatiladi oddiy JavaScript Number bilan ifodalash uchun juda katta.

JavaScript’da butun sonlar faqat taxminan 15 xonagacha aniq bo‘ladi.

Butun son misoli

let x = 999999999999999;
let y = 9999999999999999; // too big

O‘zingiz sinab ko‘ring »

BigInt misoli

let x = 9999999999999999;
let y = 9999999999999999n;

O‘zingiz sinab ko‘ring »

BigInt yaratish uchun butun son oxiriga n qo‘shing yoki BigInt() ni chaqiring:

Misol

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

O‘zingiz sinab ko‘ring »

JavaScript’da BigInt uchun typeof natijasi "bigint":

Misol

let x = BigInt(999999999999999);
let type = typeof x;

O‘zingiz sinab ko‘ring »

JavaScript stringlarining matchAll() metodi

ES2020 dan oldin string ichida boshqa stringning barcha uchrashlarini qidirish uchun ishlatilishi mumkin bo‘lgan string metodi yo‘q edi.

Misol

const iterator = text.matchAll("Cats");

O‘zingiz sinab ko‘ring »

Agar parametr muntazam ifoda bo‘lsa, global bayroq (g) o‘rnatilgan bo‘lishi shart, aks holda TypeError xatosi chiqariladi.

Misol

const iterator = text.matchAll(/Cats/g);

O‘zingiz sinab ko‘ring »

Agar siz katta-kichik harflarsiz qidirishni istasangiz, sezgir bo‘lmagan bayroq (i) o‘rnatilishi kerak:

Misol

const iterator = text.matchAll(/Cats/gi);

O‘zingiz sinab ko‘ring »

ES2021 replaceAll() string metodini joriy qildi.

Nullish Coalescing Operator (??)

?? operatori birinchi operandni qaytaradi, agar u nullish bo‘lmasa. Aks holda u ikkinchini qaytaradi.

The ?? operator, agar birinchi operand nol bo‘lsa, ikkinchi operandni qaytaradi.

Nullish null yoki undefined ni tavsiflovchi so‘zdir.

?? operatori standart qiymatlarni berish uchun ishlatiladi va mantiqiy OR operatoridan farq qiladi || chunki u faqat null va undefined ni "nullish" deb hisoblaydi va boshqa "falsy" qiymatlarni e’tiborsiz qoldiradi 0 yoki bo‘sh string kabi.

Misol

let name = null;
let text = "missing";
let result = name ?? text;

O‘zingiz sinab ko‘ring »

Optional Chaining operatori (?.)

Optional Chaining operatori obyekt xususiyati undefined yoki null bo‘lsa, (xato chiqarish o‘rniga) undefined qaytaradi.

Misol

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

O‘zingiz sinab ko‘ring »

Majburiy emas zanjirlar nafaqat obyekt xususiyatlarida, balki funksiya chaqiruvlari va massivlarda ham ishlaydi.

Funksiya chaqiruvlari

Qo‘llanilish holati	Sintaksis	Behavior
Safe function call	obj.method?.()	Metod mavjud bo‘lmasa, `undefined` qaytaradi
Qaytariladigan qiymatni qayta ishlash	let x = fn?.()	fn mavjud bo‘lmasa, x `undefined` bo‘ladi

Arraylar

Qo‘llanilish holati	Sintaksis	Qaytadi
Safe element access	arr?.[2]	arr `null` yoki `undefined` bo‘lsa, `undefined`
Elementdagi xavfsiz xususiyat	arr?.[1]?.name	Qaytadi `undefined` safely
Safe method call	arr?.map(fn)	arr mavjud bo‘lmasa, `undefined` qaytaradi
Default value fallback	arr?.[0] ?? "N/A"	Arr yoki element yetishmayotgan bo‘lsa, "Yo‘q"ni qaytaradi

&&= Operatori

Mantiqiy AND tayinlash operatori ikkita qiymat orasida ishlatiladi.

Agar birinchi qiymat true bo‘lsa, ikkinchi qiymat tayinlanadi.

Mantiqiy AND bilan o‘zlashtirish misoli

let x = 10;
x &&= 5;

O‘zingiz sinab ko‘ring »

||= Operator

Mantiqiy OR tayinlash operatori ikkita qiymat orasida ishlatiladi.

Agar birinchi qiymat false bo‘lsa, ikkinchi qiymat tayinlanadi.

Mantiqiy OR bilan o‘zlashtirish misoli

let x = 10;
x ||= 5;

O‘zingiz sinab ko‘ring »

??= Operator

Nullish birlashtiruvchi tayinlash operatori ikkita qiymat o‘rtasida ishlatiladi.

Agar birinchi qiymat undefined yoki null bo‘lsa, ikkinchi qiymat tayinlanadi.

Nullish coalescing bilan o‘zlashtirish misoli

let x;
x ??= 10;

O‘zingiz sinab ko‘ring »

JavaScript Promise.allSettled() metodi

Promise.allSettled() usuli Promiselar ro‘yxatidan bitta Promise qaytaradi.

Misol

// Create a Promise
const myPromise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, "King");
});

// Create another Promise
const myPromise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Queen");
});

// Settle All
Promise.allSettled([myPromise1, myPromise2]).then((results) =>
  results.forEach((x) => myDisplay(x.status)),
);

O‘zingiz sinab ko‘ring »

Promise.allSettled() means "Just run all promises. I don’t care about the results".

JavaScript dinamik importi

Dynamic Import - bu JavaScript modullarini dasturning boshida emas, balki ish vaqtida yuklash usulidir.

Sintaksis

import("./module.js")

Argument yo‘lga hal qiluvchi string yoki ifoda bo‘lishi kerak
import’ni modul ichidagi skriptda (<script type="module">) bajarishingiz kerak

Statik importlardan farqli o‘laroq (faylning yuqori qismida paydo bo‘lishi kerak), dinamik importlar istalgan joyda ishlatilishi mumkin - ichki funksiyalar, shartlar, hodisalarni qayta ishlash vositalari va boshqalar.

Turi	Misol	Yuklanganda
Static	`import { add } from './math.js';`	At load time
Dynamic	`const math = await import('./math.js');`	Kerak bo‘lganda

JavaScript globalThis

globalThis global obyektga kirishning standart usulini taqdim etadi, Sizning kodingiz ishlaydigan muhitdan qat’i nazar: brauzerda, Node.js, Web Worker yoki boshqa JS ish vaqtida.

Global obyekt JavaScript muhitidagi yuqori darajadagi obyektdir:

Brauzerlarda bu oyna.
Node.js-da u globaldir.
Web Worker’larida bu o‘zini.

Ko‘pgina muhitlar ushbu obyekt uchun o‘z nomiga ega. Bu hamma joyda ishlashga mo‘ljallangan kod uchun moslik muammolariga olib keldi.

globalThis bu muammoni hal qilish uchun ECMAScript 2020 (ES11) da joriy qilingan. U muhitdan qat’i nazar, global obyektga yagona havoladir.

Misollar

globalThis === window); // true in browsers
globalThis === global); // true in Node.js

O‘zingiz sinab ko‘ring »

Misol

Haqiqiy global o‘zgaruvchini aniqlash:

globalThis.appName = "W3Schools Demo";

O‘zingiz sinab ko‘ring »

Ilgari ishlab chiquvchilar quyidagi kabi vaqtinchalik echimlardan foydalanishlari kerak edi:

Misol

const getGlobal = function() {
if (typeof self !== 'undefined') return self;
if (typeof window !== 'undefined') return window;
if (typeof global !== 'undefined') return global;
throw new Error('Cannot find global object');
};

globalThis bilan bunga endi hojat yo‘q.

JavaScript import.meta

import.meta modulning asosiy URL manzilini o‘z ichiga olgan obyektni qaytaradi.

Misol

const myObject = import.meta;

O‘zingiz sinab ko‘ring »

Modul nomlar fazosi eksportlari

Modul nomlari maydonini eksport qilish bilan siz o‘zingizning modulingizdan butun nom maydonini avval import qilmasdan qayta eksport qilishingiz mumkin.

Misol

Before:

// re-export all named exports directly
export * from "./utils.js";
// consumers can use:
import { add } from "./math.js";

Now:

// re-export all as a namespace
export * as utils from "./utils.js";
// consumers can use:
import { utils } from "./math.js";

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish