1 js基礎
# JS基礎
## 一、JS語言介紹
#### 1、概念
- 瀏覽器腳本語言
- 可以編寫運行在瀏覽器上的代碼程序
- 屬於解釋性、弱語言類型編程語言
#### 2、組成
- ES語法：ECMAScript、主要版本ES5和ES6
- DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標誌語言的標準編程接口。
- BOM：瀏覽器對象模型(Browser Object Model)，提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構；且由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
## 二、三種存在位置
#### 1、行間式：存在於行間事件中
```html
<body id="body" onload="body.style.backgroundColor=‘#0ff‘">
</body>
```
#### 2、內聯式：存在於頁面script標簽中
```html
<body id="body">
<script type="text/javascript">
body.style.backgroundColor=‘#0ff‘
</script>
</body>
```
#### 3、外聯式：存在於外部JS文件，通過script標簽src屬性鏈接
```html
index.js文件
body.style.backgroundColor=‘#0ff‘
index.html文件
<script src="./js/index.js"></script>
```
## 三、解釋性語言特性決定JS代碼位置
- 出現在head標簽底部：依賴型JS庫
- 出現在body標簽底部：功能型JS腳本
## 四、JS語法規範
- 註釋
```js
// 單行註釋
/*
多行註釋
*/
```
- 以分號作為語句結尾（允許省略）
## 五、變量的定義
#### 1、ES5定義變量
```js
var num = 10; // 無塊級作用域變量
num = 10; // 全局變量
```
#### 2、ES6定義變量
```js
let num = 10; // 局部變量
const NUM = 10; // 常量
```
#### 3、變量(標識符)的命名規範
- 由字母，數字，_，$組成，不能以數字開頭（可以包含中文字符）
- 區分大小寫
- 不能出現關鍵字及保留字
| | | | | |
| --------- | --------- | ---------- | --------- | ------------ |
| abstract | arguments | boolean | break | byte |
| case | catch | char | class\* | const |
| continue | debugger | default | delete | do |
| double | else | enum\* | eval | export\* |
| extends\* | false | final | finally | float |
| for | function | goto | if | implements |
| import\* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super\* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield | | |
## 六、三種彈出框
- alert：普通彈出框
- confirm：確認框
- prompt：輸入框
## 七、四種調試方式
- alert()
- console.log()
- document.write()
- 瀏覽器斷點調試
## 八、數據類型
#### 1、值類型
- number：數字類型
```js
var a = 10;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘number‘)
```
- string：字符串類型
```js
var a = ‘10‘;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘string‘)
```
- boolean：布爾類型
```js
var a = true;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘boolean‘)
```
- undefined：未定義類型
```js
var a = undefined;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘undefined‘)
console.log(a == undefined)
```
#### 2、引用類型
- function：函數類型
```js
var a = function(){};
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘function‘)
```
- object：對象類型
```js
var a = {};
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘object‘)
console.log(a instanceof Object)
```
#### 3、具體的對象類型
- null：空對象
```js
var a = null;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘object‘)
console.log(a == null)
```
- Array：數組對象
```js
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘object‘)
console.log(a instanceof Object)
console.log(a instanceof Array)
```
- Date：時間對象
```js
var a = new Date();
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘object‘)
console.log(a instanceof Object)
console.log(a instanceof Date)
```
- RegExp：正則對象
```js
var a = new RegExp();
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == ‘object‘)
console.log(a instanceof Object)
console.log(a instanceof RegExp)
```
#### 4、類型轉換
- 數字|布爾 轉換為 字符串
```js
var a = 10 or true
String(a)
a.toString()
```
- 布爾|字符串 轉換為 數字
```js
var a = true or ‘10‘
Number(a)
+ a
parseFloat()
parseInt()
```
- 字符串|數字 轉換為 布爾
```js
var a = 10 or ‘10‘
Boolean(a)
```
- 自動轉換
```js
5 + null // 5
"5" + null // "5null"
"5" + 1 // "51"
"5" - 1 // 4
```
- 特殊產物
```js
// NaN: 非數字類型
// 不與任何數相等，包含自己
// 利用isNaN()進行判斷
```
## 九、運算符
#### 1、算數運算符
前提：n = 5
<table>
<tr>
<th>運算符</th>
<th>描述</th>
<th>例子</th>
<th>x結果</th>
<th>n結果</th>
</tr>
<tr>
<td>+</td>
<td>加法</td>
<td>x=n+2</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>-</td>
<td>減法</td>
<td>x=n-2</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<td>*</td>
<td>乘法</td>
<td>x=n*2</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>/</td>
<td>除法</td>
<td>x=n/2</td>
<td>2.5</td>
<td>5</td>
</tr>
<tr>
<td>%</td>
<td>取模(余數)</td>
<td>x=n/2</td>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">++</td>
<td rowspan="2">自增</td>
<td>x=++n</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>x=n++</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="2">--</td>
<td rowspan="2">自減</td>
<td>x=--n</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>x=n--</td>
<td>5</td>
<td>4</td>
</tr>
</table>
#### 2、賦值運算符
前提：x=5，y=5
| 運算符 | 例子 | 等同於 | 運算結果 |
| :----- | :--- | ------ | -------- |
| = | x=y | | 5 |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
#### 3、比較運算符
前提：x=5
| 運算符 | 描述 | 比較 | 結果 |
| ------ | ---------- | ------- | ----- |
| == | 等於 | x=="5" | true |
| === | 絕對等於 | x==="5" | false |
| != | 不等於 | x!="5" | fales |
| !== | 不絕對等於 | x!=="5" | true |
| > | 大於 | x>5 | false |
| < | 小於 | x<5 | false |
| >= | 大於等於 | x>=5 | true |
| <= | 小於等於 | x<=5 | true |
#### 4、邏輯運算符
前提：n=5
| 運算符 | 描述 | 例子 | 結果 |
| ------ | ---- | ------------- | ------------------- |
| && | 與 | x=n>10&&++n | x=false,n=5（短路） |
| \|\| | 或 | x=n<10\|\|n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
#### 5、三目運算符
```js
// 結果 = 條件表達式 ? 結果1 : 結果2;
// eg:
var tq = prompt("天氣(晴|雨)")
var res = tq == ‘晴‘ ? "今天天氣挺好" : "請假回家收衣服";
console.log(res);
```
#### 6、ES6語法解構賦值
- 數組的解構賦值
```js
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
```
- 對象的解構賦值
```js
let {key: a} = {key: 10}
// a=10
```
- 字符串解構賦值
```js
let [a,b,c] = ‘xyz‘
// a=‘x‘,b=‘y‘,c=‘z‘
```
1 js基礎