目錄

變數

1. 變數的概述

2. 變數的使用

3. 變數語法擴展

4. 變數命名規范

資料型別

1. 資料型別簡介

2. 基本資料型別

3. 獲取變數資料型別

4. 資料型別轉換

運算子

1. 運算子

2. 算數運算子

3. 遞增和遞減運算子

4. 比較運算子

5. 邏輯運算子

6. 賦值運算子

7. 運算子優先級

流程控制

1. 流程控制

2. 順序流程結構

3. 分支流程控制 if 陳述句

5. 分支流程控制 switch 陳述句

流程控制-回圈

1. 回圈

2. for 回圈

3. 雙重 for 回圈

4. wihile 回圈

5. do wihile 回圈

6. continue break

---

變數

1. 變數的概述

1.1 什么是變數

白話：變數就是一個裝東西的盒子，

通俗：變數是用于存放資料的容器，我們通過 變數名 獲取資料，甚至資料可以修改，

1.2 變數在記憶體中的存盤

本質：變數是程式在記憶體中申請的一塊用來存放資料的空間，

類似我們酒店的房間，一個房間就可以看做是一個變數，

2. 變數的使用

變數在使用是分為兩步：1. 宣告變數 2. 賦值

2.1 宣告變數

JavaScript有三種宣告方式，

var 宣告一個變數，可選初始化一個值
let 宣告一個塊作用域的區域變數，可選初始化一個值，
const 宣告一個塊作用域的只讀常量

let age    // 宣告一個名稱為age 的變數

• let 是一個 JS關鍵字，用來宣告變數( variable 變數的意思 )，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，不需要程式員管
• age 是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間

2.2 賦值

age = 10    // 給age 這個變數賦值為 10

• = 用來把右邊的值賦給左邊的變數空間中 此處代表賦值的意思
• 變數值是程式員保存到變數空間里的值

2.3 變數的初始化

let age = 18    // 宣告變數同時賦值為 18

宣告一個變數并賦值， 我們稱之為變數的初始化，

3. 變數語法擴展

3.1 更新變數

一個變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，

let age = 18
age = 81    // 最后的結果就是81 因為 18被覆寫掉了

3.2 同時宣告多個變數

同時宣告多個變數時，只需要寫一個let， 多個變數名之間使用英文逗號隔開，

let age = 10, name = 'FH', sex = 2;

3.3 宣告變數特殊情況

情況	說明	結果
let age;console.log(age)	只宣告 不賦值	undefined
console.log(age)	不宣告 不賦值 直接使用	報錯
age = 10;console.log(age)	不宣告 只賦值	10

4. 變數命名規范

• 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
• 嚴格區分大小寫，var app; 和 var App; 是兩個變數
• 不能 以數字開頭，18age 是錯誤的
• 不能 是關鍵字、保留字，例如：var、for、while
• 變數名必須有意義， MMD BBD nl → age
• 遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫， myFirstName

資料型別

1. 資料型別簡介

1.1 為什么需要資料型別

在計算機中，不同的資料所需占用的存盤空間是不同的，為了便于把資料分成所需記憶體大小不同的資料，充分利 用存盤空間，于是定義了不同的資料型別，

簡單來說，資料型別就是資料的類別型號，比如 姓名“張三”，年齡18，這些資料的型別是不一樣的，

1.2 變數的資料型別

變數是用來存盤值的所在處，它們有名字和資料型別，變數的資料型別決定了如何將代表這些值的位存盤到計算機的 記憶體中，JavaScript 是一種弱型別或者說動態語言，這意味著不用提前宣告變數的型別，在程式運行程序中，型別會 被自動確定，

let age = 10            // 這是一個數字型
let areYouOK = '是的'   // 這是一個字串

在代碼運行時，變數的資料型別是由 JS引擎 根據 = 右邊變數值的資料型別來判斷 的，運行完畢之后， 變數就確定了資料型別，

1.3 資料型別的分類

JS 把資料型別分為兩類：

