」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 中的短路情況:三元運算子 ES6

JavaScript 中的短路情況:三元運算子 ES6

發佈於2024-07-30
瀏覽:483

當然!這是一篇關於 JavaScript 中條件(三元)運算子的綜合文章。

Image description

JavaScript 中的短路情況:三元運算符

在 JavaScript 中,根據條件做出決策是編寫動態和響應式程式碼的基本部分。實作條件邏輯最簡潔、最有效的方法之一是使用三元運算子。該運算符提供了一種緊湊的語法來根據給定條件執行兩個表達式之一。在本文中,我們將探討如何使用三元運算子、其語法、優點和一些實際範例。

理解三元運算符

三元運算子是唯一採用三個運算元的 JavaScript 運算子。它也稱為條件運算符,因為它基於條件進行操作。三元運算子的一般語法為:

condition ? expressionIfTrue : expressionIfFalse;

以下是其組成部分的詳細資訊:

  • 條件:這是一個布林表達式,計算結果為 true 或 false。
  • 表達式IfTrue:如果條件為真,則執行此表達式。
  • 表達式IfFalse:如果條件為假,則執行此表達式。

基本範例

讓我們從一個簡單的例子開始來了解三元運算子的工作原理:

let age = 18;
let canVote = age >= 18 ? "Yes, you can vote." : "No, you cannot vote yet.";
console.log(canVote);  // Output: Yes, you can vote.

真的 ? (istrue) : (isfalse) 在 php 中工作

在此範例中,評估條件 Age >= 18。由於年齡為 18,條件為真,因此表達「Yes, you can vote」。被執行並分配給canVote。

使用三元運算子的好處

  1. 簡潔:三元運算子提供了一種在單行中編寫條件語句的方法,使程式碼更加緊湊,並且對於簡單的條件通常更易於閱讀。
  2. 提高可讀性:如果使用得當,與使用多行 if-else 語句相比,它可以使程式碼更乾淨、更直接。
  3. 效率:與傳統的 if-else 語句相比,三元運算子的執行速度更快,儘管這種差異對於大多數應用程式來說通常可以忽略不計。

嵌套三元運算符

三元運算子可以嵌套以處理更複雜的條件。但是,過多的嵌套會降低可讀性,因此應謹慎使用:

let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";
console.log(grade);  // Output: B

在此範例中,評估多個條件以根據分數確定等級。

實際應用

預設值

三元運算子可用於設定預設值:

let userColor = "blue";
let defaultColor = userColor ? userColor : "black";
console.log(defaultColor);  // Output: blue

如果定義了 userColor,defaultColor 將設定為 userColor。否則,它會變回“黑色”。

條件渲染

前端開發中,常使用三元運算子進行條件渲染:

let isLoggedIn = true;
let welcomeMessage = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(welcomeMessage);  // Output: Welcome back!

注意事項和最佳實踐

  1. 可讀性:雖然三元運算子很簡潔,但重要的是不要過度使用它。對於複雜的條件,傳統的 if-else 語句可能更具可讀性。
  2. 調試:調試嵌套三元運算子可能具有挑戰性。考慮將複雜的條件分解為多個語句。
  3. 一致性:在程式碼庫中一致地使用三元運算子以保持統一的編碼風格。

結論

三元運算子是 JavaScript 中用來編寫簡潔易讀的條件表達式的強大工具。透過了解其語法和適當的用法,您可以利用此運算符使您的程式碼更有效率和可維護。然而,像任何工具一樣,應該謹慎使用它,以避免損害程式碼的可讀性和清晰度。


透過掌握三元運算符,您可以編寫更優雅、精簡的 JavaScript 程式碼,讓您的應用程式更有效率且易於維護。

