js return 后的括号两个进行与比较是什么意思

请问return 后的括号两个进行与比较是什么意思

function renderItem(params, api) {
  var rectShape ={
        x:1,
        y:2,
  }
  return (
    rectShape && {
      type: 'rect',
      transition: ['shape'],
      shape: rectShape,
    }
  );
}

这是js里一种比较常见的写法，因为js的逻辑运算其实是有返回值的。

rectShape && {
      type: 'rect',
      transition: ['shape'],
      shape: rectShape,
    }

这里的结果就是如果rectShape 不存在就返回false，如果rectShape 存在就返回后面的那个对象。

一般用来做判断空值简便写法，比如后面那个对象包含对rectShape的引用，那么如果要求rectShape不能为空可以这么写。
但是这段代码里面rectShape肯定不是空不知道为什么要这么写

其实想要了解这行代码,你只需要知道,逻辑运算符&&和||在浏览器里面是怎么运行的,就能知道这行代码的意思

先说逻辑&&
举例,a&&b:,这里的a和b可以是变量,也可以是一个函数,如果是变量,就简单判断变量的值是true还是false,如果是函数,就运行函数,并判断函数的返回值是true还是false,逻辑&&代表的如果是a运行为真,则运行b,返回b运行的结果,如果a运行为false,就直接返回false,不往后面运行了

所以rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
}
这个代码可以解释为:如果rectShape这个对象是存在的,且为true,就返回后面这个对象,如果rectShape不存在,或者值为false,就直接返回rectShape这个对象的值了,
这也就是逻辑&&的解释,必须所有条件都为真最终结果才是真,第一个条件如果是假的,后面就不用跑了,解释就是,从头向后运行,运行为真就接着运行,直到运行完,如果没有遇到false,那就是返回true,如果遇到false了,后续就不用运行了,直接返回false

再说逻辑||的运算规则
a||b 代表先运行a,如果a为真,就返回真,不会在走后续,如果a为假,则运行b,返回b运行的结果
如果a||b||c同理,依次向后运行,直到出现值为真的情况,就返回真,运行完都没有出现,就返回假