這篇文章主要為大家介紹了在JavaScript中const、let與var對比的相關資料,文中透過範例程式碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編一起看看吧。
ECMAScript 6 新增 const 和 let 指令,用來宣告變數。
宣告方式 | 變數提升 | 作用域 | 初始值 | 重複定義 |
const | 否 | 區塊層級 | #需要 | 不允許 |
#let | 否 | |||
不需要 | #不允許 | var | 是 |
允許
變數提升: const 和let 必須先宣告再使用,不支援變數提升
console.log(c1, l1, v1); // 报错 // Uncaught ReferenceError: c1 is not defined const c1 = 'c1'; let l1 = 'l1'; var v1 = 'v1';
作用域:
const,let 支援區塊級作用域,有效避免變數覆寫const c21 = 'c21'; let l21 = 'l21'; var v21 = 'v21'; if (0.1 + 0.2 != 0.3) { const c21 = 'c22'; let l21 = 'l22'; var v21 = 'v22'; console.log(c21, l21, v21); // 输出 c22 l22 v22 } console.log(c21, l21, v21); // 输出 c21 l21 v22區塊層級作用域,在外層不能直接存取內層變數##
if (0.1 + 0.2 != 0.3) { const c22 = 'c22'; let l22 = 'l22'; var v22 = 'v22'; console.log(c22, l22, v22); // 输出 c22 l22 v22 } console.log(c22, l22, v22); // 报错 // Uncaught ReferenceError: c22 is not defined // 同样地, l22 is not definedconst定義
常數
,該常數不能賦值,但該常數的
可以賦值
const c231 = {}; const c232 = []; c231.name = 'seven'; c232.push(27); console.log(c231, c232); // 输出 {name: "seven"} [27] // 禁止给对象赋值,应该使用 Object.freeze const c233 = Object.freeze({}); const c234 = Object.freeze([]); c233.name = 'seven'; // 普通模式下不报错 // 严格模式下报错 // Uncaught TypeError: Cannot add property name, object is not extensible c234.push(27); // 普通模式下就会报错 // Uncaught TypeError: Cannot add property 0, object is not extensible console.log(c233, c234); // 输出 {} []
全域變數不再設定為頂層物件(window)的屬性,有效避免全域變數污染
const c24 = 'c24'; let l24 = 'l24'; console.log(c24, l24); // 输出 c24 l24 console.log(window.c24, window.l24); // 输出 undefined undefined
#符合預期的for 迴圈
##
for (var i = 0; i != 3; i++) { setTimeout(function() { console.log(i); },10); } // 依次打印 for (let i = 0; i != 3; i++) { setTimeout(function() { console.log(i); },10); } // 依次打印,为啥呢可以看到在for 迴圈中使用let 方式宣告變數才是符合預期。
在 for 中每一次循環,let 都是重新宣告變量,並且因為 JavaScript 引擎會記住上一次循環的值,初始化 i 時在上一輪的基礎上計算。
for (let i = 0; i != 3; i++) { let i = 'seven'; console.log(i); } console.log('eight'); // 依次打印 seven seven seven eight
初始值:
const c3 = 'c3'; let l3 = 'l3'; var v3 = 'v3'; console.log(c3, l3, v3); // 输出 c3 l3 v3 c3 = 2; // Uncaught TypeError: Assignment to constant variable l3 = 2; v3 = 2; console.log(c3, l3, v3); // 输出 c3 2 2 const c32; // 报错 // Uncaught SyntaxError: Missing initializer in const declaration
重複定義:const 和let 不支援重複定義const、let 縮小了變數作用域,完美避免變數污染;const 固定變數(即固定變數型別),對於弱型別JavaScript 來說,可以明顯提升效能。建議在應用程式中使用 const、let 宣告變數。
###總結##########以上是JavaScript ES6中關於const、let與var的對比詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!