版本聲明 本文轉載於:https://dev.to/fwldom/short-circuiting-conditions-in-javascript-the-ternary-operator-es6-1b12?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本號的替代方法,它是使用以下語法: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js(google hosted...
    程式設計 發佈於2025-02-06
  • 如何使用Python的記錄模塊實現自定義處理?
    如何使用Python的記錄模塊實現自定義處理?
    使用Python的Loggging Module 確保正確處理和登錄對於疑慮和維護的穩定性至關重要Python應用程序。儘管手動捕獲和記錄異常是一種可行的方法,但它可能乏味且容易出錯。 解決此問題,Python允許您覆蓋默認的異常處理機制,並將其重定向為登錄模塊。這提供了一種方便而係統的方法來捕獲...
    程式設計 發佈於2025-02-06
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。 To resolve this issue and ensure scripts execute on subsequent page visits, Firefox...
    程式設計 發佈於2025-02-06
  • 如何檢索SQL中每個用戶的最新登錄日期?
    如何檢索SQL中每個用戶的最新登錄日期?
    SQL查詢每個用戶的最後登錄記錄日期 問題: 假設數據庫表包含用戶登錄信息,我們如何檢索每個用戶的最後登錄日期?考慮到可能存在重複的登錄日期。 解決方案: 解決此問題有兩種常見方法: 方法一:使用INNER JOIN的子查詢 此方法利用子查詢來識別每個用戶的最後登錄日期,然後用於過濾主表: se...
    程式設計 發佈於2025-02-06
  • 如何有效處理Java中的時區轉換?
    如何有效處理Java中的時區轉換?
    跨時區的時區轉換 java.util.date類缺乏明確的時區分配。它的Tostring方法誤導了JVM的默認時區,導致混亂。為了避免這些陷阱,現代Java利用Java.Time軟件包進行更健壯的時間處理。 在Java.Time中轉換時區,指定一個時區並調用ZonedDateTime.now方...
    程式設計 發佈於2025-02-06
  • 為什麼我的燒瓶應用程序會拋出“ templatenotfound”錯誤,即使我的模板文件存在?
    為什麼我的燒瓶應用程序會拋出“ templatenotfound”錯誤,即使我的模板文件存在?
    故障排除flask的templatenotfound錯誤 在嘗試在flask中渲染模板,例如'home.html' ,您可能會遇到''''',您可能會遇到''' jinja2.exceptions.templateno...
    程式設計 發佈於2025-02-06
  • 刪除地圖條目是否會導致持有指針時的內存洩漏?
    刪除地圖條目是否會導致持有指針時的內存洩漏?
    [2一片指針可能會導致內存洩漏。這個問題將查詢擴展到地圖,特別是從持有的地圖中刪除條目是否會導致相似的行為。 檢查實現:確定此說法的真實性,讓我們調查GO的運行時:Runtime/Hashmap.go(function MapDelete( ))中的映射刪除的源代碼。檢查表明,刪除(#600,#60...
    程式設計 發佈於2025-02-06
  • 對象擬合:IE和Edge中的封面失敗,如何修復?
    對象擬合:IE和Edge中的封面失敗,如何修復?
    解決此問題,我們採用了一個巧妙的CSS解決方案來解決問題:高度:100%; 高度:auto ; 寬度:100%; //對於水平塊 ,使用絕對定位將圖像定位在中心,以object-fit:object-fit :cover in IE和edge消除了問題。現在,圖像將按比例擴展,保持所需的效果而不...
    程式設計 發佈於2025-02-06
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-02-06
  • OpenGL的屏幕外渲染如何工作?
    OpenGL的屏幕外渲染如何工作?
    在OpenGl中roendering:詳細的指南 framebuffers:讀取像素: glreadpixels允許我們檢索存儲在flamebuffer中的像素數據並將其傳輸到主內存中。 一種基本的OffScreen渲染方法涉及以下步驟:創建FrameBuffer: 使用glgenframebuf...
    程式設計 發佈於2025-02-06
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    在嘗試將image存儲在mysql數據庫中時,您可能會遇到一個可能會遇到問題。本指南將提供成功存儲您的圖像數據的解決方案。 easudy values('$ this-> ; image_id','file_get_contents($ tmp_imag...
    程式設計 發佈於2025-02-06
  • 為什麼我的Mac OS X MySQL Server在不更新PID文件的情況下退出?
    為什麼我的Mac OS X MySQL Server在不更新PID文件的情況下退出?
    mySQL啟動錯誤:“服務器退出而無需更新PID文件”在Mac X 退出服務器,而無需更新PID文件此問題通常源於權限問題。以下是解決它的方法:檢查運行mysql Instances 如果找到一個實例,請終止它: 接下來,檢查/usr/usr/local/local/var/mysql/dire...
    程式設計 發佈於2025-02-06
  • 如何從JCHECKBOX行選擇中有效地從JTable中獲得選擇的行?
    如何從JCHECKBOX行選擇中有效地從JTable中獲得選擇的行?
    [2在第一列中使用JCHECKBOX進行JCHECKBOX,以進行行選擇。順序遍歷的效率很大。 傳統方法:Proposed Approach:Model-Based Tracking:Update a Set containing the selected row indices whenever ...
    程式設計 發佈於2025-02-06
  • CSS兒童選擇器:`>'和空間有什麼區別?
    CSS兒童選擇器:`>'和空間有什麼區別?
    `和一個空間? “ />`還有一個空間? CSS中的“ />
    程式設計 發佈於2025-02-06
  • 如何在整個HTML文檔中設計特定元素類型的第一個實例?
    如何在整個HTML文檔中設計特定元素類型的第一個實例?
    [2單獨使用CSS,整個HTML文檔可能是一個挑戰。 the:第一型偽級僅限於與其父元素中類型的第一個元素匹配。 以下CSS將使用添加的類樣式的第一個段落: }
    程式設計 發佈於2025-02-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3