JavaScript的條件語句有哪三種-前端問答-PHP中文網

首頁

web前端

前端問答

JavaScript的條件語句有哪三種

青灯夜游

Jan 26, 2022 pm 05:02 PM

javascript條件語句

JavaScript的三種條件語句：1、「if else」語句，語法「if(條件){...}else{...}」；2、「switch...case」語句；3、三元運算語句，語法「條件表達式? 表達式1 : 表達式2 ;」。

JavaScript的條件語句有哪三種

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

條件判斷語句是程式開發過程中常用的語句形式，和大部分程式語言相同，JavaScript 中也有條件判斷語句。所謂條件判斷，指的是程式根據不同的條件來執行不同的操作，例如根據年齡來顯示不同的內容，根據布林值 true 或 false 來判斷操作是成功還是失敗等。

一、if-else語句

1、語法

if-else的語法分為三種：

（ 1）if 語句；

if(条件){ 条件为true时执行代码 }

（2）if else 語句；

if(条件){ 条件为true时执行的代码 } else { 条件为false时执行的代码 }

（3）if else if else 語句；

if(条件1){ 条件1为true时执行的代码 } esle if (条件2){ 条件1false条件2true } else { 都false }

範例
例如範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IfElse</title>
</head>
<body>

<script type="text/javascript">
     var myage = 10;
    //第一种语法
    if (myage > 5){
        document.writeln("你的年龄大于5岁");
    }
    //第二种语法
    if (myage > 15){
        document.writeln("你的年龄大于15岁");
    }
    else {
        document.writeln("你的年龄小于15岁");
    }
    //第三种语法
    if (myage > 5){
        document.writeln("你的年龄大于5岁");
     }
    else if(myage < 15 ){
         document.writeln("你的年龄大于15小于5岁");
     }
    else {
        document.writeln("你的年龄大于等于15岁")
    }
</script>

</body>
</html>

輸出結果為 JavaScript的條件語句有哪三種

二、switch...case語句

1、文法

switch( 表达式 n ){
case 1 : 执行代码块 1; break;
case 2 : 执行代码块 2 ; break;
default: 与 case 1 和 case 2 不同时执行的代码
}

2、工作原理

先設定表達式n（通常是變數）。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的程式碼區塊會被執行。

請使用 break 來阻止程式碼自動地向下一個 case 運行。

範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Switch</title>
</head>
<body>

<script type="text/javascript">
    var flag = 2;
    switch (flag) {
        case 1:document.write("纷纷扰扰这个世界，所有的了解。");break;
        case 2:document.write("只要让我留在你身边。");break;
        default:break;
    }
</script>

</body>
</html>

輸出結果為

JavaScript的條件語句有哪三種

#三、三元運算子

三元運算子（也稱為條件運算子），由一個問號和一個冒號組成，其語法格式如下：

b ? x : y

範例：

定義變數 a，然後偵測 a 是否被賦值，如果賦值則使用該值；否則設定預設值。

var a = null;  //定义变量a
typeof a != "undefined" ? a = a : a = 0;  //检测变量a是否赋值，否则设置默认值
console.log(a);  //显示变量a的值，返回null

條件運算子可以轉換為條件結構：

if(typeof a != "undefined"){  //赋值
    a = a;
}else{  //没有赋值
    a = 0;
}
console.log(a);

也可以轉換為邏輯表達式：

(typeof a != "undefined") && (a =a) || (a = 0);  //逻辑表达式
console.log(a);

在上面表達式中，如果a 已賦值，則執行(a = a) 表達式，執行完畢就不再執行邏輯或運算子後面的(a = 0) 表達式；如果a 未賦值，則不再執行邏輯與運算子後面的(a = a) 表達式式，轉而執行邏輯或運算子後面的表達式(a = 0)。

注意：

在實戰中需要考慮假值的干擾。使用 typeof a != "undefined" 進行檢測，可以避開變數賦值為 false、null、""、NaN等假值時，也被誤認為沒有賦值。【相關推薦：javascript學習教學

】#######

以上是JavaScript的條件語句有哪三種的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

usestate（）與用戶ducer（）：為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate（）forsimple，獨立的variables; useusereducer（）forcomplexstateLogicorWhenStatedIppedsonPreviousState.1）usestate（）isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate（）管理狀態：實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案，因為它簡化了狀態管理，使代碼更清晰、更易讀，並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量，2)它通過鉤子機制在重新渲染間記住狀態，3)使用useState可以利用React的優化如備忘錄化，提升性能，4)但需注意只能在組件頂層或自定義鉤子中調用，避免在循環、條件或嵌套函數中使用。

何時使用usestate（）以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate（）forlocalComponentStateMangementighatighation; 1）usestate（）isidealforsimple，localforsimple.2）useglobalstate.2）useglobalstateSolutionsLikErcontExtforsharedState.3）

React的可重複使用的組件：增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1）heSredunceRedUndenceNandSimplifyUpdates.2）yensureconsistencyInuserexperience.3）

反應中的虛擬DOM：通過有效更新來提高性能Apr 24, 2025 pm 04:41 PM

TheVirtualDOMisalightweightin-memorycopyoftherealDOMusedbyReacttooptimizeUIupdates.ItboostsperformancebyminimizingdirectDOMmanipulationthroughaprocessofupdatingtheVirtualDOMfirst,thenapplyingonlynecessarychangestotheactualDOM.

HTML和React的集成：實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合，構建高效的用戶界面。 1)使用JSX嵌入HTML元素，2)利用虛擬DOM優化渲染性能，3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀，還能提升應用性能。

React和HTML：渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據，並通過合成事件系統處理用戶事件。 1）使用useState管理狀態，如計數器示例。 2）事件處理通過在JSX中添加函數實現，如按鈕點擊。 3）渲染列表需使用key屬性，如TodoList組件。 4）表單處理需使用useState和e.preventDefault()，如Form組件。