Promise promise的then方法 查找数组中是否有该元素 Map 第三个参数map函数中this指向问题 class类的基础调用和结构 class 类的继承问题

最新推荐文章于 2023-09-23 23:57:58 发布
最新推荐文章于 2023-09-23 23:57:58 发布
阅读量387 收藏
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/red_HTML/article/details/126673710
版权

Set()里面的has() 与delect（）案例

 

创建一个Promise对象  pening进行中 resolved已完成 rejected以失败

 <script>
        //创建一个 Promise对象
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("hello world")
            }, 2000);
        })
    </script>

    <script>
        // 参数 resolve代表的是成功 
        // reject 代表的是失败
        // resolve 和 reject代表的都是函数
        let promise_1 = new Promise((resolve, reject) => {
            num = 20
            if (num > 10) {
                resolve("num大于10") //成功
            } else {
                reject("num小于10") //失败
            }
        })
        promise_1.then((data) => {
            console.log(data)
        }, (data) => {
            console.log(data)
        })
    </script>

catch( )用于捕获异常

 Promise的使用： 案例

<!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="button" value="button" id="btn">
    <script>
        // 获取input 
        var btn = document.getElementById("btn")
        // 添加click点击事件
        btn.addEventListener('click', () => {
            // 创建一个promise对象
            var promise = new Promise((resolve, reject) => {
                // 弹出一个输入框
                var num = parseInt(prompt("请输入一个1-10以内的整数"))
                // 随机一个1-10的整数（不包含10）
                var random = Math.floor(Math.random() * 10)
                // 让他们if判断 相等就是猜对了
                setTimeout(() => {
                    if (num == random) {
                        resolve("猜对了")
                    } else {
                        reject("猜错了")
                    }
                }, 2000)
            })
            // 
            promise.then((data) => {
                alert(data)
            }).catch((data) => {
                alert(data)
            })

        })
    </script>
</body>

</html>

Set:集合跟数组很像，但是其中存放的元素是唯一的

Set可以解决数组去重问题

创建一个Set实例

const s  = new Set()

    <script>
        // Set() 可以自动去重
        var arr = [23, 23, 4, 4, 3, 3]
        var s_1 = new Set(arr)
        console.log(s_1) //Set(3) {23, 4, 3}

        //将Set()集合转化成数组，使用Array.from()
        var s_2 = new Set([1, 2, 3, 4, 5, 6])
        console.log(s_2); //Set(6) {1, 2, 3, 4, 5, …}
        var arr_1 = Array.from(s_2)
        console.log(arr_1); //(6) [1, 2, 3, 4, 5, 6]

        //获取元素的个数
        console.log(s_2.size) //6 (数组会自动去重)
        // add() 是给Set集合添加元素  
        //push() 给数组头部添加元素 pop()尾部删除 unshift()头部添加 shift() 头部删除
        var s_3 = new Set()
        s_3.add(30)
        console.log(s_3) //Set(1) {30} 
        
        var s_4 = new Set([8, 7, 6, 5, 5, 4, 3, 5, 23, 4])
        // delete()//删除
        console.log(s_4.delete(5))  //true
        // has() 判断是否有数字8
        if (s_4.has(8)) {
            // 有就删除
            s_4.delete(8)
            alert("删除成功")
        } else {
            console.log("没有")
        }
    </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>
    <input type="text" name="" id="uname">
    <input type="button" value="删除" id="btn">
    <script>
        var sss = new Set(["zhangsan", "zhangsi", "zhangwu", "zhangliu"])
        document.getElementById("btn").addEventListener("click", () => {
            let name = document.getElementById("uname").value;
            if (sss.has(name)) {
                sss.delete(name)
                alert("删除成功")
                console.log(sss)
            } else {
                alert("数组中没有" + name + "无法删除")
            }
        })
        // console.log(sss)
    </script>
</body>

</html>

clear( ) 清空集合中全部的元素

迭代：

keys():返回键名;

values():返回键值;

entries():返回键值对;

键名=键值

    <script>
        let arr = [23, 43, 54, 34, 65, 43]
        var s_1 = new Set(arr)
        for (const i of s_1.keys()) {
            console.log("键：" + i);
        }
        console.log("...............");
        for (const i1 of s_1.values()) {
            console.log("值" + i1)
        }
        console.log("...............");
        for (const i2 of s_1.entries()) {
            console.log("键值对" + i2)
        }
        console.log("...............");
        s_1.forEach((values, keys) => {
            console.log(keys + ":" + values);
        })
    </script>

 

Map  

let m = new Map()

set(key , value) 添加 

get(key ) 读取 （根据键获取值）

clear() 清空

