入门示例
如果你正试图访问"user.name",但出现了这种情况:
Uncaught TypeError: Cannot read property 'name' of undefined
不用担心。现代浏览器今天就可以使用ES6可选链接。
const username = user?.name
请参阅 MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
以下是一些更深入的解释,这些解释可能有助于理解“守卫运算符”。
在可选链式调用出现之前,您可以使用&& 运算符来解决赋值问题,通常称为 守卫运算符,因为它可以“守卫”不发生 undefined 错误。
以下是一些您可能觉得奇怪但请继续阅读,后面会有解释。
var user = undefined;
var username = user && user.username;
// no error, "username" assigned value of "user" which is undefined
user = { username: 'Johnny' };
username = user && user.username;
// no error, "username" assigned 'Johnny'
user = { };
username = user && user.username;
// no error, "username" assigned value of "username" which is undefined
说明:在保卫操作中,每个项都会被一个接一个地从左到右逐个评估。如果某个值的结果是假值,则停止评估并将该值分配给变量。如果到达最后一项,则无论其是否为假值,都会分配该项。
假值指的是这些值之一:undefined、false、0、null、NaN、''
,而真值则表示非假值。
额外内容:OR运算符
另一个常用的奇怪赋值方法是OR运算符,通常用于插件等:
this.myWidget = this.myWidget || (function() {
})();
如果“this.myWidget”为假,它将只分配代码部分。这很方便,因为您可以在任何地方声明代码,并多次声明,而不必关心以前是否已经分配,因为知道它只会被分配一次,因为使用插件的人可能会意外地多次声明脚本标记src。
说明:每个值按从左到右的顺序逐个评估。如果一个值为真,它停止评估并分配该值,否则继续进行,如果达到最后一项,则无论其是否为假,都将进行分配。
额外加分:在赋值中结合&&和||
现在你拥有终极权力,可以做非常奇怪的事情,比如在回文中使用它的非常奇怪的例子。
function palindrome(s,i) {
return (i=i || 0) < 0 || i >= s.length >> 1 || s[i] == s[s.length - 1 - i] && isPalindrome(s,++i);
}
这里有深入的解释:JavaScript中的回文检查
祝你编码愉快。