JavaScript'i valikuline aheldamine: turvaline juurdepääs omadustele robustsete rakenduste loomiseks

Kaasaegses JavaScripti arenduses on pesastatud objektide ja potentsiaalselt puuduvate omadustega tegelemine tavaline väljakutse. Olematu omaduse poole pöördumine võib põhjustada vigu, häirides kasutajakogemust ja muutes teie koodi vähem usaldusväärseks. Õnneks pakub JavaScript võimsa funktsiooni nimega valikuline aheldamine (?.), et seda probleemi elegantselt ja tõhusalt lahendada. See põhjalik juhend uurib valikulist aheldamist üksikasjalikult, pakkudes praktilisi näiteid ja teadmisi, mis aitavad teil seda väärtuslikku tööriista omandada.

Probleemi mõistmine: puuduvate omaduste ohud

Kujutage ette stsenaariumi, kus töötate API-st hangitud kasutajaandmetega. API võib tagastada erinevaid struktuure sõltuvalt kasutaja tüübist või olemasolevast teabest. Sügavalt pesastatud omadusele juurdepääs ilma korralike kontrollideta võib kergesti viia TypeError: Cannot read properties of undefined (reading '...') veani. See viga tekib siis, kui proovite juurde pääseda undefined või null väärtuse omadusele.

Näiteks:

            const user = {
  profile: {
    address: {
      street: '123 Main St'
    }
  }
};

// Juurdepääs tänava omadusele
const street = user.profile.address.street; // Töötab hästi
console.log(street); // Väljund: 123 Main St

// Mis siis, kui aadress puudub?
const user2 = {
  profile: {}
};

// See põhjustab vea!
// const street2 = user2.profile.address.street; // TypeError: Cannot read properties of undefined (reading 'street')

            

              
                Copy
              
            
          

Traditsiooniliselt on arendajad nende vigade vältimiseks kasutanud tingimuslikke kontrolle (if-lauseid või &&-operaatorit). Kuid need kontrollid võivad kiiresti muutuda paljusõnaliseks ja raskesti loetavaks, eriti sügavalt pesastatud objektidega tegelemisel.

Tutvustame valikulist aheldamist (?.)

Valikuline aheldamine pakub lühikest ja elegantset viisi pesastatud objekti omadustele juurdepääsuks, isegi kui mõned neist omadustest võivad puududa. Operaator ?. võimaldab teil objekti omadusele juurde pääseda ainult siis, kui see objekt ei ole null ega undefined. Kui objekt on null või undefined, lühistub avaldis koheselt ja tagastab undefined.

Kuidas see töötab:

            const street2 = user2.profile?.address?.street;
console.log(street2); // Väljund: undefined (viga ei teki!)

            

              
                Copy
              
            
          

Selles näites, kui user2.profile on null või undefined, tagastab avaldis kohe undefined, proovimata juurde pääseda address või street omadusele. Samamoodi, kui user2.profile eksisteerib, aga user2.profile.address on null või undefined, tagastab avaldis ikkagi undefined. Vigu ei teki.

Süntaks ja kasutus

Valikulise aheldamise põhisüntaks on:

            object?.property
object?.method()
array?.[index]

            

              
                Copy
              
            
          

Vaatame iga neist juhtudest lähemalt:

• object?.property: Pääseb juurde objekti omadusele. Kui objekt on null või undefined, tagastab avaldis undefined.
• object?.method(): Kutsub välja objekti meetodi. Kui objekt on null või undefined, tagastab avaldis undefined. Pange tähele, et see *ei* kontrolli, kas *meetod* ise eksisteerib; see kontrollib ainult, kas *objekt* on null-väärtusega. Kui objekt on olemas, aga meetodit mitte, saate ikkagi TypeError'i.
• array?.[index]: Pääseb juurde massiivi elemendile. Kui massiiv on null või undefined, tagastab avaldis undefined.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid, kuidas valikuline aheldamine saab teie koodi lihtsustada ja selle robustsust parandada.

1. Pesastatud omadustele juurdepääs API vastustes

Nagu varem mainitud, on API vastustel sageli erinevad struktuurid. Valikuline aheldamine võib olla hindamatu nende vastuste omadustele turvaliseks juurdepääsuks.

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

    // Turvaline juurdepääs kasutaja linnale
    const city = data?.profile?.address?.city;
    console.log(`User's city: ${city || 'N/A'}`); // Kasutage vaikeväärtuse andmiseks null-väärtuse ühendamist

  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

            

              
                Copy
              
            
          

