JavaScript的“true/false && expression”邏輯運算式

標籤：log   1.0   amp   java   跳過   version   就會   運算式   過程   

true/false && expression

在學習react的過程中，遇到了如下一個方法：

 

function Mailbox(props) {  const unreadMessages = props.unreadMessages;  return (    <div>      <h1>Hello!</h1>      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>  );}

該方法中，定義了一個未讀訊息unreadMessages數

然後返回一個提醒你還有多少未讀訊息的一段代碼

其中的核心代碼：

unreadMessages.length > 0 &&<h2>    You have {unreadMessages.length} unread messages.</h2>

&&左邊的運算式判斷訊息數是否大於0，右邊運算式渲染還有多少條未讀訊息數；

之所以能這樣做，是因為在 JavaScript 中 true && expression 總是返回 expression false && expression 總是返回 false。 如果條件是 true，&& 右側的元素就會被渲染如果是 false，React 會忽略並跳過它。 

JavaScript的“true/false && expression”邏輯運算式