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

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

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。

本文标题为:JavaScript es6中var、let以及const三者区别案例详解

基础教程推荐