文章目錄

• 1.運算符
• • 1.1算術運算符
  • • 概念
    • 符號
    • 優先級
    • • 優先級定義：
      • 優先級規則：
    • 實例
  • 1.2賦值運算符
  • • 概念
    • 運算符
    • 實例
  • 1.3一元運算符
  • • n元運算符概念
    • 自增與自減
    • • 基本概念
      • • 自增
        • 自減
      • 使用場景
      • 前置與后置運算符（難點，以前置自增++i和后置自增i++為例）
      • • 共同點：
        • 區別：
        • 實際開發中
        • 面試題
  • 1.4比較運算符
  • • 比較運算符的介紹
    • 比較運算符符號：
    • 比較結果
    • 細節
    • 實例
  • 1.5 邏輯運算符
  • • 作用
    • 符號
    • 邏輯運算符里的短路
    • 實例
  • 1.6 運算符優先級
• 2.語句
• • 2.1 表達式與語句
  • • 表達式
    • 語句
    • 表達式與語句的區別：
    • 程序三大流程控制語句（順序、分支、循環）**
  • 2.2.分支語句
  • • 2.2.1. if語句
    • • 單分支
      • 雙分支if語句
      • • 語法：
        • 案例
      • 多分支if語法：
      • • if語法
        • 執行規則
        • 實例
    • 2.2.2. 三元運算符
    • • • • 符號：
        • 實例：
    • 2.2.3 switch 語句
    • • • 釋義：
        • 注意事項
        • 實例
  • 2.3.循環語句
  • • 2.3.1 while 循環
    • • 概念
      • 語法
      • while 循環注意事項：
      • • 循環需要具備三要素：
      • 實例
    • 2.3.2 循環退出
    • continue和break的區別（以面試流程為例）
    • • continue：
      • break：
      • 實例
• 3.綜合案例-簡易ATM取款機案例

1.運算符

算術運算符
賦值運算符
一元運算符
比較運算符
邏輯運算符
運算符優先級

1.1算術運算符

概念

數學運算符也叫算術運算符，主要包括加、減、乘、除、取余（求模）。

符號

+：求和

-：求差

*：求積

/：求商

%：取模（取余數，被除數大于除數正常取余數，如7%5=2，若除數大于被除數，則結果為被除數，如5%7 =5，開發中經常作為某個數字是否被整除）

優先級

先乘除取余，后加減，有小括號先算小括號里面的

優先級定義：

同時使用多個運算符編寫程序時，會按著某種順序先后執行，我們稱為優先級。

優先級規則：

JavaScript中 優先級越高越先被執行，優先級相同時以書從左向右執行。

乘、除、取余優先級相同

加、減優先級相同

乘、除、取余優先級大于加、減

使用 () 可以提升優先級

總結： 先乘除后加減，有括號先算括號里面的~~~

實例

例1

<script>console.log(4/2)console.log(3%2)console.log(2%3)console.log(5%7)</script>

輸出結果：

例2計算圓的面積

需求：對話框中輸入圓的半徑，算出圓的面積并顯示到頁面

分析：
①：面積的數學公式： π*r2

②：轉換為JavaScript寫法 ： 變量 * r * r
修正前代碼

<script>let r = prompt('請輸入半徑r:')document.write('計算后圓的面積S為',3.14*r*r)</script>

參考代碼（注意模板字符串問題，反引號``與’ '不要混合使用）

<script>let r = prompt('請輸入半徑r:')let S = 3.14*r*rdocument.write(`計算后圓的面積為:${S}`)</script>

1.2賦值運算符

概念

對變量進行賦值的運算符

運算符

常見 = ：將等號右邊的值賦予給左邊, 要求左邊必須是一個容器

其他符號
1）+=
例：num+=3
相當于num=num+3

2） -=
例：num-=3
相當于num=num-3
3）* =
例：num * =3
相當于num=num * 3
4） /=
例：num / =3
相當于num=num / 3

5）%=
例：num % =3
相當于num=num %3

實例

<script>let age =21// age = age + 1age =age + 3// age +=3console.log(age)</script> <script>let age =21// age = age + 1// age =age + 3age +=3console.log(age)</script>

