ES6学习的个人总结

   博客仅用来记录自己的学习历程，如果有错，希望您能私信我，或者在评论区提出，感谢

1.let与const

        如果要说起es6，首先当然要说说let与const,那let又是什么，let，其实是es6新推出的，用来定义变量的关键字，用来取代已经老旧的var。

    let的特点：有块级作用域，意思就是，变量的有效范围，只在它所在位置的一前一后的两个大括号中间。

                      没有预处理，意思是，不能在声明变量之前使用它。

                      不能重复定义。

    let的作用与应用：作用就是定义一个变量，应用在循环遍历监听，比var方便很多

let btns = document.getElementsByTagName("button");
    for( i = 0;i<btns.length;i++){
        var btn = btns[i];
        btn.onclick = function () {
            alert(i);
        }
    } // 点击按钮的结果，分别弹出的是3 3 3，因为var在这是全局的变量，循环结束后，i为3，
      //所以，进行点击回调的时候，弹出的是3
    
    let btns = document.getElementsByTagName("button");
    for(let i = 0;i<btns.length;i++){
        var btn = btns[i];
        btn.onclick = function () {
            alert(i);
        }
    }   // 点击按钮的结果，分别弹出的是3 3 3
        //因为let的作用域只是在循环体之间，当进行回调的时候，调用的是局部的i，而不是全局的i

    const：定义一个常量，不可改变，其他的特点与let相同

2.解构赋值

        解构赋值的主要理解就是，从数组或者对象中取值，然后赋值给多个变量。

        而解构赋值的用途多用在给函数的多个形参赋值的时候。

        

 //首先声明一个对象，一个数组
  let obj = {
      name:"小明",
      age:10
  }
  let arr = [1,2,"333"];

  //用解构赋值的方法，将obj中的name，age属性赋值给全局变量name，age
  //注：如果要提取对象中的属性，声明变量时，一定要用大括号，大括号中的变量名，会一一对应
     //目标对象中的同名属性
  let {name,age} = obj;
  //用解构赋值的方法，将arr中下标为0，1的数据赋值给了全局变量a，b
  //注：如果要提取数组中的数据，则声明变量时，要用中括号括住，每个变量会与数组中相应的下标
     //一一对应
  let [a,b] = arr;

  console.log(name,age);//小明 10
  console.info(a,b);    //1 2

  //使用解构赋值的方法传递参数
  function fun({name}) {
      console.log(name);
  }
  fun(obj)

3.模板字符串

        在使用字符串加变量拼接成一个新的字符串的时候，我们都需要用引号，加号，引号，加号之类的方法去拼接，这样的效率无疑是非常低下的，而es6给我们提供了模板字符串，让字符串加变量变得简便了很多。

        es6模板字符串的拼接方式为 `` 两个重音符，把要拼接的字符串与变量写在里面，而变量则要写在 ${} 里面

         `这里写字符串${这里是变量}字符串 `

let usernmae = "kobi",age = 40;
  
  //相对于旧的拼接方式，新的模板字符串无疑是非常方便的
  let str = `我叫${usernmae}我今年${age}岁了`;
  let str2 = "我叫"+usernmae+"我今年"+age+"岁了";
  
  console.log(str);//我叫kobi我今年40岁了

4.对象的简写方式

        在es6中，对象中的属性和方法都是可以简写的

            属性：如果在全局作用域中有同名属性，则属性值，可以省略不写，只写属性名就行

            方法：方法可以省略function

            

let username = "2333";

  let obj = {
    username,
    shuo(){
        console.log("我也不知道我要说什么");
    }
  }
  console.log(obj);
  obj.shuo();//我也不知道我要说什么

5.箭头函数

    在es6中，新增了一种声明函数的方式，即为箭头函数

    let 函数名 = (参数) =>{函数体}

    箭头函数与普通函数最大的区别就是    this，箭头函数没有自己的this，箭头函数的this，在于定义箭头函数时，它的外部，是否有普通函数，如果有，则普通函数的this就是箭头函数的this，如果没有，则this为window。

    

 var obj = {
        name:"obj",
        fun8:()=>{
            console.log(obj.name);
        }
    };

    //外部有常规函数，this为常规函数的this，即为obj；
    function fun5() {
        console.log(this)
        let fun6 = () => {
            console.log(this)
        }
        return fun6;

    }

    //外部没有常规函数，this为window
    let fun7 = () => {
        console.log(this)
    }

    fun5.call(obj)();// obj
                     // obj
    fun7();          //window

    接下来是箭头函数的一些书写规则

let fun1 = name => console.log(name) // 一个形参时，形参位置可以没有括号
    let fun2 = (name,age) => console.log(name,age)//两个即两个以上的形参，则需要括号，形参之间用逗号隔开；
    let fun3 = name => name//如果函数体只有一行且没有大括号，那么这一行的执行结果会被直接返回
    console.log(fun3("小明"));// 小明
    let fun4 = (naem,age) => {
        console.log(name);
        console.log(age);
    }//如果有两条以上的函数体，则需要大括号

6.三点运算符

        三点运算符是es6为了取代arguments而定义的，因为arguments只是一个伪数组，没有一般数组的方法，而三点运算符是真的数组，而且比较灵活，不过三点运算符只能用来提取形参最后的参数。

        function fun(...value){}

function fun(...value) {
      console.log(value);
      
      //三点运算符拥有数组的一般方法
      value.forEach(function (item,index) {
          console.log(item,index);
      })

  }
  function fun2(a,