let-const

ES6–let const

ES6简介

• ES6-ECMAScript6：由ECMA这个标准化组织制定的一个语言标准
• ES与JS的关系：JavaScript=ES（语法+API）+DOM+BOM
• ES6兼容性：主流浏览器的最新版本几乎全部支持ES6，IE老版本可以用Babe转码

let和const

• let声明变量，const声明常量
• 用法和var一样
• let，var声明变量，初始化之后还可以重新赋值
• const声明常量，一旦初始化就不能重新赋值

const

注意事项

• 使用const声明常量，声明时就必需初始化，不能留到以后赋值

• const声明的常量，允许在不重新赋值的情况下修改它的值
  （1）基本数据类型不能修改
  （2）引用数据类型

  const person={
  	username:'alex';
  }
  person.username='Zx';
  

let,const和var的区别

重复声明

• 已经存在的变量或常量，又声明了一次
• var允许重复声明，let和const不允许

变量提升

• var会提升变量的声明到当前作用域的顶部
• let和const不存在变量提升

暂时性死区

• 只要作用域内存在let，const；他们所声明的变量或常量就自动绑定这个区域，不再受到外部作用域的影响

• let，const存在暂时性死区，var不存在

  let a=2;
  function func1(){
  	console.log(a);
  	let a=1;
  }
  func1();
  

• func1（）
  （1）报错：Cannot access ‘a’ before initialization
  （2）函数只有被调用时才会形成作用域
  （3）函数作用域中没有a（let不存在变量提升），向上寻找，但在函数中用let声明了a，a自动绑定函数作用域，不允许向上寻找，导致a未被初始化

window对象的属性和方法

• 在全局作用域中，var声明的变量，通过function声明的函数，会自动变成window对象的属性和方法

块级作用域 *

• var没有块级作用域，let和const有块级作用域

  for(let i=0;i<3;i++){}
  console.log(i);  //报错,i未被定义,只有for中有定义
  

• 作用域链：全局作用域，函数作用域，块级作用域

• 块级作用域有：{}；for(){} ；while(){}； do{}while()； if(){}； switch(){}；只有和let，const配合才会生成块级作用域

let和const的应用

点击0，1，2按钮打印出对应的值

<button class="btn">0</button>
<button class="btn">1</button>
<button class="btn">2</button>

.btn {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  font-size: 80px;
  cursor: pointer;
}

let btns = document.querySelectorAll('.btn');

 for (let i = 0; i < btns.length; i++) {
   btns[i].addEventListener(
     'click',
     function () {
       console.log(i);
     },
     false
   );
 }