輸出結果

1.3一元運算符

n元運算符概念

眾多的 JavaScript 的運算符可以根據所需表達式的個數，分為一元運算符、二元運算符、三元運算符

一元運算符：例： 正負號
二元運算符 ：例: let num = 10+26

自增與自減

基本概念

自增

符號：++

作用：讓變量的值 +1

自減

符號：–

作用：讓變量的值 -1

使用場景

經常用于計數來使用。 比如進行10次操作，用它來計算進行了多少次了

前置與后置運算符（難點，以前置自增++i和后置自增i++為例）

共同點：

單獨使用沒有區別每執行1次，當前變量數值加1

其作用相當于 num += 1

例

<script>let num = 10// 一元運算符// ++num 等于 num+= 1num++console.log(num)// ++num// console.log(num)</script>

<script>let num = 10// 一元運算符// ++num 等于 num+= 1// num++// console.log(num)++numconsole.log(num)</script>

區別：

前置自增（++i）：先自加再使用（記憶口訣：++在前 先加）
后置自增（i++）：先使用再自加（記憶口訣：++在后 后加）

例
1.前置自增（++i）

<script>// let num = 10// 一元運算符// ++num 等于 num+= 1// num++// console.log(num)// ++num// console.log(num)// 前置自增let i = 1// 先自加 再使用console.log(++i + 2)console.log(i)// 后置自增// 先使用 后自加// console.log(i++ + 2)// console.log(i)</script>

2. 后置自增（i++）：

<script>// let num = 10// 一元運算符// ++num 等于 num+= 1// num++// console.log(num)// ++num// console.log(num)// 前置自增let i = 1// 先自加 再使用// console.log(++i + 2)// console.log(i)// 后置自增// 先使用 后自加console.log(i++ + 2)console.log(i)</script>

實際開發中

一般開發中我們都是獨立使用 前置自增++i和后置自增i++，后面 i++ 后置自增會使用相對較多。

面試題

分析

（到各類運算符執行順序更容易明白）
i++先參與加法運算后自增，此時執行step1時i=1，然后執行自增（step2），i=2,同時step3中i的初始值為2，接著執行step3,++i先自增后參與運算，i的值自增為3后，參與到step1，此時i++ + ++i==1+3,，i的值仍然為3，最后執行step4,i的值為3，即1+3+i=4+3=7=i++ + ++i + i
驗證

<script>// let num = 10// 一元運算符// ++num 等于 num+= 1// num++// console.log(num)// ++num// console.log(num)// 前置自增let i = 1// 先自加 再使用// console.log(++i + 2)// console.log(i)// 后置自增// 先使用 后自加// console.log(i++ + 2)// console.log(i)console.log(i++ + ++i + i)</script>

1.4比較運算符

比較運算符的介紹

作用：比較兩個數據大小、是否相等

實際場景使用：

比較運算符符號：

（1）> ： 左邊是否大于右邊

（2） <： 左邊是否小于右邊

（3） >=： 左邊是否大于或等于右邊

（4） <=： 左邊是否小于或等于右邊

（5）==： 左右兩邊是否相等

（6） ===： 左右兩邊是否類型和值都相等，要求值和數據類型都一樣返回的才是true

（7）!==： 左右兩邊是否不全等

比較結果

結果為boolean類型，即只會得到true或false

細節

（1）字符串比較（比較的少，了解即可）

比較的字符對應的ASCII碼

1.從左往右依次比較

2.如果第一位一樣再比較第二位，以此類推

（2）NaN不等于任何值，包括它本身

（3）盡量不要比較小數，因為小數有精度問題

（4）不同類型之間比較會發生隱式轉換

不同類型之間比較會發生隱式轉換，最終把數據隱式轉換轉成number類型再比較，所以開發中，如果進行準確的比較我們更喜歡 === 或者 !==

實例

