JavaScript es6中var、let以及const三者区别案例详解

var、let和const简介

在ES6以前，JavaScript的变量定义只有var一种方式。在ES6中新增了let和const两种定义变量的方式。

1. var定义的是一个可变的变量，它在函数作用域或全局作用域内都是有效的，并且可以被重新赋值。
2. let定义的是一个块级作用域的变量，它只在块级作用域内有效，并且可以被重新赋值。
3. const定义的也是一个块级作用域的变量，不同的是它定义的是一个常量，值在定义之后就不能被修改。

在JavaScript中，尽量使用let和const来定义变量，避免使用var。

示例1：全局作用域和块级作用域中变量的差异

//定义一个全局变量
var globalVariable = 'globalVariable';

//定义一个函数
function test() {
    //定义一个函数作用域中的变量
    var localVariable = 'localVariable';
    console.log(globalVariable);//可以输出全局变量
    console.log(localVariable);//可以输出函数作用域中的变量
}

test();
console.log(globalVariable);//可以输出全局变量
console.log(localVariable);//不能输出函数作用域中的变量，会报错

//使用let定义变量
let a = 10;

if(true) {
    //使用let定义块级作用域中的变量
    let a = 20;
    console.log(a);//可以输出20
}

console.log(a);//可以输出10

输出结果：

globalVariable
localVariable
globalVariable
Uncaught ReferenceError: localVariable is not defined
20
10

从结果可以看到，全局变量和函数作用域中的变量在任何地方都可以被访问到，而let定义的变量只在定义的块级作用域中有效。

示例2：const定义的常量

//定义一个常量
const PI = 3.1415926;

//尝试修改常量的值
PI = 3;

console.log(PI);

输出结果：

Uncaught TypeError: Assignment to constant variable.

从结果可以看到，使用const定义的变量在定义之后就无法修改。

结论

1. var定义的变量可以被重新赋值，而let和const定义的变量都不能被重新赋值。
2. var定义的变量在函数作用域或全局作用域中都是有效的，而let和const定义的变量只在块级作用域中有效。
3. const定义的变量在定义之后就不能被修改，而var和let定义的变量可以被修改。
4. 在JavaScript中，尽量使用let和const来定义变量，避免使用var。