JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中編寫條件語句

這篇文章最初是為 DigitalOcean 寫的。

簡介

在編程中,很多情況下您會希望根據用戶輸入或其他因素運行不同的代碼塊。例如,如果每個字段都正確填寫,您可能希望提交表單,但如果缺少某些必填字段,您可能希望阻止該表單提交。為了完成這樣的任務,我們有條件語句 ,它們是所有編程語言的組成部分。條件語句根據 true 的結果執行特定操作 或 false .

您可能會看到的幾個 JavaScript 條件語句示例:

  • 檢查用戶的位置並根據國家/地區顯示正確的語言
  • 在提交時發送表單,或在缺少必填字段旁邊顯示警告
  • 在點擊事件時打開下拉菜單,如果下拉菜單已經打開,則關閉它
  • 如果用戶超過法定飲酒年齡,則顯示酒類供應商的網站
  • 顯示酒店的預訂表格,除非酒店已預訂

條件語句也稱為邏輯或決策。您可以將條件語句與“選擇自己的冒險”一書或流程圖進行比較。在本文中,我們將介紹常用於條件語句的邏輯運算符,以及 if , else , 和 else if 關鍵詞。我們還將介紹三元運算符。

邏輯運算符

在了解 if 之前 和 else 語句,了解邏輯運算符很重要 .有三個邏輯運算符通常與條件語句一起使用。這些運算符是 AND (&& ), 或 (|| ),而不是 (! )。

下表匯總了邏輯運算符。

|運算符 |語法 |說明 || -------- | ------ | ------------------------------------------------------ | --- | ------------------------------------------ ||和 | && |返回 true 如果兩個操作數都是 true ||或 | | | |返回 true 如果任一操作數是 true ||不是 | ! |返回 true 如果操作數是 false |

AND

AND 運算符由兩個 &符號 (&& ) 並將返回 true 如果左邊和右邊的操作數是兩個。我們可以檢查某樣東西是不是既高品質又低價格。

// High quality and low price are true
const highQuality = true
const lowPrice = true

highQuality && lowPrice
true

由於兩個變量都為真,括號內的 AND 運算返回真。

OR

OR 運算符由兩個管道(|| ) 並將返回 true 如果其中一個操作數為真。在這裡,我們將檢查是否有 highQualitylowPrice .

// Only low price is true
const highQuality = false
const lowPrice = true

highQuality && lowPrice
true

由於兩個條件之一(highQualitylowPrice ) 是 true ,整個操作返回true .

不是

NOT 運算符由感嘆號 (! ) 如果操作數是 false 則返回 true .

const highQuality = true

!highQuality
false

在上面的語句中,highQualitytrue .使用 NOT 運算符,我們檢查是否 hiqhQualityfalse .如果是 false ,輸出將返回 true ,但因為它是 true ,輸出返回 false .

NOT 運算符起初有點難以理解。要記住的重要部分是 NOT 檢查某事是否為 false .

if 語句

最基本的條件語句是 if 陳述。一個 if 語句將評估語句是否為 truefalse ,並且僅在語句返回 true 時運行 .在 false 的情況下,代碼塊將被忽略 結果,程序將跳到下一節。

一個 if 語句用 if 編寫 關鍵字,後跟括號中的條件,要執行的代碼在大括號之間。總之,可以寫成if () {} .

這是對基本 if 的更長檢查 聲明。

if (condition) {
  // code that will execute if condition is true
}

if 的內容 語句是縮進的,包含要運行的代碼塊的大括號不以分號結尾,就像函數塊一樣。

例如,我們可以假裝我們有一個購物應用程序。您已將一定數量的資金存入您的帳戶,並且您想從商店購買商品。

// Set balance and price of item
const balance = 500
const jeans = 40

// Check if there is enough funds to purchase item
if (jeans <= balance) {
  console.log('You have enough money to purchase the item!')
}
You have enough money to purchase the item!

我們的帳戶餘額為 500 ,並想為 40 買一條牛仔褲 .使用小於或等於運算符,我們可以檢查牛仔褲的價格是否小於或等於我們擁有的資金量。自 jeans <= balance 計算結果為 true ,條件將通過,代碼塊將運行。

在一個新示例中,我們將創建一個價格高於可用餘額的新商店商品。

// Set balance and price of item
const balance = 500
const phone = 600

// Check if there is enough funds to purchase item
if (phone <= balance) {
  console.log('You have enough money to purchase the item!')
}

這個例子沒有輸出,因為 phone <= balance 評估為假。代碼塊將被簡單地忽略,程序將繼續下一行。

else 聲明

使用 if 語句,我們只在語句評估為真時執行代碼,但如果條件失敗,我們通常會希望發生其他事情。例如,如果表單未正確提交,我們可能希望顯示一條消息,告訴用戶哪些字段填寫正確。在這種情況下,我們將使用 else 語句,即原條件不成立時執行的代碼。

else 語句寫在 if 之後 語句,並且它在括號中沒有條件。這是基本 if...else 的語法 聲明。

if (condition) {
  // code that will execute if condition is true
} else {
  // code that will execute if condition is false
}

使用與上面相同的示例,如果帳戶中的資金過少,我們可以添加一條消息來顯示。

// Set balance and price of item
const balance = 500
const phone = 600

// Check if there is enough funds to purchase item
if (phone <= balance) {
  console.log('You have enough money to purchase the item!')
} else {
  console.log(
    'You do not have enough money in your account to purchase this item.'
  )
}
You do not have enough money in your account to purchase this item.

