JavaScript 程式札記 : 條件運算子

閱讀時間約 2 分鐘

什麼是條件運算子?

JavaScript 的條件運算子,是一種簡短且具有條件判斷功能的運算子,這個運算子提供了一種簡潔的方式來進行條件判斷,而不需要使用更冗長的if...else語句。

條件運算子基本語法

條件運算子的語法非常簡單,它由三部分組成:

條件 ? 表達式1 : 表達式2
  1. 條件:用於決定哪個表達式將被執行。
  2. 表達式1:如果條件為真(true),則此表達式將被執行。
  3. 表達式2:如果條件為假(false),則此表達式將被執行。
let result = (10 > 5) ? "大於" : "小於或等於";
console.log(result); // 輸出 "大於"

在上面的例子中,因為10 > 5是真的,所以"大於"這個字符串被賦值給了result

條件運算子實際應用

以下是一些常見的條件運算子使用情境:

  1. 基於條件賦值:如下面範例所示,可以基於某個條件來給變數賦值。
let speed = 90;
let status = (speed > 100) ? "超速" : "正常";
console.log(status); // 輸出 "正常"
  1. 函數中的簡短返回:在函數中,可以使用條件運算子來進行快速的返回。
function isAdult(age) {
return (age >= 18) ? "成年" : "未成年";
}
let jack = isAdult(20);
console.log(jack); // 輸出 "成年"
  1. 處理選項或設定:當需要基於某些條件來設定選項或配置時,條件運算子也很實用。
let check = true;
let options = {
fontSize: (check) ? "24px" : "16px"
};
console.log(options.fontSize); // 輸出 "24px"​

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
事件(event)就是網頁中發生的某些事情,例如當用戶點擊按鈕、移動滑鼠、輸入文字等,JavaScript 能夠偵測這些事件,並執行相對應的程式碼。
JavaScript 提供了兩個非常有用的定時器:setTimeout 和 setInterval,這兩個定時器可以幫助我們輕鬆地控制時間和程式的執行。
在 JavaScript ES6 之前,JavaScript 的函式主要是使用 function 關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能,它提供了一種更簡潔的方式來定義函式。
解構賦值是 JavaScript ES6 的特性,它讓我們能更簡單地從陣列或物件中提取值,並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔,還提升了可讀性。
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
事件(event)就是網頁中發生的某些事情,例如當用戶點擊按鈕、移動滑鼠、輸入文字等,JavaScript 能夠偵測這些事件,並執行相對應的程式碼。
JavaScript 提供了兩個非常有用的定時器:setTimeout 和 setInterval,這兩個定時器可以幫助我們輕鬆地控制時間和程式的執行。
在 JavaScript ES6 之前,JavaScript 的函式主要是使用 function 關鍵字來定義的。而箭頭函式是 JavaScript ES6 中新增的功能,它提供了一種更簡潔的方式來定義函式。
解構賦值是 JavaScript ES6 的特性,它讓我們能更簡單地從陣列或物件中提取值,並將這些值賦予到新的變數中。這不僅讓程式碼更簡潔,還提升了可讀性。
let 和 const 是 JavaScript 在 ES6 版本中新的變數宣告方式。使用 let 宣告的變數可以重新賦值,而使用 const 宣告的變數賦值後則不能改變。這兩種新的宣告方式提供了比 var 更嚴格和清晰的變數作用域管理。
JavaScript 陣列的操作方法,forEach() 是用於遍歷陣列的每個元素,並對每個元素執行提供的函數,map() 是創建一個新陣列,其結果是對原陣列中的每個元素調用提供的函數後返回的結果。
你可能也想看
Google News 追蹤
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
Thumbnail
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
本文將介紹 JavaScript 中的字符串基本操作,包括連接、長度和切割,以及進階的搜索、替換和正則表達式操作,讓你瞭解如何有效地處理和操作字符串。
Thumbnail
閉包(Closure)簡單來說就是一個 Function,應該說是 Function 內的 Function,而內層的變數記憶體不會被釋放,所以即使外部函式已經執行完畢,仍然能記住並存取它自己所在的外部函式的變數。
Thumbnail
JSON 是一種數據交換格式,源於JavaScript,可讓程式設計師將拿到的資料結構從任何語言轉換成其他語言與平台可辨識的格式,由於其簡單、易讀和跨平台的兼容性,在Web開發中廣泛使用。
Thumbnail
這是 30 天寫作挑戰的第 16 天。今天要跟大家分享的主題是:3 個學習前端時,重要的程式框架
本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
Thumbnail
老師請問tailwind是什麼呢? Tailwind 是一個現代化的 CSS 框架,它的設計理念是「高度可定制的實用型 CSS 庫」。與其他 CSS 框架不同的是,Tailwind 不是基於預先定義好的樣式類別和樣式集合,而是提供了大量的 CSS 實用類別,讓開發者可以更靈活地自由組合和應用。