认识 varletconst

Posted 2020-10-16 卷柏的花期

我们通过声明、初始化、值的可变性、作用域、变量提升以及在工作中如何使用等多个方面来详细了解var、let、const等关键字功能与特点。

声明

var，let：可以先声明，后赋值（初始化），默认值是 undefined。
const：不能将声明与初始化单独分开，否则报错，没有默认值。

var：声明的标识符可以被重复声明多次，多次声明进行的都是覆盖操作，
const，let：同一个标识符不能同时声明多次，否则报语法错误。

let variable;
let variable; //Uncaught SyntaxError: Identifier 'x' has already been declared

初始化

var,let：可以先定义再初始化，默认值为 undefined。
const：不能将变量的声明与初始分离进行单独操作。

 const variable //Uncaught SyntaxError: Missing initializer in const declaration

值的改变

const：不可以改变值，定义的是不变量。
let,var：定义的变量可以改变值。

const variable = 1;
variable = 2; //Uncaught TypeError: Assignment to constant variable.

作用域

var：不具有块级作用域。
const，let：都具有块级作用域。

for(var a=0;a<3;a++);
for(let b=0;b<3;b++);
a; //3

if(a){
    const c = 0;
}

b; //Uncaught ReferenceError: b is not defined
c; //ReferenceError: c is not defined

标识符提升

var： 定义的变量存在变量提升情况。
const,let：声明的变量都不具有变量提升的情况，否则报错。

console.log(a); //Uncaught ReferenceError: a is not defined
let a = 1;

如何使用？

目前很多浏览器对于 ES6的兼容已经越来越强大了，所以未来只按照 ES5的方式去写代码绝对是不够的，因此从此刻开始，我们要将更多已经成熟并且流行的 ES6新特性加入到我们的代码中，当然，这势必会对现有的规范与编码习惯造成很大的冲击，但是我想，学习一门新技术，技术本身并非全部，而是要将新技术更好的融入现有的工作任务中去，去发现新特性解决问题的本质才是重中之重。

通过对 var，let，const在声明，赋值，作用域等对比，我们可以明显的得出一个使用的限制等级的划分：

var -> let -> const

而在具体的工作中，对我们编写的代码结合上面的限制等级一起进行分析，就不难得出var，let，const在不同地方，不同层面的具体应用了
。
例如，let相比 var除了具有块级作用域，在全局代码或者是函数代码中let与var并没有很大的区别。但是一旦在全局代码与函数代码中具有块级范围（JS并不具有块级代码），例如，if，for，while，with 等语句时，并在其中通过 var，let 定义了变量，那么情况就会有很大的不同：

function test1(){
    
  var a = 1;  
  let b = 2;
  console.log(a);
  console.log(b);
  
}

function test2(){
    
  var a = 1;  
  for(let i=0;i<3;i++){
    ;
  }
  console.log(a);
  console.log(i);
  
}

test1();
test2();

而 const 相比 var 具有块级作用域，再对比 let ，它的声明与初始化必须同时进行，值一旦初始化便不可改变,所以，const通常用来定义一些全局的常量，例如通过require载入的模块,或者用于全局配置的不变量变量等。

另外需要注意的是，const值如果是一个对象，那么允许修改对象的属性而不允许修改变量本身的值。

const b = {};

b.x = 1;
b.y = 2;

console.log(b);

b = {
    z: 1
};
console.log(b);

总的来说在具体工作中使用，全局不变的量可以用const定义，局部作用域中的块级范围代码可以通过let定义，而其它一般代码依然可以继续使用我们更为熟悉的 var关键字。