JavaScript Optional Chaining: Droša Piekļuve Īpašumiem Robustām Lietojumprogrammām

Mūsdienu JavaScript izstrādē darbs ar ligzdotiem objektiem un potenciāli trūkstošiem īpašumiem ir izplatīts izaicinājums. Piekļuve īpašumam, kas neeksistē, var izraisīt kļūdas, traucējot lietotāja pieredzi un padarot jūsu kodu mazāk uzticamu. Par laimi, JavaScript piedāvā spēcīgu funkciju, ko sauc par optional chaining (?.), lai eleganti un efektīvi risinātu šo problēmu. Šajā visaptverošajā rokasgrāmatā mēs detalizēti izpētīsim optional chaining, sniedzot praktiskus piemērus un ieskatus, lai palīdzētu jums apgūt šo vērtīgo rīku.

Problēmas Izpratne: Trūkstošu Īpašumu Bīstamība

Apsveriet scenāriju, kurā jūs strādājat ar lietotāja datiem, kas iegūti no API. API var atgriezt dažādas struktūras atkarībā no lietotāja veida vai pieejamās informācijas. Piekļuve dziļi ligzdotam īpašumam bez atbilstošām pārbaudēm var viegli izraisīt TypeError: Cannot read properties of undefined (reading '...') kļūdu. Šī kļūda rodas, mēģinot piekļūt īpašumam no undefined vai null.

Piemēram:

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

// Accessing the street property
const street = user.profile.address.street; // Works fine
console.log(street); // Output: 123 Main St

// What if the address is missing?
const user2 = {
  profile: {}
};

// This will cause an error!
// const street2 = user2.profile.address.street; // TypeError: Cannot read properties of undefined (reading 'street')

            

              
                Copy
              
            
          

Tradicionāli izstrādātāji ir izmantojuši nosacījumu pārbaudes (if priekšrakstus vai && operatoru), lai novērstu šīs kļūdas. Tomēr šīs pārbaudes var ātri kļūt pārāk garas un grūti lasāmas, īpaši, ja ir darīšana ar dziļi ligzdotiem objektiem.

Iepazīstinām ar Optional Chaining (?.)

Optional chaining nodrošina kodolīgu un elegantu veidu, kā piekļūt ligzdotiem objektu īpašumiem, pat ja daži no šiem īpašumiem varētu trūkt. ?. operators ļauj piekļūt objekta īpašumam tikai tad, ja šis objekts nav null vai undefined. Ja objekts ir null vai undefined, izteiksme nekavējoties tiek pārtraukta un atgriež undefined.

Lūk, kā tas darbojas:

            const street2 = user2.profile?.address?.street;
console.log(street2); // Output: undefined (no error!)

            

              
                Copy
              
            
          

Šajā piemērā, ja user2.profile ir null vai undefined, izteiksme nekavējoties atgriež undefined, nemēģinot piekļūt address vai street. Līdzīgi, ja user2.profile eksistē, bet user2.profile.address ir null vai undefined, izteiksme joprojām atgriezīs undefined. Kļūdas netiek izmestas.

Sintakse un Lietošana

Optional chaining pamata sintakse ir:

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

            

              
                Copy
              
            
          

Apskatīsim katru no šiem gadījumiem:

• object?.property: Piekļūst objekta īpašumam. Ja objekts ir null vai undefined, izteiksme atgriež undefined.
• object?.method(): Izsauc objekta metodi. Ja objekts ir null vai undefined, izteiksme atgriež undefined. Ievērojiet, ka tas *nepārbauda*, vai pati *metode* pastāv; tas pārbauda tikai to, vai *objekts* ir nullish. Ja objekts pastāv, bet metode ne, jūs joprojām saņemsiet TypeError.
• array?.[index]: Piekļūst masīva elementam. Ja masīvs ir null vai undefined, izteiksme atgriež undefined.

Praktiski Piemēri un Pielietojuma Gadījumi

Apskatīsim dažus praktiskus piemērus, kā optional chaining var vienkāršot jūsu kodu un uzlabot tā robustumu.

1. Piekļuve Ligzdotiem Īpašumiem API Atbildēs

