一、JavaScript?運算符?
? 賦值運算符（ = ）
= 賦值運算符執(zhí)行過程？ 將等號右邊的值賦予給左邊, 要求左邊必須是一個容器
+= 出現(xiàn)是為了簡化代碼, 比如讓 let age = 18 ，age 加 2 怎么寫呢
let age = 18
age += 2
console.log(age)
age *= 2
console.log(age)
age /= 2
console.log(age)
age %= 2
console.log(age)
age -= 2
console.log(age)
? 一元運算符 （自增和自減，并明白區(qū)別）
眾多的 JavaScript 的運算符可以根據(jù)所需表達(dá)式的個數(shù)，分為一元運算符、二元運算符、三元運算符。而一元、二元和三元運算符是根據(jù)操作數(shù)（表達(dá)式）的個數(shù)來進(jìn)行分類的。
一元運算符只需要一個操作數(shù)。它對操作數(shù)進(jìn)行單一的操作或轉(zhuǎn)換。例如，一元運算符可以用于遞增或遞減變量的值，取負(fù)數(shù)、求反等操作。常見的一元運算符有：++（遞增）、--（遞減）、+（正數(shù)）、-（負(fù)數(shù)）、!（邏輯非）等。
二元運算符需要兩個操作數(shù)。例如，加法運算符（+）、減法運算符（-）、乘法運算符（*）、除法運算符（/）、賦值運算符（=）等。二元運算符在兩個操作數(shù)之間進(jìn)行某種計算或比較操作。
三元運算符即條件運算符，也是 JavaScript 中唯一的三元運算符。它需要三個操作數(shù)，形式為 條件表達(dá)式 ? 表達(dá)式1 : 表達(dá)式2。根據(jù)條件表達(dá)式的結(jié)果，選擇返回表達(dá)式1或表達(dá)式2的值。它類似于 if-else 語句的簡寫形式。
舉例說明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 用戶輸入
let num = prompt('請您輸入一個數(shù)字:')
// 2. 判斷輸出- 小于10才補0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)
</script>
</body>
</html>還舉例：（用戶輸入兩個數(shù)字，判斷二者最大值）?
// 1. 用戶輸入
let num1 = +prompt('請您輸入第一個數(shù)：')
let num2 = +prompt('請您輸入第二個數(shù)：')
// 2. 判斷輸出-三元運算符
// if (num1 > num2) {
// alert(num1)
// } else {
// alert(num2)
// }
num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)
自增運算符的用法： 1. 前置自增和后置自增獨立使用時二者并沒有差別！ 2. 一般開發(fā)中我們都是獨立使用 3. 后面 i++ 后置自增會使用相對較多,并且都是單獨使用?
let i = 1
console.log(i++ + ++i + i)
?[（1+2）+1] +3 =7
i?是 3
let i = 1
let mu = i++ + ++i + i
console.log(i)
當(dāng)然要是還是不是很清楚這個過程中變量的賦值情況，則可以進(jìn)行斷點調(diào)試。
? 比較運算符
= 是賦值
== 是判斷 只要求值相等，不要求數(shù)據(jù)類型一樣即可返回true
=== 是全等 要求值和數(shù)據(jù)類型都一樣返回的才是true
開發(fā)中，請使用 ==
? 邏輯運算符
? 運算符優(yōu)先級
一元運算符里面的邏輯非優(yōu)先級很高
?邏輯與比邏輯或優(yōu)先級高
let a = 3 > 5 && 2 < 7 && 3 == 4
console.log(a);//false
let b = 3 <= 4 || 3 > 1 || 3 != 2
console.log(b);//true
let c = 2 === "2"
console.log(c);//false
let d = !c || b && a//true ||true && false
console.log(d);
關(guān)于變量d為什么是true,?進(jìn)行如下分析。
首先，根據(jù)邏輯運算符的優(yōu)先級，&& 運算符的優(yōu)先級高于 || 運算符。
對于 a = 3 > 5 && 2 < 7 && 3 == 4，分步執(zhí)行：
-
3 > 5?為 false。 - 因為前面的結(jié)果是 false，所以整個表達(dá)式的結(jié)果已經(jīng)確定為 false，后面的操作數(shù)不再進(jìn)行求值。因此，
a?的值為 false。
對于 b = 3 <= 4 || 3 > 1 || 3 != 2，分步執(zhí)行：
-
3 <= 4?為 true。 - 因為前面的結(jié)果是 true，所以整個表達(dá)式的結(jié)果已經(jīng)確定為 true，后面的操作數(shù)不再進(jìn)行求值。因此，
b?的值為 true。
對于 c = 2 === "2"，分步執(zhí)行：
-
2 === "2"?比較嚴(yán)格相等，即比較值和類型是否都相等。但是數(shù)字 2 和字符串 "2" 的類型不同，因此結(jié)果為 false，即?c?的值為 false。
最后，對于 d = !c || b && a，分步執(zhí)行：
-
!c?取?c?的邏輯非，即取反，因為?c?的值為 false，所以?!c?的值為 true。 -
b && a?中的?&&?運算符，根據(jù)短路原則，如果第一個操作數(shù)?b?為 true，則直接返回第二個操作數(shù)?a?的值。因為?b?的值為 true，所以繼續(xù)求值?a。 -
a?的值為 false。 - 將以上求得的結(jié)果進(jìn)行邏輯運算，
true || (false && false)。 - 根據(jù)?
||?運算符的規(guī)則，只要有一個操作數(shù)為 true，整個表達(dá)式即為 true。所以?d?的值為 true。
因此，根據(jù)給定的代碼，變量 d 的值為 true。
再例如：
console.log(11 && 22)
console.log(false && 'hello')
console.log(33 || 44)
console.log(0|| 55)?
根據(jù)給出的代碼：
-
console.log(11 && 22)：使用&&運算符進(jìn)行邏輯與運算。在這種情況下，左側(cè)操作數(shù)為 11，右側(cè)操作數(shù)為 22。由于兩個操作數(shù)都為真值（非零數(shù)字），所以返回右側(cè)操作數(shù) 22。因此，打印結(jié)果為 22。 -
console.log(false && 'hello')：同樣使用&&運算符進(jìn)行邏輯與運算。但是在這種情況下，左側(cè)操作數(shù)為 false，右側(cè)操作數(shù)為 'hello'。根據(jù)短路原則，由于左側(cè)操作數(shù)為 false，整個表達(dá)式已經(jīng)確定為 false，所以不再求解右側(cè)操作數(shù)。因此，打印結(jié)果為 false。 -
console.log(33 || 44)：使用||運算符進(jìn)行邏輯或運算。在這種情況下，左側(cè)操作數(shù)為 33，右側(cè)操作數(shù)為 44。由于左側(cè)操作數(shù)為真值（非零數(shù)字），所以返回左側(cè)操作數(shù) 33。因此，打印結(jié)果為 33。 -
console.log(0 || 55)：同樣使用||運算符進(jìn)行邏輯或運算。但是在這種情況下，左側(cè)操作數(shù)為 0，右側(cè)操作數(shù)為 55。根據(jù)短路原則，由于左側(cè)操作數(shù)為假值（0），整個表達(dá)式已經(jīng)確定為假值，所以不再求解右側(cè)操作數(shù)。因此，打印結(jié)果為 55。
總結(jié)：
- 在邏輯與運算中，如果左側(cè)操作數(shù)為真值，則返回右側(cè)操作數(shù)；如果左側(cè)操作數(shù)為假值，則返回左側(cè)操作數(shù)。
- 在邏輯或運算中，如果左側(cè)操作數(shù)為真值，則返回左側(cè)操作數(shù)；如果左側(cè)操作數(shù)為假值，則返回右側(cè)操作數(shù)。
二、JavaScript?流程控制?
如：下面這段代碼中，一次循環(huán)也不會執(zhí)行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title練習(xí)</title>
</head>
<body>
<script>
let i = 0
while (i === 1){
i++
}
</script>
</body>
</html>?因為，循環(huán)條件 i === 1 的初始值為 0，而 0 不等于 1。循環(huán)條件要求循環(huán)只在條件為真時執(zhí)行，但是在初始時刻條件就是假的，所以循環(huán)體內(nèi)的代碼不會執(zhí)行。
具體來說，下面是循環(huán)的執(zhí)行過程：
- 首先，創(chuàng)建變量?
i?并初始化為?0。 - 接著，檢查循環(huán)條件?
i === 1?是否為真。由于?0?不等于?1，所以條件為假。 - 因為循環(huán)條件為假，循環(huán)體內(nèi)的代碼不會執(zhí)行。
- 循環(huán)結(jié)束，進(jìn)入后續(xù)的代碼邏輯。
因此，該循環(huán)一次也不會進(jìn)入，直接跳過循環(huán)體。如果希望循環(huán)執(zhí)行，應(yīng)該將循環(huán)條件改為 i !== 1，即當(dāng) i 不等于 1 時循環(huán)執(zhí)行。
再舉例：（判斷閏年）
// 1. 用戶輸入
let year = +prompt('請輸入年份')
// 2. 判斷輸出
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert(`${year}年是閏年`)
} else {
alert(`${year}年是平年`)
}
?
?
?例如：
switch (2) {
case 1:
console.log(1)
break
case 2:
console.log(2)
break
default:
console.log(3)
break
}這個結(jié)果一定是2 ，
在 switch 語句中，當(dāng)表達(dá)式的值與某個 case 的值匹配時，會執(zhí)行該 case 下的代碼塊，并且在代碼塊的最后使用 break 關(guān)鍵字來結(jié)束 switch 語句。如果沒有匹配的 case，則會執(zhí)行 default 下的代碼塊。
根據(jù)代碼中的 switch (2)，表達(dá)式的值為 2。因此，程序會跳過 case 1 中的代碼塊，進(jìn)入 case 2。在 case 2 下，會執(zhí)行 console.log(2)，打印輸出 2。然后遇到 break 關(guān)鍵字，結(jié)束 switch 語句。
沒有其他的 case 匹配 2，所以不會執(zhí)行 default 下的代碼塊。因此，輸出結(jié)果只有 2。
但是如果代碼變成
switch (2) {
case 1:
console.log(1)
break
case 2:
console.log(2)
default:
console.log(3)
break
}那么結(jié)果就會變成 2 3
取款機(jī)案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 開始循環(huán) 輸入框?qū)懙?循環(huán)里面
// 3. 準(zhǔn)備一個總的金額
let money = 100
while (true) {
let re = +prompt(`
請您選擇操作：
1.存錢
2.取錢
3.查看余額
4.退出
`)
// 2. 如果用戶輸入的 4 則退出循環(huán)， break 寫到if 里面，沒有寫到switch里面， 因為4需要break退出循環(huán)
if (re === 4) {
break
}
// 4. 根據(jù)輸入做操作
switch (re) {
case 1:
// 存錢
let cun = +prompt('請輸入存款金額')
money = money + cun
break
case 2:
// 存錢
let qu = +prompt('請輸入取款金額')
money = money - qu
break
case 3:
// 存錢
alert(`您的銀行卡余額是${money}`)
break
}
}
</script>
</body>
</html>
?關(guān)于for?循環(huán)：
（九九乘法表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
</style>
</head>
<body>
<script>
// 1. 外層循環(huán)控制行數(shù)
for (let i = 1; i <= 9; i++) {
// 2. 里層循環(huán)控制列數(shù)
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} X ${i} = ${i * j}</span>`)
}
// 換行
document.write('<br>')
}
</script>
</body>
</html>
?
（打印五角星）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// // 外層循環(huán)打印行數(shù)
// for (let i = 1; i <= 5; i++) {
// // 里層循環(huán)打印幾個星星
// for (let j = 1; j <= 5; j++) {
// document.write('☆')
// }
// // 進(jìn)行換行顯示
// document.write('<br>')
// }
let row = +prompt('請輸入行數(shù):')
let col = +prompt('請輸入列數(shù):')
// 外層循環(huán)打印行數(shù)
for (let i = 1; i <= row; i++) {
// 里層循環(huán)打印幾個星星
for (let j = 1; j <= col; j++) {
document.write('☆')
}
// 進(jìn)行換行顯示
document.write('<br>')
}
</script>
</body>
</html>（打印直角三角形）
// 1. 外層循環(huán)控制行數(shù)
for (let i = 1; i <= 5; i++) {
// 2. 里層循環(huán)控制列數(shù)（幾個星星）
for (let j = 1; j <= i; j++) {
document.write('◆')
}
// 換行
document.write('<br>')
}
文章來源：http://www.zghlxwxcb.cn/news/detail-559939.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-559939.html
到了這里，關(guān)于JavaWeb（3）——HTML、CSS、JS 快速入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[JavaWeb]【一】入門JavaWeb開發(fā)總概及HTML、CSS、JavaScript](https://imgs.yssmx.com/Uploads/2024/02/652989-1.png)
