<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          JavaScript條件判斷: Js三元運算符介紹

          時間:?2017-12-25閱讀:?1489標簽:?條件

          運用條件運算符將你的 if 語句縮短為一行代碼

          由基礎開始——if 語句

          運用條件語句,比如 if,當 if 語句滿足的情況下,允許我們執行指定一些代碼塊

          比如下面的例子

          person 對象包含 name,age,driver 屬性

          let person = {
            name: 'tony',
            age: 20,
            driver: null
          };
          

          我們想測試如果 person 的年齡大于等于 16。如果這個是真,他們年齡已經足夠駕駛車和司機應該認可。如果這個不是真的,司機應該否認。

          我們可以使用一個 if 語句來完成這個例子:

          if (person.age &gt;= 16) {
            person.driver = 'Yes';
          } else {
            person.driver = 'No';
          }
          

          但是,如果我告訴你,我們可以用一行代碼完成同樣效果呢?如下所示:

          person.driver = person.age &gt;=16 ? 'Yes' : 'No';
          

          這個較短的代碼具有跟 person.driver = 'yes' 一樣的結果。

          既然你已經了解到條件三目運算符的執行過程,接下來,我們就探索它是如何起作用的。

          條件(三目)運算符

          首先,了解下特殊的 if 語句的語法

          **if (** _condition_ **) {**
            _value if true;_
          **} else {**
            _value if false;_
          **}**
          

          現在,三目運算如下:

          _condition_ **?** _value if true_ **:** _value if false_
          

          注意點:

          1. condition 是真正需要驗證的。條件的結果應該是 true 或者 false 或者至少強制轉換成布爾值。

          2. ? 將條件和 true 值分開。如果 condition 的值是 true,任何介于 ? 和 : 之間的都將會執行。

          3. 最后一個冒號 :。如果 condition 的值是 false。冒號后的代碼將會執行。

          案例——司機年齡

          我們將會花費一些時間重新思考文章中最初的例子:

          let person = {
            name: 'tony',
            age: 20,
            driver: null
          };
          
          person.driver = person.age &gt;=16 ? 'Yes' : 'No';
          

          注解最重要的部分是執行的順序。添加一些圓括號幫助你虛擬代碼的執行順序:

          person.driver = ((person.age &gt;=16) ? 'Yes' : 'No';)
          

          正如你們所希望的,首先是檢查條件來判斷 person.age >= 16 是 true 還是 false。

          因為 20 是大于 16 的,當前值是 true。如下所示:

          person.driver = (true ? 'Yes' : 'No';)
          

          因為我們的條件語句的條件是 true,將返回介于 ? 和 : 之間的值。在當前案例中,也就是 'Yes'。

          既然我們已經獲取到返回的值,最后將要做的事情是設置其等于我們的變量:

          person.driver = 'Yes';
          

          非常棒!現在讓我們繼續一些更加復雜的例子。

          案例——學生價格

          在這個例子中,我們針對一個電影院編程。電影院提供兩種票價:普通人$12,學生$8.

          創建一個變量記錄顧客是學生還是其他:

          let isStudent = true;
          

          通過變量,我們可以使用三目元算相應地改變價格:

          let price = isStudent ? 8 : 12
          
          console.log(price);
          // 8
          

          因為我們 isStudent 的布爾值是 true,三目元算返回的變量 price 的值是8。

          案例——嵌套三元

          但是,如果上述的電影院對學生和老年人打折呢?

          我們可以運用三元嵌套運算符來測試多個條件。

          針對這個場景我們假設票價:普通人$12,學生$8,老年人$6。

          這里將展示針對老年的代碼片段:

          let isStudent = false;
          let isSenior = true;
          
          let price = isStudent ? 8 : isSenior ? 6 : 10
          
          console.log(price);
          // 6
          

          這段代碼將有很多內容,所以中斷下:

          1. 首先檢查我們的顧客是否為學生。如果 isStudent 是 false,只有第一個 : 后的代碼執行。在:后,我們還有一個條件語句:

          2. 第二個條件語句是驗證 isSenior ——如果是 true,只有介于 ? 和 : 之間的代碼執行。

          3. price 的值是6,然后打印在屏幕上。

          案例——多元運算

          多元運算運行在一個三元運算中是可能的。為了做到這些,我們必須使用逗號分隔運算表達式。當然,你也可以使用圓括號講你的代碼分組:

          let isStudent = true;
          let price = 12;
          
          isStudent ? (
            price = 8,
            alert('Please check for student ID')
          ) : (
            alert('Enjoy the movie')
          );
          

          在以上的例子中,我們的電影 price 已經設置為 $12。如果 isStudent 是 true,我們調整價格為 $8,然后彈出一個警告來讓收銀員核對學生證。如果 isStudent 是 false,以上的代碼將會跳過,并僅僅彈出觀影愉快。

          原文:https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff
          翻譯:http://www.zcfy.cc/read/discovery
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/277

          Vue條件判斷

          在Vue進行前端開發中,條件判斷主要用于根據不同的條件來決定顯示或隱藏,或者進行視圖之間的切換,本文以一個簡單的小例子簡述v-if的常見用法,僅供學習分享使用

          js中的if判斷語句和switch條件分支語句

          語句是js中最重要的成分。本文想介紹的是if判斷語句和switch條件分支語句,如果不加入break會默認從滿足條件一直向下執行.最后的default就是相當于if條件語句中的else,switch語句用的是全等判斷,大家一定要注意一下

          寫好JavaScript條件語句的5個技巧

          當我們寫JavaScript代碼時,經常會用到到條件判斷處理,這里有5個技巧能使你寫出更好、更簡潔的條件語句。使用Array.includes處理多種條件、減少嵌套,盡早return、使用函數默認參數和解構

          js條件判斷語句優化

          在js中的條件判斷,主要用于不同的條件執行不同的動作,實際開發中,我們如何實現js條件判斷語句優化的呢?1、一個條件推薦用if else或者三元運算,2、當2個條件是用if...elseif...else...3、三個條件及以上時候推薦用switch

          css3條件判斷_@supports的用法/Window.CSS.supports()的使用

          為了判斷瀏覽器是否支持css3的一些新屬性樣式,當不兼容該樣式的時候,我們可以更優雅的降級處理。這就需要使用到css3的條件判斷功能:在css中支持@supports標記、或者在js中使用CSS.supports函數,來檢測瀏覽器是否支持css3的新屬性。

          HTML條件注釋_關于IE條件注釋

          就是在每個瀏覽器中上邊兩個中只能使用一個的話一定得記得把IE9考慮進來,因為它也是能識別條件注釋的(感覺IE9就是IE向現代高級瀏覽器過渡的東西,CSS3只支持一部分,但是之前IE專有的一些問題照樣存在)

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网