Operator koalescencji null w JavaScript

Ten artykuł wyjaśnia operator koalescencji null w JavaScript.

YouTube Video

Operator koalescencji null w JavaScript

W JavaScript operator koalescencji null (??) sprawdza, czy wartość jest null lub undefined, i zwraca inną domyślną wartość, jeśli tak jest. Jest podobny do często używanego operatora logicznego LUB (||), ale różni się tym, że obsługuje tylko wartości null i undefined.

Operator logiczny OR zwraca prawą wartość, jeśli lewa wartość jest fałszywa, podczas gdy operator łączenia nullish zwraca prawą wartość tylko wtedy, gdy lewa wartość to null lub undefined. Ta funkcja umożliwia właściwe obsługiwanie wartości takich jak 0 i puste ciągi ("").

Podstawowa składnia

1let result = value ?? defaultValue;

• value to wartość, która jest sprawdzana.
• defaultValue to wartość zwracana, gdy value to null lub undefined.

Przykłady użycia operatora koalescencji null

Poniższy przykład pokazuje proces zwracania domyślnej wartości, gdy napotkane zostanie null lub undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

W tym kodzie, ponieważ name ma wartość null, zostaje zwrócona wartość defaultName, czyli "Anonymous". Jeśli name ma wartość inną niż null lub undefined, ta wartość zostaje zwrócona.

Różnice względem operatora logicznego LUB

Operator łączenia nullish jest podobny do operatora logicznego OR, ale ma istotną różnicę. Operator logiczny OR sprawdza 'fałszywe' wartości (false, 0, NaN, "", null, undefined, itp.), podczas gdy operator łączenia nullish sprawdza tylko null i undefined.

Przykład użycia operatora logicznego LUB:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Przykład użycia operatora koalescencji null:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Dzięki temu operator łączenia nullish zachowuje prawidłowe wartości, takie jak 0 i puste ciągi (""), i zwraca wartość domyślną tylko wtedy, gdy jest to konieczne. Ponieważ operator logiczny OR traktuje te wartości jako fałszywe i zwraca wartość domyślną, ważne jest, aby wybrać odpowiedni operator w zależności od przypadku użycia.

Przykład użycia w połączeniu:

Operator łączenia nullish może być również łączony z innymi operatorami logicznymi, ale w takich przypadkach należy zachować ostrożność.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Na przykład, gdy używasz go razem z operatorem logicznym OR (||) lub AND (&&), nawiasy powinny być używane, aby wyjaśnić kolejność operacji.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• W tym przykładzie najpierw oceniane jest a ?? b, a ponieważ a ma wartość null, zwracane jest b. Następnie oceniane jest b || c, a ponieważ b jest fałszywe, na końcu zostaje zwrócone c.

Przypadki, w których operator łączenia nullish jest przydatny

Poniżej przedstawiono przypadki, w których operator łączenia nullish jest przydatny.

• Domyślne wartości dla formularzy To może być używane w sytuacjach, gdy dla pól formularza ustawiana jest wartość domyślna, jeśli użytkownik nic nie wprowadzi.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Obsługa odpowiedzi API Przetwarzanie zastępcze może być wykonane, gdy wartość w odpowiedziach z API to null lub undefined.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Podsumowanie

Operator łączenia nullish (??) jest bardzo przydatny do inicjalizacji danych i obsługi odpowiedzi API, ponieważ zwraca wartość domyślną w przypadku null lub undefined. W szczególności jest to lepszy wybór niż tradycyjny operator logiczny OR (||), gdy chcesz prawidłowo obsługiwać fałszywe wartości, takie jak 0 lub puste ciągi.

O operatorze przypisania Nullish Coalescing (??=)

Przegląd

W JavaScript wprowadzono operator przypisania Nullish Coalescing ??=, aby efektywnie przypisać nową wartość do zmiennych, które mają wartość null lub undefined. Ten operator jest wygodnym skrótem do przypisania wartości do zmiennej tylko wtedy, gdy ma ona wartość null lub undefined.

Podstawowe użycie

Operator przypisania łączenia nullish działa w następujący sposób:.

• Jeśli zmienna ma wartość null lub undefined, przypisuje wartość z prawej strony.
• Jeśli zmienna nie ma wartości null ani undefined, nie robi nic i zachowuje obecną wartość.

Składnia

Podstawowa składnia operatora przypisania łączenia nullish jest następująca:.

1x ??= y;

• y zostaje przypisane do x, jeśli x ma wartość null lub undefined.
• Jeśli x już ma wartość (nie null ani undefined), wartość x nie zostanie zmieniona.

Przykład

Spójrzmy na podstawowy przykład operatora przypisania z koalescencją null.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• W tym kodzie, ponieważ userName ma wartość null, przypisywana jest wartość defaultName.

Oto przykład, w którym wartość nie jest ani null, ani undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• W tym przypadku, ponieważ "Alice" jest już ustawione dla userName, nie jest dokonywane żadne przypisanie.

Porównanie z innymi operatorami przypisania

JavaScript posiada również kilka innych operatorów przypisania. W szczególności ważna jest różnica w stosunku do operatora przypisania logicznego OR (||=).

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

Operator przypisania logicznego OR przypisuje wartość nawet w przypadku fałszywych wartości, takich jak false, 0 lub pusty ciąg (""), podczas gdy operator przypisania łączenia nullish działa tylko wtedy, gdy wartość to null lub undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Ponieważ operator przypisania łączenia nullish działa tylko na null lub undefined, jest bardzo przydatny, gdy chcesz zachować wartości, takie jak 0 lub false.

Praktyczne przypadki użycia

Przypadek użycia w rzeczywistym świecie operatora przypisania z koalescencją pustą może wyglądać następująco:.

1. Ustawianie wartości domyślnych

   Jest to przydatne do ustawiania wartości domyślnych, gdy dane wejściowe użytkownika lub odpowiedzi API mogą być null lub undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Obsługa opcjonalnych parametrów

   Może być również używane do wykonywania domyślnych działań, gdy argumenty funkcji nie są określone.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Podsumowanie

Operator przypisania łączenia nullish (??=) przypisuje wartość tylko wtedy, gdy wartość po lewej stronie to null lub undefined, co sprawia, że kod jest bardziej zwięzły i pomaga zapobiegać niezamierzonym przypisaniom. Szczególnie podczas pracy z wartościami „fałszywymi”, takimi jak 0 lub false, może być bardziej odpowiedni niż tradycyjny operator logiczny OR (||=).

Korzystając z tego operatora, możesz tworzyć bardziej solidny i czytelny kod.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video