为什么 AND (&&) 运算符返回数组而不是布尔值？

Question

var array = props && props.children.find(ele => ele && ele.length);

搞砸我的是 AND(&&)。前一行代码不应该返回布尔值吗？我知道它没有，因为我已经尝试过了，它返回了一个数组。

谁能解释一下这里发生了什么？

Answer 1

您发布的示例使用了 JavaScript 语言的一些功能：

• "虚假"：https://developer.mozilla.org/en-US/docs/Glossary/Falsy
• &&和||操作员的短路性质：https://en.wikipedia.org/wiki/Short-circuit_evaluation
• &&运算符和||运算符返回"计算值"而不是boolean值：为什么逻辑运算符(&&&和||)并不总是返回布尔结果？

它在语义上等效于以下内容：

var array = undefined;
if( props /* is not null or undefined or empty-string */ ) {
array = props.children.find( ele => ele && ele.length );
}

(请注意find谓词中的附加&&，因此完整地变为以下内容)：

var array = undefined;
if( props /* is not null or undefined or empty-string */ ) {
array = props.children.find( function( ele ) {
if( ele /* is not null or undefined or empty-string */ ) {
return ele.length;
}
return undefined;
} );
}

它也可以与 C# 中的"猫王运算符"(又名安全导航运算符)进行比较：

var array = props?.children.find( e => e?.length );

解释：

&&运算符首先计算其左操作数，在本例中仅为props- 如果它不是假的(不是 null、未定义或空字符串)，那么它会计算右操作数(在本例中为props.children.find函数调用)。请注意，空数组不是假的。

如果props是伪造的，则不会进行.children.find调用，从而防止运行时错误。

Answer 2

这是一种在尝试深入研究其属性之前检查props是否真实的方法。如果你只是这样做

var array = props.children.find(ele => ele && ele.length);

然后，如果props为 null，则该行将生成错误。但是如果你知道 props可能是空的并且可以接受，你可以尝试生成数组，然后在以后使用它时，在使用它之前检查array是否真实：

var array = props && props.children.find(ele => ele && ele.length);

Answer 3

基本上，如果定义了 props，则搜索其子级以查找具有一个或多个节点的元素的第一个并将其分配给array。

var array;
if (props) {
array = props.children.find(ele => ele && ele.length);
}