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

Question

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

让我感到困惑的是 AND (&&)。上一行代码 return 不应该是布尔值吗？我知道不是因为我试过了，它 return 是一个数组。

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

Answer 1

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

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

Answer 2

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

"Falsy"-度数：https://developer.mozilla.org/en-US/docs/Glossary/Falsy
&& 和 || 运算符的 short-circuiting 性质：https://en.wikipedia.org/wiki/Short-circuit_evaluation
&& 和 || 运算符 return "calculated value" 而不是 boolean 值：Why don't logical operators (&& and ||) always return a boolean result?

它在语义上等同于：

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

（注意 find 谓词中的附加 &&，所以 in-full 变成这样）：

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# 中的 "Elvis operator" 又名 Safe-navigation 运算符进行比较：

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

解释：

&& 运算符首先计算它的左操作数，在本例中只是 props - 如果它不是假的（不是 null，未定义或空字符串）然后它计算右操作数（在这种情况下，props.children.find 函数调用）。请注意，空数组不是虚假的。

如果 props 为假，则不会进行 .children.find 调用，防止出现运行时错误。

Answer 3

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

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

然后如果 props 为空，该行将产生错误。但是如果你知道 props 可能是 null 并且对此没有问题，你可以尝试生成数组，然后在以后使用它时，检查 array 是否是使用前的真实性：

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

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

Why does the AND (&&) operator return an array instead of a boolean?

javascript

syntax

logical-operators

解释：