JavaScript pasirinktinis grandininis ryšys (Optional Chaining): saugi ir elegantiška prieiga prie savybių

Naršymas po sudėtingą, giliai įdėtų objektų savybių tinklą JavaScript kalboje dažnai primena vaikščiojimą po minų lauką. Viena trūkstama savybė gali sukelti baisią „Cannot read property 'x' of undefined“ klaidą, staiga sustabdydama jūsų programos veikimą. Tradiciniai metodai, kai prieš kiekvieną prieigą prie savybės gynybiškai tikrinamos null arba undefined reikšmės, gali lemti išpūstą ir sudėtingą kodą. Laimei, JavaScript siūlo elegantiškesnį ir glaustesnį sprendimą: pasirinktinį grandininį ryšį.

Kas yra pasirinktinis grandininis ryšys (Optional Chaining)?

Pasirinktinis grandininis ryšys, žymimas ?. operatoriumi, suteikia būdą pasiekti objektų savybes, kurios gali būti null arba undefined, nesukeliant klaidos. Užuot išmetus klaidą susidūrus su nullish (null arba undefined) reikšme grandinėje, jis tiesiog grąžina undefined. Tai leidžia saugiai pasiekti giliai įdėtas savybes ir grakščiai valdyti galimas trūkstamas reikšmes.

Galvokite apie tai kaip apie saugų navigatorių jūsų objektų struktūrose. Jis leidžia „grandinėti“ per savybes, ir jei bet kuriame etape savybės trūksta (ji yra null arba undefined), grandinė nutrūksta ir grąžina undefined, nesukeldama klaidos.

Kaip tai veikia?

Operatorius ?. dedamas po savybės pavadinimo. Jei savybės reikšmė kairėje nuo operatoriaus yra null arba undefined, išraiška iš karto įvertinama kaip undefined. Priešingu atveju, prieiga prie savybės tęsiama kaip įprasta.

Panagrinėkime šį pavyzdį:

const user = {
  profile: {
    address: {
      city: "London"
    }
  }
};

// Be pasirinktinio grandininio ryšio, tai galėtų išmesti klaidą, jei user.profile arba user.profile.address būtų undefined
const city = user.profile.address.city; // London

// Su pasirinktiniu grandininiu ryšiu galime saugiai pasiekti miestą, net jei profile ar address trūksta
const citySafe = user?.profile?.address?.city; // London

const userWithoutAddress = {
  profile: {},
};

const citySafeUndefined = userWithoutAddress?.profile?.address?.city; // undefined (be klaidos)

Pirmajame pavyzdyje, tiek su, tiek be pasirinktinio grandininio ryšio, mes gauname „London“, nes visos savybės egzistuoja.

Antrajame pavyzdyje, userWithoutAddress.profile egzistuoja, bet userWithoutAddress.profile.address ne. Be pasirinktinio grandininio ryšio, bandymas pasiekti userWithoutAddress.profile.address.city sukeltų klaidą. Su pasirinktiniu grandininiu ryšiu, mes gauname undefined be klaidos.

Pasirinktinio grandininio ryšio naudojimo privalumai

Geresnis kodo skaitomumas: Pašalina poreikį rašyti išplėstinius null patikrinimus, todėl kodas tampa švaresnis ir lengviau suprantamas.
Mažiau pasikartojančio kodo: Supaprastina sudėtingą prieigos prie savybių logiką, sumažindamas kodo, kurį reikia parašyti, kiekį.
Geresnė klaidų prevencija: Apsaugo nuo netikėtų klaidų, kylančių bandant pasiekti null arba undefined reikšmių savybes.
Patikimesnės programos: Padaro jūsų programą atsparesnę duomenų neatitikimams ir netikėtoms duomenų struktūroms.

Praktiniai pavyzdžiai ir naudojimo atvejai

1. Prieiga prie API duomenų

