Question

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

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

有人能解释一下这里发生了什么吗？

Answer 1

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

“Falsy”-ness：https://developer.mozilla.org/en-US/docs/Glossary/Falsy
&&和||运营商的短路性质：https://en.wikipedia.org/wiki/Short-circuit_evaluation
&&和||运算符返回“计算值”而不是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，因此它会变为完整内容：

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 - 如果它不是假的（不是null，未定义或空字符串），那么它会计算右操作数（在此case，props.children.find函数调用。请注意，空数组不是假的。

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

Answer 2

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

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

然后如果props为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);
}

为什么AND（＆amp;＆amp;）运算符返回数组而不是布尔值？

3 个答案:

说明：