...es6

文章目录
一。es6的介绍
二。变量 let 和常量 const
三。预解析_声明提升
四。作用域
五。箭头函数
六。箭头函数应用场景
七。函数传递参数的时候的默认值
八。展开运算符
九。模板字符串
十。解构赋值
十一。强制改变this指向的方法

一。es6的介绍
es6 全称 ECMAScript 6.0，是es5 的升级版本，更加强大，以及完善

还有叫法ES2015 es6版本 Es2016 es6.1版本

二。变量 let 和常量 const

· let 和 const 永远不会有全局变量。

let和const的区别
1、let 声明的变量的值可以改变，const 声明的变量的值不可以改变（const用来声明常量）
2、let 声明的时候可以不赋值，const 声明的时候必须赋值

let、const和var的区别
1、let 和 const 不允许重复声明变量
2、let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）
3、let 和 const 声明的变量会被所有代码块限制作用范围（只要遇到大括号就形成作用域）

三。预解析_声明提升

var num;

声明提升：变量的声明都必须，所有程序之前面去执行。
            
alert(num);
num = 10;
alert(num);

// alert(num);
// let num = 10;
// alert(num);

alert(num);
const num = 10;
alert(num);

四。作用域
· 通过var声明的变量以当前所在函数为作用域，
· 如果我们在某一个函数内部声明变量和作用域，只能在当前函数内部使用。
· es6新增了块作用域
· 离开了大括号，可以理解为块作用域的生命周期结束

    function show(a){
      var b = 20;
      alert(a + ", " + b);
    }

      show(10);
      alert(a + ", " + b);

五。箭头函数

语法：(函数的行参) => { 函数体内要执行的代码 }

箭头函数 适当省略return和function关键字
【注】箭头函数从执行效率上来说，和普通的声明函数写法没有任何区别。
个人建议：按照个人习惯。

    var add = (x, y) => x + y;

    alert(add(30, 40));

重点：箭头函数只能简写函数表达式，不能简写声明式函数。

重点：箭头函数只能简写函数表达式，不能简写声明式函数。

    function fn(){} //不能简写
    var fun = function(){  //可以简写

    }

    // var fun = () => {};

    var obj = {
        fn: function(){ //可以简写

        }
    }

箭头函数的特殊性：

【注】普通函数中都有this，this指向当前函数的主人。

1、箭头函数中没有this，箭头函数里面的this指向上一层函数中的this。
2、箭头函数中没有arguments这个对象

   var person = {
        username: "钢铁侠",
        // showName: function(){
        //     alert("我的名字叫" + person.username);
        //     alert("我的名字叫" + this.username);
        // }

        showName: () => {
        // alert("我的名字叫" + person.username);
        // alert("我的名字叫" + this.username); //我的名字叫undefined

        alert(this);
        }
    }

    person.showName(); //object Window

箭头函数的写法上需要注意：

1、函数的形参只有一个的时候可以不写()，其余情况下必须写
2、如果函数体只有一行代码的时候，可以不写{}，并且会自动return

六。箭头函数的应用场景

箭头函数和ECMA5的语法结合使用，非常完美。

              forEach  遍历
              filter   过滤
              map      映射
    var arr = [10, 20, 30, 40, 50];
    // arr.forEach(function(item){
    //     document.write(item + "<br/>");
    // })

    // arr.forEach(item => {document.write(item + "<br/>");})

    // var newArr = arr.filter(item => item > 20);

    var newArr = arr.map(item => item * 2);
    alert(newArr); //20,40,60,80,100
  

七。函数传递参数的时候的默认值

  ES6之前默认值的设置
    function func(a){
        a = a || 10;
        alert(a);
    }

    func();
    func(100);

【注】在ES6中我们可以直接把默认值写在函数的形参位置

    function func(a = 10){
        alert(a);
    }

    func();
    func(100);

八。展开运算符
语法：…
ES6 里面新添加了一个运算符 … ，叫做展开运算符
<1>作用，将数组展开
<2>作用，将对象展开

    var arr = [10, 20, 30];

    function show(x, y, z){
        alert(x);
        alert(y);
        alert(z);
            }

    show(arr[0], arr[1], arr[2]);
    show(...arr);

九。模板字符串
${表达式}进行拼接
1、反引号可以换行书写
2、反引号可以直接在字符串里面拼接变量

普通字符串：所有带单引号或者双引号就叫做字符串。
        'hello' "world";


1、普通的字符串，一般情况下，只能放在一行处理
2、进行字符串拼接，通过+号进行拼接


ECMA6新的字符串 --- 模板字符串
<1>必须用反引号``括起来，可以随机换行
<2>占位符的语法，进行字符串拼接  ${表达式}

   
    function showSelf({name, age = 40, sex = "男"}){
    alert(`我的名字叫${name}, 我的年龄是${age}, 我的性别是${sex}`);
            }

    showSelf({
        name: "贝吉塔",
        age: 33,
        sex: "男"
    })

十。解构赋值
· 左右两边结构必须一样
· 右边必须是个合法的东西
· 声明和赋值不能分开 (必须在一句话里完成)
1、通过数组解构进行赋值
2、通过对象解构进行赋值

    var x = 10, y = 20, z = 30;
         alert(x + ", " + y + ", " + z); 
         
    var [x, y, z] = [10, 20, 30];
         alert(x + ", " + y + ", " + z); 
         
    var [x, [a, b], y] = [10, [20, ], 40];
        alert(b + ", " + y);
            
    var {name, age, sex} = {
            age: 18,
            name: "钢铁侠",
            sex: "男"
        }

        alert(name);
        alert(age);
        alert(sex);

解构的好处

解构的好处：
1、交换两个数位置的时候
[num1, num2] = [num2, num1];

2、函数传参的时候没有必要考虑函数的顺序

3、解构的形式里面，也可以给参数设置默认值

4、函数可以同时返回多个结果

    function show(){
        return ["结果1", "结果2", "结果3"];
            }

    let [x, y, z] = show();
        alert(x);
        alert(z);

十一。强制改变this指向的方法
call
格式：函数名.call()
参数：第一个参数传入，this的指向
函数原有的参数全部往后顺移一位

   function show(x, y){
        alert(x + ", " + y);
        alert(this);
    }

    // show(10, 20);
    show.call("call", 30, 40);

apply
格式：函数名.apply()
参数：第一个参数传入this的指向
第二个参数是一个数组，数组里面存放着，我们所有需要传入的参数

    function show(x, y){
        alert(x + ", " + y);
        alert(this);
    }

    show.apply("apply", [50, 60]);

bind
格式：函数.bind()
参数：参数是this的指向
返回值：已经改变原来this指向的原函数
【注】this已经被预设改掉了。

     function show(x, y){
        alert(x + ", " + y);
        alert(this);
    }

    // show(10, 20);

    // var res = show.bind("bind");
    // alert(res); 
    // res(10, 20);

    // show.bind("bind")(40, 50);
   
    function show(){
        alert(this);
    }

    window.onload = function(){
        var aBtns = document.getElementsByTagName("button");

        aBtns[0].onclick = show;

        aBtns[1].onclick = function(){
            show.call("call");
        };

        aBtns[2].onclick = function(){
            show.apply("apply");
        };

        aBtns[3].onclick =                         show.bind("bind");
        }