var、let和const的区别和用法

js中，定义变量有三个关键字，分别是var，es6中引入的let、const。这三个关键字的区别和用法如下：

var

出现最早，所有版本的js都可以使用这个关键字。

• 作用域仅包含函数级和全局两种。

• 代码中的声明会在解释运行时提升到首部，即放在最开始统一声明。只要代码中声明了，就可以在作用域内任意地方使用。

• 可以重复赋值。

• 声明的全局变量在html中属于window对象。

  // test.js
  
  // 全局级变量
  var name = "gary";
  
  function showPersonInfo() {
      // 这一句会输出undefined 原因是变量提升到首部声明，也就是会和name一起声明。
      console.log(age);
      // 函数级变量，仅能作用在函数内部。
      var age;
      // 重复声明
      var age = 13;
      
      // 输出 gary  使用了全局变量name
      console.log(name);
  }
  
  // 报错 变量age未声明
  console.log(age);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

  let

  ES6中引入，推荐使用.

• 在全局和局部作用域之外，存在块级作用域。即if for等语句，{}内部的块级作用域。

• 不可以重复声明。相同作用域内仅能声明一次。包括var和let互相重复声明也不可以。

• 不存在变量提升。就不能在声明前使用。

  // test.js
  
  // 全局作用域
  let name = "gary";
  
  function test(name) {
      if (name === "gary") {
          // 此处age的作用域是if这个块内
          let age = 13;
      } else {};
      
      // 报错。此时的作用域是函数，无age的声明。不存在变量提升
      console.log(age);
      
      let age = 14;
      // 输出 14. 这里的age作用域是局部，上边 if 内声明的age 作用域是块级。并不相同
      console.log(age);
      
      // 报错 不能重复赋值
      var name = "jack";
      // 报错 不能重复赋值
      let name = "gary";
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

  const

  ES6中引入。声明不需要修改的值时推荐使用

• 和let的区别在于，const声明的变量必须赋值，且不能修改。

• 但是如果初始化的值是对象或者数组，对象和数组内部的值可以修改。

  // test.js
  
  const name = "gary";
  const arr1 = [1, 2, 3];
  
  // 报错 不能修改
  name = "jack";
  // 报错 不能修改
  arr1 = [1, 2];
  
  // 正常执行 向arr1中插入一个数字
  arr1.push(4)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12