<script>console.log(3 > 5)console.log(5 >= 5)console.log(5 == 5)// 只要值一樣就是true 不管數據類型//結果為trueconsole.log(5 == '5')console.log(5 =='pink')// === 以后判斷要用 === 開發常用 要求值和數據類型都一樣console.log(5 === 5)console.log(5 === '5')//false// 特殊情況// p的ASCII碼小于r的ASCII碼console.log('pink'>'red')//falseconsole.log('pink'> 'pin')console.log(1 === NaN)//結果為falseconsole.log(NaN === NaN)// 小數涉及到精度問題console.log(0.1+0.2 === 0.3)//falseconsole.log(0.1 + 0.2)console.log(3 > '2')</script>

1.5 邏輯運算符

作用

邏輯運算符用來解決多重條件判斷

符號

邏輯運算符里的短路

短路：只存在于 && 和 || 中，當滿足一定條件會讓右邊代碼不執行
即：當滿足一定條件，執行輸出左邊表達式的結果或左邊的值，不執行輸出右邊表達式結果或右邊的值
tips:markdown表格中打“||”直接用豎線打不出，使用兩個大寫的i可以順利打出

符號短路條件

&&	左邊為false就短路（即左邊式子為假，就輸出左邊式子對應的結果）
II	左邊為true就短路（即左邊式子為真，就輸出左邊式子對應的結果）

原因：通過左邊能得到整個式子的結果，因此沒必要再判斷右邊

運算結果：無論 && 還是 || ，運算結果都是最后被執行的表達式值，一般用在變量賦值
注意： // 有5個值是當 false 來看的 ： false 、數字0 、" ‘’、 undefined 、 null ，其余是真

實例

<script>// 邏輯與 一假則假console.log(true && true)console.log(false && true)// 邏輯或 一真即真console.log(false || true)console.log(false || false)// 邏輯非 取反console.log(!true)console.log(!false)// 短路問題// 有5個值是當 false 來看的 其余是真的// false 數字0 '' undefined null // 邏輯與短路console.log(false && 20) //falseconsole.log(undefined && 20) //&& 一假即假，左側undefined為假，短路，輸出左側undefinedconsole.log(5<3 && 20); //&& 一假即假，左側5<3為假，短路，輸出左側5<3比較運算符表達式結果，輸出falseconsole.log(null && 20)//&& 一假即假,左側null為假，短路，輸出左側nullconsole.log(0 && 20)//&& 一假即假，左側null為假,短路，輸出左側0console.log(10 && 20)//&& 一假即假，但左側10為真，不短路，輸出右側結果20// 邏輯或短路console.log(false || 20) // || 一真即真，左側為真短路，左側為false，為假，不短路，輸出右側20console.log(undefined && 20)// || 一真即真，左側為真短路，左側為undefined，為假，不短路，輸出右側20console.log(5<3 && 20); // || 一真即真，左側為真短路，左側為5<3，為假，不短路，輸出右側20console.log(null && 20)//|| 一真即真，左側為真短路，左側為null，為假，不短路，輸出右側20console.log(0 && 20)// || 一真即真，左側為真短路，左側為0，為假，不短路，輸出右側20console.log(10 && 20)//|| 一真即真，左側為真短路，左側為10，為假，短路，輸出左側10</script>

輸出結果

1.6 運算符優先級

一元運算符里面的邏輯非（！）優先級很高，邏輯與（&&）比邏輯或（||）優先級高

2.語句

2.1 表達式與語句

表達式

表達式是一組代碼的集合，JavaScript解釋器會將其計算出一個結果，如：3+4、i++、x=1等。

語句

整句或命令，js 語句是以分號結束（可以省略），比如： if語句 for 循環語句。

表達式與語句的區別：

表達式計算出一個值，但語句用來執行以使某件事發生(做什么事)
如：

表達式 3 + 4 ，計算3+4的結果

語句 alert() 彈出對話框

其實某些情況，也可以把表達式理解為語句，因為它是在計算結果，也是做事。

程序三大流程控制語句（順序、分支、循環）**

2.2.分支語句

分支語句可以讓我們有選擇性的執行想要的代碼

分支語句包含：If分支語句、三元運算符、switch 語句

2.2.1. if語句

if語句有三種使用：單分支、雙分支、多分支

