ES6详细总结（2）

月凉笙

已于 2022-02-24 10:12:04 修改

阅读量482

点赞数 1

文章标签： javascript linq p2p

于 2022-02-22 21:38:49 首次发布

本文链接：https://blog.csdn.net/qq_44769099/article/details/123077609

版权

类

特点

                用class声明，本质是function
                constructor 构造
                extends 继承
                new 实例化
                类名建议大写开头

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建一个类
			class Animal{
				constructor(name) {
				    this.name = name;
				}
				yiel(){
					console.log("我开始咆哮!");
				}
			} 
			//实例化类    实例化对象
			// var an = new Animal("野兽")数
			
			class Cat extends Animal{
				constructor(name,color) {
				    super(name);
					this.color = color;
				}
				skill(){
					console.log(`我的名字是${this.name},我是${this.color}的`);
					console.log("我的任务就是卖萌");
				}
			}
			
			var c1 = new Cat("小黄","黄色");
			var c2 = new Cat("小黑","白色");
			
			// 面向对象的特点： 继承  封装  多态  接口
		</script>
	</body>
</html>

模块化

先决条件

script的类型要是 module

文件打开必须是http协议，不能是D: C: file协议

<script type="module">

导出

var name = "程序猿";
// 1.导出name
// export{name}


function fun(){
	console.log("我叫"+name+",我是一只螃蟹","我的钳没了");
}
// 2.导出函数
// export{fun}

// 3.合并导出
export{name,fun}

// 导出默认
class Cat {
	constructor(name) {
	    this.name=name;
	}
}
// 一个文件里面只能导出一个默认
export default Cat;

导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="module">
			// 3.合并导入
			// import{name,fun}from './js/utils.js';
			
			// import Cat,{name,fun}from './js/utils.js';
		
			// 1.导入
			// import{name}from './js/utils.js';
			// alert(name);
			
			// 2.导入函数
			// import{fun}from './js/utils.js';
			// fun()
			
			// 导入默认
			// 名字可以跟js里的不一样，此界面内相同即可
			// import Cat from './js/utils.js'
			// var c1 = new Cat("小不点")
			// console.log(c1)
			
			// 导入所有内容,起一个别名叫utils  从url
			import * as utils from './js/utils.js';
			console.log(utils.name);
			utils.fun();
			var c = new utils.default("小白");
			console.log(c)
		</script>
	</body>
</html>

Set集合

作用

内容不重复，类似数组但不是数组可以使用 ... 结构为数组

方法

                    add 添加
                    delete 删除
                    clear 清空
                    has 检查是否有
                    size 长度

WeakSet

特点

内容不重复内容必须是引用对象

new WeakSet([,,,])

Map图

特点

键可以是任意类型

类似数组

方法

                    set 设置
                    get 获取
                    has 检测
                    size 长度
                    delete 删除
                    clear 清空

WeakMap

特点

key都是弱引用

Promise

定义

执行异步任务，避免回调地狱

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//承诺一件事
			//五秒后执行
			两个参数 resolve条件成立执行...  reject条件不成立执行...
			var p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					var n = Math.random();
					if(n>0.5){
						resolve("明天请你吃饭");
					}else{
						reject("说的明天呀");
					}
				},3000)
			})
			
			// 全写
			// p.then(function(res){
			// 	console.log(res);
			// })
			
			// .catch(function(err){
			// 	console.log(err);
			// })
			
			
			// 简写
			//成立对应 then
			p.then(res=>{
				console.log(res);
			})
			
			//失败对应 catch
			.catch(err=>{
				console.log(err);
			})
		</script>
	</body>
</html>

其他

Promise.all([,,,])
.then()
等待异步列表中全部resolve执行


Promise.race([...])
.then()
异步列表中最resolve的值

封装

function say(msg,time){
     return new Promise((resolve,reject)=>{
       .....
       resolve(msg)
    })
}


say("msg",500)
.then(res=>{
   console.log(res)
  return say("abc",123)
})
.then(res=>console.log(res))