JavaScript neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas: dinamiškas ypatybių prieigos paaiškinimas

Šiuolaikiniame JavaScript kūrime dažnai tenka naršyti sudėtingas duomenų struktūras. Dažnai reikia pasiekti ypatybes, kurių gali nebūti, o tai sukelia klaidas ir netikėtą elgesį. Laimei, JavaScript siūlo galingus įrankius, tokius kaip neprivalomas grandininis sutrumpinimas (?.) ir skliaustų žymėjimas, kad šios situacijos būtų tvarkomos tinkamai. Šiame išsamiame vadove nagrinėjamos šios funkcijos, jų privalumai ir praktiniai pritaikymai, siekiant pagerinti jūsų kodo patikimumą ir palaikomumą.

Neprivalomo grandininio sutrumpinimo (?.) supratimas

Neprivalomas grandininis sutrumpinimas yra glaustas būdas pasiekti įterptų objektų ypatybes, nereikalaujant atskirai tikrinti kiekvieno lygio buvimą. Jei grandinėje esanti ypatybė yra nulio (null) arba nepaskirta (undefined) reikšmė, išraiška nutraukiama ir grąžinama undefined, o ne sukeliama klaida. Tai neleidžia jūsų kodui sugesti, kai dirbate su potencialiai trūkstamais duomenimis.

Pagrindinė sintaksė

Neprivalomo grandininio sutrumpinimo operatorius žymimas ?.. Jis dedamas po ypatybės pavadinimo, nurodant, kad ypatybės prieiga turėtų būti atliekama sąlygiškai.

Pavyzdys:

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

// Be neprivalomo grandininio sutrumpinimo:
let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
}

console.log(city); // Išvestis: London

// Su neprivalomu grandininiu sutrumpinimu:
const cityWithOptionalChaining = user?.profile?.address?.city;
console.log(cityWithOptionalChaining); // Išvestis: London

const nonExistentCity = user?.profile?.contact?.address?.city; //profile.contact neegzistuoja
console.log(nonExistentCity); // Išvestis: undefined

Aukščiau pateiktame pavyzdyje antrasis console.log parodo, kaip neprivalomas grandininis sutrumpinimas supaprastina giliai įterptų ypatybių pasiekimo procesą. Jei bet kuri ypatybė (profile, address arba city) yra null arba undefined, išraiška grąžina undefined, taip užkertant kelią TypeError.

Neprivalomo grandininio sutrumpinimo naudojimo atvejai

• API atsakymų pasiekimas: Atsiunčiant duomenis iš API, atsakymo struktūra gali skirtis. Neprivalomas grandininis sutrumpinimas leidžia pasiekti konkrečius laukus, nesijaudinant dėl trūkstamų ar nepilnų duomenų.
• Darbas su vartotojų profiliais: Programose su vartotojų profiliais kai kurie laukai gali būti neprivalomi. Neprivalomas grandininis sutrumpinimas gali būti naudojamas saugiai pasiekti šiuos laukus nesukeliant klaidų.
• Dinamiškų duomenų tvarkymas: Dirbant su dažnai besikeičiančiais arba kintamos struktūros duomenimis, neprivalomas grandininis sutrumpinimas suteikia patikimą būdą pasiekti ypatybes be griežtų prielaidų.

Neprivalomas grandininis sutrumpinimas su funkcijų iškvietimais

Neprivalomas grandininis sutrumpinimas taip pat gali būti naudojamas iškviečiant funkcijas, kurių gali nebūti arba kurios gali būti null. Tai ypač naudinga dirbant su renginių klausytojais ar atgaliniais iškvietimais.

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

myObject.myMethod?.(); // Iškviesti myMethod, jei ji egzistuoja

anotherObject = {};
anotherObject.myMethod?.(); // Nieko nedaro, klaida neiššoka

Šiuo atveju ?.() sintaksė užtikrina, kad funkcija bus iškviesta tik tuo atveju, jei ji egzistuoja objekte. Jei funkcija yra null arba undefined, išraiška įvertinama kaip undefined be klaidos.

