【JavaScript】var let 和 const的区别

1.var

var：声明 JS 变量（不过多介绍）

不带值的变量，默认为 undefined

es2015引入：let 和 const，给JS提供了块作用域（Block scope）和常量。

2.let：

相同点：声明变量，在函数作用域、全局作用域可以跟 var 通用。

不同点：

1）循环作用域

var 重新声明了循环之外的变量，而 let 没有。

var i = 7;
for (var i = 0; i < 10; i++) {//重新声明了循环之外的变量 i
  // 一些语句
}
// 此处，i 为 10

let i = 7;
for (let i = 0; i < 10; i++) {//没有重新声明循环外的变量 i
  // 一些语句
}
// 此处 i 为 7

2）HTML中全局变量

var carName = "porsche"; //此处全局变量属于 window 对象：
let carName = "porsche"; // 不属于 window 对象：

3）重新声明

var：允许在程序任何位置重新声明 JS 变量；

let：在相同的作用域或块中，不允许重新声明一个 var 或 let 变量，也不允许通过 var 重新声明一个 let 变量；只有在不同的作用域或块中，通过 let 重新声明变量是允许的：

//var 允许
var x = 10;// 现在，x 为 10
var x = 6; // 现在，x 为 6

//在相同的作用域或块中，不允许通过 let 重新声明一个 var 或 let 变量
//也不允许通过 var 重新声明一个 let 变量
var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

//在不同的作用域或块中，通过 let 重新声明变量是允许的：
let x = 6;       // 允许

{
  let x = 7;   // 允许
}

4）变量提升

通过 var 声明的变量会提升到顶端。let 跟 const不会，无法在声明前使用

// 在此处，您可以使用 carName
var carName;

3.const：

1）必须在声明时赋值，且不能重新赋值。

2）在块作用域内不会重新声明。

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

3）没有定义对象的常量值，定义了对值的常量引用。因此可以改变常量对象的属性，但不能改常量原始值。

// 可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 可以更改属性：
car.color = "White";
//不能重新为常量对象赋值：
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

4）常量数组可以更改

const cars = ["Audi", "BMW", "porsche"];

// 更改元素：
cars[0] = "Honda";

// 添加元素：
cars.push("Volvo");

5）重新声明

相同作用域不允许

//在不同的作用域或块中，通过 let 重新声明变量是允许的：
let x = 6;       // 允许

{
  let x = 7;   // 允许
}

 

# 作用域介绍

全局作用域：函数之外声明的变量，能在JS程序任何位置访问。

函数作用域：函数内声明的变量，只能在被声明的函数内访问。

块作用域：在块 {} 内声明的变量，使用let 声明，无法从块外访问。 

# 提升（Hoisting）

函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

遇到 script 标签的话 js 就进行预解析，将变量 var 和 function 声明提升，但不会执行 function，直到没有 var 和 function，就开始执行上下文

只有声明的变量会提升，初始化的不会。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 undefined

var y = 7; // 初始化 y