ES6-掌握这些足矣

1.什么是ES6
在此不做过多赘述，想要了解的小伙伴参考http://www.infoq.com/cn/articles/es6-in-depth-an-introduction。

2.如何使用呢

    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="module">
        //code
    </script>

没错就是这么简单，其中看到bootstrap.js不要惊讶这跟我们熟知的bootstrap css框架没有任何关系。

3.ES6有哪些功能呢
①定义变量let
由let来代替var，其拥有块级作用域，举两个小例子：

{
    var a=11;
    let b=12;
}
console.log(a)；//11
console.log(b)；//b is not defined（因为全局没法调用块级区域的变量）

var a=[];
for(var i=0;i<10;i++){
    a[i]=function(){
       console.log(i);
    };
}
a[6](); //10（调用a多少都是10）
        
        
var b=[];
for(let i=0;i<10;i++){
    b[i]=function(){
        console.log(i);
    };
}
b[6]();    //6（调用b几就是几）

②定义常量const
顾名思义，所谓常量就是不可修改，一旦修改会报错误的。

③模板引擎（说人话就是字符串连接）
用法就是Tab键上面的那个反引号，举个小例子：

var str='世间安得双全法';//这里是正常的单引号
var str2=`${str},不负如来不负卿`；//而这里是反引号

④解构赋值
举个小例子立马秒懂：

var [a,b,c]=['爱猫','爱狗','爱康康'];
console.log(a+b+c)；//爱猫爱狗爱康康

对！你没看错，就是这么简单粗暴的给一组家伙赋值了。

⑤ES6小技巧
I.数组复制
a）var arr2 = Array.from(arr);简单，然而↓
b）var arr2 = [...arr]就是耍流氓，就是这么丧心病狂。
II.for of循环（和map紧密配合使用）
III.map和delete
a）map来个小例子尝尝鲜

var map = new Map();
map.set('a','apple');
map.set('b','banana');
map.set('c','cherry');
for(var key of map.keys()){
    console.log(key);//a b c
}
for(var val of map.values()){
    console.log(val);//apple banana cherry
}
for(var [key,value] of map.entries()){
    console.log(key,value);//a apple     b banana     c cherry
}

b)delete同样来个小例子：

var json = {a:12,b:5};
delete json.a;
console.log(json);//Object {b: 5}

⑥箭头函数，★这是一个重点哦★
箭头函数下，arguments是不能使用的；
再说个小结论，匿名函数根据参数不同情况有所不同，如下：
(parameter) => { … }//parameter是参数
当没有参数时：() => { … }
当一个参数时：parameter => { … }
当多个参数时：(parameter1,parameter2) => { … }
非匿名函数也简单就是在前面加上fnName =就可以了，不过需要注意的是『函数名后面的=两边必须加上一个空格』。
来个简单小应用：

var arr = [9,8,7,1,2,3,5,4,6];
arr.sort((n1,n2)=>n1-n2);//用sort方法写的一个正排序函数
alert(arr);//1,2,3,4,5,6,7,8,9

这里arr.sort((n1,n2)=>n1-n2);还原成ES5写法就是arr.sort(function(n1,n2){return n1 - n2;});细心的小伙伴应该发现了，这箭头函数默认return了。

⑦对象（也就是单例模式）

var name='vikang';
var person={
    name,
    showName:function(){
        return this.name;
    }
}
alert(person.showName());//vikang

⑧类（就是面向对象），★非常重要★，不懂这个和箭头函数的话，完全看不懂angular2.x是在干什么。废话不多说，吃个栗子：(注意一下，这里面的this是没问题O__O'''…)

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
var person1=new Person('vikang',25);
alert(person1.showAge());//25

提到类就不得不说一个很重要的东西，那就是继承，而且很简单那就是用extend，如下：

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
//继承如下
class Message extends Person{
     constructor(name,age,sex){
        //super这里需要把Person的参数传过来，可以用arguments来代替
        super(name,age);
        this.sex=sex;
    }
    showSex(){
        return this.sex;
    }
}
var message1=new Message('vikang',25,'男');
alert(message1.showSex());//男

然后就是模块的相关问题，ES6自带模块化。就不再用seajs和require.js这种模块化工具了。
a）定义导出：
写一个1.js文件如下

const a =1;
export default a;

同一个模块导出多个值的话如下

export default {a:12,b:5};

b）导入使用：

import  modA  from './1.js';
alert(modA);//1

⑨promise--就是一个对象，传递异步的操作数据和消息。

var p1=new Promise(function(resolve,rejected){
    resolve('success');
    rejected('fail');
});
    p1.then(function(value){
        alert('成功'+value);
    },function(value){
        alert('失败'+value);
})
//界面弹出：成功success

再来一个就会看的更清楚了

var p1=new Promise(function(resolve,rejected){
    resolve('success');
});
p1.then(function(value){
    console.log('成功'+value);        //成功success
    return 'you will '+value;
}).then(function(value){
    console.log(value);        //you will success
    return value+' !';
}).then(function(value){
    console.log(value);        //you will success !
    return value;
}).then(function(value){
    alert(value.split(' ').join('_'));    //you_will_success_!
})

⑩Gennerator（生成器），语法还是很简单的需要注意以下几点 ：
a）函数名的去前面加上*
b)函数你不使用yield
c）执行下一个状态用next
ok来个简单的例子：

function *show(){
    yield 'you ';
    yield 'will ';
    yield 'success ';
    yield '!';
    return 'yes';
};
var res=show();
console.log(res.next());    //Object {value: "you ", done: false}
console.log(res.next());    //Object {value: "will ", done: false}
console.log(res.next());    //Object {value: "success ", done: false}
console.log(res.next());    //Object {value: "!", done: false}
console.log(res.next());    //Object {value: "yes", done: true}

不知不觉，这么多东西诶，ES6的话，这些基本够用了。