Kā jau minēts iepriekš, API atbildēm bieži ir mainīgas struktūras. Optional chaining var būt nenovērtējams, lai droši piekļūtu īpašumiem šajās atbildēs.

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

    // Safely access user's city
    const city = data?.profile?.address?.city;
    console.log(`User's city: ${city || 'N/A'}`); // Use nullish coalescing to provide a default value

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

            

              
                Copy
              
            
          

Šajā piemērā, pat ja API atbilde neietver profile vai address īpašumu, kods neizmetīs kļūdu. Tā vietā city būs undefined, un nullish coalescing operators (||) nodrošinās noklusējuma vērtību 'N/A'.

2. Metožu Izsaukšana ar Nosacījumu

Optional chaining var izmantot arī, lai izsauktu metodes objektiem, kas varētu neeksistēt.

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

// Call the trackEvent method if it exists
config.analytics?.trackEvent('button_click'); // Tracks the event

const config2 = {};

// This won't cause an error, even if analytics is missing
config2.analytics?.trackEvent('form_submission'); // Does nothing (no error)

            

              
                Copy
              
            
          

Šajā gadījumā, ja config.analytics ir null vai undefined, trackEvent metode netiks izsaukta, un kļūda netiks izmesta.

3. Droša Piekļuve Masīva Elementiem

Optional chaining var izmantot arī ar masīva indeksēšanu, lai droši piekļūtu elementiem, kas varētu būt ārpus robežām.

            const myArray = [1, 2, 3];

// Access the element at index 5 (which doesn't exist)
const element = myArray?.[5];
console.log(element); // Output: undefined

// Accessing a property of an element that might not exist
const users = [{
  id: 1,
  name: 'Alice'
}, {
  id: 2
}];

const secondUserName = users?.[1]?.name; // Access the name of the second user
console.log(secondUserName); // Output: Alice

const thirdUserName = users?.[2]?.name; // Access the name of the third user (doesn't exist)
console.log(thirdUserName); // Output: undefined

            

              
                Copy
              
            
          

4. Internacionalizācijas (i18n) Apstrāde

Internacionalizētās lietojumprogrammās teksta virknes bieži tiek glabātas ligzdotos objektos, pamatojoties uz lietotāja lokalizāciju. Optional chaining var vienkāršot drošu piekļuvi šīm virknēm.

            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')); // Output: Hello, world!
console.log(getTranslation('fr', 'farewell')); // Output: Au revoir!
console.log(getTranslation('de', 'greeting')); // Output: Translation not found (German not supported)

            

              
                Copy
              
            
          

Šis piemērs demonstrē, kā optional chaining var veiksmīgi apstrādāt gadījumus, kad tulkojums nav pieejams konkrētai lokalizācijai vai atslēgai.

5. Darbs ar Konfigurācijas Objektiem

Daudzas lietojumprogrammas paļaujas uz konfigurācijas objektiem, lai uzglabātu iestatījumus un parametrus. Optional chaining var izmantot, lai piekļūtu šiem iestatījumiem, neuztraucoties par trūkstošiem īpašumiem.

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

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

// Merge the user config with the default config
const mergedConfig = {
  ...defaultConfig,
  ...userConfig
};

// Access a configuration value safely
const apiUrl = mergedConfig?.apiEndpoint;
const darkModeEnabled = mergedConfig?.features?.darkMode;

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

            

              
                Copy
              
            
          

Optional Chaining Kombinēšana ar Nullish Coalescing (??)

Nullish coalescing operators (??) bieži tiek izmantots kopā ar optional chaining, lai nodrošinātu noklusējuma vērtības, kad īpašums trūkst. ?? operators atgriež labās puses operandu, ja kreisās puses operands ir null vai undefined, un citādi atgriež kreisās puses operandu.

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

// Get the user's age, or default to 30 if it's not available
const age = user?.age ?? 30;
console.log(`User's age: ${age}`); // Output: User's age: 30

// Get the user's city, or default to 'Unknown' if it's not available
const city = user?.profile?.address?.city ?? 'Unknown';
console.log(`User's city: ${city}`); // Output: User's city: Unknown

            

              
                Copy
              
            
          

?? izmantošana kopā ar ?. ļauj jums nodrošināt saprātīgas noklusējuma vērtības, neizmantojot garas nosacījumu pārbaudes.

Optional Chaining Izmantošanas Priekšrocības

