ES6之探索与比较var、let、const关键字

今天药忘吃喽~ 2023-07-08 09:05 43阅读 0赞

var、let、const三个关键字作用基本相同都是为了声明变量，但也存在区别，无论用法还是作用域都有差异。

**- var 关键字**  
`var`关键字是在es6之前就推出的，用于声明变量。它的作用域为全局，也就是不区分代码块：

var Array = [];
    var i;
    for (i = 0; i < 3; i++) { 
      numArray.push(i);
    }
    console.log(i);  // returns 3

上面变量`i`通过`var`全局声明，所以在其他代码块函数中进行`i++`计算会直接改变`i`的值。但每一个变量都全局声明难免会出错，而且当变量重复声明被覆盖的时候不会提示错误：

var name = 'Job';
    var name = 'David';
    console.log(name);     // 打印出 'David'

在小型开发中可能没多大影响，但大型项目中将导致后续debug十分困难。这时，es6推出`let`新关键字。

**- let 关键字**  
`let`也用于声明变量，但不同于`var`的是它的作用域是局部，也就是止步于变量所存在的代码块或语句中：

let print;
    for (let i = 0; i < 3; i++) { 
      if (i === 2) { 
        print = function() { 
          return i;
        };
      }
    }
    console.log(printNumTwo());  // 返回 2
    console.log(i); // 返回 "undefined"，因为i只作用于for代码块

并且它解决了上述所说的变量重复声明被覆盖的问题，会提示报错：

let name = 'Job';
    let name = 'David';  // 报错，重复覆盖

拥有了`var`和`let`似乎已经能够满足日常开发需求避免很多出错了，暖心es6还推出了`const`关键字。

**- const关键字**  
在我理解，`const`可看做`let`的新版本，它拥有`let`的特性与优点，但区别之处在于它声明的是“只读变量”，在声明后无法再次赋值等操作此变量：

const noChange = "hello";
    noChange = "hi";   // 报错，变量只读无法更改

但是在声明对象、函数、数组时，它们是可以被改变的。`const`只保护了这些变量的标识无法更改，但变量内部元素是可以单一更改的：

const s = ["a", "b", "c"];
    s = [1, 2, 3];  // 报错，s变量无法重新赋值
    s[2] = "e"; // 内部元素单一更改可以成功
    console.log(s);  // 返回 ["a", "b", "e"]

在开发中合理运用`var`、`let`、`const`关键字声明变量可以避开很多bug。  
也请习惯多使用`"use strict"`，它代表开启了严格模式，用于检测常见的代码错误和不安全行为，这对自己的书写规范也大有好处。例如：

"use strict";
        x = 666; // 没有用关键字声明x，使用会报错