JavaScript Academy · Lekcja

Opcjonalne wywołania i dostęp indeksowany

Proszę używać optional chaining z wywołaniami i nawiasami kwadratowymi.

Lekcja 4 z 413 kroki

Opcjonalne wywołania i dostęp indeksowany to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Poza odczytywaniem właściwości

Opcjonalne łańcuchowanie obejmuje również formy umożliwiające bezpieczne wywoływanie funkcji oraz uzyskiwanie dostępu do elementów tablicy lub elementów wskazywanych dynamicznym kluczem.

const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"

Opcjonalne wywołania metod

Forma ?.() wywołuje funkcję tylko wtedy, gdy ona istnieje. Jeśli metoda ma wartość nullish, zwraca undefined zamiast zgłaszać wyjątek.

const obj = {};
console.log(obj.greet?.()); // undefined, no error

Dlaczego ma to znaczenie

Bez tego wywołanie brakującej metody kończy się wyjątkiem. Forma opcjonalnego wywołania przejrzyście zabezpiecza opcjonalne funkcje zwrotne.

function run(onDone) {
  onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));

Wywołanie jest pomijane tylko dla wartości nullish

?.() pomija wywołanie tylko wtedy, gdy wartość to null lub undefined. Jeśli jest to wartość niebędąca funkcją, podczas wywołania nadal wystąpi TypeError.

const obj = { greet: 42 };
try {
  obj.greet?.();
} catch (e) {
  console.log("not a function");
}

Opcjonalny dostęp indeksowany

Forma ?.[ ] odczytuje element tylko wtedy, gdy wartość bazowa nie jest nullish. Jest przydatna w przypadku tablic i obliczanych kluczy.

const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefined

Dynamiczne klucze

Dostęp za pomocą nawiasów kwadratowych w połączeniu z ?. bezpiecznie obsługuje dynamiczne nazwy właściwości.

const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"

Zagnieżdżone tablice

Można łączyć opcjonalny dostęp indeksowany w zagnieżdżonych tablicach lub obiektach.

const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefined

Opcjonalne wywołanie zwróconej wartości

Można łączyć różne formy: opcjonalnie odczytać wartość, a następnie opcjonalnie ją wywołać.

const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefined

Łączenie z wartościami domyślnymi

Połącz te formy z ??, aby zapewnić wynikowi wartość zastępczą.

const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000

Bezpieczne wywoływanie metod tablicy

Opcjonalne łańcuchowanie pozwala wywołać metodę na tablicy, której może brakować, bez oddzielnego sprawdzania jej istnienia.

const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"

Używaj tam, gdzie opcjonalność jest rzeczywista

Formy te są szczególnie przydatne w przypadku opcjonalnych funkcji zwrotnych i niepewnej struktury danych. Należy ich unikać tam, gdzie wartość powinna zawsze istnieć, aby prawdziwe błędy nadal były wykrywane.

const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");

Szybkie sprawdzenie

Wybierz bezpieczną formę wywołania.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Opcjonalne łańcuchowanie obejmuje ?.() do bezpiecznego wywoływania metod oraz ?.[ ] do bezpiecznego dostępu indeksowanego lub dostępu za pomocą dynamicznego klucza. Obie formy zwracają undefined, gdy wartość bazowa jest nullish, ale nadal zgłaszają wyjątek przy wywołaniu wartości niebędącej funkcją. Połącz je z ??, aby podawać wartości domyślne, i używaj ich tylko dla rzeczywiście opcjonalnych wartości.

Bezpłatny start

Ucz się JavaScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 59
Lekcje: 200

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Opcjonalne wywołania i dostęp indeksowany” jest bezpłatna?

Tak — pełny tekst „Opcjonalne wywołania i dostęp indeksowany” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Opcjonalne wywołania i dostęp indeksowany”?

Proszę używać optional chaining z wywołaniami i nawiasami kwadratowymi. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Opcjonalne wywołania i dostęp indeksowany”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Optional chaining z operatorem ?.
Nullish coalescing z ??
Łączenie ?. i ??
Opcjonalne wywołania i dostęp indeksowany

← Powrót do JavaScript Academy