ES6的学习（1）

let关键字

1. 作用:
   与var类似, 用于声明一个变量
2. 特点:
   在块作用域内有效
   不能重复声明
   不会预处理, 不存在提升
3. 应用:
   循环遍历加监听
   使用let取代var是趋势

<script type="text/javascript">
    //console.log(age);// age is not defined
    let age = 12;
    //let age = 13;不能重复声明
    console.log(age);
    let btns = document.getElementsByTagName('button');
    //绑定3个按钮，这里用var的出来的alert（i）是3，因为先执行主线程的，回调函数是队列里面的，调用才执行，换成let，let有它自己的作用于，和闭包类似，闭包其实可以看成有自己的作用域
    for(let i = 0;i<btns.length;i++){
            btns[i].onclick = function () {
                alert(i);
            }
    }

</script>

2.const关键字

1. 作用:
   定义一个常量
2. 特点:
   不能修改
   其它特点同let
3. 应用:
   保存不用改变的数据

<script type="text/javascript">
    const sex = '男';
    console.log(sex);
    //sex = '女';//不能修改
    console.log(sex);
</script>

3.变量的解构赋值

  let obj = {name : 'kobe', age : 39};
//    let name = obj.name;
//    let age = obj.age;
//    console.log(name, age);
    //对象的解构赋值
    let {age} = obj;
    console.log(age);//这里的age就说上面的age
//    let {name, age} = {name : 'kobe', age : 39};
//    console.log(name, age);

    //3. 数组的解构赋值  不经常用
    let arr = ['abc', 23, true];
    let [a, b, c, d] = arr;
    console.log(a, b, c, d);
    //console.log(e);
    function person(p) {//不用解构赋值
        console.log(p.name, p.age);
    }
    person(obj);

    function person1({name, age}) {//相当于let {name，age} = obj
     console.log(name, age);
    }
    person1(obj);

4.模板字符串

1. 模板字符串 : 简化字符串的拼接
  * 模板字符串必须用 `` 包含esc下方 tab上方
  * 变化的部分使用${xxx}定义
-->
<script type="text/javascript">
    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);
    console.log(`我叫${obj.name},`)
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);

5.箭头函数

* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
   3、扩展理解： 箭头函数的this看外层的是否有函数，
        如果有，外层函数的this就是内部箭头函数的this，
        如果没有，则this是window。
-->
<script type="text/javascript">
  //形参的情况
  //1.没有形参的情况
  let fun1 = () => console.log('我是箭头函数')
  fun1()
  //2.有一个形参
  //可以省略()
  let fun2 = a => console.log(a)
  fun2(2)
  // 3.有两个形参或以上
  let fun3 = (x, y) => console.log(x , y)
  fun3(23, 34)
  //函数体情况
  // 1.函数体只有一条语句或者是表达式的时候
  // 加不加{}都一样--------->会自动返回执行结果或者表达式的结果
  let fun4 = () => console.log('我是箭头函数')
  fun4()
  let fun5 = (a , b) => a + b
  console.log(fun5(22 , 12))
  // 2.函数体不止一个语句{}不可以省略  要return 否则undefined
  let fun6 = (x , y) => {
    console.log(x , y)
    return x + y
  }
  console.log(fun6(1 , 2))

  //this问题
  let btn1=document.getElementById("btn1");
  let btn2=document.getElementById("btn2");
  btn1.onclick=function(){
    alert(this);  //btn1
  }
  btn2.onclick=()=>{
    alert(this);  //window
    //输出window对象，它外层没函数所以this就是window,
    // 如果外层有函数，那么this就和外层函数的this一样
  }
  
  let txt = {
    name:'箭头函数',
    getName:function () {
      btn2.onclick = () =>{
        console.log(this) //txt
      }
    }
  }
  txt.getName()
  
  let obj={
    name:'箭头函数',
    getName:() => {
      btn2.onclick= () => {
        console.log(this);  //window
        //this是window对象，因为内层箭头函数会看自己外层有没有函数，
        // 结果都没找着函数，所以都指向window了。
      }
    }
  }
  console.log(obj.getName())
</script>