iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 20

[Day 20] JS - 變數宣告

前言

延續昨天作用域,今天就來更細談認識 ES6 變數宣告的方式。

  • var:作用域是依 function 區分
  • letconst:作用域是{} block 區塊

學習資源分享

  1. JavaScript 那個 let, const, var 到底差在哪?,今年六角學院釋出不少教學影片,即便是過去學過的基礎,但還是能從中獲得不少知識點。這部影片從為什麼要宣告變數開始、介紹變數宣告的差異,也有帶到作用域、Hoisting的觀念。

認識宣告 varlet 差異

以for迴圈為例

  • 使用var,會渲染到外面變數
    • 外面宣告 i 為0,迴圈跑完之後,污染到外面的 i,使其變 10
    • 因為var的宣告並不是放在 function 當中,所以當在跑最後一圈時,i 會為 10,跳出迴圈,並渲染到迴圈外
 var i = 0
    for (var i = 0; i < 10; i++) {
      console.log("跑到第" + i + "次");
    }
    console.log(i) ; // JS 21行

  • 看看使用 let
    • for迴圈有一個block區塊,所以迴圈執行完,就結束
 let i = 0
    for (let i = 0; i < 10; i++) {
      console.log("跑到第" + i + "次");
    }
    console.log(i);

ifelae迴圈為例

var為例,原本x設為1,在判斷式跑完後,變成5

 var x = 1;
    if (x === 1) {
      var x = 5;
    } else {
      var x = 19;
    }
    console.log(x)

let為例,可以發現在外面宣告let y = 1;並沒有受影響。

let y = 1;
    if (y === 1) {
      let y = 5;
    } else {
      let y = 19;
    }
    console.log(y)

const 常數

  • 定義之後,不能改變的數
  • 不可重新派值外,也不可重新宣告
  • 作用域範圍 :『block scope』
  • 以下語法,先設定一個dog = 'Tom' 後面要再修改變數的內容就會發生錯誤
 <script>
    const dog = 'Tom';
    dog = 'Mary';

  </script>

例外:當使用const定義物件...

  • 常數定義物件時,是定義整個物件的位置!
  • 而在此情形是可以修改物件內的值
  • 此範例:設定 farm的name 為name: 'Wang',在外面改變其值的內容,並印出來,可以發現修改為name : 'Jason'
 <script>
    const farm = {
      name: 'Wang',
      pet: 'dog'
    }
    farm['name'] = 'Jason';
    console.log(farm);

  </script>

此外在 array 裡面,也可以push資料進去喔!

  <script>
    const a = { name: 'mike' };
    const b = ['eva'];
    a["age"] = 18;
    b.push("tom");
    console.log(a);
    console.log(b)

  </script>

參考資料:
ES6 開始的新生活 let, const
Javascript 學習筆記: 變數(Variable)宣告
JavaScript 使用const關鍵字宣告常數


上一篇
[Day 19] JS - 作用域 Scope
下一篇
[Day 21] 閉包 (Closure)是什麼?
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言