JS變數聲明var,let.const使用詳解

這次帶給大家JS變數宣告var,let.const使用詳解，JS變數宣告var,let.const的注意事項有哪些，下面就是實戰案例，一起來看一下。

var宣告變數的作用域限制在其宣告位置的上下文中

var x = 0; // x是全局变量，并且赋值为0。
console.log(typeof z); // undefined，因为z还不存在。
function a() { // 当a被调用时，
 var y = 2;  // y被声明成函数a作用域的变量，然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时，
  x = 3; // 全局变量x被赋值为3，不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4，不生成新的全局变量。
  z = 5; // 创建新的全局变量z，并且给z赋值为5。 
 }     // (在严格模式下（strict mode）抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined，因为y是a函数的本地（local）变量。

let 宣告的變數只在其宣告的區塊或子區塊中可用,var的作用域是整個封閉函數

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

在ECMAScript 2015 中，let綁定不受變數提升的約束，這表示let宣告不會被提升到目前執行上下文的頂部。
在區塊中的變數初始化之前，引用它將會導致ReferenceError（而使用var 宣告變數則恰恰相反，該變數的值是undefined ）
當在區塊中使用時，let將變數的作用域限制為該區塊。注意var的作用域在它被宣告的函數內的區

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2

const 常數必須在宣告的同時指定它的值.

const宣告建立一個值的唯讀參考。但這並不意味著它所持有的值是不可變的(如引用內容是物件)，只是變數標識符不能重新分配一個常數不能和它所在作用域內的其他變數或函數擁有相同的名稱

// 注意: 常量在声明的时候可以使用大小写，但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量，这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题，并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内，下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是，将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']

下面介紹下在javascript中有三種宣告變數的方式：var、let、const。

var 宣告全域變量，換句話說就是，宣告在for迴圈中的變量，跳出for迴圈同樣可以使用。

for(var i=0;i<p style="text-align: left;">宣告在for迴圈內部的sum，跳出for迴圈一樣可以使用，不會報錯正常彈出結果</p><p style="text-align: left;">let：宣告區塊層級變數，即局部變數。 </p><p style="text-align: left;">在上面的例子中，跳出for循環，再使用sum變數就會報錯，有著嚴格的作用域，變數只作用域目前隸屬的程式碼區塊，不可重複定義同一個變數，不可在聲明之前調用，必須先定義再使用，會報錯，循環體中可以用let</p><p style="text-align: left;">注意：必須聲明'use strict';後才能使用let聲明變數否則瀏覽並不能顯示結果,</p><p style="text-align: left;">const：用於宣告常數，也具有區塊層級作用域，也可宣告區塊層級。 </p><pre class="brush:php;toolbar:false">const PI=3.14;

它和let一樣，也不能重複定義同一個變量，const一旦定義，無法修改。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS中怎樣取得DOM 元素位置

Vue在前端開發中需要注意什麼

以上是JS變數聲明var,let.const使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！