ES6入门到“放弃

1.ES6是什么，黑历史，不讲，自己百度去。

2.在浏览器中如何使用？

1.babel babeljs.io在线编译

2.traceur-----Google出的编译器，把ES6编译成ES5

traceur 编译

bootsrap 引导程序，和我们理解的bootstrap css那个框架没有半毛钱关系。

3.es6新功能

3.1.定义变量

let 替代var 拥有块级作用域。

3.2const

定义常量 常量不可以修改，如果修改会报错

3.3字符串连接

ES6管它叫模板引擎，其实就是字符串连接这个破玩意。

用键盘1左边那个键,反引号。

varstr='帅';//注意这里是正常双引号

varstr2=`你们从我脸上看到了什么${str},难道不是么？`;

4.解构赋值

var [a,b,c] = [12,5,8];

console.log(a,b,c);//12,5,8 是不是很简洁？

5.ES6新技巧

a)复制数组

arr2.from(arr)//再也不用用循环了，吼吼，还可不可以更性感一点

arr2 = [...arr]//简直是bug级别的用法，不过真心简单

b)for of循环

c)map 、delete

6.箭头函数 重点，angular 2.x用的不少。

/*function show(a){

return a;

}

var s=show(12);

alert(s);*/

var show=(a,b)=>a+b;

var s=show(12,5);

相当简单。

([param] [, param]) => {

statements

}

param => expression

解释：

param 是参数，根据参数个数不同，分这几种情况： () => { … } // 零个参数用 () 表示 x => { … } // 一个参数可以省略 () (x, y) => { … } // 多参数不能省略 ()

7.更简洁的对象语法

var name='abb';

var age=101;

var preson={

name,

age,

showName(){

return this.name;

},

showAge(){

return this.age;

}

};

alert(preson.showName());

你没有看错，bug一样的语法。

8.重中之重，不懂这个你彻底懵逼，完全看不懂angular2.x在干啥。类。

类，真特么累，一个语法糖，废柴，然而你还得懂。

class Person{ //类

constructor(name,age){

this.name=name;

this.age=age;

}

showName(){

return this.name;

}

showAge(){

return this.age;

}

}

var p1=new Person('aaa',10);

alert(p1.showName());

你没有看错，这里面的this就没有问题的。玩类，不得不说的一个东西就是继承，这里得感谢ES6，我们再也不用

apply 和 constructor 混合的方式继承了，太特么恶心了，直接用extend,鼓掌，送火箭。

class Person{ //类

constructor(name='default',age=0){

this.name=name;

this.age=age;

}

showName(){

return this.name;

}

showAge(){

return this.age;

}

}

//继承

class Worker extends Person{

constructor(name,age,job='扫地的'){

super(name,age);

this.job=job;

}

showJob(){

return this.job;

}

}

早特么应该这么玩，话说吐槽一下，敢不敢把construtor这么丑逼的东西给我换成真正的构造函数？

再说一个模块化，前方高能，必须必须必须会！！否则你载angular2.x中连代码你都组织不起来，不知道你往哪里写。

之前我们用过seajs，和require,有了ES6，再也不用这两个货了。

定义模块

const a = 12;

export a;

再来一个angular2.x中的例子

class hero{

//属性

xxxx

//方法

}

exports hero;

怎么使用？

import modA from './a.js';

import modB from './b.js';

console.log(modA+modB);

9.promise

如果你想玩一些新的库，肯定离不开数据交互，外面炒的很火。

就是一个对象，用来传递异步操作的数据(消息)

pending（等待、处理中）—> Resolve(完成、fullFilled)

—> Rejected(拒绝、失败)

使用：

var p1=new Promise(function(resolve,reject){

//resolve成功了

//reject失败了

});

var p1=new Promise(function(resolve,reject){

if(异步处理成功了){

resolve(成功数据)

}else{

reject(失败原因)

}

});

p1.then(成功(resolve),失败(reject))√

------------------------------------------------

p1.catch——用来捕获错误

10.生成器Gennerator.

看起来挺悬，其实就是那么回事儿，我们看看是什么鬼。

一个函数，可以遍历状态,感觉就是状态机，好吧不说了再说就懵逼了。

语法：

function *show(){

}

注意：

a)函数名字前有星号

b)内部用yield

c）next执行下一个状态

function* show(){

yield 'Hello';

yield 'World';

yield 'Es6';

return 'well';

}

var res=show();

console.log(res.next()); //

console.log(res.next()); //

console.log(res.next()); //

console.log(res.next()); //

ES6基本上会这么多就可以了,完美ending。