Gaunant duomenis iš API, dažnai neturite visiškos kontrolės per duomenų struktūrą. Kai kurie laukai gali būti praleisti arba turėti null reikšmes. Pasirinktinis grandininis ryšys yra neįkainojamas sprendžiant šias situacijas.

async function fetchData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  // Saugiai pasiekti vartotojo el. paštą, net jei 'email' savybė trūksta
  const email = data?.profile?.email;
  console.log("Email:", email || "El. paštas neprieinamas"); // Naudokite nullish coalescing, kad pateiktumėte numatytąją reikšmę

  // Saugiai pasiekti vartotojo adreso miestą
  const city = data?.address?.city;
  console.log("City: ", city || "Miestas neprieinamas");


}

fetchData(123); // Naudojimo pavyzdys

2. Darbas su vartotojo nustatymais

Vartotojo nustatymai dažnai saugomi įdėtuose objektuose. Pasirinktinis grandininis ryšys gali supaprastinti prieigą prie šių nustatymų, net jei kai kurie iš jų nėra apibrėžti.

const userPreferences = {
  theme: {
    color: "dark",
  },
};

// Saugiai pasiekti vartotojo šrifto dydį, pateikiant numatytąją reikšmę, jei ji nenustatyta
const fontSize = userPreferences?.font?.size || 16;
console.log("Font Size:", fontSize); // Išvestis: 16 (numatytoji reikšmė)

const color = userPreferences?.theme?.color || "light";
console.log("Color Theme:", color); // Išvestis: dark

3. Įvykių klausytojų (Event Listeners) valdymas

Dirbant su įvykių klausytojais, gali tekti pasiekti įvykio objekto savybes. Pasirinktinis grandininis ryšys gali padėti išvengti klaidų, jei įvykio objektas ar jo savybės nėra apibrėžtos.

document.getElementById('myButton').addEventListener('click', function(event) {
  // Saugiai pasiekti tikslinio elemento ID
  const targetId = event?.target?.id;
  console.log("Target ID:", targetId);
});

4. Internacionalizacija (i18n)

Daugiakalbėse programose dažnai reikia pasiekti išverstus tekstus iš įdėto objekto pagal vartotojo lokalę. Pasirinktinis grandininis ryšys supaprastina šį procesą.

const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour",
    //farewell: "Au Revoir" - pašalinta demonstracijai
  }
};

const locale = "fr";

// Saugiai pasiekti išverstą pasisveikinimą
const greeting = translations?.[locale]?.greeting || "Hello";
console.log("Greeting:", greeting); // Išvestis: Bonjour

//Saugiai pasiekti išverstą atsisveikinimą
const farewell = translations?.[locale]?.farewell || "Goodbye";
console.log("Farewell:", farewell); //Išvestis: Goodbye (pagal nutylėjimą naudojama anglų kalba)

Pasirinktinis grandininis ryšys su funkcijų iškvietimais

Pasirinktinį grandininį ryšį taip pat galima naudoti saugiai iškviesti funkcijas, kurios gali neegzistuoti. Tam naudokite ?.() sintaksę.

const myObject = {
  myMethod: function() {
    console.log("Metodas iškviestas!");
  }
};

// Saugiai iškviesti metodą, jei jis egzistuoja
myObject?.myMethod?.(); // Išvestis: Metodas iškviestas!

const myObject2 = {};

//Saugiai iškviesti metodą, bet jis neegzistuoja
myObject2?.myMethod?.(); // Nėra klaidos, nieko neįvyksta

Pasirinktinis grandininis ryšys su masyvo elementų prieiga

Pasirinktinį grandininį ryšį galima naudoti ir su masyvo elementų prieiga, naudojant ?.[index] sintaksę. Tai naudinga dirbant su masyvais, kurie gali būti tušti arba nevisiškai užpildyti.

const myArray = ["apple", "banana", "cherry"];

//Saugiai pasiekti masyvo elementą
const firstElement = myArray?.[0]; // "apple"

