目录
类
特点
用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)
}