JS 直播班 – Week 1 - 變數設計

JavaScript 全貌

如何透過介面操控資料狀態 (先把資料有條理的整合好，才能做後續的處理)

• JSON 陣列物件資料集 : 複雜的資料集
• DOM 操控 HTML 標籤 : 例如點擊按鈕就會觸發 JavaScript 來更改畫面上的行為
• 套件
• AJAX : 向後端要資料，獲得新狀態後同步更新在網頁或套件上
• 框架 : 因為會向很多服務要資料，必須等資料回傳並整理好後再寫到網頁上，所以要使用框架有條理整合各種服務

宣告變數流程

若在「開發人員工具」"console" 裡輸入以下程式碼，試問當網頁重新整理後，變數 orange 是否還存在 ?

let orange = 99;   // 在「開發人員工具」"console" 裡輸入

在「Chrome 開發除錯工具」上宣告變數的話，資料狀態會先動態的新增並暫存起來。
Chrome 在紀錄 JS 資料狀態時，可以依照開發者的想法即時去新增很多資料上去，只是透過「Chrome 開發除錯工具」即時的寫一個內容上去。

當網頁重新整理時，JS 的資料狀態變化過程 : (上半部錄影 43:20)

1. 當網頁重新整理時，會重新執行 all.js (本來紀錄的變數與值會先清空)。
2. index.html 也會從上到下執行，直到執行 <script src="all.js"></script> 這行時，又把原本寫在 all.js 的資料狀態一一寫入。
3. orange 變數就不見了，因為 orange 是使用「開發人員工具」"console" 除錯工具修改資料狀態才動態加入的。

變數資料存放記憶體觀念

每個網頁分頁都有自己存放的記憶體空間

記憶體到底紀錄存放在哪裡 ?

1. 把以下程式碼貼到 VSCode。(字串前後要使用「雙引號 " "」包起來)

let abkk = "城邑左營慈濟宮，簡稱城邑慈濟宮、左營慈濟宮，當地人俗稱老祖廟"

2. 在「開發人員工具」"console" 裡輸入變數名稱，看看是否有值
3. 打開「開發人員工具」"Memory" : 查看記憶體裡面到底有甚麼資訊
4. 使用「開發人員工具」"Memory" 裡的「Heap snapshot 快照」功能把當下的變數照起來

Heap snapshot 快照功能 : 資料變動很快，把"當下"的資訊照起來 (把當下的資料格式記錄起來)

練習一

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、2 個型別、4 個記憶體空間

let a = 1;
a = 2;         // 賦予新值將會寫入新的記憶體空間
a = 3;
a = 'hello';   // 最後指向的記憶體空間是 'hello'

(1-3行) 的值沒有用到，會被記憶體釋放掉，但是什麼時候才釋放，不知道!

練習二

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 2 個變數、2 個型別、3 個記憶體空間

let a = 1;
let b = 3;
b = 'qq';

練習三

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、2 個型別、4 個記憶體空間

當出現兩個 'hi' 值，才能做加總

let a = 1;
a = 'hi';
a = a + 'hi';   // 記憶體空間新出現 'hi' 值，就會把他記起來

練習四

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 1 個變數、1 個型別、3 個記憶體空間

let a = 2; // a 賦予值為 2 
a * 3;     // 只是運算，並未賦予任何值

練習五

Q : 請問以下有幾個變數、幾個型別、幾個記憶體空間 ？
A : 2 個變數、1 個型別、4 個記憶體空間

let a = 2;
let b = 3;
a += 3;   // a = a + 3  (這個 3 並未被任何變數指向，記憶體空間會多 3 的位置)
// 有記憶體空間才能去做運算

原始型別

null (空值)

可以設定 null，把資料清空 :
裡面本來有值，但希望要清空成空值，變成沒有資料

let abkk = "城邑左營慈濟宮，簡稱城邑慈濟宮、左營慈濟宮，當地人俗稱老祖廟";
abkk = null;  // 讀取 abkk 的值，並把裡面的資料清空

JS 變數命名

使用小駝峰命名

let bananaPrice = 30;
let fatherName = 'Tom';

carbon : 將 Code 轉成圖片的軟體工具

carbon 連結

可以匯出 png 的圖片

---

學習回顧

了解下方程式碼執行的過程

let a = 1;  // 宣告變數 a 並賦予值為數字型別 1 
let b = 0;  // 宣告變數 b 並賦予值為數字型別 0
a = 3;      // 讀取變數 a 並賦予新值為 3 
a = b + 2;  // 讀取變數 a 並賦予新值為 b + 2 (即 2) 
a - b;      // 只是運算，並未賦予任何變數
b += 1;     // 即 b = b + 1，讀取變數 b 並賦予新值為 b + 1 (即 1) 

相關參考文件

week 1 老師筆記連結
JavaScript 開發中常見錯誤解決辦法
MDN 常見錯誤參考
記憶體圖
記憶體知識延伸影片