var ,let和const变量

一.var关键字

1.var声明作用域

这里函数叫test（），调用它会给这个变量赋值，调用之后变量随即被销毁，因此代码中的最后一行会导致错误。

function test(){
      var message ="hi"//局部变量
    }
    test()
    console.log(message);//ReferenceError: message is not defined

下面去掉var关键字之后,message就变成了全局变量，只要调用一次test（）函数，就会定义这个变量，并且可以在函数外部访问到。

 function test(){
      message ="hi"//全局变量
    }
    test()
    console.log(message);//hi

注意：虽然可以通过省略var操作符定义全局变量，但不推荐这么做。在局部作用域中定义的全局变量很难维护，也会造成困惑。这是因为不能一下子断定省略var是不是有意而为之。在严格模式下，如果像这样给未声明的变量赋值，则会导致抛出ReferenceError。

2.var声明提升

使用var关键字声明的变量会自动提升到函数作用域顶部。所谓“提升”，就是把所有变量都拉到函数作用域的顶部。

   function foo(){
      console.log(age);//undefined
      var age =10;
    }
    foo()

上面代码可以等价于如下代码：

  function foo(){
      var age;
      console.log(age);
      age =10;
    }
    foo()

3.var关键字的问题

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
//var关键字会自动提升变量到函数顶部，导致点击按钮一，显示第五个按钮被点击
 const btns = document.getElementsByTagName('button')
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
  //这里可以使用闭包解决变量自动提升问题
  var btns = document.getElementsByTagName('button');
    for (var i=0; i<btns.length; i++) {
      (function (num) { // 0
        btns[i].addEventListener('click', function () {
          console.log('第' + num + '个按钮被点击');
      })
    })(i)
  }
  //或将var换成let
   const btns = document.getElementsByTagName('button')
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
</script>

二.let

1.声明

let和var的作用差不多，但有着非常重要的区别。let声明的范围是块级作用域，var声明的是函数作用域。

if(true){
     var name="aaa";//由于var没有块级作用域，这里会将其声明到全局，成为window对象的一个属性
     console.log(name);//aaa
   }
   console.log(name);//aaa
   console.log(window.name);//aaa

如下代码中，age之所以不能在if块级作用域外部被引用，是因为他的作用域仅限于该块内部。块级作用域是函数作用域的子集，因此适用于var的作用域同样适用于let。

if(true){
     let name="aaa";
     console.log(name);//aaa
   }
   console.log(name);//

let不允许同一个块级作用域中重复声明

let name="aaa";
let name="bbb";//Identifier 'name' has already been declared

2.暂时性死区

let声明的变量不会在作用域中被提升

 function foo(){
    console.log(name);
    var name = 'aaa';//变量提升
  }
  foo()

先打印后声明，在let声明之前执行的瞬间被称为“暂时性死区”。

//age不会提升
console.log(age);// ReferenceError: Cannot access 'name' before initialization
let age= "12";

3.全局声明

与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性(var声明的变量则会）。

var name ="Matt";
console.log(window.name);//matt

 let age = "12";
 console.log(window.age);//undefined

三.const

1.const的行为与let基本相同，唯-一个 重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行时错误。
2.不允许重复声明
3.声明的作用域也是块

 const age = "12";
    age = "14";
    console.log(age);//TypeError: Assignment to constant variable.

这里每次都会迭代出一个新的作用域，在作用域中声明新的变量

let i = 0;
    for (const j = 7; i < 5; ++i) {
      console.log(j);
    }
    //7,7，7，7，7
    for (const value in {
        a: 1,
        b: 2
      }) {
      console.log(value);
    }
    //a,b
    for (const value of [1, 2, 3, 4, 5]) {
      console.log(value);
    }
    //1,2，3，4,5

注意：

  // 1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改
  // const name = 'why';
  // name = 'abc';

  // 2.注意二: 在使用const定义标识符,必须进行赋值
  // const name;

  // 3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.
  const obj = {
    name: 'why',
    age: 18,
    height: 1.88
  }
  // obj = {}
  console.log(obj);

  obj.name = 'kobe';
  obj.age = 40;
  obj.height = 1.87;

  console.log(obj);

建议：在ES6开发中，优先使用const,只有需要改变某一个标识符的时候才使用let