From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../operators/optional_chaining/index.html | 194 +++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/uk/web/javascript/reference/operators/optional_chaining/index.html (limited to 'files/uk/web/javascript/reference/operators/optional_chaining') diff --git a/files/uk/web/javascript/reference/operators/optional_chaining/index.html b/files/uk/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..c20ef9f9a6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,194 @@ +--- +title: Необов'язкове ланцюгування +slug: Web/JavaScript/Reference/Operators/Optional_chaining +tags: + - JavaScript + - Optional chaining + - Експериментальний + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{jsSidebar("Operators")}}
+ +
{{SeeCompatTable}}
+ +
+ +

Оператор необов'язкового ланцюгування ?. дозволяє читати значення властивості, розташованої глибоко всередині ланцюга пов'язаних об'єктів, без необхідності прямо підтверджувати, що кожне посилання у ланцюгу є дійсним. Оператор ?. діє схоже з оператором ланцюгування ., за винятком того, що замість помилки у випадку посилання на {{jsxref("null")}} чи {{jsxref("undefined")}}, вираз виконає коротке замикання та поверне undefined. При використанні з викликами функцій, вираз поверне undefined, якщо задана функція не існує.

+ +

Це створює коротші та простіші вирази для звернення через ланцюг властивостей, коли існує ймовірність зустріти відсутнє посилання. Це також може бути корисним для дослідження вмісту об'єкта, коли немає гарантії того, що певні властивості є обов'язковими.

+ +
{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
+ +
+ + + +

Синтаксис

+ +
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+
+ +

Опис

+ +

Оператор необов'язкового ланцюгування надає спосіб спростити звернення до значень через поєднані об'єкти, коли є ймовірність, що посилання чи функція дорівнюватиме undefined чи null.

+ +

Наприклад, розглянемо об'єкт obj, який має вкладену структуру. Без необов'язкового ланцюгування пошук глибоко вкладеної властивості вимагає перевірки проміжних посилань, як от:

+ +
let nestedProp = obj.first && obj.first.second;
+ +

Підтверджуємо, що значення obj.first не null (і не undefined) перед тим, як звертатись до obj.first.second. Це дозволяє запобігти помилці, яка виникла б, якщо б ми просто звернулись прямо до obj.first.second без перевірки obj.first.

+ +

Проте, з оператором необов'язкового ланцюгування (?.) ви не мусите робити явну перевірку та переривати вираз в залежності від стану obj.first перед тим, як звертатись до obj.first.second:

+ +
let nestedProp = obj.first?.second;
+ +

При використанні оператора ?. замість простого . JavaScript виконує неявну перевірку, щоб переконатись, що obj.first не дорівнює null чи undefined, перед тим, як звертатись до obj.first.second. Якщо obj.first дорівнює null чи undefined, вираз автоматично виконує коротке замикання, повертаючи undefined.

+ +

Це еквівалентно наступному:

+ +
let nestedProp = ((obj.first == null || obj.first == undefined) ? undefined : obj.first.second);
+ +

Необов'язкове ланцюгування з викликами функцій

+ +

Ви можете скористатись необов'язковим ланцюгуванням під час виклику методу, який, можливо, не існує. Це може бути зручно, наприклад, при використанні API, у якому метод може бути недоступний, чи то через застарілу реалізацію, чи тому, що функціональність недоступна на пристрої користувача.

+ +

При використанні необов'язкового ланцюгування, вираз автоматично повертає undefined замість викидання винятку, якщо метод не знайдений:

+ +
let result = someInterface.customMethod?.();
+ +
+

Заувага: Якщо існує властивість з таким іменем, яка не є функцією, використання ?. все ж спричинить виняток {{jsxref("TypeError")}} (x.y is not a function).

+
+ +

Необов'язкові зворотні виклики та обробники подій

+ +

Якщо ви використовуєте зворотні виклики або методи fetch з об'єкта з деструктуризаційним присвоєнням, ви, можливо, матимете неіснуючі значення, які не можна викликати як функції, поки ви не перевірили, що вони існують. Використовуючи ?., можна уникнути цієї додаткової перевірки:

+ +
// Написано згідно ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... використати дані
+  }
+  catch (err) {
+    if (onError) { // Перевірка, що onError існує
+      onError(err.message);
+    }
+  }
+}
+
+ +
// Використання необов'язкового ланцюгування з викликами функцій
+function doSomething(onContent, onError) {
+  try {
+   // ... використати дані
+  }
+  catch (err) {
+    onError?.(err.message); // жодного винятку, якщо onError є undefined
+  }
+}
+
+ +

Необов'язкове ланцюгування з виразами

+ +

Ви також можете використати оператор необов'язкового ланцюгування, звертаючись до властивостей через вираз з використанням дужкової нотації:

+ +
let nestedProp = obj?.['prop' + 'Name'];
+
+ +

Доступ до елементу масиву через необов'язкове ланцюгування

+ +
let arrayItem = arr?.[42];
+ +

Приклади

+ +

Базовий приклад

+ +

Цей приклад звертається до значення властивості name ключа bar у мапі, де немає такого ключа. Отже, результатом буде undefined.

+ +
let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;
+ +

Коротке замикання обчислення

+ +

При використанні необов'язкового ланцюгування з виразами, якщо лівий операнд дорівнює null чи undefined, вираз не буде обчислюватись. Для прикладу:

+ +
let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0, оскільки значення x не збільшувалось
+
+ +

Складання операторів необов'язкового ланцюгування

+ +

У вкладених структурах можна використовувати необов'язкове ланцюгування декілька раз:

+ +
let customer = {
+  name: "Карл",
+  details: {
+    age: 82,
+    location: "Далекі гори" // точна адреса невідома
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … це також працює для ланцюгування виклику функції
+let duration = vacations.trip?.getTime?.();
+
+ +

Поєднання з оператором null-об'єднання

+ +

Можна скористатись оператором null-об'єднання після необов'язкового ланцюгування, щоб задати значення, коли воно не було знайдене:

+ +
let customer = {
+  name: "Карл",
+  details: { age: 82 }
+};
+let customerCity = customer?.city ?? "Невідоме місто";
+console.log(customerCity); // Невідоме місто
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
Пропозиція щодо оператора "необов'язкового ланцюгування"Стадія 4
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.operators.optional_chaining")}}

+
+ +

Хід реалізації

+ +

Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у Test262, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.

+ +
{{EmbedTest262ReportResultsTable("optional-chaining")}}
+ +

Див. також

+ + -- cgit v1.2.3-54-g00ecf