<script>
        // 创建一个Map对象
        //         set(key , value) 添加 

        // get(key ) 读取 （根据键获取值）
        let tels = new Map()
        tels.set("张三", "111111111")
        tels.set("张四", "222222222")
        tels.set("张五", "333333333")
        console.log(tels.get("张三"))
        console.log(tels)
        // clear() 清空  delete("张三") 删除一个数据
        console.log("----------")
        for (const q of tels) {
            console.log(q[0], q[1])// 张三, 111111111 张四, 222222222 张五 333333333
        }

        console.log("----------")
        const map1 = new Map()
        map1.set('k1', 1)
        map1.set('k2', 2)
        map1.set('k3', 3)
        console.log(Array.from(map1).toString()); //k1,1,k2,2,k3,3 

        console.log("----------")
        console.log(Array.from('hello world'));//(11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

        console.log(map1.keys());//{'k1', 'k2', 'k3'}
        console.log(map1.values());// {1, 2, 3}
        console.log(map1.entries());//{'k1' => 1, 'k2' => 2, 'k3' => 3}
        map1.forEach((value, key) => {
            console.log(key + ":" + value)  //k1:1  k2:2  k3:3

        })
    </script>

第三个参数map函数中this指向问题    

第三个参数，map函数中this指向的对象

该参数是非常有用的，我们可以将被处理的数据和处理对象分离，将各种不同的处理数据的方法封装到不同的的对象中去，处理方法采用相同的名字。

在调用Array.from对数据对象进行转换时，可以将不同的处理对象按实际情况进行注入，以得到不同的结果,适合解耦。

这种做法是模板设计模式的应用，有点类似于依赖注入。

<script>
        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))
    </script>

class类

 class类的基础调用和结构   class 类的继承问题

<script>
        class Student {
            // 构造函数实现初始化
            constructor(name, sex, age) {
                this.name = name,
                    this.sex = sex,
                    this.age = age
            }
            // 行为：方法（函数）来实现
            chi() {
                console.log("吃饭")
            }
            shui() {
                console.log("睡觉")
            }
            setHello() {
                console.log(`我叫${this.name}是一名${this.sex}生，今年${this.age}岁`)
            }
            getName() {
                return this.name
            }
            cal(n, m) {
                console.log(n + m)
            }
        }
        let p0 = new Student("邵文潇", "男", 20)//赋值
        //调用
        p0.chi()
        p0.shui()
        p0.setHello()
        console.log(p0.getName())
        p0.cal(1, 2)
    </script>

class 类的继承问题

<script>
        class Student {
            // 构造函数实现初始化
            constructor(name, sex, age) {
                this.name = name,
                    this.sex = sex,
                    this.age = age
            }
            chi() {
                console.log("吃饭")
            }
            shui() {
                console.log("睡觉")
            }
            setHello() {
                console.log(`我叫${this.name}是一名${this.sex}生，今年${this.age}岁`)
            }
            getName() {
                return this.name
            }
            cal(n, m) {
                console.log(n + m)
            }
        }
        let p0 = new Student("邵文潇", "男", 20)
        // 继承 class Person(子类) extends Student(父类)
        class Person extends Student {
            // 当子类继承了父类，那么子类就可以访问父类中的属性，函数
            // 子类使用的构造器constructor 的时候必须使用
            constructor(name, sex, age, stuid) {
                super(name, sex, age) //必须现调用一下super()函数
                this.stuid = stuid
            }
        }
        let stu = new Person("张三", "女", "20", "1001")
        // 当父类和子类中有相同名称的函数时，调用的时子类中的函数，这就相当于子类将父类中的同名函数进行了重写
        stu.chi()
        console.log(stu.name)
    </script>
