Js中的且(&&)和或(||)

需求分析：开发中展示考生的分数（区间：[0,100]）,该字段返回可能为null。于是写了下边的代码(react框架)：

     {totalScore && <span>总分：{totalScore}</span>}

分数为非零时均可以正常展示，如：总分：23。当分数为0时候只返回一个0。“总分：”消失了？

且（与）预算： 当遇到第一个值为false时，会停止后面判断，并返回当前的当前值：

      const firstFalse = 0 && 'a' && 2
      console.log("firstFalse:",firstFalse) // 0
      const secondFalse = 2 && null && 3
      console.log("secondFalse:",secondFalse) // null
      const thirdFalse = 2 && '1' && '' && 2
      console.log("thirdFalse:",thirdFalse) // ''

当全部为true的时候则会默认返回最后一个值：

        const  allTrue = 3 && '23' && true && true
        console.log("allTrue:", allTrue) // 'true'

或运算,与且预算相反： 当遇到第一个为true的值则返回当前值，否则一直向后判断，如果最后这个值也为false，则默认返回最后一个值：

        const secondTrue = null || true || 'jajajaj'
        console.log("secondTrue:", secondTrue) // 'true'
        const AllFalse = null || '' || undefined
        console.log("AllFalse:", AllFalse) // 'undefined'

上边的问题也就迎刃而解了，开发中会发现好多的bug都源于我们以为。哈哈哈...