前言：这里学习es6我采用的前端工具室webstorm

下载地址：https://www.jetbrains.com/webstorm/

安装过程与IDEA完全一致，激活码到万能的百度上去找，在这里我就不过多的介绍了；

let和const关键字

在es6中，引入了let和const关键字；

let关键字是用来取代var的；

let作用，与var类似，用于声明一个变量；

特点：

1，在块级作用域里有效（比如循环遍历内部就可以用let定义变量）

实例：

{
    let a='http://47.100.191.44';
    var b='小李飞刀';
    console.log(b);
    console.log(a);
}
console.log(b);
console.log(a);

报错：ReferenceError: a is not defined

2、不能重复声明

{
    let a='http://47.100.191.44';
    let a= "http://baidu.com";
    var b='小李飞刀';
    var b = "百度";
    console.log(b);
    console.log(a);
}
console.log(b);
console.log(a);

SyntaxError: Identifier 'a' has already been declared

3，不存在变量提升

{
    let a='http://47.100.191.44';
    // let a= "http://baidu.com";
    var b='小李飞刀';
    // var b = "百度";
    console.log(b);
    console.log(a);
}
console.log(b);
// console.log(a);

console.log(c);
var c = "晓码阁";
console.log(d);
let d = '学员';

ReferenceError: Cannot access 'a' before initialization

4，const关键字用来定义常量

<script type="text/javascript">
    {
        let a='http://47.100.191.44';
        // let a= "http://baidu.com";
        var b='小李飞刀';
        // var b = "百度";
        console.log(b);
        console.log(a);
    }
    console.log(b);
    // console.log(a);

    console.log(c);
    var c = "晓码阁";
    // console.log(d);
    // let d = '学员';

    const e = 5;
    console.log(e);
    e = 6;
</script>

TypeError: Assignment to constant variable.

const定义的变量，不可改变，其他特性和let一样；

对象定义简写

es6对象定义简写

es6提供了对象定义里的属性，方法简写方式；

我们来看个实例，首先定义两个属性，然后再定义一个对象，里面用到属性赋值，以及再定义一个对象方法；

OK，我们来测试下吧，以及看下运行结果；

es6简写方式，假如属性和变量名一样，可以省略，包括定义对象方法function也可以省略；

<script type="text/javascript">
    let name='xiaoli';
    let age=20;
    //之前Javascript代码的写法
    // let obj={
    //     name:name,
    //     age:age,
    //     getName:function(){
    //         return this.name;
    //     }
    // };

    //目前ES6的写法
    let obj={
        name,
        age,
        getName(){
            return this.name;
        }
    };
    console.log(obj);
    console.log(obj.getName());
</script>

模板字符串

es6 模版字符串主要用于简化字符串的拼接；

看个例子，es6以前的写法；

我们来看下实例；定义一个变量，搞两个属性，然后控制台输出；  

如果属性多，那拼接量就大了；

看下 es6模版字符串写法 用 斜引号和${}符号实现；

let obj={name:'小李',age:'20'};
//原来javascript写法
let str='姓名：'+obj.name+'，年龄：'+obj.age;
console.log(str);

//ES6写法
let esStr=`姓名：${obj.name}，年龄：${obj.age}`;
console.log(esStr);

这样就省力多了；

注意点：这个斜引号，再tab键上方；

箭头函数

在es6中，推出了一个新语法 箭头函数；

以前定义一个函数，是这么定义的；

let fun=function(){

console.log('我是箭头函数');

};

现在可以简化下，用箭头函数：

let fun=()=>{console.log('我是箭头函数')};

然后假如函数体只有一条语句或者是表达式的时候{}可以省略

let fun=()=>console.log('我是箭头函数');

加形参情况；

let fun2=(a)=>console.log(a);

只有一个形参的时候 ()可以省略

改成：

let fun2=a=>console.log(a);

多个形参：

let fun3=(x,y)=>console.log(x,y);

fun3(20,30);

有返回值情况：

let fun6=(x,y)=>{

console.log(x,y);

return x+y;

}

console.log(fun6(1,3));

关于 箭头函数里的this；（重点）

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是再定义的时候所在的对象就是它的this

箭头函数的this看外层是否有函数，

如果有，外层函数的this就是内部调用箭头函数的this 

如果没有，则this是window

<script type="text/javascript">
    let btn1=document.getElementById('btn1');
    let btn2=document.getElementById('btn2');

    btn1.onclick=function(){
        console.log(this);
    };
    btn2.onclick=()=>{
        console.log(this);
    }
</script>

可以看出 点击 按钮1 这里的this是 调用的时候的btn1对象；

而点击按钮，this是window对象；

再来个复杂点的实例，来深入理解下：

箭头函数搞到定义对象的回调函数里；

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
    let btn1=document.getElementById('btn1');
    let btn2=document.getElementById('btn2');
    //this外层方法的this，也就是this.getName中this代表的对象，这里就是指的person1
    let person1={
        name:'小李飞刀',
        getName(){
            btn1.onclick=()=>{
                console.log(this);
            }
        }
    };
    person1.getName();

    //this指的是当前的被点击的html元素，在这里就是<button id="btn2">按钮2</button>
    let person2={
        name:'晓码阁',
        getName(){
            btn2.onclick=function(){
                console.log(this)
            }
        }
    };
    person2.getName();


</script>

over......