• Uzlabota Koda Lasāmība: Optional chaining padara jūsu kodu tīrāku un vieglāk saprotamu, samazinot nepieciešamību pēc garām nosacījumu pārbaudēm.
• Uzlabota Koda Drošība: Tas novērš TypeError izņēmumus, ko izraisa piekļuve null vai undefined īpašumiem, padarot jūsu kodu robustāku.
• Samazināts Šablona Kods: Tas novērš nepieciešamību pēc atkārtotiem if priekšrakstiem un && operatoriem, rezultējoties kodolīgākā kodā.
• Vienkāršāka Uzturēšana: Tīrāku un kodolīgāku kodu ir vieglāk uzturēt un atkļūdot.

Ierobežojumi un Apsvērumi

• Pārlūkprogrammu Saderība: Optional chaining atbalsta visas modernās pārlūkprogrammas. Tomēr, ja jums ir jāatbalsta vecākas pārlūkprogrammas, iespējams, būs jāizmanto transpileris, piemēram, Babel, lai pārveidotu jūsu kodu saderīgā JavaScript versijā.
• Metodes Esamība: Optional chaining pārbauda tikai to, vai objekts, kuram jūs izsaucat metodi, ir null vai undefined. Tas *nepārbauda*, vai pati metode eksistē. Ja objekts eksistē, bet metode ne, jūs joprojām saņemsiet TypeError. Iespējams, jums to būs jāapvieno ar typeof pārbaudi. Piemēram: object?.method && typeof object.method === 'function' ? object.method() : null
• Pārmērīga Lietošana: Lai gan optional chaining ir spēcīgs rīks, ir svarīgi to lietot apdomīgi. Pārmērīga tā lietošana var maskēt pamatā esošās problēmas jūsu datu struktūrās vai lietojumprogrammas loģikā.
• Atkļūdošana: Kad ķēde novērtējas kā `undefined` optional chaining dēļ, tas dažkārt var padarīt atkļūdošanu nedaudz sarežģītāku, jo var nebūt uzreiz acīmredzams, kura ķēdes daļa izraisīja undefined vērtību. Rūpīga console.log priekšrakstu izmantošana izstrādes laikā var palīdzēt šajā jautājumā.

Labākās Prakses Optional Chaining Lietošanai

• Izmantojiet to, lai piekļūtu īpašumiem, kuri, visticamāk, trūkst: Koncentrējieties uz īpašumiem, kas ir patiesi neobligāti vai varētu trūkt API variāciju vai datu neatbilstību dēļ.
• Kombinējiet to ar nullish coalescing, lai nodrošinātu noklusējuma vērtības: Izmantojiet ??, lai nodrošinātu saprātīgas noklusējuma vērtības, kad īpašums trūkst, nodrošinot, ka jūsu lietojumprogramma uzvedas paredzami.
• Izvairieties no pārmērīgas lietošanas: Neizmantojiet optional chaining, lai maskētu pamatā esošās problēmas jūsu datu struktūrās vai lietojumprogrammas loģikā. Risiniet trūkstošo īpašumu pamatcēloni, kad vien iespējams.
• Rūpīgi pārbaudiet savu kodu: Nodrošiniet, ka jūsu kods graciozi apstrādā trūkstošus īpašumus, rakstot visaptverošus vienības testus.

Noslēgums

JavaScript optional chaining operators (?.) ir vērtīgs rīks, lai rakstītu drošāku, tīrāku un vieglāk uzturamu kodu. By elegantly handling potentially missing properties, it prevents errors and simplifies the process of accessing nested object properties. Kombinējot ar nullish coalescing operatoru (??), tas ļauj nodrošināt noklusējuma vērtības un nodrošināt, ka jūsu lietojumprogramma uzvedas paredzami pat negaidītu datu gadījumā. Optional chaining apgūšana būtiski uzlabos jūsu JavaScript izstrādes darbplūsmu un palīdzēs veidot robustākas un uzticamākas lietojumprogrammas globālai auditorijai.

Pieņemot šīs labākās prakses, jūs varat izmantot optional chaining spēku, lai izveidotu izturīgākas un lietotājam draudzīgākas lietojumprogrammas, neatkarīgi no datu avotiem vai lietotāju vidēm, ar kurām saskaraties.