Četl jsem dokumenty MDN pro optional chaining a narazil jsem na fakt, o kterém jsem nevěděl.
Než se pustíme do mého učení, pojďme se krátce podívat na nový optional chaining Funkce JavaScript. Přidání jazyka umožňuje vývojářům bezpečnější přístup k volitelným hodnotám, které jsou vnořeny hluboko uvnitř objektu.
Proces přístupu k hluboce vnořené vlastnosti objektu může být velmi únavný. Může se stát, že objekt nemá strukturu, kterou očekáváte, nebo že nedefinuje hodnoty, které hledáte. Aby se vývojáři vyhnuli vyvolaným výjimkám, museli před přístupem k hluboce vnořené vlastnosti zkontrolovat existenci každé jednotlivé vlastnosti.
Nový ? syntaxe pomáhá vývojářům přistupovat k vlastnostem bezpečným způsobem, i když je struktura objektu jiná, než se očekávalo. Podívejme se na příklad:
// object coming from an API, a library or anything you don't control
const someObject = { foo: { bar: { baz: 'someValue' } } };
// old way to access foo.bar.baz
// -> check all properties to avoid throwing an exception
if (someObject.foo && someObject.foo.bar && someObject.foo.bar.baz) {
console.log(someObject.foo.bar.baz);
} else {
console.log('noValue');
}
// new way to access foo.bar.baz
console.log(someObject.foo?.bar?.baz || 'noValue');
// 👆 logs 'someValue' because `someObject.foo.bar.baz` is defined
console.log(someObject.foo?.bar?.doesNotExist || 'noValue');
// 👆 logs 'noValue' because `someObject.foo.bar.doesNotExist` is not defined
console.log(someObject.doesNotExist?.foo?.bar || 'noValue');
// 👆 logs 'noValue' because `someObject.doesNotExist` is not defined
// it does not throw an exception for accessing `foo` of `doesNotExist`
optional chaining návrh funkce je v současné době ve fázi 4 procesu návrhu ECMAscript, což znamená, že bude součástí dodatků EcmaScript 2020. Chrome ji již implementuje za příznakem funkce „Experimentální JavaScript“.
Upravit:Nyní je podporováno napříč prohlížeči.
Spustit metody, pokud existují, a vrátit undefined jinak
Nevěděl jsem, že tento návrh také obsahuje mechanismus pro provádění objektových metod, které jsou potenciálně undefined pomocí legračně vypadající syntaxe ? .
const someObject = { foo() { return 'someValue'; } };
// execute functions with `?.()` to not throw an exception
// in case it is not defined
console.log(someObject.foo?.() || 'notDefined');
// 👆 logs 'someValue' because `someObject.foo?.()` returns 'someValue'
console.log(someObject.bar?.() || 'notDefined');
// 👆 logs 'notDefined' because `someObject.bar?.()` returns undefined
// instead of throwing an exception
Podle mého názoru je volitelné řetězení a jeho volitelné provádění funkcí velmi vítaným jazykovým doplňkem, který pomůže vyhnout se několika undefined is not a function výjimky.
To znamená, že existují výjimky z nějakého důvodu a vývojáři by měli být velmi opatrní s těmito novými funkcemi, které způsobují, že výjimky „mizí“. Pokud se volitelné zřetězení používá velmi často a/nebo se používá pouze ke skrytí výjimek, je to pravděpodobně nápověda k přehodnocení celkové architektury aplikace.
Nemohu se dočkat, až bude volitelné řetězení podporováno napříč prohlížeči. Chcete-li to použít dnes, babel vás pokryl. A s tím – bavte se, přátelé! 👋
Upraveno:Jak TheIncorrigible1 poukázal na Redditu, volitelné řetězení funguje perfektně spolu s Nullish Coalescing, které byste si také mohli chtít vyzkoušet.