單分支

括號內的條件為true時，進入大括號里執行代碼

小括號內的結果若不是布爾類型時，會發生隱式轉換轉為布爾類型
例：

<script>let a = prompt('請輸入內容')if ( a ==0 ){alert(11)}// if里面的小括號都會給我們轉換為 布爾型// false 0 '' undefined null NaNif (a == NaN){console.log('true')}</script>

雙分支if語句

語法：

案例

案例1：用戶輸入，如果工齡大于1年，年底獎金+2000， 否則年底沒獎金

<script>let salary = 8000let workyear = +prompt("請輸入工齡（0~10）") if (workyear >= 1){salary += 2000document.write(`年終獎為${salary}`)}else{alert(`您無法獲得年終獎`)}</script>

案例2：讓用戶輸入年份，判斷這一年是閏年還是平年并輸出

能被4整除但不能被100整除，或者被400整除的年份是閏年，否則都是平年

<script>let year = prompt("請輸入年份")if (year % 4 === 0 || year % 400 === 0 && year % 100 !== 0){alert(`${year}年是閏年`)}else{alert(`${year}年是平年`)}</script>

輸出結果

多分支if語法：

if語法

執行規則

先判斷條件1，若滿足條件1就執行代碼1，其他不執行

? 若不滿足則向下判斷條件2，滿足條件2執行代碼2，其他不執行

? 若依然不滿足繼續往下判斷，依次類推

? 若以上條件都不滿足，執行else里的代碼n

? 注：可以寫N個條件，但這里演示只寫2個

實例

根據輸入不同時間，輸出不同的問候語

? 注：

? 12點以前， 輸出上午好

? 18點以前， 輸出下午好

? 20點以前， 輸出晚上好

// // 1. 用戶輸入時間 等我們學api 自動獲取時間let time = prompt("請輸入時間：")// 2. 多分支判斷if (time<=12) {alert('Good morning')} else if( time <= 18) {alert('Good afternoon!')}else{alert('Good evening!')}// 12 - 18 下午// 我們輸入的時間 要大于12 并且小于 18 算下午// time >12 && time < 18</script>

2.2.2. 三元運算符

符號：

? 與 : 配合使用

語法：
相當于if（）{}else{}
即

一般用來取值

實例：

<script>console.log(true ? 1:2)console.log(false ? 1 :2)</script>

2.判斷2個數的最大值

需求：用戶輸入2個數，控制臺輸出最大的值

分析：
①：用戶輸入2個數

②：利用三元運算符輸出最大值

<script>let a = +prompt('請輸入第一個數')let b = +prompt('請輸入第二個數')let resultresult = alert(a > b ? `最大值是第一個數${a}`: `最大值是第二個數${b}`)</script>

3.數字補零

<script>// 1. 用戶輸入數字let num = + prompt('請輸入一個數字:')// 2. 判斷條件是 小于 10 則數字前面 + '0' 01 否則 不補// let res = num >= 10 ? num : '0' + numlet resres = document.write(num < 10 ? '0' + num : num)</script>

2.2.3 switch 語句

釋義：

1）找到跟小括號里數據全等的case值，并執行里面對應的代碼

2）若沒有全等 === 的則執行default里的代碼， 例：數據若跟值2全等，則執行代碼2

注意事項

switch case語句一般用于等值判斷,不適合于區間判斷

switch case一般需要配合break關鍵字使用 沒有break會造成case穿透

實例

<script>switch (2){case 1:alert(1)breakcase 2:alert(2)breakcase 3:alert(3)breakdefault:alert('沒有數據')}</script>

實例 2：

<script>switch (1){case 1:alert(1)case 2:alert(2)breakcase 3:alert(3)breakdefault:alert('沒有數據')}</script>

3.簡單計算器
需求：用戶輸入2個數字，然后輸入 + - * / 任何一個，可以計算結果