Skliaustų žymėjimo supratimas

Skliaustų žymėjimas suteikia dinamišką būdą pasiekti objektų ypatybes, naudojant kintamuosius ar išraiškas. Tai ypač naudinga, kai iš anksto nežinote ypatybės pavadinimo arba kai reikia pasiekti ypatybes, kurių pavadinimai nėra tinkami JavaScript identifikatoriai.

Pagrindinė sintaksė

Skliaustų žymėjime naudojami kvadratiniai skliaustai ([]), apimantys ypatybės pavadinimą, kuris gali būti eilutė arba išraiška, įvertinama kaip eilutė.

Pavyzdys:

const person = {
  firstName: 'Alice',
  lastName: 'Smith',
  'age-group': 'adult'
};

// Ypatybių pasiekimas naudojant taško žymėjimą (paprastiems pavadinimams):
console.log(person.firstName); // Išvestis: Alice

// Ypatybių pasiekimas naudojant skliaustų žymėjimą (dinamiškiems pavadinimams arba netinkamiems identifikatoriams):
console.log(person['lastName']); // Išvestis: Smith
console.log(person['age-group']); // Išvestis: adult

const propertyName = 'firstName';
console.log(person[propertyName]); // Išvestis: Alice

Aukščiau pateiktame pavyzdyje skliaustų žymėjimas naudojamas pasiekti ypatybes, kurių pavadinimai nėra tinkami JavaScript identifikatoriai (pvz., 'age-group'), ir dinamiškai pasiekti ypatybes naudojant kintamąjį (propertyName).

Skliaustų žymėjimo naudojimo atvejai

• Dinamiškų pavadinimų ypatybių pasiekimas: Kai ypatybės pavadinimas nustatomas vykdymo metu (pvz., remiantis vartotojo įvestimi ar API atsakymais), skliaustų žymėjimas yra būtinas.
• Ypatybių su specialiaisiais simboliais pasiekimas: Jei ypatybės pavadinime yra specialiųjų simbolių (pvz., brūkšnelių, tarpų), skliaustų žymėjimas yra vienintelis būdas jį pasiekti.
• Ypatybių perėjimas: Skliaustų žymėjimas dažnai naudojamas cikliniuose vykdymuose, siekiant pereiti per objekto ypatybes.

Objektų ypatybių perėjimas naudojant skliaustų žymėjimą

Skliaustų žymėjimas ypač naudingas, kai norite per pereiti per objekto ypatybes naudodami for...in ciklą.

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2023
};

for (const key in car) {
  if (car.hasOwnProperty(key)) { // Tikrinama, ar tai nuosavos ypatybės
    console.log(key + ': ' + car[key]);
  }
}
// Išvestis:
// make: Toyota
// model: Camry
// year: 2023

Šiame pavyzdyje for...in ciklas pereina per car objekto ypatybes, o skliaustų žymėjimas naudojamas pasiekti kiekvienos ypatybės reikšmę.

Neprivalomo grandininio sutrumpinimo ir skliaustų žymėjimo derinimas

Tikra galia pasireiškia, kai derinate neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą, kad galėtumėte tvarkyti sudėtingas duomenų struktūras su dinamiškais ypatybių pavadinimais ir potencialiai trūkstamais duomenimis. Šis derinys leidžia saugiai pasiekti ypatybes, net jei iš anksto nežinote objekto struktūros.

Sintaksė

Norėdami sujungti neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą, prieš kvadratinius skliaustus naudokite ?. operatorių.

Pavyzdys:

data = {
  users: [
    {
      id: 1,
      profile: {
        details: {
          country: 'Canada'
        }
      }
    },
    {
      id: 2,
      profile: {
         }
    }
  ]
};

function getCountry(userId) {
  // Rasti vartotoją pagal ID
  const user = data.users.find(user => user.id === userId);

  // Pasiekti vartotojo šalį, naudojant neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą
  const country = user?.profile?.details?.['country'];
  return country;
}