Selles näites, isegi kui API vastus ei sisalda profile või address omadust, ei tekita kood viga. Selle asemel on city väärtuseks undefined ja null-väärtuse ühendamise operaator (||) annab vaikeväärtuseks 'N/A'.

2. Meetodite tingimuslik väljakutsumine

Valikulist aheldamist saab kasutada ka meetodite kutsumiseks objektidel, mis ei pruugi eksisteerida.

            const config = {
  analytics: {
    trackEvent: (eventName) => {
      console.log(`Tracking event: ${eventName}`);
    }
  }
};

// Kutsuge trackEvent meetod välja, kui see eksisteerib
config.analytics?.trackEvent('button_click'); // Jälgib sündmust

const config2 = {};

// See ei põhjusta viga, isegi kui analytics puudub
config2.analytics?.trackEvent('form_submission'); // Ei tee midagi (viga ei teki)

            

              
                Copy
              
            
          

Sel juhul, kui config.analytics on null või undefined, ei kutsuta trackEvent meetodit välja ja viga ei teki.

3. Turvaline juurdepääs massiivi elementidele

Valikulist aheldamist saab kasutada ka massiivi indekseerimisega, et turvaliselt pääseda juurde elementidele, mis võivad olla piiridest väljas.

            const myArray = [1, 2, 3];

// Juurdepääs elemendile indeksil 5 (mida ei eksisteeri)
const element = myArray?.[5];
console.log(element); // Väljund: undefined

// Juurdepääs elemendi omadusele, mis ei pruugi eksisteerida
const users = [{
  id: 1,
  name: 'Alice'
}, {
  id: 2,
  name: 'Bob'
}];

const secondUserName = users?.[1]?.name; // Juurdepääs teise kasutaja nimele
console.log(secondUserName); // Väljund: Bob

const thirdUserName = users?.[2]?.name; // Juurdepääs kolmanda kasutaja nimele (ei eksisteeri)
console.log(thirdUserName); // Väljund: undefined

            

              
                Copy
              
            
          

4. Rahvusvahelistamise (i18n) käsitlemine

Rahvusvahelistatud rakendustes hoitakse tekstistringe sageli pesastatud objektides vastavalt kasutaja lokaadile. Valikuline aheldamine võib nendele stringidele turvalise juurdepääsu lihtsustada.

            const translations = {
  en: {
    greeting: 'Hello, world!',
    farewell: 'Goodbye!'
  },
  fr: {
    greeting: 'Bonjour le monde!',
    farewell: 'Au revoir!'
  }
};

function getTranslation(locale, key) {
  return translations?.[locale]?.[key] || 'Translation not found';
}

console.log(getTranslation('en', 'greeting')); // Väljund: Hello, world!
console.log(getTranslation('fr', 'farewell')); // Väljund: Au revoir!
console.log(getTranslation('de', 'greeting')); // Väljund: Translation not found (saksa keelt ei toetata)

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas valikuline aheldamine suudab sujuvalt käsitleda juhtumeid, kus tõlge pole konkreetse lokaadi või võtme jaoks saadaval.

5. Töö konfiguratsiooniobjektidega

Paljud rakendused tuginevad seadete ja parameetrite salvestamiseks konfiguratsiooniobjektidele. Valikulist aheldamist saab kasutada nendele seadetele juurdepääsuks, muretsemata puuduvate omaduste pärast.

            const defaultConfig = {
  apiEndpoint: 'https://default.example.com',
  timeout: 5000,
  features: {
    darkMode: false
  }
};

const userConfig = {
  apiEndpoint: 'https://user.example.com'
};

// Ühendage kasutaja konfiguratsioon vaikekonfiguratsiooniga
const mergedConfig = {
  ...defaultConfig,
  ...userConfig
};

// Juurdepääs konfiguratsiooniväärtusele turvaliselt
const apiUrl = mergedConfig?.apiEndpoint;
const darkModeEnabled = mergedConfig?.features?.darkMode;

console.log(`API Endpoint: ${apiUrl}`);
console.log(`Dark Mode Enabled: ${darkModeEnabled}`);

            

              
                Copy
              
            
          

Valikulise aheldamise kombineerimine null-väärtuse ühendamisega (??)

Null-väärtuse ühendamise operaatorit (??) kasutatakse sageli koos valikulise aheldamisega, et pakkuda vaikeväärtusi, kui omadus puudub. Operaator ?? tagastab parempoolse operandi, kui selle vasakpoolne operand on null või undefined, ja vastasel juhul vasakpoolse operandi.

            const user = {
  name: 'John Doe'
};

// Hangi kasutaja vanus või vaikimisi 30, kui see pole saadaval
const age = user?.age ?? 30;
console.log(`User's age: ${age}`); // Väljund: User's age: 30

