为什么AND（&&）运算符返回一个数组而不是布尔值？

Question

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

困扰我的是 AND ( && ) 运算符。前一行代码不应该返回一个布尔值吗？我知道它并不会，因为我已经尝试过了，它返回一个数组。

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

- Notbad

---

可能是重复的问题 为什么逻辑运算符（&&和||）不总是返回布尔结果？。 - Sebastian Simon

请参阅逻辑运算符 => 短路求值以获取更多信息。 - Arman Charan

Answer 1

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

• “Falsy”值：https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy
• && 和 || 运算符的短路特性：https://zh.wikipedia.org/wiki/短路求值
• && 和 || 操作符返回的是“计算值”，而非布尔值：为什么逻辑运算符(&&和||)不总是返回一个布尔结果？

这段代码在语义上等同于以下代码：

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、undefined 或空字符串），则会评估右侧表达式（在这种情况下，是 props.children.find 函数调用）。需要注意的是，空数组不是假值。

如果 props 是假值，则不会进行 .children.find 调用，从而避免了运行时错误。

- Dai

---

非常好的解释和答案开发。 - Notbad

Answer 2

这是一种在尝试深入访问其属性之前检查 props 是否为真的方法。如果你仅仅这样做：

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

如果props为空，那么这一行代码将会生成一个错误。但是，如果你知道props可能为空，并且可以接受这种情况，你可以尝试生成数组。然后，当稍后使用它时，请在使用之前检查array是否为真值：

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

- CertainPerformance

Answer 3

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

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

- Chris Camaratta