JavaScripti valikuline aheldamine ja nurksulgude notatsioon: Dünaamiline omadustele juurdepääs selgeks

Kaasaegses JavaScripti arenduses on keeruliste andmestruktuuride navigeerimine tavaline ülesanne. Sageli on vaja juurde pääseda omadustele, mis ei pruugi olemas olla, mis põhjustab vigu ja ootamatut käitumist. Õnneks pakub JavaScript võimsaid tööriistu, nagu valikuline aheldamine (?.) ja nurksulgude notatsioon, et neid olukordi elegantselt käsitleda. See põhjalik juhend uurib neid funktsioone, nende eeliseid ja praktilisi rakendusi, et parandada teie koodi vastupidavust ja hooldatavust.

Valikulise aheldamise (?.) mõistmine

Valikuline aheldamine on lühike viis pääseda juurde pesastatud objekti omadustele, kontrollimata iga taseme olemasolu eraldi. Kui ahelas olev omadus on nulliväärtuslik (null või undefined), siis avaldis lühistub ja tagastab vea viskamise asemel undefined. See hoiab ära teie koodi kokkujooksmise potentsiaalselt puuduvate andmetega tegelemisel.

Põhisüntaks

Valikulise aheldamise operaatorit tähistatakse sümboliga ?.. See paigutatakse omaduse nime järele, et näidata, et omadusele juurdepääs peaks toimuma tingimuslikult.

Näide:

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

// Ilma valikulise aheldamiseta:
let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
}

console.log(city); // Väljund: London

// Valikulise aheldamisega:
const cityWithOptionalChaining = user?.profile?.address?.city;
console.log(cityWithOptionalChaining); // Väljund: London

const nonExistentCity = user?.profile?.contact?.address?.city; //profile.contact ei eksisteeri
console.log(nonExistentCity); // Väljund: undefined

Ülaltoodud näites näitab teine console.log, kuidas valikuline aheldamine lihtsustab sügavalt pesastatud omadustele juurdepääsu. Kui mõni omadustest (profile, address või city) on null või undefined, tagastab avaldis undefined, vältides TypeError viga.

Valikulise aheldamise kasutusjuhud

• API vastustele juurdepääs: Andmete toomisel API-st võib vastuse struktuur varieeruda. Valikuline aheldamine võimaldab teil pääseda juurde konkreetsetele väljadele, muretsemata puuduvate või mittetäielike andmete pärast.
• Kasutajaprofiilidega töötamine: Rakendustes, kus on kasutajaprofiilid, võivad teatud väljad olla valikulised. Valikulist aheldamist saab kasutada nendele väljadele ohutuks juurdepääsuks ilma vigu põhjustamata.
• Dünaamiliste andmete käsitlemine: Tegeledes andmetega, mis muutuvad sageli või millel on muutuv struktuur, pakub valikuline aheldamine vastupidavat viisi omadustele juurdepääsuks ilma rangete eeldusteta.

Valikuline aheldamine funktsioonikutsungitega

Valikulist aheldamist saab kasutada ka funktsioonide kutsumisel, mis ei pruugi eksisteerida või võivad olla null. See on eriti kasulik sündmuste kuulajate või tagasikutsetega tegelemisel.

const myObject = {
  myMethod: function() {
    console.log('Meetod välja kutsutud!');
  }
};

myObject.myMethod?.(); // Kutsub myMethod välja, kui see eksisteerib

const anotherObject = {};
anotherObject.myMethod?.(); // Ei tee midagi, viga ei visata

Sel juhul tagab ?.() süntaks, et funktsioon kutsutakse välja ainult siis, kui see objektil eksisteerib. Kui funktsioon on null või undefined, hindab avaldis tulemuseks undefined ilma viga viskamata.

Nurksulgude notatsiooni mõistmine

Nurksulgude notatsioon pakub dünaamilist viisi objekti omadustele juurdepääsuks, kasutades muutujaid või avaldisi. See on eriti kasulik, kui te ei tea omaduse nime ette või kui peate pääsema juurde omadustele, mille nimed ei ole kehtivad JavaScripti identifikaatorid.

Põhisüntaks

Nurksulgude notatsioon kasutab nurksulgi ([]), et ümbritseda omaduse nime, mis võib olla string või avaldis, mis hindab tulemuseks stringi.

Näide:

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

// Omadustele juurdepääs punktnotatsiooniga (lihtsate nimede jaoks):
console.log(person.firstName); // Väljund: Alice

// Omadustele juurdepääs nurksulgude notatsiooniga (dünaamiliste nimede või kehtetute identifikaatorite jaoks):
console.log(person['lastName']); // Väljund: Smith
console.log(person['age-group']); // Väljund: adult

const propertyName = 'firstName';
console.log(person[propertyName]); // Väljund: Alice

