JavaScript po zhvillohet vazhdimisht dhe versioni më i fundit, ES2022, prezanton disa veçori të reja emocionuese që mund ta bëjnë jetën tuaj të kodimit më të lehtë dhe më efikas. Në këtë postim, ne do t'i hedhim një vështrim pesë veçorive që duhet të dini në JavaScript ES2022 që mund të filloni t'i përdorni sot për të përmirësuar kodin tuaj dhe për të rritur produktivitetin tuaj.

Lista e veçorive që do të diskutojmë:

1. Zinxhirë opsionale
2. Ndalim i bashkimit
3. Importet dinamike
4. Promise.allSettled
5. String.prototype.matchAll

Karakteristika 1: Zinxhirë opsionale

Zinxhirimi opsional është një operator i ri që ju lejon të aksesoni vetitë e një objekti pa pasur nevojë të kontrolloni fillimisht për null ose të papërcaktuar. Kjo mund të jetë veçanërisht e dobishme kur punoni me struktura komplekse të dhënash, pasi ju lejon të aksesoni pronat e mbivendosura thellë pa pasur nevojë të shqetësoheni nëse vlerat e ndërmjetme janë të pavlefshme ose të papërcaktuara.

Këtu është një shembull se si funksionon zinxhiri opsional:

Copy code
const data = {
  user: {
    name: 'John',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zip: 10001
    }
  }
};
// Without optional chaining
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
  zip = data.user.address.zip;
}
// With optional chaining
const zip = data?.user?.address?.zip;

Siç mund ta shihni, zinxhiri opsional ju lejon të përdorni pronat e mbivendosura pa pasur nevojë të shkruani deklarata të gjata, të mbivendosura if. Kjo mund ta bëjë kodin tuaj më të pastër dhe më të lehtë për t'u lexuar.

Karakteristika 2: Ndalimi i bashkimit

Nullish coalescing është një tjetër operator i ri që ju lejon të specifikoni një vlerë të paracaktuar për një variabël nëse është null ose i papërcaktuar. Kjo mund të jetë e dobishme kur punoni me variabla që mund të jenë false (p.sh., 0, "", false), pasi operatori i bashkimit nulish kthen vlerën e paracaktuar vetëm nëse ndryshorja është rreptësisht e pavlefshme ose e papërcaktuar.

Këtu është një shembull se si funksionon bashkimi nulish:

const data = {
  user: {
    name: 'John',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'New York',
      state: 'NY',
      zip: 10001
    }
  }
};

// Without nullish coalescing
let zip;
if (data && data.user && data.user.address && data.user.address.zip) {
  zip = data.user.address.zip;
} else {
  zip = 0;
}

// With nullish coalescing
const zip = data?.user?.address?.zip ?? 0;

Siç mund ta shihni, bashkimi nullish ju lejon të specifikoni një vlerë të paracaktuar në një mënyrë koncize dhe të lehtë për t'u lexuar.

Karakteristika 3: Importet dinamike

Importet dinamike ju lejojnë të ngarkoni modulet JavaScript në mënyrë asinkrone, gjë që mund të jetë e dobishme kur ju duhet vetëm të ngarkoni module të caktuara sipas kërkesës. Kjo mund të përmirësojë performancën e aplikacionit tuaj duke zvogëluar sasinë e kodit që duhet të shkarkohet dhe analizohet nga shfletuesi.

Këtu është një shembull se si funksionojnë importet dinamike:

// Without dynamic imports
import MyModule from './my-module';

// With dynamic imports
const MyModule = await import('./my-module');

Karakteristika 4: Premtimi.të gjitha u vendosën

Promise.allSettled është një metodë e re që ju lejon të prisni që një grup Premtimesh ose të zgjidhen ose të refuzohen. Kjo mund të jetë e dobishme kur dëshironi të trajtoni rezultatet e shumë Premtimeve në të njëjtën kohë, pavarësisht nëse ato zgjidhin apo refuzojnë.

Këtu është një shembull se si funksionon Promise.allSettled:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Error'));
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log(result.value);
    } else {
      console.error(result.reason);
    }
  });
});
// Output: 1, Error: Error, 3

Siç mund ta shihni, Promise.allSettled ju lejon të trajtoni rezultatet e shumë Premtimeve në një kthim të vetëm, duke e bërë më të lehtë menaxhimin e kodit asinkron. Në vend që të presin që të gjitha Premtimet të zgjidhen ose të refuzohen sapo ndonjë prej Premtimeve të refuzohet, Promise.allSettled pret që të gjitha Premtimet të zgjidhen (d.m.th., ose të zgjidhen ose të refuzohen) përpara se të ekzekutojë kthimin e thirrjes. Kjo mund të jetë e dobishme nëse doni të trajtoni rezultatet e të gjitha Premtimeve, pavarësisht nëse ato zgjidhin apo refuzojnë.

Karakteristika 5: String.prototype.matchAll

String.prototype.matchAll është një metodë e re që ju lejon të gjeni të gjitha përputhjet e një shprehjeje të rregullt në një varg, dhe jo vetëm ndeshjen e parë. Kjo mund të jetë e dobishme kur ju duhet të nxirrni disa pjesë të të dhënave nga një varg, ose kur dëshironi të kryeni manipulime më të avancuara të vargut.

Këtu është një shembull se si funksionon String.prototype.matchAll:

const str = 'Hello World';
const regex = /l/g;

// Without String.prototype.matchAll
const matches = str.match(regex);

// With String.prototype.matchAll
const matches = [...str.matchAll(regex)];
console.log(matches); // ['l', 'l']

Siç mund ta shihni, String.prototype.matchAll ju lejon të gjeni të gjitha përputhjet e një shprehjeje të rregullt në një varg, duke e bërë më të lehtë nxjerrjen e pjesëve të shumta të të dhënave nga një varg.

Praktikat më të mira për përdorimin e këtyre veçorive të reja

Tani që kemi mbuluar veçoritë e reja në JavaScript ES2022, le të flasim për disa praktika më të mira për përdorimin e tyre.

Para së gjithash, është e rëndësishme të mbani në mend se jo të gjitha këto veçori mbështeten plotësisht në të gjithë shfletuesit. Prandaj, duhet të kontrolloni përputhshmërinë e çdo veçorie të shfletuesit përpara se ta përdorni në projektet tuaja.

Për më tepër, është një ide e mirë t'i përdorni këto veçori me masë dhe vetëm kur ato ofrojnë një përfitim të qartë. Ndërsa ato mund të jenë të dobishme në situata të caktuara, ato gjithashtu mund ta bëjnë kodin tuaj më kompleks dhe më të vështirë për t'u kuptuar nëse përdoret në mënyrë të tepruar.

Më në fund, sigurohuni që ta provoni plotësisht kodin tuaj pasi të përdorni këto veçori të reja për t'u siguruar që gjithçka po funksionon siç pritej.

Duke ndjekur këto praktika më të mira, mund të përfitoni plotësisht nga veçoritë e reja në JavaScript ES2022 duke shmangur çdo kurth të mundshëm.

Doni të lidheni? Më dërgoni DM në Twitter @pateldeep_eth ose Linkedin

Gjithashtu, Lexoni

Më shumë përmbajtje në PlainEnglish.io.

Regjistrohu për buletinin tonë javor falas. Na ndiqni në Twitter, LinkedIn, YouTube dhe Discord.

Ndërtoni ndërgjegjësimin dhe adoptimin për startupin tuaj të teknologjisë me Circuit.