这里的“&&”运算符背后的逻辑是什么？ [复制]答案

【问题标题】：What is the logic behind the "&&" operator here? [duplicate]这里的“&&”运算符背后的逻辑是什么？ [复制]
【发布时间】：2021-01-14 06:37:48
【问题描述】：

我知道当我们使用“&&”时，逻辑是这样的：{ boolean && action } -> 如果 boolean 为 true 则返回“action”。在我的代码中它是这样发生的：如果src 属性存在，则返回<Avatar />。我的问题是：为什么会这样？ src 没有任何真值或假值。为什么会这样？

function Sidebar({src}) {
    return (
        <div>
            {src && <Avatar src={src} />}
        </div>
    )
}

【问题讨论】：

这能回答你的问题吗？ What does '&&' operator indicate with { this.props.children && React.cloneElement(this.props.children, { foo:this.foo})
如果您的问题是，Although "src" isn't a boolean value, why is the "&&" operator working? 答案是：它不寻找布尔值，它检查该值是真还是假。所有falsy 值都被认为是布尔假。并且其中的rest 是布尔真值。
非常感谢！我不知道这个真实或虚假的概念。现在一切都清楚了。

标签： html reactjs jsx

【解决方案1】：

src 没有任何真假值

它有一个值（即使该值是undefined 或null）是truthy 或falsy，即使该值不是布尔值。

【讨论】：

【解决方案2】：

src 可以有未定义或空值。所以要避免这种情况。

首先，我们检查src 是否包含既不是undefined 也不是null 的有效数据，如果该条件为真，那么我们将该源作为props 传递给Avatar。

【讨论】：

（或false 等；我会在这里使用“falsey”，因为它没有进行显式类型检查。）
同意。 @DaveNewton

【解决方案3】：

javascript && 的运算符将返回最后一个，如果前面的其他人不同 flase （彼此！= flase）

//just operator of javascript // && operator will return last one if //others in ahead different flase (mean others != flase)

let object = {a:1};

console.log(object && 1);
console.log(object && 1 && object);
console.log(null && object);

【讨论】：