promise
promise是ES6中引入的异步编程的新解决方法。
语法上promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果
基本使用
利用一个案例说明:
<script>
// 实例化promise对象
// promise()的参数是一个函数
// 函数封装异步操作,有两个参数
const p=new Promise(function(resolve,reject){
setTimeout(function(){
let data='num';
// 通过resolve,reject改变promise对象的状态
// 调用resolve,对象的状态变成成功
// 调用reject,对象的状态变成成功
// resolve或reject的参数会作为参数传递到then方法中的参数函数中
resolve(data);
},1000)
});
//调用promise对象的then方法
// then方法接受两个函数类型的参数
// 两个函数都有一个形参
// 第一个函数的形参表示成功,第二个函数的形参表示失败
// 如果promise对象状态为成功,执行第一个函数,反之执行第二个函数
p.then(function(value){
// 这里输出num
console.log(value)
},function(reason){})
</script>
then方法
then方法的返回对象也是一个promise对象,其状态是由回调函数的执行结果决定的
如果回调函数中返回的结果是非promise类型,则then()返回对象状态为成功,回调函数的返回值为then()返回对象的成功值
如果回调函数中返回的结果是promise类型,则其状态和对应的值决定了then()返回对象状态和对应的值
注意,如果回调函数中抛出错误,则then()返回对象状态为失败,失败值就是抛出的值
catch方法
参数是一个函数,函数有一个形参,表示失败。如果promise对象状态为失败,则调用该函数
集合(set)
ES6中提供的新的数据结构,类似于数组,但成员的值是唯一固定的
集合可以使用扩展运算符和迭代器(for...of)
<script>
// 创建集合
// 使用Set()
// Set()参数为可迭代数据,一般为数组
let a=new Set([1,5,'a',1]);
// 得到[ 1, 5, "a" ],重复元素被删除
console.log(a);
// 得到集合长度3
console.log(a.size);
// 增加元素,返回增加后的集合
// 若增加的元素已经存在于集合中,则集合无变化
a.add('b')
// [ 1, 5, "a", "b" ]
console.log(a)
// 删除元素,若删除元素不在集合中,返回false,反之返回true
a.delete('b')
// [ 1, 5, "a" ]
console.log(a)
// 检测某一元素是否在集合中,在则返回true,反之返回false
// 返回true
console.log(a.has(1))
// 清空集合
a.clear();
</script>
实例
<script>
// 数组去重
let a=[1,2,5,7,3,5,1];
let s=new Set(a);
a=[...s];
console.log(a)
// 并集
let a1=[1,5,2,8,4];
for(var i of a1){
s.add(i);
}
let bj=[...s];
console.log(bj);
// 交集
s=new Set(a);
let jj=[];
for(var i of a1){
if(s.has(i)){
jj.push(i);
}
}
console.log(jj);
// 差集(a-a1)
for(var i of a1){
if(s.has(i)){
s.delete(i);
}
}
let cj=[...s];
console.log(cj)
</script>
map
ES6提供了Map数据结构,类似于对象,也是键值对的集合,但与对象不同的是,map的键不仅仅可以是字符串,可以是各种类型的值(包括对象)。map也实现了迭代器接口,所以可以使用扩展运算符和for...of
<script type="text/javascript">
// 新建一个map类型的变量
// 使用Map()
let m=new Map();
// 添加元素
// 如果键名已存在,则是修改键对应的键值
m.set('name','lili')
m.set('age',14)
m.set('mother','Anna')
console.log(m)
// 返回map类型变量长度
console.log(m.size)
// 删除键值对
//删除成功返回true,反之返回false
m.delete('mother')
// 获取键对应的值
// 若键不存在,返回undefined
console.log(m.get('age'));
// 遍历
for(var i of m){
// i是数组,[键,值]
console.log(i);
}
// 清空map
m.clear()
</script>
class
ES6中引入了类的概念,作为对象的模版
<script>
// 类的声明
class Student{
// 构造方法,名字为constructor
constructor(name,age){
this.name=name;
this.age=age;
}
// 方法必须使用以下格式
s(it){
console.log(it);
}
}
// 实例化对象
let stu1=new Student('lili',18);
stu1.s('yes');
</script>
class静态成员
class中使用static定义的属性和方法,属于类,不属于实例化之后的对象
继承
<script>
class Stu{
constructor(name,age) {
this.name=name;
this.age=age;
}
say(){
console.log('saying');
}
}
// 子类
class Mstu extends Stu{
constructor(name,age,grade) {
super(name,age);
this.grade=grade;
}
}
let stu1=new Mstu();
stu1.say();
</script>
方法重写
子类可以通过在内部声明一个和父类中的方法名字一样的方法来对父类中的方法进行重写。
get和set
在class中,设置get方法,使得属性在被读取时调用函数,设置set方法,使得属性在被设置时调用函数
<script>
class Stu{
// 设置get方法,只要读取name属性,就会执行这个函数
get name(){
console.log('name属性被读取')
// 读取属性时,返回lili
return('lili');
}
// 设置set方法,只要设置name属性,就会执行这个函数
set name(n){
console.log('name属性被设置');
}
}
stu1=new Stu('lili');
stu1.name='luna';
// 输出lili
console.log(stu1.name);
</script>
通常使用get对对象的动态属性进行封装,比如平均数、总数
使用set,在设置属性时进行控制