ES6新增—ES6自带的模块化、ES6新增Promise、ES6新增Generator

9.ES6自带的模块化
以前我们都是用seajs requireJs来实现模块化

ES6自带模块化：
1.如何定义(导出)模块(这里的模块可以是任何形式，如变量，函数，json等)
在a.js中定义模块：
const a=12;
export default a;

补充：如何导出多个小模块————以json的形式导出
const a=12;
const b=10;
export default {a,b};
导出多个后引用：
import c from './a.js';
console.log(c.a+c.b);

2.如何使用(引用)导出的模块：
注意：截止到目前为止，使用时在文件里必须引入traceur.js和bootstrap.js，并且type="module"
在es6-model.html中使用模块：
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import modA from './a.js';
console.log(modA);
</script>

补充：1)在模块化中两个不同的模块定义相同的变量，常量，函数名是并不冲突的，因为他们属于不同的模块
2)不同模块之间也可以相互引用，并不影响
a.js中定义的模块：
const a=12;
export default a;
b.js中定义的模块：
const a=5;
export default a;
sum.js中定义的模块：(含不同模块之间的引用)
import a from './a.js';
import b from './b.js';
export default function sum(){ //这里是以函数的形式导出
return a+b;
}
es6-model.html中引用模块：
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import sumMod from sum './sum.js';
console.log(sumMod);
</script>

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

10.ES6新增Promise：
在js中Promise其实就是一个对象，但是和我们平时的对象不同。
Promise对象，用来传递异步操作的数据(消息)
异步：多个操作可以同时进行

1)Promise对象的状态：
pending(等待，处理中)————>Resolve(完成)，又称fullFilled
　　　　　　　　　　　————>Rejected(拒绝，失败)
补充：Promise状态只能从pending到Resolve，或者从pending到Rejected，不能同时存在两种状态

2)Promise对象的使用：
var pro=new Promise(function(resolve,reject){
//resolve————成功的时候执行
//reject————失败时执行
if(异步处理成功了){
resolve(成功数据); //异步请求成功了，把返回的成功数据拿出来，作为第一个then()方法成功函数的参数，
}else{
reject(失败原因); //异步请求成功了，把返回的成功数据拿出来，作为第一个then()方法失败函数的参数，
}
});

上面返回的pro就是一个Promise对象，它有一个有用的方法then()
pro.then(成功(resolve),失败(reject)){

}

示例1：模拟异步处理
<script type="text/javascript">
var pro=new Promise(function(resolve,reject){
resolve(1);
});
pro.then(function(value){
console.log(value);
return value+1; //pro.then()函数也有返回值，其返回值给下一次的pro.then()的参数value
},function(value){
console.log(value);
return value+2;
}).then(function(value){ //这里的value参数，是上一个then的返回值
console.log(value); //2
},function(value){
console.log(value);
});
</script>

示例2：node中的异步处理
在promise.js中编写以下代码：
//data.txt中数据为123456
const fs=require('fs');
fs.readFile('data.txt',function(err,data){
var pro=new Promise(function(resolve,reject){
if (err) {
　　reject(err);
}else{
　　resolve(data);
　}
});
pro.then(function(value){
　　console.log(value.toString()); //123456
},function(value){
　　console.log(value);
　});
});

在命令行中运行node promise.js 即可显示成功数据123456

示例3：ajax异步处理：
<input type="button" id="btn" value="按钮">
<div id="box"></div>

};
</script>

总结Promise对象上的其他方法：
1)pro.then()
2)pro.catch()————用来捕获错误
var pro=new Promise(function(resolve,reject){
　　resolve('成功了');
});
pro.then(function(value){
　　console.log(value);
　　throw '发生错误了';
}).catch(function(e){
　　comsole.log(e);
});

3)Promise.all()————全部，用于将多个Promise对象组合，包装成一个全新的Promise实例
用法：Promise.all([p1,p2,p3....]);
如果返回的所有的Promise对象都正确，才执行成功的代码
如果返回的Promise对象有一个错误，则执行失败的代码
应用：当做异步操作判断时，所有都返回时，才执行下面代码
var p1=Promise.resolve(3);
var p2=Promise.resolve(4);
var p3=Promise.reject(10);
Promise.all([p1,p2]).then(function(value){
　　console.log('成功了,'+value); //成功了,3,4
},function(value){
　　console.log('失败了,'+value);
});
Promise.all([p1,p2,p3]).then(function(value){
　　console.log('成功了,'+value);
},function(value){
　　console.log('失败了,'+value); //失败了,10
});

4)Promise.race()————返回一个Promise对象，调用最先能执行的Promise的结果,即哪个最先执行，使用哪个的结果
应用：我们在做异步程序的时候，有很多数据，哪个数据最快用哪个
var p1=new Promise(function(resolve,reject){
　　setTimeout(resolve,1000,'one');
});
var p2=new Promise(function(resolve,reject){
　　setTimeout(resolve,2000,'two');
});
Promise.race([p1,p2]).then(function(value){
　　console.log(value); //one
});

5)Promise.resolve()————生成一个成功的Promise对象，执行成功的代码
语法：
1.Promise.resolve(value);
value可以是字符串，数组，json等等
Promise.resolve([1,2,3]).then(function(value){
　　console.log(value);
　　console.log(value[0]);
},function(value){
　　console.log(value);
});

2.Promise.resolve(Promise);
var p1=Promise.resolve(3);
var p2=Promise.resolve(p1);
p2.then(function(value){
console.log(value); //3
});

6)Promise.reject()————生成一个失败的Promise对象，执行失败的代码
Promise.reject('这是失败的信息').then(function(value){
console.log(value);
},function(value){
console.log(value);
});

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

11.ES6新增Generator ————生成器
是一个函数，这个函数可以遍历，
Generator就是一个状态机
语法：
function show(){ //普通的函数

}
function* show(){ //Generetor函数
yield xxx;
}

形式上：
1)function上有一个*号
2)函数内部使用yield语句

//在对象中Generator的用法
var json={
*show(){
yield 'a';
yield 'b';
return 'c';
}
}
var json=json.show();
console.log(json.next()); //{value: "a", done: false}
console.log(json.next()); //{value: "b", done: false}
console.log(json.next()); //{value: "c", done: true}
</script>

总结：每次都返回一个value和done的结果
value：表示按顺序yield后面的值
done：是一个布尔值，表示是否遍历结束
Generator在对象中的用法，没有function，直接 *函数名(){}

yield：是否有返回值：
yield语句本身没有返回值，或者每次都返回一个undefined
next()可以带参数,参数给了上一个yield的值，

for of 循环除了遍历Map对象，也可以循环Generator函数
function* fn(){
yield 1;
yield 2;
yield 3;
yield 4;
return 6;
}
for (let i of fn()){
alert(i); //1,2,3,4
}