提升了现代JavaScript开发体验的新兴变量声明方式：let与const

let与const与var的区别

ES6规范新增了let、const两种变量声明方式，项目中也经常要用到，今天借着温习ES6语法，来总结let 、const、var的区别。

1. 作用域

• var ：全局作用域或函数作用域 。在使用var声明的变量时，会发生变量提升，即变量在声明之前就可以使用，并且变量提升时会被赋予undefined值。
• let ：块级作用域 。在使用let声明的变量时，变量只在声明所在的代码块内有效，不能在代码块外访问。
• const ：块级作用域 。在使用const声明的变量时，变量只在声明所在的代码块内有效，并且变量的值一旦被初始化，就不能再被修改。

2. 变量提升

• var ：会发生变量提升。
• let ：不会发生变量提升。
• const ：不会发生变量提升。

3. 声明的位置

• var ：可以在代码块的任何位置声明。
• let ：只能在代码块的开头声明。
• const ：只能在代码块的开头声明，并且必须立即初始化。

4. 重新声明

• var ：可以在相同的作用域内重新声明。
• let ：不能在相同的作用域内重新声明。
• const ：不能在相同的作用域内重新声明。

5. 赋值

• var ：可以重新赋值。
• let ：可以重新赋值。
• const ：不能重新赋值。

6. 初始化

• var ：可以不初始化。
• let ：必须初始化。
• const ：必须初始化。

7. 用途

• var ：适用于需要在全局作用域或函数作用域内声明的变量。
• let ：适用于需要在块级作用域内声明的变量。
• const ：适用于需要在块级作用域内声明的常量。

举例说明

1. 作用域

// 全局作用域
var a = 10;

// 函数作用域
function foo() {
  var b = 20;
  console.log(a); // 10
  console.log(b); // 20
}

foo();

在这个示例中，var声明的变量a具有全局作用域，可以在任何地方访问。var声明的变量b具有函数作用域，只能在foo函数内部访问。

// 块级作用域
let c = 30;

if (true) {
  let d = 40;
  console.log(c); // 30
  console.log(d); // 40
}

console.log(c); // 30
// console.log(d); // ReferenceError: d is not defined

在这个示例中，let声明的变量c具有块级作用域，只能在它声明所在的代码块内访问。let声明的变量d具有块级作用域，只能在if代码块内部访问。

2. 变量提升

console.log(a); // undefined
var a = 10;

在这个示例中，var声明的变量a在声明之前就可以使用，并且变量提升时会被赋予undefined值。

// ReferenceError: e is not defined
console.log(e);
let e = 20;

在这个示例中，let声明的变量e在声明之前不能使用。

3. 重新声明

// ReferenceError: f is already declared
let f = 10;
let f = 20;

在这个示例中，let声明的变量f不能在相同的作用域内重新声明。

4. 赋值

var g = 10;
g = 20;

在这个示例中，var声明的变量g可以重新赋值。

let h = 10;
h = 20;

在这个示例中，let声明的变量h可以重新赋值。

// TypeError: Assignment to constant variable.
const i = 10;
i = 20;

在这个示例中，const声明的变量i不能重新赋值。

总结

let和const是ES6中新增的两种变量声明方式，它们具有块级作用域，有助于提高代码的可读性和可维护性。

• let ：适用于需要在块级作用域内声明的变量。
• const ：适用于需要在块级作用域内声明的常量。

希望这篇文章对您有所帮助。如果您有任何疑问，请随时留言。