JavaScript ES2023: süvaülevaade uuest süntaksist ja keeleuuendustest

Veebiarenduse maailm on pidevas arengus ja selle muutuse keskmes on JavaScript. Igal aastal teeb TC39 komitee (Technical Committee 39) usinalt tööd, et täiustada ECMAScripti spetsifikatsiooni, mis on standard, millel JavaScript põhineb. Tulemuseks on iga-aastane väljalase, mis on täis uusi funktsioone, mille eesmärk on muuta keel võimsamaks, väljendusrikkamaks ja arendajasõbralikumaks. 14. väljaanne, ametlikult tuntud kui ECMAScript 2023 ehk ES2023, ei ole erand.

Arendajate jaoks üle maailma ei tähenda nende uuendustega kursis olemine ainult viimaste trendide omaksvõtmist; see tähendab puhtama, tõhusama ja paremini hooldatava koodi kirjutamist. ES2023 toob kaasa kogumi väga oodatud funktsioone, mis on peamiselt keskendunud massiivide käsitlemise parandamisele muutumatust silmas pidades ja levinud tavade standardiseerimisele. Selles põhjalikus juhendis uurime peamisi funktsioone, mis on ametlikult jõudnud 4. etappi ja on nüüd keele standardi osa.

ES2023 põhiteema: muutumatus ja ergonoomika

Kui ES2023 kõige olulisemates lisandustes on üks läbiv teema, siis on see liikumine muutumatuse (immutability) suunas. Paljud JavaScripti klassikalised massiivimeetodid (nagu sort(), splice() ja reverse()) muudavad algset massiivi. Selline käitumine võib põhjustada ootamatuid kõrvalmõjusid ja keerulisi vigu, eriti suuremahulistes rakendustes, olekuhaldus teekides (nagu Redux) ja funktsionaalse programmeerimise paradigmades. ES2023 tutvustab uusi meetodeid, mis teevad samu toiminguid, kuid tagastavad uue, muudetud koopia massiivist, jättes algse puutumata. See keskendumine arendaja ergonoomikale ja turvalisematele kodeerimistavadele on teretulnud areng.

Süveneme nüüd sellesse, mis on uut.

1. Elementide leidmine lõpust: findLast() ja findLastIndex()

Üks levinumaid ülesandeid arendajate jaoks on elemendi otsimine massiivist. Kuigi JavaScript on pikka aega pakkunud meetodeid find() ja findIndex() massiivi algusest otsimiseks, oli viimase sobiva elemendi leidmine üllatavalt kohmakas. Arendajad pidid sageli kasutama vähem intuitiivseid või ebatõhusaid lahendusi.

Vana viis: kohmakad lahendused

Varem oleksite viimase paarisarvu leidmiseks massiivist võinud teha midagi sellist:

            const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

// Lahendus 1: Pööra massiiv ümber, seejärel otsi.
// Probleem: See MUUDAB algset 'numbers' massiivi!
const lastEven_mutating = numbers.reverse().find(n => n % 2 === 0);
console.log(lastEven_mutating); // 8
console.log(numbers); // [8, 7, 6, 5, 4, 3, 2, 1] - Algne massiiv on muudetud!

// Muutmise vältimiseks tuli esmalt luua koopia.
const numbers2 = [1, 2, 3, 4, 5, 6, 7, 8];
const lastEven_non_mutating = [...numbers2].reverse().find(n => n % 2 === 0);
console.log(lastEven_non_mutating); // 8
console.log(numbers2); // [1, 2, 3, 4, 5, 6, 7, 8] - Turvaline, kuid vähem tõhus.
            

              
                Copy
              
            
          

Need lahendused on kas hävitavad (muudavad algset massiivi) või ebatõhusad (nõuavad otsingu jaoks massiivi täieliku koopia loomist). See viis levinud ettepanekuni otsesema ja loetavama lähenemisviisi jaoks.

ES2023 lahendus: findLast() ja findLastIndex()

ES2023 lahendab selle elegantselt, lisades Array.prototype'i kaks uut meetodit:

