Promise

最新推荐文章于 2023-06-02 20:05:52 发布

2764150442

最新推荐文章于 2023-06-02 20:05:52 发布

阅读量93

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_70815247/article/details/126673966

版权

1.什么是Promise
Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型：javascript中的原型与原型链_傻小胖的博客-CSDN博客_javascript原型和原型链）

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

 <script>
        //创建一个promise对象
        let promise = new Promise((resolve,reject)=>{
            setTimeout(function(){
                console.log(123);
            },1000)
        })
    </script>

不写p0时候：

参数resolve代表的是成功

参数reject代表的是失败

写p0时候（输出p0）：

Promise {<pending>}
    [[Prototype]]: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: undefined

全代码：

 <script>
        let promise_1 = new Promise((resolve,reject)=>{
            num = 9
            if (num>10) {
                resolve("num大于10")
            }else{
                reject("num<10")
            }
        })
       let p0 = promise_1.then((data)=>{
            console.log(data);
        },(data)=>{
            console.log(data);
        })
        console.log(p0);
    </script>

猜数字案例:

<body>
    <input type="button" value="猜数字" id="btn">
    <script>
        //获取到input标签
        let btn = document.getElementById("btn")
        // 给btn添加点击事件
        btn.addEventListener("click",()=>{
            //创建一个Promise对象 
            let promise = new Promise((resolve,reject)=>{
                // 创建一个生成1-10的整数
                let num = Math.floor(Math.random()*10)
                // 输出一个数字
                let n  = prompt("请输入数字：")
                setTimeout(()=>{
                    if (n == num) {
                        resolve("对")
                    } else {
                        reject("错")
                    }
                },2000)
            })
            promise.then((data)=>{
                alert(data)
            }).catch((data)=>{
                alert(data)
            })
        })
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="uname">
    <input type="button" value="删除" name="" id="btn">
    <script>
        //Set:集合，跟数组很像，但其中存放的元素是唯一的
        //创建Set
        let scores = [2,31,41,241,21,41,24,234,14,134,1,22,2,31,41]
        let s_1 = new Set(scores)
        console.log(s_1);

        //使用Set解决数组去重问题
        // 还可以通过Set()构造函数实现将数组转换为Set集合

        //转为数组，用Array.from()              (也是去掉了重复的)
        let s_2 =new Set ([12,31,412314,15,452,11,5,252,6,12,31])
        let arr = Array.from(s_2)
        console.log(arr);

        // size属性用来获取数组中的元素个数(也是去掉了重复的)
        console.log(s_2.size);

        // 创建一个空集合
        let s_3 = new Set()

        // 可以使用add()给集合添加元素
        s_3.add(111)
        console.log(s_3);

        // 数组中添加元素用什么
        let arr2 = ['zhang','li']
        // 将wang添加进去
        arr2.push('wang')
        console.log(arr2);
        // 将wu添加进去
        arr2.unshift('wu')
        console.log(arr2);

         // 数组中删除元素用什么
         // 将wang添加进去
        arr2.pop()
        console.log(arr2);
        // 将wu添加进去
        arr2.shift()
        console.log(arr2);

        // 删除集合中的元素 delete()
        //使用delete()删除元素时，当删除的元素在集合中存在时，则返回true，反之则返回false
        console.log(s_2.delete(31));
        console.log(s_2.delete(41));
        console.log(s_2);

        // 判断集合中是否包含某个元素，使用has()进行判断，当包含这个元素时候返回true，不包含返回false
        console.log(s_2.has(40));

        // 先获取btn按钮
        let s_4 = new Set(['zhangsan','lisi','wangwu'])
        document.getElementById("btn").addEventListener("click",()=>{
            let uname = document.getElementById("uname").value
            if (s_4.has(uname)) {
                s_4.delete(uname)
                alert("删除成功")
            } else {
                alert(uname+"不存在，删除失败")
            }
        })
        // 清空数组中的元素
        let s_5 = new Set(['zhangsan','lisi','wangwu'])
        s_5.clear()

        // for-of
        const s = new Set();
        s.add(1).add(2).add(3)
        for(const i of s){
            console.log(i);
        }
    </script>
