JavaScript je jedním z nejpopulárnějších počítačových jazyků všech dob, jedním z důvodů je vysoce intuitivní syntaxe JavaScriptu. To není ani to nejlepší, nejlepší na tom je, že do jazyka je pravidelně přidáváno mnoho nových funkcí.
Dnes uvidíme některé z těchto nových funkcí, které nám pomohou s psaním intuitivnějšího kódu.
Nulový slučovací operátor (??)
Nulový slučovací operátor (??) je logický operátor, který vrací svůj operand na pravé straně, když je jeho operand na levé straně null nebo undefined a jinak vrátí svůj levý operand.
false || '@sun_anshuman' // returns '@sun_anshuman'
false ?? '@sun_anshuman' // returns false
0 || '@sun_anshuman' // returns '@sun_anshuman'
null || '@sun_anshuman' // returns '@sun_anshuman'
null ?? '@sun_anshuman' // returns '@sun_anshuman'
undefined ?? '@sun_anshuman' // returns '@sun_anshuman'
Problém s || je, že je to booleovský operátor, takže před vyhodnocením převede levý operand na booleovský, takže jak 0, tak '' jsou false .
Použití případ od příkladu
Předpokládejme, že vytváříte hru, kde je minimální skóre 0 a -1 považujete za neplatné skóre.
Než tedy aktualizujete skóre uživatele, měli byste se ujistit, že je nastaveno na platnou hodnotu nebo definované neplatné skóre.
// the server returns 0
let score = fetchScoreFromServer();
// we only want the score to be -1 only if the score
// is undefined or null because 0 is a valid value
const finalScore = score || -1;
// but this will give us the invalid value even if,
// the first operand (0) is a valid value, leading to a bug
Jak to vyřešit, ptáte se? (Vím, že už to víš, haha)
let score = fetchScoreFromServer(); // returns 0 again
const finalScore = score ?? -1;
// finalScore stays score (0 in this case),
// unless the server returned null or undefined
Logické nulové přiřazení (??=)
Operátor logického nulového přiřazení (x ??=y) přiřadí pouze v případě, že x je nulové (null nebo undefined ).
let user = { name: "anshuman_bhardwaj" };
user.twitter_name ??= "@sun_anshuman"; // assigns '@sun_anshuman'
console.log(user); // {name: "anshuman_bhardwaj", twitter_name: "@sun_anshuman"}
Toto je v podstatě operace přiřazení založená na ?? operátor.
Použití případ od příkladu
// the above example can be rewritten like this
let finalScore = fetchScoreFromServer(); // returns 0 again
finalScore ??= -1;
// keeps value of 0
Další dobré místo pro použití ?? by bylo při odkazování na vlastnosti objektu a použití výchozí hodnoty. V takovém případě můžeme použít logické nulové přiřazení ??= aby výchozí hodnoty byly undefined vlastnosti.
const user = { email: '[email protected]', company: '' }
// assign user.name to email username if it's undefined
user.name ??= email.split("@")[0]
// make company Canoo if company not available on user
user.company ??= 'Canoo'
// this time company stays empty string
v operátoru
Operátor in vrátí hodnotu true, pokud je zadaná vlastnost v zadaném objektu nebo jeho prototypovém řetězci.
const user = { email: '[email protected]' }
'email' in user // return true
'name' in user // return false
Pamatujete si dobu, kdy jste používali undefined hodnoty, protože v Object chyběl odkazovaný klíč.
Stojí za zmínku, že
Použití případ od příkladu
Dobrým případem použití je spustit kontroly zdravého rozumu před spuštěním operací s vlastnostmi objektu, abyste se vyhnuli provádění nedefinovaných kontrol a chyb.
// we have an user object
let user = { email: "[email protected]" };
// now we want to assign it a name if its not available
// checks if user has email
if ("email" in user) {
// checks if user has name
if (!("name" in user)) {
user["name"] = user.email.split("@")[0];
} else {
console.log("Welcome user: " + user.name);
}
} else {
console.error("User does not have required property: email");
}
Použití v poli zkontroluje, zda je daný index prázdný slot nebo ne
const emptyList = new Array(5)
empties[2] // returns undefined
2 in empties // returns false
empties[2] = 'anshuman_bhardwaj'
2 in empties // returns true
Volitelné řetězení (?.)
?. operátor je jako . operátor řetězení, kromě toho, že místo způsobení chyby, pokud je odkaz (nulový nebo nedefinovaný), se výraz zkratuje s návratovou hodnotou nedefinováno.
let user = { name: 'anshuman' }
user.address.zipcode // TypeError
user.addess?.zipcode // returns undefined
Stojí za zmínku, že
- Při použití s voláním funkcí vrátí hodnotu undefined, pokud daná funkce neexistuje.
- Volitelné řetězení nelze použít u nedeklarovaného kořenového objektu, ale lze jej použít s nedefinovaným kořenovým objektem.
Příklady použití
// user can be null or an Object containing email
const user = getUserFromDev()
// if we do this it will run fine when user is an Object
// but when user is null this will give a TypeError
console.log(user.email)
// we can fix this by using optional chaining
console.log(user?.email)
// logs the actual user email when user is an Object
// logs undefined if user is null but doesn't crash
Podmíněný ternární operátor (?)
Ternární operátor zkontroluje, zda je zadaná podmínka pravdivá, pokud je pravdivá, vrátí první výraz, jinak vrátí druhý výraz.
x ? y : z , znamená, že pokud je x pravda, vraťte y jinak vraťte z.
let user = { age: 22 }
user['status'] = user.age > 18 ? 'adult' : 'minor'
// user.status is 'adult'
Tento operátor není specifický pro JavaScript, poprvé jsem ho použil v C++.
Použití případ od příkladu
let user = { email: "[email protected]" };
// lets consider this code, simple enough?
if ("email" in user) {
user["name"] = user.email.split("@")[0];
} else {
user["name"] = "Anonymous";
}
// we can make it even simpler by using ternary
user["name"] = "email" in user ? user.email.split("@")[0] : "Anonymous";
Bonus
Zde je několik příkladů s kombinací výše uvedených funkcí, podívejme se, kdo všechno může správně odpovědět v komentářích.
// consider the examples independent of each other
const user = { email: '[email protected]', lastName: undefined }
// 1
user["firstName"] = "email" in user
? user.email.split("_")[0]
: "Anonymous";
// 2
user["familyName"] ??= 'Bhardwaj'
// 3
console.log('lastName' in user)
// 4
console.log('' ?? '@sun_anshuman')
Další informace
Můžete se také podívat na toto video na YouTube, kde tyto příklady vysvětluji
Můžete také rozdělit CodeSandBox a vyzkoušet příklady.
Doufám, že jste si čtení tohoto článku užili stejně jako já jeho psaní!
Pro více takového obsahu mě prosím sledujte na Twitteru
Zdroje
Dokumenty MDN