学习高级的阶段ES6基础第一天let

一、定义变量Let和const–变量声明

• 不定义直接声明是直接挂在在全局window上（对全局空间有污染）

1.1、let和var的主要区别

• let声明的变量只在当前（块级）作用域内有效
• let声明的变量不能被重复声明
• 不存在变量的提升

1.2、首先了解ES6之前的作用域

• 全局作用域
• 函数作用域
• eval作用域

1.3、什么是块级作用域

• {·····}----花括号中的区域即为
• 块级作用域跨域嵌套{//我是块级作用域1号{//我是块级作用域2号}}

if(){}
switch(){}
for(){}
try{}catch(err){}
{}

** 注意：var obj={
a：1；
}此时是对象而不是作用块**

1.4、代码了解ES6作用块

• 1、

{
    var a=1;
    let b=2;
}
console.log(a);/1
    console.log(b);//报错ReferenceError: b is not defined

• 2、嵌套

{
    let a=1;
    {
        console.log(a);//1
        let b=2;
    }
    console.log(b);//ReferenceError: b is not defined
}

• if作用域

if(true)
{
    var a=1;
    let b=2;
}
console.log(a);//1
console.log(b);//
ReferenceError: b is not defined

• var是不受块级作用域影响的
• for块级作用域

//let
for(le i=1;i<3;i++)
{
console.log(1);//1 2
}
console.log(i);//ReferenceError: i= is not defined
//var
for (var i=1;i<3;i++)
{
    console.log(i);//1 2
}
console.log(i);//3

1.5、

注意：使用let或者const声明的变量，不能被重新声明

\\1、var
var dad='我是大哥';
console.log(dad);//'我是大哥';
var dad;//不会出错--可以修改
console.log(dad);//'我是大哥';
\\2、let
let son=1;
let son=2;\\报错

1.6、let不存在变量提升 var存在

//把下面的定义提升，只提升声明不提升赋值
console.log(dad);//undefined
var dad='big   brother'；
console.log(b);//报错
let b=10;

1.7、暂存死区

//var
var a=1;
{
    console.log(a);//1
    var a=10;
}
console.log(a);//10
//let
let a=1;
{
    console.log(a);//报错
 let a=10;
}
console.log(a);

注意：ES6规定，如果块级作用域如果存在let、const声明的变量，这个变量一开始就会形成一个封闭的作用域，即使向上的作用域存在同名变量也拿不到

1.8、let小案例：生成十个按钮，每个按点击的时候弹出1-10

    <script>
for(var i=1;i<10;i++)
{
   var btn=document.createElement('button');
   btn.innerText=i;

   btn.onclick=function () {
      alert(i);
   }
   document.body.appendChild(btn);
}
   </script>

• 原因是：点击事件会在for循环后执行完才能执行异步操作一般都是进入队列后执行
  问题：点击每一个都是10
  解决方法一:使用自调用函数

    <script>
for(var i=1;i<10;i++)
{
   (function(i) {
     var btn=document.createElement('button');
     btn.innerText=i;
      btn.onclick=function () {
      alert(i);

   }  
   document.body.appendChild(btn);
   })(i);

}
   </script>

• let:解决

for(let i=1;i<10;i++)
{

      var btn=document.createElement('button');
      btn.innerText=i;
      btn.onclick=function () {
         alert(i);

      }
      document.body.appendChild(btn);


}
   </script>

·