iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

html/css/js的各種操作系列 第 21

[day21] javascript的 if/三元運算 和 for/forEach

  • 分享至 

  • xImage
  •  

今天繼續來介紹一下javascript

if

if在很多語言都會出現,畢竟做為判斷true/false是非常重要的東西

var a=10
if(a>5){
    //a>5的話
}
else{
    //a<=5的話
}

三元運算

有的時候你所要判斷的後需要的內容很少,這時使用if...else就會顯得有點太多,變得有點亂,而三元運算可以把他整合成一行,使你的程式碼更為精簡

function test1() {
                var a = 8
                var text = a > 5 ? "yes" : "no"
                console.log(text)
            }
test1();

這東西也可以跟if...else一樣有else if,但在可讀性上我不太建議把三元運算用在太過複雜的判斷上

你可以在三元運算套入含式var text = a > 5 ? yes() : no();
但如果用在多重判斷,我自己會覺得之後來讀會不太好讀,反而else if會比較明瞭,寫程式可讀性>簡潔。

for

這也是多數語法很常出現的老熟人了,讓你可以不間斷的一直重複去run一件事情

for(var a=0 ; a<3 ; a++){
    console.log(a);
}

不過說真的我是挺少使用的,反倒是下一個會比較常使用

foreach

這個東西非常好用,尤其是之後你要讀資料的時候,一般來說你要讀陣列的資料你會怎麼讀呢?

function test1() {
                var list = ["one", "two", "three", "four", "five", "six", "seven", "eight"]
                for (var a=0;a < list.length ; a++){
                    console.log(list[a]);
                }
            }
            test1()

通常你都會這樣讀吧?但foreach可以讓這行的可讀性與簡潔都大幅提升

他可以直接把變數內的值,直接拉出來run,這在檢查資料/讀取資料時很好使用

function test1() {
                var list = ["one", "two", "three", "four", "five", "six", "seven", "eight"]
                list.forEach((value) => {
                    console.log(value)
                })
            }
            test1()

函式:
你要讀的資料.foreach((取個名子) => { 程式碼... } )

就可以把你要讀的資料直接套在你取的名子上再帶入程式碼,看起來好像差不多但在複雜的list中,這卻會非常好用

今天就這樣啦,謝謝觀看~~


上一篇
[day20] 認識javaScript 和var/let/const 擅用console.log()
下一篇
[day22]onclick與cursor 和 select樣式問題
系列文
html/css/js的各種操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言