本文主要介紹switch,do-while,for-in,for-of的使用方法.
有關if-else,for,while等簡單流程控制,和別的語言相似且常見,我沒有自己寫,本文將展示教程配套課件中的代碼,以及我寫的解釋.
課程來源:后盾人.

switch的使用

• 匹配到case之后,就會傻呵呵地往下走,直到碰到break

let namee = 'test'
switch (namee) {case 'aaa':console.log('aaa')case 'test':console.log('test')case 'ddd':console.log('ddd')breakdefault:console.log('default')
}

運行結果

---

do-while的使用

• 不判斷條件,先進來,進來之后再看要不要繼續
• 就跟買衣服,可以先進去看看,買不買就不一定了
• while()循環就是會所,要先辦會員卡,才能進
• (這例子是老師舉的,跟我沒關系,我聽不懂)

let start = 0
do {let n = 0do {document.write(`<div><span>hello</span></div>`,)} while (++n <= start)
} while (++start <= 5)

如果你不清楚下面這一段代碼是干什么用的,現在不用考慮它.這一串代碼表示在瀏覽器中輸出顯示部分,當然也可以用console.log代替測驗.

document.write(`<div><span>hello</span></div>`,)

運行結果:

---

for-in的使用

對于一個數組里的每一個鍵進行遍歷(不是鍵值對key-value形式么,就是那個"鍵")

let hd = [{ title: 'title1', lesson: 1 },{ title: 'title2', lesson: 2 },{ title: 'title3', lesson: 3 },
]
document.write(`<table border="1" ><thead><tr><th>標題</th><th>編號</th></tr></thead>`,
)for (let i in hd) {document.write(`<tr><td>${hd[i].title}</td><td>${hd[i].lesson}</td></tr>`,)
}
document.write(`</table>`)

運行結果

---

for-of

與for-in不同的是,for-of取的是鍵值對里的"值",仔細觀察以下部分:

for (let i of hd) {document.write(`<tr><td>${i.title}</td><td>${i.lesson}</td></tr>`,)
}

直接用i代替hd[i]就能實現取值
完整代碼如下:

let hd = [{ title: 'title1', lesson: 1 },{ title: 'title2', lesson: 2 },{ title: 'title3', lesson: 3 },
]
document.write(`<table border="1" ><thead><tr><th>標題</th><th>編號</th></tr></thead>`,
)for (let i of hd) {document.write(`<tr><td>${i.title}</td><td>${i.lesson}</td></tr>`,)
}
document.write(`</table>`)

運行效果同上

---

賦值運算

在JS中用=賦值,和別的語言一樣

let a = 5,
b = 3;

---

一元運算

• 這一點不想講了,+ - * /還看不懂嗎…

n++和++n的區別

let f = 2;
let d = f + n++;

• n++:先賦值,再自增
• ++n:先自增,再賦值
• 記憶:什么時候碰到++,什么時候自增,什么時候碰到n,什么時候賦值

---

判斷運算if

function query(name) {return document.querySelector(`[name='${name}']`);}let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']");[...inputs].map(item => {item.addEventListener("keyup", function() {let msg = "";if (query("password").value != query("confirm_password").value ||query("password").value.length < 5) {msg = "兩次密碼不一致或密碼長度小于五位";}query("msg").innerHTML = msg;});});

• 代碼是比較復雜,看不懂的花幾分鐘看看課程原視頻,鏈接在本文頂端
• ...是解構賦值,就是把里面的東西一項一項擺出來
• 這段代碼里涉及很多dom操作,不會dom操作的…看下面這段代碼吧
• 總之就是和別的語言一樣啊!!!
  

---

for循環

用for循環畫個楊輝三角

function hd(row = 5) {for (let i = 1; i < row; i++) {for (let n = row - i; n > 0; n--) {document.write(`<span>*</span>`);}for (let m = i * 2 - 1; m > 0; m--) {document.write("*");}document.write("<br/>");}}hd(20);

運行結果:

總結

以上是生活随笔為你收集整理的[JavaScript] JavaScript 运算符与流程控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。