// Hangi kasutaja linn või vaikimisi 'Tundmatu', kui see pole saadaval
const city = user?.profile?.address?.city ?? 'Unknown';
console.log(`User's city: ${city}`); // Väljund: User's city: Unknown

            

              
                Copy
              
            
          

?? kasutamine koos ?.-ga võimaldab teil pakkuda mõistlikke vaikeväärtusi ilma paljusõnaliste tingimuslike kontrollideta.

Valikulise aheldamise kasutamise eelised

• Parem koodi loetavus: Valikuline aheldamine muudab teie koodi puhtamaks ja lihtsamini mõistetavaks, vähendades vajadust paljusõnaliste tingimuslike kontrollide järele.
• Suurem koodi turvalisus: See hoiab ära TypeError erandid, mis on põhjustatud null või undefined väärtuste omadustele juurdepääsust, muutes teie koodi robustsemaks.
• Vähem korduvat koodi: See välistab vajaduse korduvate if-lausete ja &&-operaatorite järele, tulemuseks on lühem kood.
• Lihtsam hooldus: Puhtamat ja lühemat koodi on lihtsam hooldada ja siluda.

Piirangud ja kaalutlused

• Brauseri ühilduvus: Valikuline aheldamine on toetatud kõigis kaasaegsetes brauserites. Kui aga peate toetama vanemaid brausereid, peate võib-olla kasutama transpilaatorit nagu Babel, et teisendada oma kood ühilduvaks JavaScripti versiooniks.
• Meetodi olemasolu: Valikuline aheldamine kontrollib ainult seda, kas objekt, millel meetodit kutsute, on null või undefined. See *ei* kontrolli, kas meetod ise eksisteerib. Kui objekt on olemas, aga meetodit mitte, saate ikkagi TypeError-i. Võimalik, et peate seda kombineerima typeof kontrolliga. Näiteks: object?.method && typeof object.method === 'function' ? object.method() : null
• Ülekasutamine: Kuigi valikuline aheldamine on võimas tööriist, on oluline seda kasutada läbimõeldult. Selle ülekasutamine võib varjata teie andmestruktuuride või rakenduse loogika alusprobleeme.
• Silumine: Kui ahel hindab valikulise aheldamise tõttu väärtuseks `undefined`, võib see mõnikord muuta silumise veidi keerulisemaks, kuna ei pruugi olla kohe ilmne, milline ahela osa põhjustas `undefined` väärtuse. Console.log lausete hoolikas kasutamine arenduse ajal võib siin abiks olla.

Parimad praktikad valikulise aheldamise kasutamiseks

• Kasutage seda omadustele juurdepääsuks, mis tõenäoliselt puuduvad: Keskenduge omadustele, mis on tõeliselt valikulised või võivad puududa API variatsioonide või andmete ebakõlade tõttu.
• Kombineerige seda null-väärtuse ühendamisega vaikeväärtuste pakkumiseks: Kasutage ??, et pakkuda mõistlikke vaikeväärtusi, kui omadus puudub, tagades, et teie rakendus käitub prognoositavalt.
• Vältige selle ülekasutamist: Ärge kasutage valikulist aheldamist oma andmestruktuuride või rakenduse loogika alusprobleemide varjamiseks. Lahendage puuduvate omaduste algpõhjus alati, kui see on võimalik.
• Testige oma koodi põhjalikult: Veenduge, et teie kood käsitleb puuduvaid omadusi sujuvalt, kirjutades põhjalikke ühikuteste.

Kokkuvõte

JavaScripti valikulise aheldamise operaator (?.) on väärtuslik tööriist turvalisema, puhtama ja hooldatavama koodi kirjutamiseks. Käsitledes elegantselt potentsiaalselt puuduvaid omadusi, hoiab see ära vigu ja lihtsustab pesastatud objekti omadustele juurdepääsu protsessi. Kombineerituna null-väärtuse ühendamise operaatoriga (??), võimaldab see pakkuda vaikeväärtusi ja tagada, et teie rakendus käitub prognoositavalt isegi ootamatute andmete korral. Valikulise aheldamise omandamine parandab oluliselt teie JavaScripti arendustöövoogu ja aitab teil luua robustsemaid ja usaldusväärsemaid rakendusi globaalsele publikule.

Neid parimaid praktikaid kasutades saate rakendada valikulise aheldamise võimsust, et luua vastupidavamaid ja kasutajasõbralikumaid rakendusi, olenemata andmeallikatest või kasutajakeskkondadest, millega kokku puutute.