ES6基础知识点3
1 模块
1.1 模块案例
- 导入： import {name} from “./be.js”;
- 导出：export{name}
be.js
var name="tom";
function func(){
console.log("hellow"+name);
}
class Cat {
constructor(name) {
this.name=name
}
}
//导出
export{name,func}
//默认导出
export default Cat;
be.htrml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模块</title>
</head>
<body>
<script type="module">
//导入
import Cat,{name,func} from "./be.js";
console.log(name)
func();
var c1=new Cat("jack");
console.log(c1);
</script>
</body>
</html>
2 生成器 Generator 初步认识
- js 可以迭代的类型 String Set Map Arry；
- 目的可以使得可以按步骤一直执行下去，不能跳过某个步骤。
function * gen() {
yield "我1";
yield "我2";
yield "我3";
yield "我4";
}
var iter = gen();
//生成器函数 遇到yield 停止运行
//通过next 去调用的是 移动到下一个yield停止
//返回值为 yield {value：yield的结果，done：false}
/* console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next()) */
for (let item of iter) {
console.log(item)
}
2.1 对对象的迭代
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成器</title>
</head>
<body>
<h1 id="myh">点击</h1>
<script>
var obj = {
name: "mumu",
age: 18,
weight: 130
};
// 创建一个生成器函数
function* gen(obj) {
var keys = Object.keys(obj);
// 获取对象的所有key(键)的列表
// 遍历所有的键 执行yield 返回 一个数组[键，值]
for (var i = 0; i < keys.length; i++) {
yield [keys[i], obj[keys[i]]];
}
}
// 遍历可迭代对象
// 取出k键，v值
// for(let [k,v] of iter){
// console.log(k,v)
// }
// 当h1被单击
var iter=gen(obj);
myh.onclick = function() {
var obj = iter.next();
// 获取迭代next 结果
if (!obj.done) { //如果结果不为done
myh.innerText = obj.value; //设置返回的值
} else {
myh.innerText = "请充值" //如果已经完毕
}
}
</script>
</body>
</html>
3 Promise 承诺
<script type="text/javascript">
//承诺 promise
//结果： reslove 兑现 reject 拒绝
//凭据 ： then 然后 catch 捕获
// 目标：老王承诺自己女朋友，等他30岁后，给他买别墅
//有一天女朋友找他兑现
var p=new Promise(function(reslove,reject){
setTimeout(()=>{
var n=Math.random();
if (n>0.5) {
reslove("买一个别墅");
}else{
reject("要不等40岁");
}
},5000)
})
p.then(function(res){
console.log(res);//得到兑现
}).catch(err=>{
console.log(err);//被拒绝，延期
})
</script>
- 分开
3.1 回调函数
- 缺点如果层级太多，代码非常臃肿。
<script type="text/javascript">
//老王看见一个漂亮的小姐姐
//3秒后，老王问是否可以加微信
//5秒后，小姐姐说，我非常喜欢你
//2秒后，老王对小姐姐后，邀请你100年后一起。。
//回调函数实现延期任务，层级多深（回调地狱）
function say(str,time,callback){
setTimeout(()=>{
console.log(str);
//如果没有回调函数callback的就是返回undefined或者false
if (callback) {
callback();
}
},time)
}
say("是否可以加微信",3000,function(){
say("我非常喜欢你",5000,function(){
say("邀请你100年后一起",2000)
})
})
</script>
3.2 通过Promise 实现回调函数的功能
//promise 解决了层级过深的问题，实现承诺
function say(str, time) {
return new Promise((reslove, reject) => {
setTimeout(() => {
reslove(str);
}, time)
})
}
say("是否可以加微信", 3000).then(res => {
console.log(res);
return say("我非常喜欢你", 5000).then(res => {
console.log(res);
return say("邀请你100年后一起", 2000).then(res => {
console.log(res)
})
})
})
```
## 3.3 通过Promise 实现异步获取数据
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../JS/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
function getapi(url) {
return new Promise((resolve,reject) => {
$.ajax({
url: url,
dataType: "jsonp",
success: function(res) {
resolve(res);
},
error: function(err) {
reject(err);
}
})
})
}
var urlA = "xxxxx";
var urlB = "xxxx";
getapi(urlA).then(add=>{
console.log(add);
return getapi(urlB)
}).then(date=>{
console.log(date)
}).catch(err=>{
console.error(err)
})
</script>
</body>
</html>
```
## 3.4 async
```
<script type="text/javascript">
function say(msg,time){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(msg);
resolve(msg)
},time)
})
}
async function doit(){
await say("我们分手吧",2000)
await say("因为你没有180",2000)
await say("其实我还是爱你的",2000)
}
doit()
</script>
## 3.5 Proxy 代理
<script type="text/javascript">
//Proxy作用：可以让获取对象属性时进行一些控制操作
//完善class类的封装，使其不能外部访问
var target={name:"jack",age:19}
//代理目标
var handler={
set(target,key,value){
console.log(key,"被设置了");
if (key=="age") {
if (value<=0) {
console.log("年龄非法")
} else{
target[key]=value;
}
} else{
target[key]=value;
}
},get(target,key){
console.log(key,"被获取了")
}
}
var proxy=new Proxy(target,handler)
</script>
## 3.6反射 Reflect
<script type="text/javascript">
//反射 ES6 新出特性
//如果需要在Proxy内部调用对象的默认行为
var obj={name:"jack",age:19}
//获取属性
var name =Reflect.get(obj,"name");
console.log(name);//jack
//设置属性
Reflect.set(obj,"age",22);
//判断是否有这个键
var x=Reflect.has(obj,"leg");//false
</script>
```