• findLast(callback): Läbib massiivi paremalt vasakule ja tagastab esimese elemendi väärtuse, mis vastab etteantud testimisfunktsioonile. Kui ükski väärtus ei vasta testimisfunktsioonile, tagastatakse undefined.
• findLastIndex(callback): Läbib massiivi paremalt vasakule ja tagastab esimese elemendi indeksi, mis vastab etteantud testimisfunktsioonile. Kui sellist elementi ei leita, tagastatakse -1.

Praktilised näited

Vaatame uuesti meie eelmist näidet, kasutades uusi meetodeid. Kood muutub oluliselt puhtamaks ja väljendusrikkamaks.

            const numbers = [10, 25, 30, 45, 50, 65, 70];

// Leia viimane arv, mis on suurem kui 40
const lastLargeNumber = numbers.findLast(num => num > 40);
console.log(lastLargeNumber); // Output: 70

// Leia viimase arvu indeks, mis on suurem kui 40
const lastLargeNumberIndex = numbers.findLastIndex(num => num > 40);
console.log(lastLargeNumberIndex); // Output: 6

// Näide, kus vastet ei leitud
const lastSmallNumber = numbers.findLast(num => num < 5);
console.log(lastSmallNumber); // Output: undefined

const lastSmallNumberIndex = numbers.findLastIndex(num => num < 5);
console.log(lastSmallNumberIndex); // Output: -1

// Algne massiiv jääb muutmata.
console.log(numbers); // [10, 25, 30, 45, 50, 65, 70]

            

              
                Copy
              
            
          

Peamised eelised:

• Loetavus: Koodi eesmärk on kohe selge. findLast() ütleb selgesõnaliselt, mida see teeb.
• Jõudlus: See väldib massiivi ümberpööratud koopia loomisega kaasnevat lisakoormust, muutes selle tõhusamaks, eriti väga suurte massiivide puhul.
• Turvalisus: See ei muuda algset massiivi, vältides rakenduses soovimatuid kõrvalmõjusid.

2. Muutumatuse esiletõus: uued massiivi kopeerimise meetodid

See on vaieldamatult kõige mõjukam ES2023 funktsioonide komplekt igapäevases kodeerimises. Nagu varem mainitud, muudavad meetodid nagu Array.prototype.sort(), Array.prototype.reverse() ja Array.prototype.splice() massiivi, millel neid kutsutakse. See kohapealne muutmine (in-place mutation) on sage vigade allikas.

ES2023 tutvustab kolme uut meetodit, mis pakuvad muutumatuid alternatiive:

• toReversed() → meetodi reverse() mitte-muutev versioon
• toSorted(compareFn) → meetodi sort() mitte-muutev versioon
• toSpliced(start, deleteCount, ...items) → meetodi splice() mitte-muutev versioon

Lisaks lisati neljas meetod, with(index, value), et pakkuda muutumatut viisi ühe elemendi uuendamiseks.

Array.prototype.toReversed()

Meetod reverse() pöörab massiivi kohapeal ümber. toReversed() tagastab uue massiivi, mille elemendid on vastupidises järjekorras, jättes algse massiivi samaks.

            const originalSequence = [1, 2, 3, 4, 5];

// Uus, muutumatu viis
const reversedSequence = originalSequence.toReversed();

console.log(reversedSequence); // Output: [5, 4, 3, 2, 1]
console.log(originalSequence); // Output: [1, 2, 3, 4, 5] (Muutmata!)

// Võrdlus vana, muutva viisiga
const mutatingSequence = [1, 2, 3, 4, 5];
mutatingSequence.reverse();
console.log(mutatingSequence); // Output: [5, 4, 3, 2, 1] (Algne massiiv on muudetud)
            

              
                Copy
              
            
          

Array.prototype.toSorted()

Sarnaselt sorteerib sort() massiivi elemendid kohapeal. toSorted() tagastab uue, sorteeritud massiivi.

            const unsortedUsers = [
    { name: 'David', age: 35 },
    { name: 'Anna', age: 28 },
    { name: 'Carl', age: 42 }
];

// Uus, muutumatu viis vanuse järgi sorteerimiseks
const sortedUsers = unsortedUsers.toSorted((a, b) => a.age - b.age);