console.log(getCountry(1)); // Išvestis: Canada
console.log(getCountry(2)); // Išvestis: undefined (nėra details ypatybės)
console.log(getCountry(3)); // Išvestis: undefined (nėra vartotojo su ID 3)

Aukščiau pateiktame pavyzdyje getCountry funkcija bando gauti konkretaus ID vartotojo šalį. Neprivalomas grandininis sutrumpinimas (?.) naudojamas prieš skliaustų žymėjimą (['country']), kad būtų užtikrinta, jog kodas nesukels klaidos, jei user, profile arba details ypatybės yra null arba undefined.

Pažangūs naudojimo atvejai

• Dinamiški formos duomenys: Dirbant su dinamiškomis formomis, kai laukai nėra žinomi iš anksto, galite naudoti neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą, kad saugiai pasiektumėte formos reikšmes.
• Konfigūracijos objektų tvarkymas: Konfigūracijos objektai dažnai turi sudėtingą struktūrą su neprivalomomis ypatybėmis. Neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas gali būti naudojami šioms ypatybėms pasiekti be griežtų prielaidų.
• API atsakymų su kintama struktūra apdorojimas: Dirbant su API, kurios grąžina duomenis skirtingais formatais pagal tam tikras sąlygas, neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas suteikia lankstų būdą pasiekti reikiamus laukus.

Geriausia praktika naudojant neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą

Nors neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas yra galingi įrankiai, svarbu juos naudoti protingai ir laikytis geriausios praktikos, kad išvengtumėte galimų spąstų.

• Naudokite neprivalomą grandininį sutrumpinimą, kai tikėtina, kad trūksta duomenų: Neprivalomas grandininis sutrumpinimas turėtų būti naudojamas, kai tikimasi, kad ypatybė gali būti null arba undefined. Tai užkerta kelią klaidoms ir daro jūsų kodą patikimesnį.
• Naudokite skliaustų žymėjimą dinamiškiems ypatybių pavadinimams: Skliaustų žymėjimas turėtų būti naudojamas, kai ypatybės pavadinimas nustatomas vykdymo metu arba kai ypatybės pavadinimas nėra tinkamas JavaScript identifikatorius.
• Venkite pernelyg didelio neprivalomo grandininio sutrumpinimo naudojimo: Nors neprivalomas grandininis sutrumpinimas gali padaryti jūsų kodą glaustesnį, pernelyg didelis jo naudojimas gali apsunkinti jo supratimą ir derinimo procesą. Naudokite jį tik tada, kai tai būtina.
• Derinkite su nulinių reikšmių sutrumpinimo operatoriumi (??): Nulinių reikšmių sutrumpinimo operatorius (??) gali būti naudojamas su neprivalomu grandininiu sutrumpinimu, kad būtų pateikta numatytoji reikšmė, kai ypatybė yra null arba undefined.
• Rašykite aiškų ir glaustą kodą: Naudokite prasmingus kintamųjų pavadinimus ir komentarus, kad jūsų kodas būtų lengviau suprantamas ir palaikomas.

Derinimas su nulinių reikšmių sutrumpinimo operatoriumi (??)

Nulinių reikšmių sutrumpinimo operatorius (??) suteikia būdą grąžinti numatytąją reikšmę, kai reikšmė yra null arba undefined. Tai gali būti naudojama su neprivalomu grandininiu sutrumpinimu, kad būtų pateikta atsarginė reikšmė, kai ypatybė trūksta.

settings = {
  theme: {
    colors: {
       primary: '#007bff'
    }
  }
};

const primaryColor = settings?.theme?.colors?.primary ?? '#ffffff'; // Numatyta balta, jei pirminė spalva trūksta
console.log(primaryColor); // Išvestis: #007bff

const secondaryColor = settings?.theme?.colors?.secondary ?? '#cccccc'; // Numatyta šviesiai pilka, jei antrinė spalva trūksta
console.log(secondaryColor); // Išvestis: #cccccc

Aukščiau pateiktame pavyzdyje nulinių reikšmių sutrumpinimo operatorius (??) naudojamas pateikti numatytąsias reikšmes primaryColor ir secondaryColor kintamiesiems, jei atitinkamos ypatybės yra null arba undefined.

