變數

• 概述
  • 變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料
  • 使用變數可以方便的獲取或者修改記憶體中的資料
  • 變數就是儲存資料的容器

變數的命名規則

• 強制規則

  • 由字母、數字、下劃線、$符號組成，且不能以數字開頭
  • 區分大小寫
  • 不能是關鍵字和保留字，例如：for、while。

• 泛性規則

  • 變數名必須有意義
  • 遵守駝峰命名法。(首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword)
  • name變數名，本身不是保留字/關鍵字，建議少用
    • name在有的瀏覽器中，是自動宣告過的。

• 交換兩個變數的值

var num1 = 10;
var num2 = 20;
num1 = num1 + num2;
num2 = num1 - num2;
num1 = num1 - num2;
console.log(num1);
console.log(num2);
 

var關鍵字

var宣告作用域

• 說明
  • 使用var操作符定義的變數會成為包含他的函式的區域性變數

// 區域性變數
function test(){
    var message= 'hi';
}
test();
console.log(message); // 出錯！

// 全域性變數
function test(){
    message= 'hi';
}
test();
console.log(message); // "hi"

var宣告提升

• 說明
  • 提升，就是把所有變數宣告都拉到函式作用域的頂部
  • 反覆多次使用var宣告同一個變數也沒問題

function foo(){
    console.log(age);
    var age= 16;
}
foo();
 

let宣告

• 概念
  • let宣告的範圍是塊作用域，var宣告的範圍是函式作用域
  • JS引擎會記錄用於變數宣告的識別符號及其所在的塊作用域
    • 因此巢狀使用相同的識別符號不會報錯
    • 這是因為一個塊中沒有重複宣告

暫時性死區

• 說明
  • let宣告的變數不會在作用域中被提升
  • 在let宣告之前的執行瞬間被稱為"暫時性死區"

console.log(age);
let age= 26;    // ReferenceError: Cannot access 'age' before initialization

全域性宣告

• 說明
  • 使用let在全域性作用域中宣告的變數不會成為window物件的屬性
  • var宣告的變數則會

var name1= 'Sunny';
console.log(window.name1);  // Sunny

let name2= 'Jerry';
console.log(window.name2);  // undefined

條件宣告

• 說明
  • 因為let作用域是塊，所以不可能檢查前面是否已經使用let宣告過同名變數
  • 同時也就不可能在沒有宣告的情況下宣告它

if(typeof name === 'undefined'){
    let name;
}
name= 'Sunny';
// name被限制在if{}塊的作用域內
// 因此這個賦值形同全域性賦值

try{
    console.log(age);
}
catch(error){
    let age;
}
age= 26;
// name被限制在catch{}塊的作用域內
// 因此這個賦值形同全域性賦值

for迴圈中的let宣告

• 說明
  • 每次迭代宣告一個獨立變數例項的行為適用於所有風格的for迴圈
    • for-in
    • for-of

for(var i=0; i<5; i++){
    setTimeout(function(){
        console.log(i);
    },10)
}
// 5, 5, 5, 5, 5

for(let i=0; i<5; i++){
    setTimeout(function(){
        console.log(i);
    },10)
}
// 0, 1, 2, 3, 4

const宣告

• 概念
  • 宣告變數時必須同時初始化變數
  • 且嘗試修改const宣告的變數會導致執行出錯
    • const定義的是常量
    • const不允許重複宣告
    • const宣告的作用域也是塊

物件宣告

• 說明
  • const宣告的限制只適用於它指向的變數的引用

const person= {}
person.name= "Jerry";

for迴圈中的const宣告

• 說明
  • const可以宣告一個不會修改的for迴圈變數
  • 每次迭代只是建立一個新變數
  • 對for-in和for-of迴圈特別有意義

let i= 0;
for(const j=1; i<5; i++){
    console.log(j);
}
// 1, 1, 1, 1, 1

for(const key in {a: 1, b: 2}){
    console.log(key);
}
// a, b

for(const value of ['Sunny', 'Jerry', 'Tommy', 'Sandy', 'Marry']){
    console.log(value);
}
// 'Sunny', 'Jerry', 'Tommy', 'Sandy', 'Marry'

宣告風格及最佳實踐

• 最佳實踐
  • 不使用var
  • const優先，let次之

程式碼除錯（輸出變數）

• alert彈框:瀏覽器頁面彈框

const num = 10;
alert(num);

• console.log()瀏覽器console控制檯

const num1 = 10;
const num2 = 20;
console.log(num1);
console.log(num1, num2);

• document.write()瀏覽器頁面中

const num = 10;
document.write(num);