几分钟带你搞懂let,const,var的区别!!!

645 阅读4分钟

ES6之前,JS这门语言只有一种声明变量的方式,呢就是用关键字var,到了ES6,官方大大才加上了,letconst这两个关键字,他们为变量带来了更多的灵活性和更好的语法特性,接下来让我们由浅入深的讲解一下这三个关键字.

image.png

首先我们来说最早出现的var

🐟var

最早出现的var具有局限性,这也是为什么后面要在ES6引入let,const的原因,就是为了解决var的一些局限性。

我们先来讲讲var有哪些特性

变量提升

var声明的变量会发生变量提升,你肯定会好奇什么是变量提升,小白们不用怕,且听我娓娓道来,想象一下,你在写作文的时候,老师要求你先把用到的一些重要词语先列在作文纸的最上面,然后再开始写作文具体的内容。JavaScript 中的变量提升就有点像这个过程。

在JS代码开始执行之前,他会把var声明的变量,不管代码是在哪个位置声明的,都先提到当前作用域的最开头,就好像把这些变量都先放到一个 “准备区” 一样。但是呢,只是把变量的声明提到前面了,给变量赋值的操作还是在原来你写的那个位置。 我们来看一段代码实例

console.log(a)
var a = 1

正常来说,你在声明一个变量前,去访问他,肯定是访问不到的,会出现 a is not defined,但是由于变量提升机制,会把 var a 这个声明提到最前面了,所以当执行到console.log(a)的时候,它能找到 a 这个变量,只是这个时候 a 还没有被赋值,所以它的值是 undefined

image.png

这可能导致一些意外的行为和难以察觉的错误,因为变量的实际声明位置与使用位置可能不一致,降低了代码的可读性和可维护性。

函数作用域

var声明的变量只有函数级作用域,没有块级作用域(let,const有块级作用域,没有函数作用域)。这意味着在一个函数内部声明的变量,在整个函数内部都可见,即使是在声明之前或在不同的语句块中。这可能会导致变量名冲突和意外的副作用,尤其是在复杂的函数内部或嵌套的代码块中。 我们来看一段代码

function test() {
    if (true) {
      var x = 10;
    }
    console.log(x); // 在if语句块外仍然可以访问到x
  }
  test();

image.png

如果这个时候在全局访问变量x,是访问不到的,因为它是用var在一个函数内部声明的变量,具有函数作用域.外部访问不到

可重复声明

允许在同一作用域内重复声明同一个变量,后面的声明会覆盖前面的声明,这可能会隐藏一些潜在的错误,使代码的逻辑不够清晰。

var y = 20;
var y = 30;
console.log(y); // 30

现在我们来看看letconst这两位新人

let 和 const

首先是上文中,我们提到的var,他不具备的呢个块级作用域.

块级作用域

letconst声明的变量具有块级作用域,由花括号{}界定,变量只在声明它的块级作用域内有效,在块级作用域外无法访问,这使得变量的作用域更加清晰和可控,有助于减少变量命名冲突和意外的副作用。

function test() {
    if (true) {
      let z = 30;
    }
    console.log(z); // ReferenceError: z is not defined,在if语句块外无法访问到z
  }
  test();

不存在变量提升

letconst不存在变量提升,必须先声明再使用,否则会报错。这使得代码的执行顺序更加直观,避免了因变量提升而导致的意外行为和错误。

    console.log(b); // ReferenceError: b is not defined
    let b = 2;
禁止重复声明

在同一作用域内不允许重复声明已经声明过的变量,否则会报错。这有助于提高代码的规范性和可维护性,避免因重复声明而导致的潜在错误和混淆。

let a = 5;
let a = 6; 
// 报错:Uncaught SyntaxError: Identifier 'a' has already been declared

还有一点是const可以用来声明常量,这在ES6之前是无法实现的

const关键字用于声明常量,一旦赋值后,就不能再重新赋值,这对于那些在整个程序生命周期内都不会改变值的变量提供了更严格的约束,有助于防止意外的修改和提高代码的稳定性。

    const p = 5; 
    p = 6; // TypeError: Assignment to constant variable.

🐟END

相信大家读完此文,会对他们三兄弟有了更清晰的认知,ES6 新增的letconst关键字为 JavaScript 开发者提供了更强大、更灵活的变量声明方式,弥补了var关键字的一些不足,使得代码更加清晰、可读、可维护,并且有助于避免一些常见的错误,提升了 JavaScript 语言的整体质量和开发效率。