![14624245dd92ff6851914d155ea246f2.png](https://i-blog.csdnimg.cn/blog_migrate/2b9ab04eb33b7e27319b4b153a2a7f24.jpeg)
1.symbol 的含义、作用
先来翻译一下好了解,symbol & generator 分别是什么意思——符号 和 生成器。
以前的6种数据类型有:number、string、boolean、object、undefined、function
new Number(12)
new String()
new Array()
第7种——es6 新增的数据类型:Symbol(使用情况一般,前端使用不多,了解一下)
注意:Symbol 不能 new!
Symbol()返回的是唯一的一个值!
Symbol 一般怎么用:做一个 key,定义一些唯一的或者私有的一些东西!(注意大写)
用 typeof 检测出来的数据类型是:symbol(小写)
symbol 是一个单独的数据类型,就叫 symbol,是基本的类型,不能再拆分。
symbol 作为 key,用 for in 循环遍历不出来。
例子1--symbol的定义和使用
<script>
let syml=Symbol('aaa');
console.log(syml);
</script>
打印出来的结果是:Symbol(aaa)
例子2--检测类型
<script>
let syml=Symbol('aaa');
console.log(typeof syml);
</script>
打印出来的结果是:symbol
例子3--用法
<script>
let symbol=Symbol('Strive');
let json={
a:'apple',
b:'banana',
[symbol]:'aaa'
};
console.log(json['a']);
</script>
结果:apple
注意:变量要用[ ],key 可以做表达式的形式上。
例子4--循环一下试试(json 一般用for in 循环)
<script>
let symbol=Symbol('Strive');
let json={
a:'apple',
b:'banana',
[symbol]:'aaa'
};
for(let key in json){
console.log(key);
}
</script>
结果只输出了:a、b
结论:symbol 作为 key(相当于私有的),用 for in 循环遍历不出来。
2.generator 含义及用法
函数:箭头函数:()=>{}
generator 生成器:用于解决异步,深度嵌套的问题。
可以配合使用 for...of...
可以配合解构赋值:let [a,b,c]=gen();
可以配合扩展运算符(三个点):console.log(...gen());
Array.from:放东西,传成数组
!! generator 配合 axios 做数据请求:
现在用于解决异步问题较火的是:async
generator函数语法格式:
<script>
//定义
function * gen(){
yield '';
yield '';
}
//调用
</script>
例子1--generator
<script>
//定义
function * gen(){
yield 'welcome'; //一步一步的做称为异步
yield 'to'; //异步
return 'China';
}
//调用
// gen();
//先拿到这个返回值
let g1=gen();
console.log(g1);
</script>
![f171dcc04ff00015231c321cb52f8a91.png](https://i-blog.csdnimg.cn/blog_migrate/3a681dab740012714efa76d9eb6b392b.png)
例子2--一层一层执行
<script>
//定义
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
//调用
// gen();
//先拿到这个返回值
let g1=gen();
console.log(g1.next()); //value: "welcome",done: "false"
</script>
![2bb72fe87cab7bb17a42d78a63d027cc.png](https://i-blog.csdnimg.cn/blog_migrate/4baeff63f65b07cb3a8c31d7b4a8ec57.png)
例子3--想要它全部执行完
<script>
//定义
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
//调用
// gen();
//先拿到这个返回值
let g1=gen();
console.log(g1.next()); //value: "welcome",done: "false"
console.log(g1.next());
console.log(g1.next());
</script>
![2a2a0c0b9a38fb4f10d90ccfdc798ada.png](https://i-blog.csdnimg.cn/blog_migrate/b91aa457c3b3d1470331b957bcab61b9.png)
上述调用,手动调用,麻烦
例子3--用 for...of...循环(自动执行完)
<script>
//定义
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
//调用
let g1=gen();
for(let val of g1){ //自动执行完,注意 return 的东西它不会遍历
console.log(val);
}
</script>
![020e55d34d4407eb6d5fbeaa4dbcbe6b.png](https://i-blog.csdnimg.cn/blog_migrate/ce0d409f6e99acdd20ea5109810182f9.png)
注意:return 的东西,它不会遍历。
例子4--配合解构赋值
<script>
//定义
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
let [a,b,c]=gen();
console.log(a,b,c);
</script>
结果:welcome to undefined,解构的是对应的值,c没有就是undefined。
例子5--扩展运算符(三个点)
<script>
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
console.log(...gen());
</script>
结果:welcome to
例子6--Array.from: 把generator的东西放进去,传成数组
<script>
function * gen(){
yield 'welcome';
yield 'to';
return 'China';
}
console.log(Array.from(gen()));
</script>
![516348bcd8ec50dc296650d0ed09ee36.png](https://i-blog.csdnimg.cn/blog_migrate/affa09cbe13fa90c8115e53df3f05b03.png)
例子7--generator 配合 axios 做数据请求
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//请求数据
//接口:https://api.gethub.com/user/itstrive
function * gen(){
let val=yield 'itstrive';
yield axios.get(`https://api.gethub.com/user/${val}`)
}
//调用
let g1=gen();
let username=g1.next().value;
console.log(username);
// g1.next(username).value
</script>
结果:itstrive
完整版-- generator 配合 axios 做数据请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//请求数据
//接口:https://api.gethub.com/user/itstrive
function * gen(){
let val=yield 'aaa';
yield axios.get(`https://api.github.com/users/${val}`);
}
//调用
let g1=gen();
let username=g1.next().value;
//console.log(username);
// console.log(g1.next(username).value); 它是一个promise
g1.next(username).value.then(res=>{
console.log(res.data);
});
</script>
![b20aeb7ff7bcf4f2afffc06fd4a23624.png](https://i-blog.csdnimg.cn/blog_migrate/68ba12930ed876db8e9f2aff57472760.jpeg)
3.补充异步问题
异步:上一个操作没有执行完,下一个操作照样开始。
同步:上一个操作没有执行完,下一个操作就没有办法开始。
关于异步,解决问题:
回调函数、事件监听、发布/订阅、promise对象...
ES2017,规定了 async(下一节内容~)
THANK YOU!下节见