Combinare ?. e ??
Abbini l'accesso sicuro a valori predefiniti appropriati.
Combinare ?. e ?? è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Due strumenti insieme
L'optional chaining ?. legge in sicurezza valori che potrebbero mancare, mentre la coalescenza nullish ?? fornisce un valore predefinito. Insieme, consentono di leggere dati profondamente annidati e usare un fallback in modo chiaro.
const user = {};
console.log(user.profile?.name ?? "Anonymous");Lo schema comune
L'idioma a?.b ?? fallback legge il valore in sicurezza e usa il valore predefinito se il risultato è nullish. In questo modo si evitano lunghe catene di controlli.
const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"Ricorrere al valore predefinito quando manca
Se un qualsiasi collegamento è nullish, ?. produce undefined, che ?? sostituisce quindi con il valore predefinito.
const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"Annidamento profondo
Lo schema si adatta a strutture profondamente annidate, mantenendo un unico fallback alla fine.
const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"Mantenere i valori falsy validi
Poiché ?? usa il valore predefinito solo per i valori nullish, gli 0 reali ottenuti dalla catena vengono mantenuti.
const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0La trappola di && / ||
Scrivere a && a.b || fallback sostituirebbe erroneamente uno 0 o una stringa "" legittimi. La combinazione ?. + ?? evita questo problema.
const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50); // 0, correctCon i risultati delle funzioni
È possibile usare un valore predefinito anche per il risultato di una chiamata opzionale, combinando entrambi gli operatori attorno a un'invocazione di metodo.
const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"Valore predefinito per l'accesso agli array
Lo schema funziona con l'accesso tramite parentesi quadre per gli array o per le chiavi dinamiche.
const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"Creare stringhe da visualizzare
Un uso pratico consiste nel produrre testo sicuro da visualizzare a partire da dati incerti.
function label(order) {
return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"Nota sulla precedenza
?. ha una precedenza maggiore di ??, quindi a?.b ?? c viene interpretato come (a?.b) ?? c, esattamente ciò che serve.
const u = { age: null };
console.log(u?.age ?? 18); // 18Un pattern chiaro
Insieme, questi operatori sostituiscono lunghe porzioni di codice difensivo con una sola riga leggibile, rendendo evidente l'intento.
const profile = null;
console.log(profile?.bio?.length ?? 0); // 0Verifica rapida
Preveda quale sarà l'output.
Riepilogo
L'idioma obj?.deep?.prop ?? fallback legge valori annidati che potrebbero mancare e fornisce un valore predefinito solo quando il risultato è null o undefined. Mantiene i valori falsy validi come 0 e "", a differenza dell'approccio &&/||. ?. ha una precedenza maggiore di ??, quindi il raggruppamento è naturalmente corretto.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «Combinare ?. e ??» è gratuita?
Sì — il testo completo di «Combinare ?. e ??» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Combinare ?. e ??»?
Abbini l'accesso sicuro a valori predefiniti appropriati. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Combinare ?. e ??»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Chaining opzionale con l'operatore ?.
- Nullish coalescing con ??
- Combinare ?. e ??
- Chiamate opzionali e accesso tramite indice