Ülaltoodud näites kasutatakse nurksulgude notatsiooni, et pääseda juurde omadustele, mille nimed ei ole kehtivad JavaScripti identifikaatorid (nt 'age-group'), ja et pääseda omadustele dünaamiliselt juurde muutuja (propertyName) abil.

Nurksulgude notatsiooni kasutusjuhud

• Dünaamiliste nimedega omadustele juurdepääs: Kui omaduse nimi määratakse käitusajal (nt põhinedes kasutaja sisendil või API vastusel), on nurksulgude notatsioon hädavajalik.
• Erimärkidega omadustele juurdepääs: Kui omaduse nimi sisaldab erimärke (nt sidekriipse, tühikuid), on nurksulgude notatsioon ainus viis sellele juurdepääsuks.
• Omaduste itereerimine: Nurksulgude notatsiooni kasutatakse tavaliselt tsüklites objekti omaduste üle itereerimiseks.

Objekti omaduste itereerimine nurksulgude notatsiooniga

Nurksulgude notatsioon on eriti kasulik, kui soovite itereerida üle objekti omaduste, kasutades for...in tsüklit.

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

for (const key in car) {
  if (car.hasOwnProperty(key)) { //Kontrollitakse omaseid omadusi
    console.log(key + ': ' + car[key]);
  }
}
// Väljund:
// make: Toyota
// model: Camry
// year: 2023

Selles näites itereerib for...in tsükkel üle car objekti omaduste ja nurksulgude notatsiooni kasutatakse iga omaduse väärtusele juurdepääsuks.

Valikulise aheldamise ja nurksulgude notatsiooni kombineerimine

Tõeline jõud tuleb esile siis, kui kombineerite valikulist aheldamist ja nurksulgude notatsiooni, et käsitleda keerulisi andmestruktuure dünaamiliste omaduste nimedega ja potentsiaalselt puuduvate andmetega. See kombinatsioon võimaldab teil ohutult pääseda juurde omadustele isegi siis, kui te ei tea objekti struktuuri ette.

Süntaks

Valikulise aheldamise ja nurksulgude notatsiooni kombineerimiseks kasutage ?. operaatorit enne nurksulgi.

Näide:

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

function getCountry(userId) {
  // Leia kasutaja id järgi
  const user = data.users.find(user => user.id === userId);

  // Pääse kasutaja riigile juurde valikulise aheldamise ja nurksulgude notatsiooniga
  const country = user?.profile?.details?.['country'];
  return country;
}

console.log(getCountry(1)); // Väljund: Canada
console.log(getCountry(2)); // Väljund: undefined (details omadus puudub)
console.log(getCountry(3)); // Väljund: undefined (id 3-ga kasutajat pole)

Ülaltoodud näites üritab getCountry funktsioon hankida kindla ID-ga kasutaja riiki. Valikulist aheldamist (?.) kasutatakse enne nurksulgude notatsiooni (['country']), et tagada, et kood ei viskaks viga, kui user, profile või details omadused on null või undefined.

Täpsemad kasutusjuhud

• Dünaamilised vormiandmed: Töötades dünaamiliste vormidega, mille väljad pole ette teada, saate kasutada valikulist aheldamist ja nurksulgude notatsiooni, et vormi väärtustele ohutult juurde pääseda.
• Konfiguratsiooniobjektide käsitlemine: Konfiguratsiooniobjektidel on sageli keeruline struktuur valikuliste omadustega. Valikulist aheldamist ja nurksulgude notatsiooni saab kasutada nendele omadustele juurdepääsuks ilma rangete eeldusteta.
• Muutuva struktuuriga API vastuste töötlemine: Tegeledes API-dega, mis tagastavad andmeid erinevates vormingutes teatud tingimustel, pakuvad valikuline aheldamine ja nurksulgude notatsioon paindlikku viisi vajalikele väljadele juurdepääsuks.

Parimad praktikad valikulise aheldamise ja nurksulgude notatsiooni kasutamiseks

Kuigi valikuline aheldamine ja nurksulgude notatsioon on võimsad tööriistad, on oluline neid kasutada kaalutletult ja järgida parimaid praktikaid, et vältida potentsiaalseid lõkse.

• Kasutage valikulist aheldamist potentsiaalselt puuduvate andmete jaoks: Valikulist aheldamist tuleks kasutada, kui ootate, et omadus võib olla null või undefined. See hoiab ära vead ja muudab teie koodi vastupidavamaks.
• Kasutage nurksulgude notatsiooni dünaamiliste omaduste nimede jaoks: Nurksulgude notatsiooni tuleks kasutada, kui omaduse nimi määratakse käitusajal või kui omaduse nimi ei ole kehtiv JavaScripti identifikaator.
• Vältige valikulise aheldamise liigset kasutamist: Kuigi valikuline aheldamine võib muuta teie koodi lühemaks, võib liigne kasutamine muuta selle mõistmise ja silumise raskemaks. Kasutage seda ainult siis, kui see on vajalik.
• Kombineerige nulliväärtusliku koalestsentsoperaatoriga (??): Nulliväärtuslikku koalestsentsoperaatorit (??) saab kasutada koos valikulise aheldamisega, et pakkuda vaikeväärtust, kui omadus on null või undefined.
• Kirjutage selget ja lühikest koodi: Kasutage tähendusrikkaid muutujate nimesid ja kommentaare, et muuta oma koodi lihtsamini mõistetavaks ja hooldatavaks.