</body>
</html>

for each

  <script>
        let scores = [23,41,425,36,36]
        let s_1  = new Set(scores)
        // console.log(s_1);
        // console.log(s_1.keys());

        for( const k of s_1.keys()){
            console.log(k);
        }
        console.log('````````````````````````````````');
        for(const v of s_1.values()){
            console.log(v);
        }
        console.log('````````````````````````````````');

        for(const e of s_1.entries()){
            console.log(e);
        }
        console.log('````````````````````````````````');
        s_1.forEach((value,key)=>{
            console.log(key+':'+value);
        })

    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建一个Map对象
        let tels = new Map()
        //存储联系人以及联系电话，使用set添加元素
        tels.set("一",'11')
        tels.set("二",'12')
        tels.set("三",'13')
        // 获取Map中的键值对应的值。使用get(),根据键获取值
        console.log(tels.get("一"));
        console.log(tels);

        // 删除
        console.log(tels.delete("二"));
        console.log(tels);

        // 遍历
        for(let t of tels){
            console.log(t[0],t[1]);
        }

        //Set,Map,Array之间的切换
        const map1 = new Map();
        map1.set('k1',1);
        map1.set('k2',2);
        map1.set('k3',3);
        console.log(Array.from(map1).toString());
        // console.log(Array.from(map1));

        // 将字符串转换成Array
        console.log(Array.from('hello world'));

        // 将map1的每个键值都加2
        let  diobj={
            handle:function(n){
                return n+2
            }
        }

        console.log('%s',Array.from(
            [1,2,3,4,5],
            function(x){
                return this.handle(x)
            },diobj));
            console.log('```````````````````````````````');
            //键名
            console.log(map1.keys());
            // 键值
            console.log(map1.values());
            // 键值对
            console.log(map1.entries());
            console.log('```````````````````````````````');


            // 使用foreach
            map1.forEach((values,keys)=>{
                console.log(keys+":"+values);
            })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建一个大类
        /*
        语法格式：
        class 类名（首字母大写）{

        }
        
        
        */
       class Person{
        //    构造函数实现初始化
        constructor(name,sex,age){
            this.name =name
            this.sex = sex
            this.age = age
        }
        // 行为：用方法（函数）来实现
        work(){
            console.log("工作");
        }
        eat(){
            console.log("吃饭");
        }
        sayHellow(){
            console.log(`大家好我叫${this.name},我是${this.sex}生，年龄${this.age}`);
        }
        getName(){
            return this.name
        }
        cal(n,m){
            console.log(n+m);
        }
        // staric：静态的
        // 使用static来修饰的函数只能通过类名进行访问，不能通过对象来访问    ---83行
        static fun(){
            console.log("静态函数");
        }
       }
    //    let p0 = new Person("啥的","男",20)
    //    p0.eat()
    //    p0.work()
    //    p0.sayHellow()
    //    console.log(p0,getName())
    //    p0.cal(1,2)

    //父类Person   继承：extends
    //Student被称为子类
    // 当子类继承了父类，那么子类就可以访问父类中的属性，函数
    // 实例化对象的时候，构造函数中的参数的个数一定要完整
    class Student extends Person{
        constructor(name,sex,age,stuid){
            super(name,sex,age,stuid) //必须先调用一下super()函数
            // this.name = name
            this.stuid = stuid
            // this.age = age
            // this.sex = sex
        }
        //当父类和子类中有相同名称的函数时，调用的是子类函数，这就相当于子类将父类中的同名函数进行了重写
        sayHellow(){
            // console.log(`大家好我叫${this.name},我是${this.sex}生，年龄${this.age}`);
            // 高级语言用base
            // base.sayHellow()
            super.sayHellow() //可以通过super调用父类中的函数
        }
        // sayHellow(n){
        //     console.log(`大家好我叫${this.name},我是${this.sex}生，年龄${this.age},${n}`);
        // }
    }
    let stu = new Student("张三","男",20,"1001")
    stu.work()
    // stu.sayHellow(10)
    stu.sayHellow()
    Student.fun()
    </script>
</body>
</html>