ES6详细总结(2)

目录

        特点

        实例

模块化

        先决条件

        导出

        导入

Set集合

        作用

        方法

WeakSet

        特点

Map图

        特点

        方法

WeakMap

        特点

Promise

        定义

        实例

        其他

        封装        

可迭代对象

        定义

        方法

        封装


        特点

                用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))

可迭代对象

        定义

                可以被for of 遍历

                    string  字符串
                    array   数组
                    Set     集合
                    Map     图

        方法

                    key()键集合
                    values()值集合    
                    enteries()键和值的集合

        封装

                

for(let v of arr){
	console.log(v)
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值