# JS 筆記
## 宣告變數的方法：let、const、var
* **var (全域變數)**
宣告一個可隨意更改其內容的變數
* 因為容易汙染全域，所以不建議使用。
* 將變數宣告成全域的話，可能會有以下幾個問題:
1. 變數名稱衝突，發生預期外的程式錯誤。
2. 佔用記憶體，無法回收。
* **let(區塊變數)**
用於宣告一個「只作用在當前區塊的變數」，可隨意更改其內容，但不能重複宣告。
* **const**
宣告一個只可讀取的不可變常數。類似*let*具有區塊範圍，但const宣告的變數不能重複賦予值，也不能重複宣告。
### 重點歸納(變數宣告方式)
| | var | let | const |
| ---------- | ---- | -------- | ---------- |
| 範圍 | 全域 | 當前區塊 | 當前區塊 |
| 重複宣告 | 可 | 不可 | 不可 |
| 重新賦予值 | 可 | 可 | 不可(不易) |
## 基本型別(primitives types) 介紹
* 字串 (String)
* 數字 (Number)
* **布林 (Boolean)** : True & False
* **undefined**: 尚未被賦予值。
* **null**: 有被賦予值，被設定為空值。
* 可用於清空資料來釋放記憶體空間
(比如當一個值不再需要使用時)
* Symbol
* 型別操作方法
## 觀念補充
* **小駝峰命名**
程式命名一種規則，第一個單字以小寫字母開始；第二個單字的首字母大寫，例如：firstName、lastName。
(**建議使用這種方式**。)
* **修改變數的值**:
變數與變數之間是沒有連帶關係的，也就是說改任何一個變數的值不會影響其他變數，除非是呼叫了某個函式會將變數又重新賦予值一次
* **一行宣告一個變數或常數**
除錯時比較好知道哪行要做修正。範例如下:
```=
\\不好的宣告方式
const a = 1,
b=2,
c=3;
\\好的宣告方式
const a=1
const b=2
const c=3
```
## 方便除錯的函式: console.log()
* **console.log()**
1. 可以將變數值直接顯示在chrome 開發人員工具裡面。
2. 用法為直接在要偵測的地方加入console.log(“字串“)即可。
* 可一次顯示多個變數值，做法為直接在括號裡面放入一個以上的變數，並用**逗號**做區隔。
* 如果想要一行顯示一個變數值的話，就需要分開來撰寫。
```=
let a =3;
let b =2;
let c =1;
console.log(a);
console.log(b);
console.log(a,b); //括號裡面也可以放多個值，但會顯示在同一行。
```
效果呈現如下:
* **補充: alert()**
1. 靠alert 方式也可以將變數用彈跳式視窗顯示出來。
3. 寫法為在alert()加入想要顯示的變數名稱。但要注意以下幾點:
* alert 的括號中只能代入一個參數。
* 參數不管是什麼型別，它都會轉成字串顯示
* 如果需要顯示多個參數的話，可以用字串相加的方式來處理。
例如 alert(a + "," + b + "," + c)
3. 如果需要顯示多個參數，會建議使用console.log()。
4.
## 數字型別與賦值運算子
### 賦值運算子
* 一個賦值運算子就是右方的運算元的值賦予給在其左方的運算元，最簡單的復職運算子就是*等於 (=)* 。
* 復合運算子:為簡化運算的流程，會將某些運算子做複合。
比如下方例子:
* `x += y` = `x = x + y`
* `x -= y` = `x = x - y`
### 算術運算子
* **增加 (++)**
* 一元運算子。 將運算元增加1。
* 如果將運算元(++)放在變數前，會回傳增加1以後的值。
* 如果將運算元(++)放在變數後，則會回傳原本的值。
* **減少 (- -)**
* 一元運算子。 將運算元減少1。
* 如果將運算元(--)放在變數前，會回傳減少1以後的值。
* 如果將運算元(--)放在變數後，則會回傳原本的值。
## 字串型別
### 基本觀念
* **宣告字串**: 需用" " 或是' ' 將字串包起來。
* **字串與字串&數字相連**: 使用加號(+)做連接。
* **變數名稱.length**: 用來查詢字元數。
```=
let friendName = "Tom";
console.log(friendName.length); \\結果為3
```
* **typeof**: 用來查詢狀態。
```=
let friendName = "Tom";
console.log(typeof friendName); \\結果為"string"
```
* **NaN** :star2:: 全域屬性，表示非數字（Not-A-Number）。
* 補充一點，雖然NaN是被JS判斷成非數值型態，但如果使用typeof 去查詢，會發現還是顯示成++數值++。
* **trim()** :star2::++用來移除字元間的空格++。以下方程式碼為例，只有加上trim()的那一行最後印出來的結果會是沒有空白字元的。
```=
const greeting = ' Tom ';
console.log(greeting);
// expected output: ' Tom ';
console.log(greeting.trim());
// expected output: 'Tom';
```
* **樣板字樣值** :star:: 允許在其中嵌入運算式的字串字面值(string literals）
* 寫法為用反引號\` \`（back-tick）將字元封閉，需加入運算式的地方則加上${變數名稱}即可。範例如下:
```=
let myName = "Mary";
let myHeight = 189;
let total =`我現在${myHeight}公分，我是 ${myName}。
console.log(total) `;
\\expected output: 我現在189公分，我是Mary。
```
### 字串&數字轉換
* **parseInt()**: 將輸入的字串轉成整數。
* 語法: `parseInt(string, radix);`
* `string`:待轉換的字串。
* `radix`:能代表該進位系統的數字。(++預設值為10進位?++)
* **toString()**: 將數值以字串形式回傳。
* 語法: `toString()`
```=
\\小例子如下
let c = 1
c = c.toString(); \\結果為 字串:"1"
```
## 比較運算子
* **常見的比較運算子有**: 大於(>)、小於(<)、等於(==)、大於等於(>=)、小於等於(<=)、不等於(!=)。
### 等號(=)分析
* **一個等號(=)**:作用為賦予值。
* **兩個等號(==)**: 比較運算子的意思。
* 如果比較值並非數值(ex.字串 "1")，會自動協助轉型成數值狀態，也因此比較不嚴謹。
* **三個等號(\=\==)**:也是比較運算子。
* 作用會比兩個等號(==)還要嚴謹，==除了比較數值以外，也會判斷型別是否一致==。
* 比較推薦使用這個。:bookmark:
(以上為`==` & `===` 使用上差異的範例)
## 邏輯運算子
> 邏輯運算子 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時， 它們會回傳布林型態的值。 然而，&& 和 || 運算子實際上是回傳兩指定運算元之一，因此用於非布林型態值時，它可能會回傳一個非布林型態的值。 [ref.: MDN ](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90)
### 邏輯 AND (&&)
* 當某值同時滿足兩個(或以上)的條件時，才會回傳True。
```=
// && 練習
//符合贈裡條件
// 必須同時符合以下兩個條件才贈禮
//消費滿500(含)
//是VIP 條件
//買特定蛋糕
let a = 600;
let isVip =true;
let buyCake =false;
let giftResult = a >= 500 && isVip == true && buyCake == true;
let giftPrint = `是否贈禮: ${giftResult}`
console.log(giftPrint);
//expected output:是否贈禮: false
```
### 邏輯 OR (||)
* 設定兩個(或以上)的條件，當某值滿足其中一項，就會回傳True。
```=
// || 練習 or
//小孩吃東西
// 只要冰箱有米飯或蘋果或牛奶，小朋友會吃
let haveRice = false;
let haveApple = true;
let haveMilk =false;
let isEat = haveRice == true || haveApple ==true || haveMilke == true;
let isEatPrint= `是否吃飯: ${isEat}`
console.log (isEatPrint);
//expected output:是否吃飯: true
```
## 流程判斷 - if、else if、else
### 重點整理
* if & else 只會出現一次，但else if 可以出現很多次。
* else 不一定要有。
* **語法如下**
```=
if (條件式){
statement1}
else if (條件式){
statement2
} // 可多個，可略
else{
statement3}// else 可略
```
## 陣列 Array & 物件 Object
### 陣列 Array
#### 基本介紹
* 屬於全域物件，用於建構陣列。
* 沒有固定的長度與型別。
* 可以同時放數字、字串或其他型別。
* 語法: `let 變數名稱=[值1, 值2, 值3,...]`
* 可指定陣列裡面的值為新的變數。範例如下
```=
let colors = ['red','black'];
let myFavoriteColor = colors[1];
console.log (myFavoriteColor);
// expected Output: 'black';
```
### 讀取、寫入、刪除
#### 讀取
* 可直接讀取整個串列或是特定某個值 (ex. `colors[0]`)
* 如果變數尚未設定，則會顯示undefined
* 一開始先設定空陣列也沒問題。
#### 寫入
* 常見添加新變數寫法有以下3種:
1. **變數名稱[位置]**
* 直接指定要在哪個位置加入變數值
* 如果有跳號的話，中間缺少的值會顯示empty。
* 要注意的是，如果指定位置本身就有值的話，那個變數則會重新被賦予值一次，意即舊值會被蓋過去。
2. **變數名稱.push()**
* ()裡面放要新增的值，新值會被加到串列最後一個位置。
3. **變數名稱.unshift()**
* ()裡面放要新增的值，新值會被加到串列第一個位置。
* 範例如下:
#### 刪除
* 常見刪除變數寫法有以下3種:
1. **變數.splice(==值1==, ==值2==)**
* **值1**: 代表起始位置
* **值2**: 要往後刪除幾筆資料(++包含自己++)
3. **變數.pop()**
* ()裡面不用寫東西，會刪除最後一個變數。
4. **變數名稱.shift()**
* ()裡面不用寫東西，會刪除第一個變數。
* 範例如下:
### 物件 Object
* 語法: 物件名稱:{'屬性1':'值1','屬性2':'值2',... }
#### 讀取
* `物件名稱.屬性`
#### 新增
* 同一般賦予值的作法，新增`屬性名稱=新的值`
#### 修改/刪除
* `delete 物件名稱.屬性`
### 陣列+物件
#### General Note
* 陣列可以包物件
* 要選擇陣列中的第幾筆，用中括號[]
* 要選擇物件裡的屬性，請用點 `.`
Sign in with Wallet
Connect another wallet