这个前端代码是这么理解吗？

Question

const dataItem = (msg.data && msg.data[0]) || msg;

如果msg.data和msg.data[0]都为真时返回msg.data[0]，否则返回msg？

Answer 1

你理解的没错
|| 运算前半为真则直接返回前半操作数，为假则返回后半操作数
&& 运算前半为假则直接返回前半操作数，为真则返回后半操作数
你这里的代码先看外层的 ||
当前半 (msg.data && msg.data[0]) 为假时返回后半 msg 。
即 msg 不存在 data 属性或者 msg.data[0] 为 false / 0 / '' / undefined / null / NaN 时返回 msg
当前半 (msg.data && msg.data[0]) 为真时直接返回前半
(msg.data && msg.data[0]) 为真即 msg.data 与 msg.data[0] 都为真
根据 && 返回后半操作数 msg.data[0]

Answer 2

并不是，我改成三元你就明白了

const dataItem = (msg.data && msg.data[0]) || msg;
// 等同于
const dataItem = msg.data ? msg.data[0] : msg;

---

Edit：

你的理解是正确的，之前回答没有看清问题描述，也没考虑 msg.data 超出预期的情况。比如说 msg.data 是一个对象。
所以可以修改为：

const dataItem = (msg.data && msg.data[0]) || msg;
// 等同于
const dataItem = msg.data?.data?.[0] || msg;

不过一般业务里面书写的时候并不会这样写，容易产生误导。如果是我的话，我会这样写：

const dataItem = msg.data?.length ? msg.data[0] : msg

Answer 3

const dataItem = (msg.data && msg.data[0]) || msg;
解：const dataItem =

• 当（msg.data 和 msg.data[0] ）为 true 就为 true；
• 当（msg.data 和 msg.data[0] ）为 false 就报错了

总结：和 msg 没有关系 要么是 true，要么就是报错！
希望对你有帮助

Answer 4

检查 msg 对象中是否有data，如果有，就将data的第一个元素赋值给 dataItem 变量。如果 msg 对象中没有data，则将整个 msg 对象赋值给 dataItem 。