DayDayUp

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

为什么要写

在做vue项目中有许多特殊的写法，在CURD的模式下，虽然能够完成功能的开发。但是，在没有代码可拷的情况下，写新功能大脑一片空白，声明变量都得考虑哪个，不知所以然，故凑着此次机会，彻底梳理js声明变量的那些事。

前言

js中声明变量名主要有三个关键字，var、let和const。既然有三个关键字，肯定是有区别的

块级作用域概念

块级作用域指在If语句，switch语句，循环语句等语句块中定义变量，这意味着变量不能在语句块之外被访问。

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

const

const定义的变量不可以修改，而且必须初始赋值

1 const b = 2;//正确
2 // const b;//错误，必须初始化 
3 console.log('函数外const定义b：' + b);//有输出值
4 // b = 5;
5 // console.log('函数外修改const定义b：' + b);//无法输出

var

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。 var作用域只能函数级或是全局作用域，并没有块级作用域

1 var a = 1;
2 // var a;//不会报错
3 console.log('函数外var定义a：' + a);//可以输出a=1
4 function change(){
5 a = 4;
6 console.log('函数内var定义a：' + a);//可以输出a=4
7 } 
8 change();
9 console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4

let

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1 let c = 3;
2 console.log('函数外let定义c：' + c);//输出c=3
3 function change(){
4 let c = 6;
5 console.log('函数内let定义c：' + c);//输出c=6
6 } 
7 change();
8 console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3

简单来说

var关键字定义的变量：var在函数内部声明的变量只能在函数内部使用，函数外部声明的变量可以全局使用
定义块级变量的let
用于定义常量的const，声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

let与var的异同

要体现在作用域上，当在子代码块中使用中其声明的是块级变量，而var声明的是全局变量

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // if 块级作用域
  var b = 1; // 函数级作用域

  console.log(a);  // 4
  console.log(b);  // 1
} 

console.log(a); // 5
console.log(b); // 1

let与const的异同

相同点:

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

不同点

const声明的常量必须初始化，而let声明的变量不用
常量的值不能通过再赋值改变，也不能再次声明。而变量值可以修改

其他写法

const {code, data} = response

  getUnitLevel(requestData).then((response) => { //调接口
        const {code, data} = response
        if (code != 0) return
      });
    },

取response中的code和data的值，可以打印.

最后,一段代码,加深理解

<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错

    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  (在同一个{ }中,也属于同一个块，可以正常访问到)
        console.log(f); // 7  (在同一个{ }中,也属于同一个块，可以正常访问到)

    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>

Vue，详细解析js中var、let和const的异同