JS中var、let以及const关键字到底怎么用？

---

详解JS中var、let以及const作用域

在学习JS变量之后，初学者都避免不了都会一下子分不清这三个变量在代码块中的作用域范围，其实const简单理解它就是定义常量的，但是在实际开发中，我们却很常见它的身影。

说实话刚开始我也分不清他们的作用域范围，但是自己再去详细看一遍教程之后，其实发现还是挺简单的，只要自己上手去实操一遍过后，基本就已经牢记了，自己就是太懒了，哈哈，很多东西看一遍就过了，以至于到真正用起来，一问三不知。

所以，接下来我们通过代码片段去搞清楚它们三个的区别

---

用var关键字定义的变量：
情况一：

<script>
    //定义并赋值一个var变量
    var a = 1;      //此时我们定义的是全局变量

    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        var a = 2;
        a = 3;
        console.log("函数中的值为：",a);
    }
    //调用函数
    myfunction();
    console.log("函数外的值为：", a);
</script>

此时控制台输出的就是正常内容：

情况二：

<script>
    //定义并赋值一个var变量
    var a = 1;      //此时我们定义的是全局变量

    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        var a = 2;
        a = 3;
        console.log("函数中的值为：",a);
    }
    console.log("函数外的值为：", a);
</script>

此时输出a的值，显示结果为1，也就是说即使是在函数中重新定义，赋值 a ，它作用的范围都仅限于函数体内，函数体外是不会受影响的，这种情况我相信不用说大家都能理解。

---

用let关键字定义变量：
情况一：

<script>
    //定义并赋值一个var变量
    let a = 1;      //此时我们定义的是全局变量

    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        let a = 2;
        a = 3;
        console.log("函数中的值为：",a);
    }
    // 调用函数
    myfunction();
    console.log("函数外的值为：", a);
</script>

结果和var一样，函数体内和函数体外输出的内容都是对应的，互不影响，且也可以重新赋值

情况二：

<script>
    //定义并赋值一个var变量
    let a = 1;      //此时我们定义的是全局变量
    let a = 2;
    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        let a = 2;
        let a = 3;
        a = 3;
        console.log("函数中的值为：",a);
    }
    // 调用函数
    myfunction();
    console.log("函数外的值为：", a);
</script>

此时，就算程序还没运行，代码提示中就会出现报红，证明不论在全局作用域下还是在局部作用域，let关键字定义的变量是不允许重新定义的

---

用const关键字定义常量
其实听见常量都知道它的定义规则了，但是，我们还是不厌其烦的自己去再尝试以下
情况一：

<script>
    //定义并赋值一个var变量
    const a = 1;      //此时我们定义的是全局变量
    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        const a = 2;
        console.log("函数中的值为：",a);
    }
    // 调用函数
    myfunction();
    console.log("函数外的值为：", a);
</script>

此时，用const关键字定义的常量和上面的情况一一样，都是正常的

情况二：

<script>
  //定义并赋值一个var变量
  const a = 1;      //此时我们定义的是全局变量
  const a = 2;
  //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
  function myfunction(){
    
    
      const a = 2;
      const a = 3;
      
      console.log("函数中的值为：",a);
  }
  // 调用函数
  myfunction();
  console.log("函数外的值为：", a);
</script>

此时，程序还没有被运行，代码提示就会报红，所以说，常量是不能被重复定义并赋值的

情况三：

<script>
    //定义并赋值一个var变量
    const a = 1;      //此时我们定义的是全局变量
    a = 2
    //定义一个函数，用来代表作用域，只要函数懂了，其实对象也就懂了
    function myfunction(){
    
    
        const a = 2;
        console.log("函数中的值为：",a);
    }
    // 调用函数
    myfunction();
    console.log("函数外的值为：", a);
</script>

此时我只是重新赋值了a，并没有重新定义，虽然代码提示没有报红，但在控制台中，就已经出现了错误，同样，即使是在函数中定义赋值常量并再次赋值，也是和上述一样，所以说，常量是不能被重新定义和赋值的

总结

var： 无论是在全局作用域或是局部作用域，用var关键字定义变量，都可以进行重新定义或赋值操作，这相信大家不用说都知道

let： 在全局作用域下定义赋值或重复赋值，或者是在局部作用于下定义赋值或赋值，都是可行的，但是，不能在同一定义域下重复赋值。

const： 无论在全局作用域下还是局部作用域下，都可以声明并赋值一个常量，但是常量是不可被再次定义或赋值的，即便是在全局作用域下声明赋值一个常量，在局部作用域下修改其值，虽然代码提示不会报错，但是也是不可行的。