• 基本資料型別（Number,String,Boolean,Undefined,Null）
• 引入資料型別 （object)

2. 基本資料型別

2.1 基本資料型別

基本資料型別	說明	默認值
Number	數字型，包含 整型值和浮點型值，如 21、0.21	0
Boolean	布林值型別，如 true、false，等價于 1 和 0	false
String	字串型別，如 '張三' 注意咱們js 里面，字串都帶引號	""
Undefined	var a; 宣告了變數a 但是沒有賦值，此時 a = undefined	undefined
Null	var a = null; 宣告了變數a 為空值	null

2.2 數字型 Number

JavaScript 數字型別既可以用來保存整數值，也可以保存小數（浮點數），

let age = 21         // 整數
let Age = 21.3747    // 小數

2.3 字串型別 String

字串型可以是引號中的任意文本，其語法為 雙引號"" 和 單引號''

let strMsg = "你好"       // 使用雙引號表示字串
let strMsg2 = '你也好'    // 使用單引號表示字串
// 常見錯誤
let strMsg3 = 你好        // 報錯，沒使用引號，會被認為是js代碼，但js沒有這些語法

因為 HTML 標簽里面的屬性使用的是雙引號，JS 這里我們更推薦使用單引號，

2.4 布爾型 Boolean

布爾型別有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯），

console.log(true + 1)        // 2 參與加法運算當1來看
console.log(false + 1)       // 1 參與加法運算當0來看

2.5 Undefined 和 Null