<script>let num1 = +prompt('請輸入第一個數字:')let num2 = +prompt('請輸入第二個數字:')let str = prompt('請輸入符號+ - * / 任何一個')let resswitch (str){case '+':res = num1 +num2document.write(`您選擇的是加法，結果是:${res}`)breakcase '-':res = num1 - num2document.write(`您選擇的是減法，結果是:${res}`)breakcase '*':res =num1 * num2document.write(`您選擇的是乘法，結果是:${res}`)breakcase '/':res =num1 / num2document.write(`您選擇的是除法，結果是:${res}`)breakdefault:document.write('請重新輸入')}</script>

2.3.循環語句

2.3.1 while 循環

概念

循環：重復執行某段代碼， 而 while : 在…. 期間

語法

釋義：
while跟if語句很像，都要滿足小括號里的循環條件為true才會進入執行代碼，
while大括號里代碼執行完畢后不會跳出，而是繼續回到循環條件的小括號里判斷循環條件是否滿足，
若滿足小括號里的條件，則又再次執行大括號里的代碼，然后再回到小括號判斷條件，
直到小括號內條件為假不滿足時，結束循環。

while 循環注意事項：

循環的本質就是以某個變量為起始值，然后不斷產生變化量，慢慢靠近終止條件的過程。
所以，

循環需要具備三要素：

變量起始值

終止條件（沒有終止條件，循環會一直執行，造成死循環）

變量變化量（用自增或者自減）

實例

1.在頁面中打印輸出10句“月薪過萬”

<script>let i = 1while(i <= 10){document.write(`月薪過萬！<br>`)i++}</script>

注意：要有變量起始值，否則會有空頁面現象

2.頁面輸出1-100

<script>let num = 1while( num <= 100){document.write(`${num} <br>`)num++}</script>

3.計算從1加到100的總和并輸出

核心思路：
1.聲明累加和的變量 sum
2.每次把 i 加到 sum 里面

<script>let i = 1let sum = 0while(i <=100){sum += ii++}document.write(`1~100的累加和是${sum}`)</script>

4.計算1-100之間的所有偶數和
思路：在實例3基礎上添加 偶數判斷條件： i % 2 == 0，進行偶數判斷

<script>let i = 1let sum = 0while(i <=100 ){if( i % 2 == 0){sum += i}i++}document.write(`1~100的偶數累加和是${sum}`)</script>

反例（1~100奇數和）

