ES6知识总结之模块，生成器以及promise

一.模块 module

import 导入

javascript的type类型为module

import Cat,{name,func} from './be.js';
func();
alert(name);
var c1 = new Cat("kitty")
console.log(c1.name)

export 导出

var name = "maomao";
function func(){
	console.log("大家好"+name);
}
class Cat{
	constructor(name){
		this.name = name;
	}
}

export{name,func};
//导出
export default Cat;
//默认导出

二.生成器 generator

生成器的特点

1.在function后加*的就是生成器函数,遇到yield 停止执行。
2.通过 next 去调用的是 移动到下一个yield停止。

生成器函数运行流程

1.生成器函数在调用时是不执行的，会返回一个对象，这个对象有个next方法
2.调用next方法后，函数执行到 第一个yield停止 会返回一个对象{value:’’,done:’’}
3.value的值为yield的值
4.done有两个值 true false
5.false 函数未执行完毕，true 函数执行完毕
举个栗子：

function * gen(){
	 
	 yield "我";
	  // console.log(2)
	 yield "好";
	  // console.log(3)
	 yield "中意";
	  // console.log(4)
	 yield "你";
 }
var iter =gen();
// 生成器函数generator 遇到yield 停止执行
// 通过 next 去调用的是 移动到下一个yield停止
// 返回的值 为yield {value:yield的结果,done:false}
for(let item of iter){
 	console.log(item);
}

运行结果：

三.继承 promise

承诺 Promise
结果：reslove 兑现 reject 拒绝
凭据：then 然后 ， catch 捕获捕获

含义：

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示执行成功后的回调函数和执行失败后的回调函数，如果检查到 resolve 被执行 那么就调用 .then的回调函数，如果检查到 reject 被执行那么就调用 .catch的回调。

作用：

1.按顺序执行异步操作

2.避免回调函数，多层嵌套。

3.race 有一个resolve就调用.then

下面是一些promise函数的例子

var p = new Promise(function(resolve,reject){
	setTimeout(()=>{
		var n = Math.random();
		if(n>0.5){
			resolve("海绵宝宝和派大星约定好了要做一辈子的好朋友！！")
		}else{
			reject("派大星喝了变聪明药水，和章鱼哥做了好朋友，海绵宝宝很伤心。")
		}
	},5000)
})
			
p.then(res=>console.log(res))
.catch(err=>console.error(err))

promise.race例子：

var arr = [
				'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340',
				'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340',
				'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340'
			]
			
function loadImg(url){
	return new Promise((resolve,reject)=>{
		var img = document.createElement('img');
		img.src = url;
		img.onload = function(){
			resolve(img);
		}
		img.onerror = function(e){
			reject(e);
		}
	})
}
Promise.race([
	loadImg(arr[0]),
	loadImg(arr[1]),
	loadImg(arr[2])
])
.then(res=>{
	document.body.append(res);
})
.catch(err=>console.error(err))

那张图片先加载出来显示哪一张图片，其余图片不显示。

每日更新，欢迎关注！！！

转载：https://blog.csdn.net/weixin_44763794/article/details/107991640