Kombineerimine nulliväärtusliku koalestsentsoperaatoriga (??)

Nulliväärtuslik koalestsentsoperaator (??) pakub viisi vaikeväärtuse tagastamiseks, kui väärtus on null või undefined. Seda saab kasutada koos valikulise aheldamisega, et pakkuda varuväärtust, kui omadus puudub.

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

const primaryColor = settings?.theme?.colors?.primary ?? '#ffffff'; // Vaikimisi valge, kui põhivärv puudub
console.log(primaryColor); // Väljund: #007bff

const secondaryColor = settings?.theme?.colors?.secondary ?? '#cccccc'; // Vaikimisi helehall, kui teine värv puudub
console.log(secondaryColor); // Väljund: #cccccc

Ülaltoodud näites kasutatakse nulliväärtuslikku koalestsentsoperaatorit (??), et pakkuda vaikeväärtusi primaryColor ja secondaryColor muutujatele, kui vastavad omadused on null või undefined.

Vigade käsitlemine ja silumine

Kuigi valikuline aheldamine hoiab ära teatud tüüpi vigu, on siiski oluline vigu graatsiliselt käsitleda ja oma koodi tõhusalt siluda. Siin on mõned näpunäited:

• Kasutage Try-Catch plokke: Mähi oma kood try-catch plokkidesse, et käsitleda ootamatuid vigu.
• Kasutage konsooli logimist: Kasutage console.log lauseid, et kontrollida muutujate väärtusi ja jälgida oma koodi voogu.
• Kasutage silumistööriistu: Kasutage brauseri arendaja tööriistu või IDE silumisfunktsioone, et oma koodi samm-sammult läbi käia ja vigu tuvastada.
• Kirjutage ühikteste: Kirjutage ühikteste, et kontrollida, kas teie kood töötab ootuspäraselt, ja et vigu varakult avastada.

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

} catch (error) {
  console.error('Ilmnes viga:', error);
}

Reaalse maailma näited

Uurime mõningaid reaalse maailma näiteid selle kohta, kuidas valikulist aheldamist ja nurksulgude notatsiooni saab kasutada erinevates stsenaariumides.

Näide 1: Kasutajaandmetele juurdepääs API-st

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

    const userName = userData?.name ?? 'Tundmatu kasutaja';
    const userEmail = userData?.email ?? 'E-posti pole antud';
    const userCity = userData?.address?.city ?? 'Linna pole antud';

    console.log(`Kasutajanimi: ${userName}`);
    console.log(`E-post: ${userEmail}`);
    console.log(`Linn: ${userCity}`);

  } catch (error) {
    console.error('Kasutajaandmete toomine ebaõnnestus:', error);
  }
}

// Näidiskasutus:
// fetchUserData(123);

See näide demonstreerib, kuidas tuua kasutajaandmeid API-st ja pääseda juurde konkreetsetele väljadele, kasutades valikulist aheldamist ja nulliväärtuslikku koalestsentsoperaatorit. Kui mõni väli puudub, kasutatakse vaikeväärtusi.

Näide 2: Dünaamiliste vormiandmete käsitlemine

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

  console.log(`Eesnimi: ${firstName}`);
  console.log(`Perekonnanimi: ${lastName}`);
  console.log(`Vanus: ${age}`);
}

// Näidiskasutus:
const formData = {
  'first-name': 'John',
  'last-name': 'Doe',
  age: 30
};

processFormData(formData);

See näide demonstreerib, kuidas töödelda dünaamilisi vormiandmeid, mille väljad ei pruugi olla ette teada. Valikulist aheldamist ja nurksulgude notatsiooni kasutatakse vormi väärtustele ohutuks juurdepääsuks.

Kokkuvõte

Valikuline aheldamine ja nurksulgude notatsioon on võimsad tööriistad, mis võivad oluliselt parandada teie JavaScripti koodi vastupidavust ja hooldatavust. Mõistes, kuidas neid funktsioone tõhusalt kasutada, saate hõlpsasti käsitleda keerulisi andmestruktuure ja vältida ootamatuid vigu. Pidage meeles, et kasutage neid tehnikaid kaalutletult ja järgige parimaid praktikaid, et kirjutada selget, lühikest ja usaldusväärset koodi.

Valides valikulise aheldamise ja nurksulgude notatsiooni, olete hästi varustatud, et tulla toime mis tahes JavaScripti arenduse väljakutsega, mis teie teele satub. Head kodeerimist!