<script>let i = 1let sum = 0while(i <=100 ){if( i % 2 != 0){// 此時 i 一定是偶數sum += i}// 不管你是偶數還是奇數我都要++i++}document.write(`1~100的奇數累加和是${sum}`)</script>

2.3.2 循環退出

continue和break的區別（以面試流程為例）

continue：

結束本次或當前這一輪滿足循環條件的循環，繼續下次或下一輪滿足循環條件的循環。

相當于
你去b公司面試web前端工程師崗位，總共要進行n輪面試
首先， 你經歷了一輪又一輪的面試
然后 ，然而正當你要進行第n-3輪面試時，continue一下，由于你獲得內推，你就不用進行第n-3輪面試
接著，直接繼續進行第n-2輪面試，之后你又通過后面一輪又一輪的面試
最后，直到第n輪面試結束，你和b公司之間的所有面試就結束了，且比原有流程少了一輪。

break：

結束本次或當前這一輪滿足循環條件的循環，并跳出和終止所在的后續的所有無論是否滿足循環條件的所有循環。

相當于
你去b公司面試web前端工程師崗位，總共要進行n輪面試
首先 ，你經歷了一輪又一輪的面試
然后， 你要進行第n-3輪面試時，break一下，由于你這輪沒有表現好，面試官和公司領導不滿意，你在第n-3輪面試掛了，面試失敗，面試結束
最后 ，你與b公司總共進行了n-3輪面試，沒有繼續面試第n-2輪面試，沒有面試完第n輪，且在第n-3輪面試失敗了，結束了面試。

實例

1.continue和break區別

場景：你去b公司面試web前端工程師崗位，總共要進行5輪面試，進行到第2輪面試時:

contine實例

獲得內推，免于本輪面試

<script>let i = 1while (i <= 5){if ( i === 2 ){i++continue}document.write(`我和你進行第${i}輪面試，面試成功<br>`)i++} </script>

break實例

面試不通過，終止面試

<script>// 我們打印進行面試let i = 1while (i <= 5){if ( i === 2 ){document.write(`我和你進行第${i}輪面試，面試失敗，面試結束<br>`)break}document.write(`我和你進行第${i}輪面試，面試成功<br>`)i++}</script>

2.頁面彈框
需求：頁面彈出對話框，‘你愛我嗎’，如果輸入‘愛’，則結束，否則一直彈出對話框
分析：
①：循環條件永遠為真，一直彈出對話框
②：循環的時候，重新讓用戶輸入
③：如果用戶輸入的是： 愛，則退出循環 （break）
我的代碼：

<script>let ask = alert('你愛我嗎？')let ans =prompt('我：')while(ans != '愛' ){if(ans == '愛'){break}ask = alert('你愛我嗎？')}</script>

參考代碼：

<script>while (true) {let str = prompt('如果是我DJ，你還愛我嗎?')if (str === '愛') {alert('我也愛你啊~~')break}}</script>

3.綜合案例-簡易ATM取款機案例

需求：用戶可以選擇存錢、取錢、查看余額和退出功能

初始代碼(bug多)

<script>let money,varymoney let op = +prompt(`請選擇您的操作：1.取款2.存款3.查看余額4.退出 `)while( money = 0){varymoney = + alert('請輸入存入金額')money += varymoneyalert(`您一共存了${money}元`)}switch(op =prompt(`您的操作是${op}`)){case 1:varymoney = alert('請輸入存入金額')money += varymoneyalert(`您一共存了${varymoney}元`)case 2:{varymoney = + alert('請輸入取出金額')money -= varymoneyalert(`您一共取了${varymoney}元`)}case 3:{alert(`您的余額為${money}元`)}case 4:{break} }</script>

思路:
①：循環的時候，需要反復提示輸入框，所以提示框寫到循環里面

②：退出的條件是用戶輸入了 4，如果是4，則結束循環，不在彈窗
③：提前準備一個金額預先存儲一個數額

④：取錢則是減法操作， 存錢則是加法操作，查看余額則是直接顯示金額

⑤：輸入不同的值，可以使用switch來執行不同的操作
參考代碼

<script>// 1. 不斷的彈出對話框// 3. 金額的變量let money = 100while (true) {let str = prompt(`請您選擇操作:1. 存錢2. 取錢3. 查看余額4. 退出`)// 2. 除非輸入的是4 則退出循環 breakif (str === '4') {break}// 4. switch 加減操作switch (str) {case '1':let cun = +prompt('請您輸入存錢的金額:')// money = money + cun money += cunbreakcase '2':let qu = +prompt('請您輸入取錢的金額:')money -= qubreakcase '3':alert(`您卡上的余額是${money}元`)break}}

優化和修正后的代碼
思路：
1.當賬戶為空，先讓用戶存款
2.不斷的彈出對話框
3.switch獲取用戶操作信息，并控制用戶行為
4.除非輸入的是4 ，則退出循環 break

<script>let money = 0let varymoney // 1.當賬戶為空，先存款if(money == 0){varymoney = prompt(`賬戶余下金額不能為空，請輸入存入金額`)money += varymoneyalert(`您一共存了${varymoney}元`)}// 2.不斷的彈出對話框while (true){let op = prompt(`請選擇您的操作:1.存款2.取款3.查看余額4.退出 `)// 3.switch加減操作switch(op){case '1':varymoney = prompt(`您在進行${op}.存款,請輸入存入金額`)money += varymoneyalert(`您一共存了${varymoney}元`)breakcase '2':varymoney = prompt(`您在進行${op}.取款,請輸入取出金額`)money -= varymoneyalert(`您一共取了${varymoney}元`)breakcase '3':alert(`您在進行${op}.查看余額,您的余額為${money}元`)break// 4..除非輸入的是4 則退出循環 break}if (str === '4') {break}}</script>

總結

以上是生活随笔為你收集整理的前端JavaScript自学复盘梳理D2的全部內容，希望文章能夠幫你解決所遇到的問題。

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