JavaScript三元表達(dá)式示例詳解
一、判斷三個(gè)條件
三元表達(dá)式是JS中最為常用的快捷判斷語(yǔ)句之一。其語(yǔ)法形式為:
條件 ? 結(jié)果1 : 結(jié)果2
當(dāng)判斷條件成立時(shí),返回結(jié)果1,否則返回結(jié)果2。這是JS中最為基本的三元表達(dá)式形式。
在實(shí)際應(yīng)用中,三元表達(dá)式可用于快速判斷三個(gè)條件,如下所示示例代碼:
let score = 85; let result = score >= 90 ? '優(yōu)秀' : score >=80 ? '良好' : '不及格'; console.log(result);
以上代碼的意思是:當(dāng)成績(jī)大于90分時(shí),返回字符串'優(yōu)秀';當(dāng)成績(jī)大于等于80分時(shí),返回字符串'良好';否則返回字符串'不及格'。運(yùn)行以上代碼,輸出結(jié)果為'良好'。
通過(guò)以上代碼,我們可以看到三元表達(dá)式的嵌套應(yīng)用,其思想類(lèi)似于if-else語(yǔ)句的嵌套判斷。同時(shí),三元表達(dá)式也能夠完成復(fù)雜的條件判斷。
二、js三元表達(dá)式嵌套
除了簡(jiǎn)單的三元表達(dá)式嵌套,JS中也可以通過(guò)多層嵌套完成更為復(fù)雜的判斷。以下是其示例代碼:
let fruit = 'apple'; let price = fruit === 'apple' ? (size === 'big' ? 10 : 8) : 5; console.log(price);
以上代碼的意思是:當(dāng)水果類(lèi)型為蘋(píng)果時(shí),如果尺寸為big,返回10元,否則返回8元;如果水果類(lèi)型為非蘋(píng)果,則返回5元。運(yùn)行以上代碼,輸出結(jié)果為8。
通過(guò)以上代碼,我們可以看到在三元表達(dá)式使用中,嵌套層數(shù)并沒(méi)有硬性限制,可以根據(jù)實(shí)際需求完成多層嵌套。
三、js三元表達(dá)式判斷一個(gè)
除了判斷三個(gè)條件,三元表達(dá)式還可以完成對(duì)單個(gè)條件的判斷。以下是其示例代碼:
let age = 18; let isAdult = age >= 18 ? true : false; console.log(isAdult);
以上代碼的意思是:當(dāng)年齡大于等于18歲時(shí),返回true,否則返回false。運(yùn)行以上代碼,輸出結(jié)果為true。
這是三元表達(dá)式在實(shí)際應(yīng)用中最為常用的形式之一,例如在表單提交中對(duì)數(shù)據(jù)的判斷。
四、三元表達(dá)式的語(yǔ)法
三元表達(dá)式的語(yǔ)法形式十分簡(jiǎn)單,其一般形式為:
條件 ? 結(jié)果1 : 結(jié)果2
其中“條件”可以是任意的JS表達(dá)式,“結(jié)果1”和“結(jié)果2”也是任意JS表達(dá)式,可以是字符串、數(shù)字、函數(shù)等任意類(lèi)型的值。
需要注意的是,三元表達(dá)式中的“?”和“:”都是必不可少的,缺一不可。同時(shí),在三元表達(dá)式的書(shū)寫(xiě)時(shí)應(yīng)該盡量保證代碼的可讀性,不要過(guò)分嵌套,減少出錯(cuò)的可能。
五、js三元運(yùn)算符
JS中一共有三種運(yùn)算符:一元運(yùn)算符、二元運(yùn)算符和三元運(yùn)算符。三元運(yùn)算符是三種運(yùn)算符中最為特殊的一種,其語(yǔ)法和功能都有其獨(dú)特性。
三元表達(dá)式的運(yùn)算結(jié)果根據(jù)“?”和“:”的位置而定。當(dāng)“?”和“:”符號(hào)兩邊的表達(dá)式計(jì)算結(jié)果為真時(shí),返回“?”后的表達(dá)式計(jì)算結(jié)果;否則返回“:”后的表達(dá)式計(jì)算結(jié)果。以下是一個(gè)簡(jiǎn)單的示例:
let var1 = true ? 'yes' : 'no'; console.log(var1);
以上代碼的意思是:如果判斷結(jié)果為真,則返回字符串'yes';否則返回字符串'no'。運(yùn)行以上代碼,輸出結(jié)果為'yes'。
六、js三元運(yùn)算符表達(dá)式
對(duì)于三元運(yùn)算符表達(dá)式,其結(jié)果同樣可以賦值給一個(gè)變量或使用在一個(gè)JS表達(dá)式中。以下是一個(gè)示例:
let age = 18;
age >= 18 ? console.log('成年人') : console.log('未成年人');
以上代碼的意思是:如果年齡大于等于18歲,則輸出字符串'成年人';否則輸出字符串'未成年人'。
需要注意的是,以上代碼中使用了console.log()函數(shù)輸出結(jié)果,這是一種常見(jiàn)的JS輸出方式。同時(shí)三元表達(dá)式也可以作為條件語(yǔ)句或循環(huán)語(yǔ)句的判斷條件。
七、js三元表達(dá)式簡(jiǎn)寫(xiě)
在實(shí)際使用中,可以通過(guò)三元表達(dá)式完成更為簡(jiǎn)潔的代碼書(shū)寫(xiě)。例如:
let age = 18; let message = age >= 18 ? '成年人' : '未成年人';
以上代碼的意思是:如果年齡大于等于18歲,則將字符串'成年人'賦值給變量message;否則將字符串'未成年人'賦值給變量message。這種寫(xiě)法極大地簡(jiǎn)化了代碼,提高了代碼的可讀性。
需要注意的是,簡(jiǎn)寫(xiě)形式只適用于簡(jiǎn)單的三元表達(dá)式,在復(fù)雜的三元表達(dá)式嵌套中不宜過(guò)度使用。
八、js三元表達(dá)式怎么寫(xiě)
當(dāng)我們需要使用三元表達(dá)式時(shí),需要先確定條件判斷,然后按照語(yǔ)法形式書(shū)寫(xiě)代碼。
以下是一個(gè)簡(jiǎn)單的示例:
let score = 85; let result = score >= 90 ? '優(yōu)秀' : '不優(yōu)秀'; console.log(result);
以上代碼的意思是:如果成績(jī)大于等于90分,則返回字符串'優(yōu)秀';否則返回字符串'不優(yōu)秀'。
在實(shí)際應(yīng)用中,我們可以結(jié)合變量、運(yùn)算符等進(jìn)行復(fù)雜的條件判斷,完成更加靈活的代碼書(shū)寫(xiě)。
九、js三元表達(dá)式進(jìn)階寫(xiě)法
在JS中,三元表達(dá)式還可以用于返回函數(shù)調(diào)用結(jié)果。例如:
function foo(flag) {
return flag ? () => console.log('flag is true.') : () => console.log('flag is false.');
}
let f = foo(true);
f(); // flag is true.
以上代碼的意思是:當(dāng)flag的值為true時(shí),返回一個(gè)匿名函數(shù),并輸出字符串'flag is true.';否則返回另一個(gè)匿名函數(shù),并輸出字符串'flag is false.'。
通過(guò)以上示例,我們可以看到在JS中,三元表達(dá)式具有非常高的靈活性和可擴(kuò)展性,可以用于各種場(chǎng)合,有效地提高代碼的可讀性和開(kāi)發(fā)效率。
$a=$b>$c ? ($c-$b) ? 1 :($b-$c) : ($b+$c) ? 0 : $b*$c; //$a=0
轉(zhuǎn)化成if(){} else{}格式
if($b>$c){
if($c-$b){
$a=1;
}else{
$a=$b-$c;
}
}else{
$a=$b+$c;
if($a){
$a=0;
}else{
$a=$b*$c;
}
}補(bǔ)充知識(shí):三元運(yùn)算符可以代替簡(jiǎn)單的 if 語(yǔ)句,但盡量不要嵌套使用,這樣會(huì)降低代碼的可讀性

