为何AND(&&)运算符返回数组而非布尔值？技术咨询

嘿，这个问题问得特别到位！很多刚接触JavaScript的开发者都会被&&这个点绕进去，我来给你掰扯清楚～

首先得纠正一个常见误解：JavaScript里的&&运算符并不总是返回布尔值，它的核心逻辑是短路求值并返回操作数的实际值，规则是：

• 如果第一个操作数是「假值」（比如undefined、null、''、0、NaN、false），直接返回这个假值，不会执行后面的表达式
• 如果第一个操作数是「真值」（除假值外的所有值，比如对象、非空数组、非空字符串等），则返回第二个操作数的实际值，而非将其转为布尔值

接下来咱们拆解你给出的代码：

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

第一步：props && props.children #

这里是典型的短路保护：

• 如果props是假值（比如组件没传这个props，值为undefined），&&直接返回props的假值，不会去访问props.children，避免了Cannot read properties of undefined的报错
• 如果props是真值（比如一个存在的对象），&&就返回props.children的实际值，继续执行后面的find方法

第二步：props.children.find(ele => ele && ele.length) #

Array.find()方法的逻辑是返回数组中第一个让回调函数返回「真值」的元素，如果没有则返回undefined。而回调里的ele && ele.length同样遵循&&的规则：

• 当ele是假值（比如null、空数组[]），&&返回这个假值，回调整体返回假值，find会跳过当前元素
• 当ele是真值（比如非空数组），&&返回ele.length的实际值——如果数组长度大于0，ele.length是一个大于0的数字（属于真值），此时回调返回真值，find就会把当前的ele（也就是那个非空数组）返回出来

举个实际例子 #

假设props = { children: [[1,2], [], null] }：

1. props是真值，所以props && props.children返回[[1,2], [], null]
2. 执行find遍历第一个元素[1,2]：ele是真值，ele && ele.length返回2（真值），所以find直接返回[1,2]
3. 最终array的值就是[1,2]，而不是布尔值

如果props是undefined，那props && ...直接返回undefined，array就是undefined。

总结一下：&&在这里承担了两个作用——短路保护避免报错和传递实际值而非布尔值，这就是为什么你的代码最终会返回数组（或假值），而不是布尔值。

内容的提问来源于stack exchange，提问作者Notbad