console.log(sortedUsers);
/* Output:
[
  { name: 'Anna', age: 28 },
  { name: 'David', age: 35 },
  { name: 'Carl', age: 42 }
]*/

console.log(unsortedUsers);
/* Output:
[
  { name: 'David', age: 35 },
  { name: 'Anna', age: 28 },
  { name: 'Carl', age: 42 }
] (Muutmata!) */

            

              
                Copy
              
            
          

Array.prototype.toSpliced()

Meetod splice() on võimas, kuid keeruline, kuna see suudab eemaldada, asendada või lisada elemente, muutes samal ajal massiivi. Selle mitte-muutev vaste, toSpliced(), on olekuhalduse jaoks murranguline.

            const months = ['Jan', 'Mar', 'Apr', 'Jun'];

// Uus, muutumatu viis 'Feb' lisamiseks
const updatedMonths = months.toSpliced(1, 0, 'Feb');

console.log(updatedMonths); // Output: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun']
console.log(months); // Output: ['Jan', 'Mar', 'Apr', 'Jun'] (Muutmata!)

// Võrdlus vana, muutva viisiga
const mutatingMonths = ['Jan', 'Mar', 'Apr', 'Jun'];
mutatingMonths.splice(1, 0, 'Feb');
console.log(mutatingMonths); // Output: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'] (Algne massiiv on muudetud)
            

              
                Copy
              
            
          

Array.prototype.with(index, value)

See meetod pakub puhast ja muutumatut viisi ühe elemendi uuendamiseks kindlal indeksil. Vana viis seda muutumatult teha hõlmas meetodite nagu slice() või laialilaotamisoperaatori (spread operator) kasutamist, mis võis olla sõnarohke.

            const scores = [90, 85, 70, 95];

// Uuendame skoori indeksil 2 (70) väärtuseks 78

// Uus, muutumatu viis meetodiga 'with()'
const updatedScores = scores.with(2, 78);

console.log(updatedScores); // Output: [90, 85, 78, 95]
console.log(scores);        // Output: [90, 85, 70, 95] (Muutmata!)

// Vanem, sõnarohkem muutumatu viis
const oldUpdatedScores = [
    ...scores.slice(0, 2),
    78,
    ...scores.slice(3)
];
console.log(oldUpdatedScores); // Output: [90, 85, 78, 95]
            

              
                Copy
              
            
          

Nagu näete, pakub with() selle levinud toimingu jaoks palju otsesemat ja loetavamat süntaksit.

3. WeakMap'id sümbolitega kui võtmetega

See funktsioon on nišitoode, kuid uskumatult kasulik teekide autoritele ja arendajatele, kes töötavad keerukamate JavaScripti mustritega. See lahendab piirangu, kuidas WeakMap kollektsioonid võtmeid käsitlevad.

Kiire meeldetuletus WeakMap kohta

WeakMap on eriline kollektsiooni tüüp, kus võtmed peavad olema objektid ja map hoiab neile "nõrka" viidet. See tähendab, et kui võtmena kasutatud objektil pole programmis muid viiteid, saab selle prügikoristusega (garbage collection) eemaldada ja selle vastav kirje WeakMap'is eemaldatakse automaatselt. See on kasulik metaandmete sidumiseks objektiga, takistamata selle objekti mälust puhastamist.

Eelnev piirang

Enne ES2023 ei saanud unikaalset (registreerimata) Symbol'it kasutada WeakMap'i võtmena. See oli masendav ebajärjekindlus, sest sümbolid, nagu ka objektid, on unikaalsed ja neid saab kasutada atribuutide nimede kokkupõrgete vältimiseks.

ES2023 täiustus

ES2023 kaotab selle piirangu, lubades unikaalseid sümboleid kasutada WeakMap'i võtmetena. See on eriti väärtuslik, kui soovite siduda andmeid sümboliga, ilma et see sümbol oleks globaalselt kättesaadav Symbol.for() kaudu.

            // Loo unikaalne sümbol
const uniqueSymbol = Symbol('private metadata');

const metadataMap = new WeakMap();

// ES2023-s on see nüüd lubatud!
metadataMap.set(uniqueSymbol, { info: 'This is some private data' });

