ES6_10、Symbol数据类型和generator函数

最新推荐文章于 2024-07-18 14:46:43 发布

baidu_41921865

最新推荐文章于 2024-07-18 14:46:43 发布

阅读量177

点赞数

分类专栏：三、JS类

本文链接：https://blog.csdn.net/baidu_41921865/article/details/93746804

版权

三、JS类专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、Symbol数据类型

注意：

使用typeOf检测的类型为symbol，是一个单独的数据类型，基本数据类型
使用Symbol 类型不用new
使用情况一般，一般作为唯一的key值使用
使用for...in循环来遍历Symbol作为key的对象，不能遍历出来，为对象私有的；

let s=Symbol("aaa");
console.log(typeof s);
let json={
	a:1,
	b:2,
	s:111
}
console.log(json.s)

二、关系函数generator

1、关系函数的作用：解决异步，深度嵌套

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button onclick="hello()">按钮</button>
</body>
</html>
<script>
	
function * show(){
	yield 'abc';
	yield 'def';
	yield 'hij';
}

let s=show();
function hello(){
	console.log(s.next());
// {value: "abc", done: false}
// {value: "def", done: false}
// value: "hij", done: true}
// {value: undefined, done: true}
}

</script>

2、for...of 循环会自动遍历generator函数，但是return的内容不会遍历出来

function * show(){
	yield 'abc';
	yield 'def';
	return 'hij';
}

let s=show();
for(let item of s){
	console.log(item);//abc def undefined
}

3、解构也可以遍历出generator函数，同样 return的内容不能解构出来

function * show(){
	yield 'abc';
	yield 'def';
	return 'hij';
}

let [a,b,c]=show();
console.log(a,b,c)//abc def undefined

4、扩展运算符也可以遍历...

5、Array.from()也可以用来遍历

6、案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
	
</body>
</html>
<script>
function * gen(){
	let val=yield 'aaa';
	yield axios.get(`https://api.github.com/users/${val}`);
}
let g=gen();
let userName=g.next().value;
// g.next('hello').value 是一个promise对象
g.next(userName).value.then(res=>{//传值，获取动态数据
	console.log(res.data);
})
</script>

7、同异步

异步：不连续，上一个操作没有执行完，下一个操作照样开始

同步：连续执行，上一个操作没有完成，下一个无法开始

关于异步的解决方案：

回调事件
事件监听
发布/订阅
Promise对象

8、async与promise对比

async特点：

await只能放到async函数中
相比generator函数，语义化更强
await后面可以是promise对象，也可以是数字、字符串、布尔
async函数返回的是一个promise对象；
只要await语句后面Promise状态变成reject，整个async函数会中断执行

注意：执行的方法：在控制台执行找到当前文件所在的文件夹，执行【node 文件名】运行文件

var fs = require('fs');

const readFile=function(fileName){
	return new Promise((resolve,reject)=>{
		fs.readFile(fileName,(err,data)=>{
			if(err) reject(err);
			resolve(data);
		})
	})
}	

readFile('data/a.txt').then(res=>{
	console.log(res.toString());
	return readFile('data/b.txt');
}).then(res=>{
	console.log(res.toString());
	return readFile('data/c.txt');
}).then(res=>{
	console.log(res.toString());
})

var fs = require('fs');

const readFile=function(fileName){
	return new Promise((resolve,reject)=>{
		fs.readFile(fileName,(err,data)=>{
			if(err) reject(err);
			resolve(data);
		})
	})
}	

async function fn(){
	let f1=await readFile('data/a.txt');//后边的结果需要等待
	console.log(f1.toString());
	let f2=await readFile('data/b.txt');
	console.log(f2.toString());
	let f3=await readFile('data/c.txt');
	console.log(f3.toString());
}
fn();

async function fn(){
	// return 'welcome';
	throw new Error('Error出错了');
}
console.log(fn());
fn().then(res=>{
	console.log(res);
},err=>{
	console.log(err);
})