const myArray2 = [];

//Saugiai pasiekti masyvo elementą, bus undefined.
const firstElement2 = myArray2?.[0]; // undefined

const secondElement = myArray?.[10]; // undefined (be klaidos)

Pasirinktinio grandininio ryšio derinimas su „Nullish Coalescing“

Pasirinktinis grandininis ryšys dažnai veikia kartu su „nullish coalescing“ operatoriumi (??). „Nullish coalescing“ operatorius pateikia numatytąją reikšmę, kai kairėje operatoriaus pusėje yra null arba undefined. Tai leidžia pateikti atsargines reikšmes, kai trūksta savybės.

const user = {};

// Saugiai pasiekti vartotojo vardą, pateikiant numatytąją reikšmę, jei jis nenustatytas
const name = user?.profile?.name ?? "Nežinomas vartotojas";
console.log("Name:", name); // Išvestis: Nežinomas vartotojas

Šiame pavyzdyje, jei user.profile arba user.profile.name yra null arba undefined, kintamajam name bus priskirta reikšmė „Nežinomas vartotojas“.

Naršyklių suderinamumas

Pasirinktinis grandininis ryšys yra santykinai nauja JavaScript funkcija (įdiegta ECMAScript 2020). Jį palaiko visos modernios naršyklės. Jei jums reikia palaikyti senesnes naršykles, gali tekti naudoti transkompiliatorių, pvz., Babel, kad jūsų kodas būtų konvertuotas į suderinamą JavaScript versiją.

Apribojimai

Pasirinktinis grandininis ryšys gali būti naudojamas tik savybėms pasiekti, o ne reikšmėms priskirti. Jo negalima naudoti kairėje priskyrimo pusėje.
Pernelyg dažnas naudojimas gali paslėpti galimas klaidas. Nors vykdymo metu kylančių išimčių prevencija yra gerai, vis tiek svarbu suprasti, kodėl savybė gali trūkti. Apsvarstykite galimybę pridėti registravimo ar kitus derinimo mechanizmus, kad padėtumėte nustatyti ir išspręsti pagrindines duomenų problemas.

Gerosios praktikos

Naudokite, kai nesate tikri, ar savybė egzistuoja: Pasirinktinis grandininis ryšys yra naudingiausias dirbant su duomenų šaltiniais, kuriuose savybės gali trūkti arba turėti null reikšmes.
Derinkite su „nullish coalescing“: Naudokite „nullish coalescing“ operatorių (??), kad pateiktumėte numatytąsias reikšmes, kai savybė trūksta.
Venkite perteklinio naudojimo: Nenaudokite pasirinktinio grandininio ryšio be atrankos. Naudokite jį tik tada, kai būtina, kad nepaslėptumėte galimų klaidų.
Dokumentuokite savo kodą: Aiškiai dokumentuokite, kodėl naudojate pasirinktinį grandininį ryšį ir koks yra laukiamas elgesys, kai savybė trūksta.

Išvada

JavaScript pasirinktinio grandininio ryšio operatorius yra galingas įrankis, padedantis rašyti švaresnį, saugesnį ir patikimesnį kodą. Suteikdamas glaustą būdą pasiekti potencialiai trūkstamas savybes, jis padeda išvengti klaidų, sumažina pasikartojantį kodą ir pagerina kodo skaitomumą. Suprasdami, kaip jis veikia, ir laikydamiesi gerųjų praktikų, galite pasinaudoti pasirinktiniu grandininiu ryšiu kurdami atsparesnes ir lengviau prižiūrimas JavaScript programas.

Pradėkite naudoti pasirinktinį grandininį ryšį savo projektuose ir pajuskite saugios bei elegantiškos prieigos prie savybių privalumus. Tai padarys jūsų kodą skaitomesnį, mažiau linkusį į klaidas ir galiausiai lengviau prižiūrimą. Sėkmingo programavimo!