一個宣告后沒有被賦值的變數會有一個默認值 undefined ( 如果進行相連或者相加時，注意結果）

let variable
console.log(variable)			// undefined
console.log('你好' + variable)	// 你好undefined
console.log(11 + variable)		// NaN
console.log(true + variable)    // NaN

一個宣告變數給 null 值，里面存的值為空

let vari = null
console.log('你好' + vari)		// 你好vari
console.log(11 + vari)			// 11
console.log(true + vari)		// 1

3. 獲取變數資料型別

3.1 獲取檢測變數的資料型別

typeof 可用來獲取檢測變數的資料型別

let num = 18
console.log(typeof num)	// 回傳 number

3.2 字面量

字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值，

• 數字字面量：8，9，10
• 字串字面量：'程式員'，"大前端"
• 布爾字面量：true，false

4. 資料型別轉換

4.1 什么是資料型別轉換

使用表單、prompt 獲取過來的資料默認是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別，通俗來說，就是把一種資料型別的變數轉換成另外一種資料型別，

我們通常會實作3種方式的轉換：

• 轉換為字串型別
• 轉換為數字型

4.2 轉換為字串

toString()

let num = 1
alert(num.toString())

String()強制轉換

let num = 1
alert(String(num))

加號拼接字串

let num = 1
alert(num + '我是字串')

• toString() 和 String() 使用方式不一樣，
• 三種轉換方式，我們更喜歡用第三種加號拼接字串轉換方式，這一種方式也稱之為隱式轉換，

4.3 轉換為數字型

parselnt(string)函式，將string型別轉成整數數值型

parselnt('78')

parseFloat(string)函式，將string型別轉成浮點數值型

parseFloat('78.21')

Number()強制轉換函式，將string型別轉成數值型

Number('12')

js 隱式轉換( - * / )，利用算術運算隱式轉換為數值型

'12' - 0

• 注意 parseInt 和 parseFloat 單詞的大小寫
• 隱式轉換是我們在進行算數運算的時候，JS自動轉換了資料型別

4.4 轉換為布爾型

Boolean()函式，其他型別轉成布林值

Boolean('true')

• 代表空、否定的值會被轉換為 false ，如 ''、0、NaN、null、undefined
• 其余值都會被轉換為 true

console.log(Boolean(''))    // false
console.log(Boolean(0))    // false
console.log(Boolean(NaN))    // false
console.log(Boolean(null))    // false
console.log(Boolean(undefined))    // false
console.log(Boolean(123))    // true
console.log(Boolean('你好嗎'))    // true
console.log(Boolean('我很好'))    // true

運算子

1. 運算子

運算子（operator）也被稱為運算子，是用于實作賦值、比較和執行算數運算等功能的符號，

JavaScript 中常用的運算子有：

• 算數運算子
• 遞增和遞減運算子
• 比較運算子
• 邏輯運算子
• 賦值運算子

2. 算數運算子

2.1 算數運算子概述

概念：算數運算使用的符號，用于執行兩個變數或值的算術運算，

運算子	描述	實體
+	加	10 + 20 = 30
-	減	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余數（取模）	回傳除法的余數 9 % 2 = 1

2.2 浮點數的精度問題

浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數，

console.log(0.1 + 0.2)    // 結果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100)   // 結果不是 0.7，而是：7.000000000000001

所以：不要直接判斷兩個浮點數是否相等！

2.3 運算式和回傳值

運算式：是由數字、運算子、變數等以能求得數值的有意義排列方法所得的組合

簡單理解：是由數字、運演算法、變數等組成的式子

運算式最終都會有一個結果，回傳給我們，我們稱為回傳值

3. 遞增和遞減運算子

3.1 遞增和遞減運算子概述

如果需要反復給數字變數添加或減去1，可以使用遞增（++）和遞減（--）運算子完成，

遞增（++）和遞減（--）既可以放在變數前面，也可以放在變數后面，放在變數前面時，稱為前置遞增（遞減）運算子，放在變數后面時，稱為后置遞增（遞減）運算子，

注意：遞增和遞減運算子必須和變數配合使用，

3.2 遞增運算子

1. 前置遞增運算子

++num 前置遞增，就是自加1，類似于 num = num + 1，

使用口訣：先自加，后回傳原值

2. 后置遞增運算子

num++ 后置遞增，就是自加1，類似于 num = num + 1，

使用口訣：先回傳原值，后自加

3.3 前置遞增和后置遞增小結

• 前置遞增和后置遞增運算子可以簡化代碼的撰寫,讓變數的值+ 1比以前寫法更簡單
• 單獨使用時,運行結果相同
• 與其他代碼聯用時,執行結果會不同
• 后置:先原值運算,后自加(先人后己)
• 前置:先自加，后運算(先已后人)

4. 比較運算子

4.1 比較運算子概述

概念：比較運算子（關系運算子）是兩個資料進行比較時所使用的運算子，比較運算子后，會回傳一個布林值（ture / false）作為比較運算的結果，

運算子名稱	說明	案例	結果
<	小于號	1 < 2	true
>	大于號	1 > 2	false
>=	大于等于號（大于或等于）	2 >= 2	true
<=	小于等于號（小于或等于）	3 <= 2	false
==	判等號（會轉型）	37 == 37	true
!=	不等號	37 != 37	false
=== !==	全等 要求值和 資料型別都一致	37 === '37'	false

4.2 =小結

符號	作用	用法
=	賦值	把右邊給左邊
==	判斷	判斷兩邊值是否相等（注意此時有隱式轉換）
===	全等	判斷兩邊的值和資料型別是否完全相同

console.log(18 == '18')     // true
console.log(18 === '18')	// false

5. 邏輯運算子

5.1 邏輯運算子概況

概念：邏輯運算子是用來進行布林值運算的運算子，其回傳值也是布林值，后面開發中經常用于多個條件的判斷

邏輯運算子	說明	案例
&&	“邏輯與”，簡稱 “與” and	true && false
||	“邏輯或”，簡稱 “或” or	true || false
!	“邏輯非”，簡稱 “非” not	! true

5.2 邏輯與&&

兩邊都是 ture 才回傳 true，否則回傳 false

5.3 邏輯或||

兩邊都是 false 才回傳 false，否則回傳 true

5.4 邏輯非！

邏輯非 ( ! ) 也叫取反符，用來去一個布林值相反的值，如 true 的相反值是 false

let isOk = !true
console.log(isOk)	// false

5.5 短路運算（邏輯中斷）

短路運算的原理：當有多個運算式（值）時，左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值；

1. 邏輯與

• 語法：運算式1 && 運算式2
• 如果第一個運算式的值為真，則回傳運算式2
• 如果第一個運算式的值為假，則回傳運算式1

2. 邏輯或

• 語法：運算式1 || 運算式2
• 如果第一個運算式的值為真，則回傳運算式1
• 如果第一個運算式的值為假，則回傳運算式2

console.log(123 || 456)			// 123
console.log(0 || 456)			// 456
console.log(123 || 456 || 789)	// 123

6. 賦值運算子

概念：用來把資料賦值給變數的運算子

賦值運算子	說明	案例
=	直接賦值	var usrName = '我是值';
+=、-=	加、減一個 數 后再賦值	var age = 10; age+=5; // 15
*=、/=、%=	乘、除、取模 后再賦值	var age = 2; age*=5; // 10

let age = 10
age += 5		// 相當于 age = age + 5
age -= 5		// 相當于 age = age - 5
age *= 10		// 相當于 age = age * 10

7. 運算子優先級

優先級	運算子	順序
1	小括號	()
2	一元運算子	++ -- ！
3	算數運算子	先 * / % 后 + -
4	關系運算子	> >= < <=
5	相等運算子	== != === !==
6	邏輯運算子	先 && 后 ||
7	賦值運算子	=
8	逗號運算子	,

• 一元運算子里面的邏輯非優先級很高
• 邏輯與比邏輯或優先級高

流程控制

1. 流程控制

在一個程式執行的程序中，各條代碼的執行順序對程式的結果是有直接影響的，很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能，

簡單理解：流程控制就是控制我們的代碼按照什么結構順序來執行

流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，這三種結構代表三種代碼執行的順序，

2. 順序流程結構

它沒有特定的語法結構，程式會按照代碼的先后順序，依次執行，程式中大多數的代碼都是這樣執行的，

3. 分支流程控制 if 陳述句

3.1 分支結構

由上到下執行代碼的程序中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的程序），從而得到不同的結果

JS 語言中提供了兩種分支結構陳述句

• if 陳述句
• switch 陳述句

3.2 if 陳述句

1. 語法結構

// 條件成立執行代碼，否則什么也不做
if (條件運算式) {
    // 條件成立執行的代碼陳述句
}

陳述句可以理解為一個行為，回圈陳述句和分支陳述句就是典型的陳述句，一個程式由很多個陳述句組成，一般情況下，會分割成一個一個陳述句，

2. 執行流程

3.3 if else 陳述句（雙分支陳述句）

1. 語法結構

// 條件成立 執行 if 里面代碼，否則執行else里面的代碼
if (條件運算式) {
    // [如果] 條件成立執行的代碼陳述句
} else {
    // [否則] 執行的代碼
}

2. 執行流程

3.4 if else if 陳述句（多分支陳述句）

1. 語法結構

// 適合于檢查多種條件，
if (條件運算式1) {
    陳述句1
} else if (條件運算式2) {
    陳述句2
} else if (條件運算式3) {
    陳述句3
    ...
} else {
    // 上述條件都不成立執行此處代碼
}

2. 執行流程

5. 分支流程控制 switch 陳述句

5.1 語法結構

switch 陳述句也是多分支陳述句，它用于基于不同的條件來執行不同的代碼，當要針對變數設定一系列的特定值的選項是，就可以使用 switch，

switch (運算式) {
    case value1:
        // 運算式 等于 valur1 時要執行的代碼
        break
    case value2:
        // 運算式 等于 valur2 時要執行的代碼
        break
    default:
        // 運算式 不等于任何一個 value 時要執行的代碼
}

注意事項

1. 我們開發里面，運算式我們經常寫成變數

2. 我們 運算式 的值 和 case 里面的值相匹配的時候是 全等，必須是值和資料型別一致才可以

3. break 如果當前的case里面沒有break，則不會退出switch，會繼續執行下一個case

5.2 switch 陳述句和 if else if 陳述句的區別

• 一般情況下，它們兩個陳述句可以相互替換
• switch...case 陳述句通常處理case為比較確定值的情況，而 if...else...陳述句更加靈活，常用于范圍判斷（大于、等于某個范圍）
• switch 陳述句進行條件判斷后直接執行到程式的條件陳述句，效率更高，而 if...else 陳述句有幾種條件，就得判斷多少次，
• 當分支比較少時，if...else 陳述句的執行效率比 switch 陳述句高，
• 當分支比較多時，switch 陳述句的執行效率比較高，而且結構更清晰，

流程控制-回圈

1. 回圈

回圈的目的：可以重復執行某些代碼

在 JS 中，主要有三種型別的回圈陳述句：

• for 回圈
• while 回圈
• do...while 回圈

2. for 回圈

在程式中，一組被重復執行的陳述句被稱之為回圈體，能否繼續重復執行，取決于回圈的終止條件，由回圈體及回圈的終止條件組成的陳述句，被稱之為回圈陳述句，

2.1 語法結構

for 回圈主要用于把某些代碼回圈若干次，通常跟計數有關系，其語法結構如下：

for (初始化變數; 條件運算式; 操作運算式) {
    // 回圈體
}
// 1. 初始化變數 就是用let 宣告的一個普通變數，通常用于作為計數器使用
// 2. 條件運算式 就是用來決定每一次回圈是否繼續執行 就是終止的條件
// 3. 操作運算式 是每次回圈最后執行的代碼 經常用于我們計數器變數進行更新（遞增或者遞減）
for (let i = 1; i <= 100; i++) {
    console.log('你好')
}

3. 雙重 for 回圈

3.1 雙重 for 回圈概述

很多情況下，單層for回圈并不能滿足我們的需求，比如我們要列印一個5行5列的圖形、列印一個倒直角三角形等，此時就可以通過回圈嵌套來實作，

回圈嵌套是指在一個回圈陳述句中再定義一個回圈陳述句的語法結構，例如在 for 回圈陳述句中，可以再嵌套一個 for 回圈，這樣的 for 回圈陳述句我們稱之為雙重for回圈，

3.2 語法結構

for (外層初始化變數; 外層條件運算式; 外層操作運算式) {
    // 執行陳述句;
    for (里層的初始化變數; 里層條件運算式; 里層操作運算式) {
    	// 執行陳述句;
}
// 1. 可以把里面的回圈看做是外層回圈的陳述句
// 2. 外層回圈一次，里面的回圈執行全部

4. wihile 回圈

while 陳述句可以在條件運算式為真的前提下，回圈執行指定的一段代碼，知道運算式不為真時結束回圈，

當條件運算式為true，則執行回圈體，否則退出回圈，

語法結構

while (條件運算式) {
    // 回圈體
}

5. do wihile 回圈

do...while 陳述句其實是 while 陳述句的一個變體，該回圈會先執行一次代碼塊，然后對條件運算式進行判斷，如果條件為真，就會重復執行回圈體，否則退出回圈，

語法結構

do {
    // 回圈體代碼 —— 條件運算式為 true 時重復執行回圈體代碼
} while (條件運算式)

注意：先執行回圈體，再判斷，do...while回圈陳述句至少會執行一次回圈體代碼

6. continue break

6.1 continue 關鍵字

continue 關鍵字用于立即跳出本次回圈，繼續下一次回圈，

代碼實作：

// continue 關鍵字 退出本次（當前次數的回圈） 繼續執行剩余次數回圈
for (let i = 1; i <= 5; i++) {
    if (i == 3) {
    	continue	// continue退出本次回圈 直接跳到 i++
    }
    console.log(i)    // 輸出 1 2 4 5
}

6.2 break 關鍵字

break 關鍵字用于立即跳出整個回圈（回圈結束），

代碼實作：

for (let i = 1; i <= 5; i++) {
    if (i == 3) {
    	break	// break 退出個回圈
    }
    console.log(i)    // 輸出 1 2
}

持續更新中 - 8.9