總結(jié)
到此這篇關(guān)于JavaScript三元表達(dá)式的文章就介紹到這了,更多相關(guān)js三元表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js去除重復(fù)字符串兩種實(shí)現(xiàn)方法
js去除重復(fù)字符串在項(xiàng)目開(kāi)發(fā)中很實(shí)用,接下來(lái)詳細(xì)介紹實(shí)現(xiàn)方法,感興趣的朋友可以參考下2013-01-01
微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
ie下動(dòng)態(tài)加態(tài)js文件的方法
接觸過(guò)相關(guān)知識(shí)的都知道,動(dòng)態(tài)向DOM中添加js的script標(biāo)簽時(shí),在各種瀏覽器下會(huì)有不同的表現(xiàn)。2011-09-09
細(xì)說(shuō)JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)
本文主要介紹了細(xì)說(shuō)JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
JS 無(wú)法通過(guò)W3C驗(yàn)證的處理方法
今天在頁(yè)面上使用JS時(shí)發(fā)現(xiàn)無(wú)法通過(guò)W3C驗(yàn)證,檢查了一會(huì)發(fā)現(xiàn)此方法可以屏蔽大多數(shù)JS無(wú)法通過(guò)驗(yàn)證的問(wèn)題,簡(jiǎn)單實(shí)用2010-03-03
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
javascript 得到變量類(lèi)型的函數(shù)
在JavaScript中,有時(shí)需要準(zhǔn)確知道一個(gè)變量的類(lèi)型,顯然typeof函數(shù)不能滿(mǎn)足這個(gè)要求,這個(gè)函數(shù)在大多數(shù)情況下都返回object。2010-05-05
深入理解javascript函數(shù)參數(shù)與閉包
函數(shù)是javascript的一等對(duì)象,想要學(xué)好javascript,就必須深刻理解函數(shù)。本文對(duì)javascript函數(shù)參數(shù)與閉包進(jìn)行詳細(xì)分析介紹。需要的朋友一起來(lái)看下吧2016-12-12
一個(gè)級(jí)聯(lián)菜單代碼學(xué)習(xí)及removeClass與addClass的應(yīng)用
最近在學(xué)些web前段的知識(shí),看見(jiàn)博客園首頁(yè)左側(cè)的一個(gè)級(jí)聯(lián)菜單,很是好奇,于是想自己實(shí)現(xiàn)以下,代碼書(shū)寫(xiě)很簡(jiǎn)潔而且易懂,感興趣的朋友可以了解下,希望本文對(duì)你學(xué)習(xí)級(jí)聯(lián)菜單有所幫助2013-01-01
echarts學(xué)習(xí)筆記之圖表自適應(yīng)問(wèn)題詳解
最近發(fā)現(xiàn)一個(gè)問(wèn)題,echarts圖初始化后不能自適應(yīng)瀏覽器的縮放,所以下面這篇文章就來(lái)給大家介紹了關(guān)于echarts圖表自適應(yīng)問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11

