ES6 語法: let 與 const

本文主要講解 let / const / var 關鍵字相關內容, 解釋了它們的基本用法以及相關需要注意的知識點; 其中還包含一些作用域的相關概念 汇鞭。

let / const / var 它們的作用基本上是一致的, 但是它們還是有很多區(qū)別的; 下面我們就來看看他們之間的區(qū)別與作用 。

1. 作用域

1. 在 ES6 之前, 也就是 ES5 中, 有兩個作用域
   1. 全局作用域
   2. 函數(shù)作用域
   
2. 在 ES6 中新增加了 '塊級作用域' {} 淡溯。

2 let 聲明一個變量

// let 聲明一個變量
function test1() {
  let num1 = 1111
  var num2 = 2222
  console.log('此時 let 與 var 沒有任何區(qū)別: ', num1, num2);
}
// 此時使用 let 與 var 沒有任何區(qū)別
test1()
// 打印結果:
// 此時 let 與 var 沒有任何區(qū)別:  1111 2222

2.1 塊級作用域

// ES6 let
function test2() {
  for (let index = 1; index < 3; index++) {
    console.log('塊級作用域內: ', index);
    // 打印結果:
    // 塊級作用域內:  1
    // 塊級作用域內:  2
  }
  /**
   * 1. 此處打印 'index' 報錯: ReferenceError: index is not defined (報錯的意思是: 引用錯誤, 'index' 沒有找到)
   *    1. 這里體現(xiàn)的是: let 聲明的變量, 只在自己的塊級作用域內有效 血筑。
   * 2. ES6 是強制開啟嚴格模式的; 在 ES5 中使用嚴格模式需要設置 "use strict";
   *    1. 在嚴格模式下, 變量未聲明不能引用, 否則就會報錯 'ReferenceError' 。
   */
  // console.log('塊級作用域 -外- 循環(huán)外打印 index: ', index);
  // 打印結果:
  // Uncaught ReferenceError: index is not defined
}
test2()



// 與 ES5 對比
function test3() {
  for (var i = 1; i < 3; i++) {
    console.log(i);
  }
  console.log('循環(huán)外打印 -- 得到最終結果 i: ', i);
  // 打印結果:
  // 循環(huán)外打印 -- 得到最終結果 i:  3
}
test3()

2.2 使用 let 時, 不能重復聲明變量

// 使用 let 時, 不能重復聲明變量
function test4() {
  /**
   * 友情提示:
   * 1. 報錯: Error: Cannot find module "./class/1-let與const命令.js"
   *    1. 有可能是文件沒有編譯成功
   */
  let num = 1
  let num = 2
}
// test4()
// 執(zhí)行結果:
// 報錯: Error: Cannot find module "./class/1-let與const命令.js"

3. const 關鍵字

/**
 * const 關鍵字
 * 1. const 聲明一個 '常量' (注意: 是常量而不是變量)
 *    1. 常量的含義就是不能修改(不嚴謹)
 *    2. const 也是有塊級作用域的
 *    3. const 聲明的時候必須賦值
 */
function last1() {
  const num1 = 3.1415926
  console.log(num1);
}
last1()

3.1 const 聲明的常量不能修改(不嚴謹)

function last2() {
  const num2 = 3.1415926
  /**
   * 報錯:  SyntaxError: "num2" is read-only (意思就是說 'num2' 是一個只讀屬性, 不能修改)
   */
  // num2 = 3333
  // console.log('常量不能修改 num2 : ', num2);
  // 打印結果:
  // 報錯: Error: Cannot find module "./class/1-let與const命令.js"
}
last2()

3.2 const 聲明時必須賦值

function last3() {
  /**
   * 報錯: SyntaxError: Unexpected token (118:12) (意思是: 不完整)
   */
  const num3;
  // num3 = 3333 // 這里寫與不寫都會報相同的錯
  console.log('聲明時必須賦值 num3 : ', num3);
}
last3()

3.3 const 不能修改這一句是不嚴謹?shù)?/h4>

function last4() {
  const PI = 3.14
  const num4 = {
    newNum: 4444
  }

  // 對常量 num4 做一個修改
  num4.b = '修改常量: 增加一個值'
  num4.newNum = '修改常量: 常量對象中已有的值'

  /**
   * 這里的修改之所以成功, 是因為 num4 常量是一個對象, 對象是 '引用類型' (引用類型: 最后的返回值是對象存儲的內存中的指針)。
   * 也就是我們聲明的 num4 是指向這個對象的存儲的指針, 這個指針是不變的, 但是對象本身是可以變得 。
   */

  console.log('const 不能修改, 這一句是不嚴謹?shù)?num4 : ', PI, num4);
}
last4()

如果對你有所幫助谦去，喜歡的可以點個關注; 文章會持續(xù)打磨 。

有什么想要了解的前端知識嗎? 可以在評論區(qū)留言, 會及時跟進分享所相關內容 要糊。

整理知識點不易, 每次都是在工作繁忙之余夜深人靜之時整理, 無論知識點是大是小, 都會驗證后再分享, 以防自己發(fā)表的文章給大家造成誤導 妆丘。如有問題還望不吝賜教勺拣，本人會及時更改 (本文原創(chuàng), 如需轉載，請注明出處) 毅戈。