为什么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谓词中的附加&& ，所以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”又名安全导航操作符进行比较：

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

说明：

&&运算符首先计算其左操作数，在本例中只是props - 如果它不是falsy（非null，undefined或空字符串），那么它将计算右操作数（在本例中为props.children.find函数调用） 。 请注意，空数组不是假的。

如果props是falsy，那么.children.find呼叫不能进行，防止运行时错误。

Answer 2

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

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

然后，如果props为null，该行将生成错误。 但是如果你知道道具可能是null并且可以使用它，你可以尝试生成数组，然后在以后使用它时，在使用之前检查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);
}