初学者示例
如果您尝试访问“user.name”,但会发生这种情况:
Uncaught TypeError: Cannot read property 'name' of undefined
不要害怕。您现在可以在现代浏览器上使用 ES6 可选链。
const username = user?.name;
参见 MDN:https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
这里有一些关于守卫运算符的更深入的解释,可能有助于理解。
在引入可选链接之前,您可以在赋值中使用&& 运算符来解决这个问题,或者通常称为保护运算符,因为它可以“保护”未定义的错误发生。
这里有一些你可能会觉得奇怪的例子,但请继续阅读,稍后会解释。
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
解释:在守卫操作中,每次从左到右评估每个术语。如果评估的值是虚假的,则评估停止,然后分配该值。如果达到最后一项,则分配它是否为假。
falsy意味着它是这些值中的任何一个,undefined, false, 0, null, NaN, ''
而truthy只是意味着不虚假。
奖励:OR 运算符
实际使用中的另一个有用的奇怪赋值是OR 运算符,它通常用于如下插件:
this.myWidget = this.myWidget || (function() {
// define widget
})();
如果“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中的回文检查
快乐编码。