if 條件不成功,代碼繼續執行 else 中的內容 陳述。這對於顯示警告或讓用戶知道要採取什麼行動繼續前進非常有用。通常成功和失敗都需要一個動作,所以 if...else 比單獨的 if 更常見 聲明。

else if 語句

使用 ifelse ,我們可以根據條件是否為 true 運行代碼塊 或 false .但是,有時我們可能有多個可能的條件和輸出,並且需要的不僅僅是兩個選項。一種方法是使用 else if 語句,它可以評估兩個以上的可能結果。

這是包含 if 的代碼塊的基本示例 語句,多個 else if 語句和一個 else 在沒有條件評估為 true 的情況下聲明 .

if (condition a) {
	// code that will execute if condition a is true
} else if (condition b) {
	// code that will execute if condition b is true
} else if (condition c) {
	// code that will execute if condition c is true
} else {
	// code that will execute if condition is false
}

JavaScript 會嘗試按順序運行所有語句,如果沒有一個成功,則默認為 else 堵塞。您可以擁有盡可能多的 else if 必要時的聲明。在很多else if的情況下 語句,switch 語句可能是首選的可讀性。閱讀關於開啟 Mozilla 開發者網絡的信息。

以多個else if為例 語句,我們可以創建一個簡單的評分應用程序,它將根據 100 的分數輸出一個字母等級 .

這個應用程序的要求如下:

  • 90 分及以上為 A
  • 80 到 89 分是 B
  • 70 到 79 分是 C
  • 60 到 69 分是 D
  • 59 分或以下為 F

下面我們將創建一組簡單的if , else , 和 else if 陳述,並根據給定的成績對其進行測試。

// Set the current grade of the student
let grade = 87

// Check if it is an A, B, C, D, or failing grade
if (grade >= 90) {
  console.log('A')
} else if (grade >= 80) {
  console.log('B')
} else if (grade >= 70) {
  console.log('C')
} else if (grade >= 60) {
  console.log('D')
} else {
  console.log('F')
}
B

在我們的示例中,我們首先檢查最高分數,該分數將大於或等於 90 .之後,else if 語句將檢查大於 80 , 70 , 和 60 直到達到默認的 else 成績不及格。

雖然我們的 grade 87 的值 C 在技術上也是如此 , DF ,語句將在第一個成功的語句處停止。因此,我們得到 B 的輸出 ,這是第一個匹配項。

三元運算符

三元運算符 ,也稱為條件運算符,用作 if...else 的簡寫 聲明。

三元運算符是用問號的語法編寫的(? ) 後跟一個冒號 (: ),如下所示。

(condition) ? expression on true : expression on false

在上面的語句中,條件是先寫的,然後是一個? .第一個表達式將在 true 上執行 ,第二個表達式將在 false 時執行。它與 if...else 非常相似 語句,語法更簡潔。

在本例中,我們將創建一個程序來檢查用戶是否為 21 或更老。如果是,它將打印 "You may enter" 到控制台。如果不是,它將打印 "Sorry, you are not old enough to enter." 到控制台。

// Set age of user
let age = 20

// Place result of ternary operation in a variable
const oldEnough =
  age >= 21 ? 'You may enter.' : 'Sorry, you are not old enough to enter.'

// Print output
oldEnough
'Sorry, you are not old enough to enter.'

age 的用戶小於 21 ,失敗消息被輸出到控制台。 if...else 相當於這將是 "You may enter."if 語句和 "Sorry, you are not old enough to enter."else 聲明。

要了解更多信息,請閱讀有關三元運算符的文檔。

結論

條件語句為我們提供了可以用來控製程序輸出的邏輯。它們是編程的基本組成部分之一,幾乎可以在所有編程語言中找到。

在本文中,我們了解了邏輯運算符,這是條件語句中經常使用的運算符,以及如何使用 if , else , 和 else if 關鍵詞。最後,我們介紹了嵌套和三元運算符的使用。要更深入地了解條件語句,請閱讀 Mozilla 開發者網絡上的 if...else。


Tutorial JavaScript 教程
  1. 如何設置 Rails API 和 React.js 客戶端

  2. React Material Dashboard - 全棧版本

  3. 更新一個有 25 年曆史的網站

  4. Elm in action - 導入、變量和 HTML 模塊

  5. 開源:重寫 git 歷史(修正/變基)

  6. 如何將 div 包裹在多個相同的類元素周圍

  7. 如何使用 Tailwind CSS 設置 SvelteKit

  1. 如何使用 TalkJS 聊天 API 將聊天添加到 VUE.JS 應用程序中

  2. 🦏 Mozilla Rhino JS 讓我尖叫😱

  3. React 中的基本鉤子

  4. 如何將 JavaScript 變量輸出存儲到 PHP 變量中?

  5. 實現 429 次重試和限制 API 速率限制

  6. 如何使用 ClaudiaJS 將現有 NodeJS Express 應用程序部署為 AWS Lambda 函數

  7. 子類化 Javascript 數組。 TypeError:Array.prototype.toString 不是通用的

  1. 用 Vanilla Javascript 製作日曆

  2. Nuxt.js v2.4.0 已發布! TypeScript、智能預取等...

  3. Omega:電子表格管理器(最終版)

  4. React 開發者工具 - 但它真的很有幫助!