JavaScript ES6 之var、let与const变量

JavaScript是前端开发不可缺的一部份，在如今前端高速发展的时代，JavaScript也是重中之重，今天我将分享ES6中的变量。

前端开发人员对申明变量var是很熟悉的，我们来看看一段例子。

if(true){
  var n = 1;
}
console.log(n);     //输出1

在javascript中，上面这种情况很容易出现，javascript也是正常输出，在编程语言中，这种语法理应是会报错的，但是在javascript中不会，因为，javascript中的变量只有全局作用域和局部作用域，没有块级作用域，而且javascript的变量存在变量提升，所以上述中的代码实际是全局作用域。

我们再来看看ES6中的变量声明，例子如下：

if(true){
  let n = 1;
}
console.log(n);   //n is not undefined

我们比较两个例子，会发现下面let 声明的变量，在console中无法打印，会出现undefined，这就是因为在ES6中严格持行变量不在有变量提升，我们在看看另外一个例子。

var temp = "me is string";
if(true){
  temp = "change this value";    //ReferenceError
  let temp;
}

很奇怪，我们第一句中使用var 声明变量temp是正常运行，但是在if中改变temp时会报ReferenceError错误，为什么呢? 因为ES6中的let声明变量时，会在此区域内形成暂时性死区，在该区域内不允许有任何形势声明出来的相同变量，所以，let声明的变量只能在该区域中只出现一次，不能有重复的，以下例子都会报错。

例子一:

function argument(){
  var temp = "me is string";    //ReferenceError
  let temp = false;
}

例子二:

function argument(){
  let temp = "me is string";    
  let temp = false;
}

例子三:

function argument(temp = "me is string"){
  let temp = false;
}

很明显ES5中的var比较ES6中的let,实际let是新增了块级作用域，如何在es5中使用块级作用域，我们必须这样写：

//IIFE写法
(function(){
  if(true){
      var temp = "me is string";
  }
  console.log(temp);    //me is string
})()
console.log(temp);    //temp is not a undefined
//ES 6写法
{
  let temp = "me is string";
  console.log(temp);    //me is string
}
console.log(temp);     //temp is not a undefined

const 命令

接下来，我们看看let 与const 声明变量，在ES6中给出了另一种变量声明方式，const，我想大家应该猜到它是做什么的了，它与C#中的const作用相同，只能赋一次值，不可以修改, 初始化时必须赋值， 我们来看看例子。

const PI = 3.1415926;
PI = 3;    // TypeError PI is read only

在PI被声明初始化后，对它进行操作，是会被告知此属性是一个只读的。

const A = {};
A.name = "A";
A = {};    //TypeError A is read only

在此例子中，我们发现申明出来的A是object对象，对它的属性进行修改是被允许的，可是修改其对象是被拒绝的，由此可以说明，const声明出来的只是其内存中的地址不能被修改，其内存中的值是可以修改的。

示例一：

let temp = "me is string"; 
const temp = false;    //SyntaxError

示例二：

const temp = "me is string"; 
const temp = false;                //SyntaxError
const Max;                         //SyntaxError

示例三：

{
   const Max = 10;
   {
          const Max = 5;
          console.log(Max);    //5
   }
}
console.log(Max);      //Max is not a undefined

上述所示的三个例子中，说明const声明出来的变量也是有块级作用域的，同域中不能有相同变量名，也不能不对const变量不赋初始值。