Klaidų tvarkymas ir derinimas

Nors neprivalomas grandininis sutrumpinimas neleidžia tam tikrų tipų klaidoms, vis tiek svarbu tinkamai tvarkyti klaidas ir efektyviai derinti kodą. Štai keletas patarimų:

• Naudokite try-catch blokus: Apvyniokite savo kodą try-catch blokais, kad galėtumėte tvarkyti netikėtas klaidas.
• Naudokite konsolės žurnalus: Naudokite console.log instrukcijas, kad patikrintumėte kintamųjų reikšmes ir stebėtumėte kodo eigą.
• Naudokite derinimo įrankius: Naudokite naršyklės kūrėjų įrankius arba IDE derinimo funkcijas, kad žingsniuotumėte per savo kodą ir nustatytumėte klaidas.
• Rašykite vienetinius testus: Rašykite vienetinius testus, kad patvirtintumėte, jog jūsų kodas veikia taip, kaip tikėtasi, ir anksti aptiktumėte klaidas.

try {
  const user = data.users.find(user => user.id === userId);
  const country = user?.profile?.details?.['country'];
  console.log(country ?? 'Šalis nerasta');

} catch (error) {
  console.error('Įvyko klaida:', error);
}

Realaus pasaulio pavyzdžiai

Pažvelkime į kelis realaus pasaulio pavyzdžius, kaip neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas gali būti naudojami įvairiose situacijose.

1 pavyzdys: vartotojo duomenų gavimas iš API

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

    const userName = userData?.name ?? 'Nežinomas vartotojas';
    const userEmail = userData?.email ?? 'El. paštas nepateiktas';
    const userCity = userData?.address?.city ?? 'Miestas nepateiktas';

    console.log(`Vartotojo vardas: ${userName}`);
    console.log(`Vartotojo el. paštas: ${userEmail}`);
    console.log(`Vartotojo miestas: ${userCity}`);

  } catch (error) {
    console.error('Nepavyko gauti vartotojo duomenų:', error);
  }
}

// Naudojimo pavyzdys:
// fetchUserData(123);

Šis pavyzdys parodo, kaip gauti vartotojo duomenis iš API ir pasiekti konkrečius laukus, naudojant neprivalomą grandininį sutrumpinimą ir nulinių reikšmių sutrumpinimo operatorių. Jei bet kuris laukas trūksta, naudojamos numatytosios reikšmės.

2 pavyzdys: dinamiškų formos duomenų tvarkymas

function processFormData(formData) {
  const firstName = formData?.['first-name'] ?? '';
  const lastName = formData?.['last-name'] ?? '';
  const age = formData?.age ?? 0;

  console.log(`Vardas: ${firstName}`);
  console.log(`Pavardė: ${lastName}`);
  console.log(`Amžius: ${age}`);
}

// Naudojimo pavyzdys:
const formData = {
  'first-name': 'John',
  'last-name': 'Doe',
  age: 30
};

processFormData(formData);

Šis pavyzdys parodo, kaip apdoroti dinamiškus formos duomenis, kai laukai gali būti nežinomi iš anksto. Neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas naudojami saugiai pasiekti formos reikšmes.

Išvada

Neprivalomas grandininis sutrumpinimas ir skliaustų žymėjimas yra galingi įrankiai, kurie gali žymiai pagerinti jūsų JavaScript kodo patikimumą ir palaikomumą. Suprasdami, kaip efektyviai naudoti šias funkcijas, galėsite lengvai tvarkyti sudėtingas duomenų struktūras ir išvengti netikėtų klaidų. Atminkite, kad šiuos metodus naudokite protingai ir laikykitės geriausios praktikos, kad rašytumėte aiškų, glaustą ir patikimą kodą.

Įvaldę neprivalomą grandininį sutrumpinimą ir skliaustų žymėjimą, būsite gerai pasirengę įveikti bet kokius JavaScript kūrimo iššūkius, kurie jums iškils. Sėkmingo kodavimo!