ES中var、let、const区别ES中var、let、const区别在 ECMAScript (ES) 中，var

ES中var、let、const区别

在 ECMAScript (ES) 中，var、let 和 const 都用于声明变量，但它们的行为和作用域有显著区别。以下是它们的详细对比：

var

作用域：函数作用域（function-scoped）。
- 在函数内部声明的变量只能在函数内部访问。
- 如果在函数外部声明，则成为全局变量。
变量提升：var 声明的变量会被提升到其作用域的顶部。
- 变量可以在声明之前访问，但值为 undefined。
重复声明：允许在同一作用域内重复声明。

示例：

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 输出: 10（因为 var 是函数作用域）
}
example();

let

作用域：块级作用域（block-scoped）。
- 在 {} 块（如 if、for、while 等）中声明的变量只能在该块内访问。
变量提升：let 声明的变量也会被提升，但在声明之前访问会抛出 ReferenceError（暂时性死区）。
重复声明：不允许在同一作用域内重复声明。

示例：

function example() {
    if (true) {
        let y = 20;
        console.log(y); // 输出: 20
    }
    console.log(y); // 报错: y is not defined（因为 let 是块级作用域）
}
example();

const

作用域：块级作用域（block-scoped），与 let 相同。
变量提升：与 let 相同，存在暂时性死区。
重复声明：不允许在同一作用域内重复声明。
赋值特性：
- const 声明的变量必须初始化，且不能重新赋值。
- 如果变量是对象或数组，其内部属性或元素可以修改，但不能重新赋值整个变量。

示例：

const z = 30;
z = 40; // 报错: Assignment to constant variable

const obj = { name: "Alice" };
obj.name = "Bob"; // 允许修改属性
console.log(obj); // 输出: { name: "Bob" }

obj = { name: "Charlie" }; // 报错: Assignment to constant variable

对比总结

特性	`var`	`let`	`const`
作用域	函数作用域	块级作用域	块级作用域
变量提升	是（值为`undefined`）	是（暂时性死区）	是（暂时性死区）
重复声明	允许	不允许	不允许
重新赋值	允许	允许	不允许
初始化要求	不需要	不需要	必须初始化

使用建议

优先使用 const：
- 如果变量的值不会改变，使用 const 可以避免意外修改。
需要重新赋值时使用 let：
- 如果变量的值需要改变，使用 let。
避免使用 var：
- var 的函数作用域和变量提升容易导致 bug，现代 JavaScript 中推荐使用 let 和 const。

示例对比

// var
var a = 1;
var a = 2; // 允许重复声明
console.log(a); // 输出: 2

// let
let b = 1;
let b = 2; // 报错: Identifier 'b' has already been declared

// const
const c = 1;
c = 2; // 报错: Assignment to constant variable

通过理解这些区别，可以更好地选择适合的变量声明方式，避免潜在的问题。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github