大坤...
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript的promise详解
qq_47824967的博客
12-29 1145
promise详细介绍，学习总结
promise .then和async await的使用
m0_64207574的博客
03-01 6967
Promise .then和async await的使用
手写Promise（二）——then方法的添加
yihen0214的博客
09-25 752
then方法的添加 最终代码放在最下面 文章目录then方法的添加最终代码 在有了构造函数的框架下，最重要的then方法应该怎么添加呢？ 最好的方法当然是添加到原型里了！ 分析内置的Promise的then方法，他接受两个参数，所以我们可以写成这样： // 添加then方法 Promise.prototype.then = function (onResolve, onRejected) { // 通过实例的PromiseState判断执行哪一个参数 if (this.PromiseStat
Promise用法详解(一)
LOVE_XUAN521的专栏
06-04 160
zero________________ 2018-08-08 16:32:50 17863 收藏 53 分类专栏： ECMAScript 文章标签： ES6 Promise catch resolve reject 版权 Promise 基本概念 Promise是一个构造函数，所以可以 new 出一个Promise的实例 在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函数) 在Promise构造函数的prototype属性上，有一个 .then(...
Promise同时获取n个接口数据的几种方式
最新发布
qq_42750608的博客
09-23 539
axios同时获取n个接口数据的几种方式
JavaScript中文手册
08-13
深入讲解JavaScript中的对象（字面量表示法、构造函数、原型链、this关键字、对象方法、getter和setter）、数组（数组方法如push、pop、shift、unshift、slice、splice等）以及ES6引入的Set和Map数据结构。...
es6 :: star2：350个项目符号要点中的ES6概述
02-02
- **状态转换**：Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。 - **链式调用**：`.then()`和`.catch()`方法创建回调链，解决回调地狱问题。 ### 9. **生成器（Generator）*...
javascript-solutions:Javascript中的几个代码解决方案片段
05-15
在JavaScript中，我们可以为函数的参数设置默认值，这样当调用函数时，如果没有提供该参数，就会使用默认值。例如： ```javascript function greet(name = 'World') { console.log(`Hello, ${name}!`); } greet(); ...
Javascript中55个经典技巧
03-01
12. **Map与Set**：替代数组和对象，提供更高效的键值对存储，Set中元素唯一。 13. **WeakMap与WeakSet**：弱引用版本的Map和Set，当引用的对象被垃圾回收时，它们也会自动删除。 14. **for...of循环**：遍历可...
Promise中this指向问题
weixin_44262946的博客
09-03 5810
Promise中this指向问题 1、this指向window还是实例？ 下面分析两段JavaScript代码段，共用下面这段Html代码： <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p> {{ joke }}</p> </div> this指向window： // 引入axios <script src="https://unpk
经典Promise面试题----手写Promise详细步骤（三）
czj1049561601的博客
02-19 1972
手写Promise封装继续行进----实现then方法的结构功能！ 按照步骤进行，逻辑思路很简单易实现！ 前文链接导航： 功能1：搭建Promise结构，实现关键resolve、reject功能 功能2：实现throw抛出异常以及Promise对象状态单次更改功能 本文在前两篇的实现基础上继续封装Promise其他功能 1：then()方法执行回调的实现 首先：实例化对象中调用then方法 <script src="./Promise.js"></script> <b
promise中的.then方法【待完善】
大小曲奇的博客
06-07 1万+
Promise 是抽象的异步处理对象 构造方法： Promise 有三个状态：  上面我们提到 Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 和 .   resolve函数的作用是，将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved)， 在异步操作成功时调用，并将异步操作的结果作为参数传递出去。   reject函数的作用是，将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected
通俗浅显的理解promise中的then
EGeek
05-10 1553
通俗浅显的理解promise中的then 这篇文章写的太好了，忍不住copy过来，不用什么基础就能理解吃透promise的then Promise，ES6中定义的规范，不会使用Promise，都不敢说自己用过ES6，大部分介绍Promise的规范的文章对于新手小白来说看得云里雾里，且并不是通俗易懂。本文通过实例介绍讲述Promise中then的的最通俗应用理解，代码建立在不出现异常的情况的操作下，不严谨之处，请以官方规范为标准。 先看一下下面4个Promise到底有什么区别呢？ func().then(fu
promise语法与用法、this指向和this指向修改
m0_59023231的博客
04-11 2707
promise语法与写法、this指向与修改
Promise详解
weixin_44336981的博客
03-24 1496
目标 promise能解决什么问题？ promise是什么，怎么使用？ promise的发展史？ promise的原理和实现思路是什么？ 1-promise能解决什么问题？ 1.1JavaScript 的单线程和异步 单线程 同一个时间只能做一件事。HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完 全受主线程控制，且不得操作DOM。...
promise中then参数中的函数返回值
weixin_48079602的博客
04-16 1173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // then参数中的函数返回值 function queryData(
Javascript中this指向问题
Celester_best的博客
03-14 1751
普通函数时，this指向window <script> function test() { console.log('=== test this: ', this) } test() const test1 = function () { console.log('===test1 this: ', this) } test1() &
js的map里面没有this
weixin_42802725的博客
01-10 345
promise.then返回结果几种情况
热门推荐
m0_60909419的博客
04-12 1万+
首先实例化一个promise对象。promise对象身上有then方法，可用来指定回调，对成功和失败的结果进行处理。它接受两个回调函数，一个是resolve成功的回调，一个是reject失败的回调。 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('成功的回调'); // reject('失败的回调'); }, 1000); }); p.then(v
在Promise的.then和catch中怎么调用其它函数
05-25
在Promise的.then和catch中，可以通过调用其它函数来处理Promise返回的结果或错误信息。例如： ``` // 定义一个函数 function handleResult(result) { console.log("处理结果:", result); } // 定义另一个函数 function handleError(error) { console.error("处理错误:", error); } // 创建一个Promise对象 const promise = new Promise((resolve, reject) => { // 模拟异步操作 setTimeout(() => { const num = Math.random(); if (num > 0.5) { resolve(num); } else { reject(new Error("数字小于0.5")); } }, 1000); }); // 在Promise的then中调用handleResult函数 promise.then(handleResult); // 在Promise的catch中调用handleError函数 promise.catch(handleError); ``` 在上述代码中，我们定义了两个函数`handleResult`和`handleError`来处理Promise返回的结果或错误信息。在Promise的then和catch方法中，我们分别调用这两个函数来处理Promise的结果和错误信息。当Promise的状态变为resolved时，它会调用handleResult函数；当Promise的状态变为rejected时，它会调用handleError函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值