JavaScript声明:Var、Let、Const该选谁?

323 阅读3分钟

「这是我参与2022首次更文挑战的第6天,活动详情查看:2022首次更文挑战」。

ES6引入了许多很棒的特性。以前开发者都是用var来声明变量,ES6引入let和const声明变量。很多初级开发者在学习阶段使用起来傻傻分不清,下面我们来详细介绍下为什么ES6会引入let和const,以及怎么使用它们。

var

使用var声明一个变量的话,那么这个变量就属于当前的函数作用域,如果声明是发生在函数外的顶层的,那么这个变量就属于全局作用域。

var 可以被重新声明和更新。

这意味着可以通过重新初始化来更新变量的值,并且可以var使用相同或不同的值一次又一次地声明使用关键字声明的变量。

var a = 555555;
var b = 666666;

var a = 777777;
b = 888888;

console.log(a) // 777777
console.log(b) // 888888

如果声明变量时省略var的话,这个变量就会成为全局变量。存在变量提升

变量提升

变量提升是解释器在执行代码之前为变量和函数声明分配内存的过程。这允许我们在声明和初始化变量之前使用它。

console.log(b); //undefined
var b = 7777777;
console.log(b); //7777777

var的问题

在下面的代码示例中,全局作用域b被块作用域b替换了,最后打印出了666666。如果是故意这么写的,没问题。但如果代码逻辑复杂,就会出现很多意向不到的问题。

var b = 777777
if(true){
  var b = 666666
}
console.log(b) // 666666

这就是为什么引入了let和const,并推荐大家使用。

let

let是对于上述问题的一种改进,let是块级作用域,这意味着在块中声明的变量只能在该块中使用。在块外声明的变量是全局范围的。函数内部使用let定义后,对函数外部无影响。

示例:

let b = 777777;

function letScopeCheck(){
  let c = 666666;
  console.log(c); //666666
}

console.log(c) //Uncaught ReferenceError: c is not defined
letScopeCheck();
console.log(b) //777777

let不能被重新声明,但可以在范围块内更新。示例:

let c = 777777;

let c = 666666; //SyntaxError: Identifier 'c' has already been declared

if(true){
  /* 这里是一个新的块,不属于重新声明 */
    let c = 555555;
    console.log(c) //555555
}

console.log(c) //777777

const

const是常量,必须初始化,不能被重新声明或者修改。它也是块级作用域,类似于let。

示例:

const a = 777;//必须初始化

console.log(a) //777

总结

关键词作用域更新重复声明变量提升
var函数作用域/全局作用域可更新可以可以
let块作用域可更新不可不可
const块作用域不可更新不可不可

注意:尽可能使用const,使用let在顶部声明并初始化所有变量,避免使用var。