// Kasutusnäide: andmete sidumine kindla sümboliga, mis esindab mingit kontseptsiooni
function processSymbol(sym) {
    if (metadataMap.has(sym)) {
        console.log('Leiti metaandmed:', metadataMap.get(sym));
    }
}

processSymbol(uniqueSymbol); // Output: Leiti metaandmed: { info: 'This is some private data' }

            

              
                Copy
              
            
          

See võimaldab robustsemaid ja kapseldatumaid mustreid, eriti privaatsete või sisemiste andmestruktuuride loomisel, mis on seotud konkreetsete sümboolsete identifikaatoritega.

4. Hashbang'i grammatika standardiseerimine

Kui olete kunagi kirjutanud käsureaskripti Node.js-is või teistes JavaScripti käituskeskkondades, olete tõenäoliselt kokku puutunud "hashbang'i" või "shebang'iga".

            #!/usr/bin/env node

console.log('Tervitused CLI skriptist!');
            

              
                Copy
              
            
          

Esimene rida, #!/usr/bin/env node, ütleb Unixi-laadsetele operatsioonisüsteemidele, millist interpretaatorit skripti käivitamiseks kasutada. Kuigi see on olnud de facto standard, mida toetavad enamik JavaScripti keskkondi (nagu Node.js ja Deno) juba aastaid, ei olnud see kunagi ametlikult ECMAScripti spetsifikatsiooni osa. See tähendas, et selle rakendamine võis tehniliselt mootorite vahel erineda.

ES2023 muudatus

ES2023 vormistab Hashbang'i kommentaari (#!...) JavaScripti keele kehtivaks osaks. Seda käsitletakse kommentaarina, kuid ühe konkreetse reegliga: see on kehtiv ainult skripti või mooduli absoluutses alguses. Kui see ilmub kusagil mujal, põhjustab see süntaksivea.

Sellel muudatusel pole kohest mõju sellele, kuidas enamik arendajaid oma CLI-skripte kirjutab, kuid see on oluline samm keele küpsuse suunas. Standardiseerides selle levinud tava, tagab ES2023, et JavaScripti lähtekoodi parsertakse järjepidevalt kõigis ühilduvates keskkondades, alates brauseritest kuni serverite ja käsurea tööriistadeni. See kindlustab JavaScripti rolli esmaklassilise keelena skriptimiseks ja robustsete CLI-rakenduste loomiseks.

Kokkuvõte: küpsema JavaScripti omaksvõtmine

ECMAScript 2023 on tunnistus pidevast püüdlusest JavaScripti täiustada ja parandada. Viimased funktsioonid ei ole revolutsioonilised murrangulises mõttes, kuid need on uskumatult praktilised, lahendades levinud valupunkte ja edendades turvalisemaid, kaasaegsemaid kodeerimismustreid.

• Uued massiivimeetodid (findLast, toSorted jne): Need on selle väljalaske tähed, pakkudes kauaoodatud ergonoomilisi täiustusi ja tugevat tõuget muutumatute andmestruktuuride suunas. Kahtlemata muudavad need koodi puhtamaks, etteaimatavamaks ja lihtsamini silutavaks.
• WeakMap'i sümbolvõtmed: See täiustus pakub rohkem paindlikkust keerukamate kasutusjuhtude ja teekide arendamiseks, parandades kapseldamist.
• Hashbang'i standardiseerimine: See vormistab levinud tava, parandades JavaScripti kaasaskantavust ja usaldusväärsust skriptimisel ja CLI-arenduses.

Ülemaailmse arendajate kogukonnana saame hakata neid funktsioone oma projektidesse juba täna lisama. Enamik kaasaegseid brausereid ja Node.js-i versioone on need juba rakendanud. Vanemate keskkondade jaoks saavad tööriistad nagu Babel uue süntaksi ühilduvaks koodiks transpileerida. Neid muudatusi omaks võttes aitame kaasa robustsema ja elegantsema ökosüsteemi loomisele, kirjutades koodi, mis ei ole mitte ainult funktsionaalne, vaid ka nauditav lugeda ja hooldada.