ECMAScript——Promise、Set

最新推荐文章于 2023-10-09 08:54:40 发布

h_jQuery

最新推荐文章于 2023-10-09 08:54:40 发布

阅读量131

点赞数

分类专栏： javascript es6 node.js 文章标签： ecmascript node.js javascript promise set

本文链接：https://blog.csdn.net/h_jQuery/article/details/120289297

版权

javascript 同时被 3 个专栏收录

124 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

node.js

26 篇文章 0 订阅

订阅专栏

这篇博客介绍了Promise在JavaScript中的应用，包括封装异步操作如文件读取和Ajax请求。通过Promise解决了回调地狱的问题，并展示了如何使用then和catch处理异步操作的成功与失败。此外，还探讨了Set数据结构在数组操作中的实践，如去重、交集、并集和差集。

摘要由CSDN通过智能技术生成

ECMAScript

Promise

Promise是ES6引入的异步编程（IO）的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

1.Promise构造函数：Promise(excutor){}

2.Promise.prototype.then方法

3.Promise.prototype.catch方法

<!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>
        // 实例化Promise对象,要传一个参数，是一个函数
        // 对象有 三个状态，初始化，成功，失败
        const p = new Promise(function(resolve, reject) {
            //作为参数的函数有两个形参：resolve，reject(两个参数可以自定义的)
            const p = new Promise(function(resolve, reject) {
                // 文件读取，数据库读取，接口读取
                setTimeout(() => {
                    let data = '干饭了';
                    let err = '报错了';
                    // 成功调用这个
                    resolve(data);
                    // 失败调用这个
                    reject(err)
                }, 1000)
            });
            // 调用Promise对象的then方法，函数的参数是上面所传的数据
            p.then(function(res) {
                // 成功调用这个
                console.log(res);
            }, function(error) {
                // 失败调用这个
                console.log(error);
            })
        })
    </script>
</body>

</html>

promise读取文件

// 1.引入fs模块
// node.js的API
const fs = require('fs');
// 2.调用方法读取文件（异步操作）
// 第一个参数的文件路径，第二个参数是一个回调函数
// 回调函数的第一个参数是错误对象，读取文件失败时，输出一个错误对象
// 如果成功则输出res
/* fs.readFile('./resources/aa.txt', (err, res) => {
    // 如果失败，则抛出错误
    if (err) throw err;
    // console.log(res); //<Buffer>
    console.log(res.toString()); //输出所访问文件的内容
}); */
// 3.使用Promise封装
// 初始化，失败，成功，三个状态
const p = new Promise(function(resolve, reject) {
    fs.readFile('./resources/aa.txt', (err, res) => {
        // 判断读取是否失败
        if (err) {
            // 改变Promise的状态
            reject(err);
        };
        resolve(res)
    });
})

p.then(function(data) {
    console.log(data.toString());
}, function(error) {
    console.log('读取文件失败！');
})

// 前提是要在node环境下
// 使用 "node xxxxxxxxx.js" 运行文件

promise封装ajax

<!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>
        // 原生ajax
        // 接口：https://api.apiopen.top/getJoke
        // 原生的ajax
        // 1.创建XMLHttpRequest对象
        /*  const xhr = new XMLHttpRequest();
         // 2.初始化
         // 发送请求的方式，给谁发的请求
         xhr.open("get", "https://api.apiopen.top/getJoke");

         // 3.发送
         xhr.send();

         // 4.绑定事件，处理响应结果
         xhr.onreadystatechange = function() {
             // 判断
             if (xhr.readyState === 4) {
                 // 判断响应状态码 200-299之间
                 if (xhr.status >= 200 && xhr.status < 300) {
                     console.log(xhr.response);
                 } else {
                     // 若是失败
                     console.error(xhr.status);
                 }
             }
         }; */
        // Promise封装ajax
        const p = new Promise((resolve, reject) => {
            // 1.创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            // 2.初始化
            xhr.open("get", "https://api.apiopen.top/getJoke");
            // 3.发送
            xhr.send();
            // 4.绑定事件，处理响应结果
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response);
                    } else {
                        reject(xhr.status);
                    }
                }
            };
        }).then((data) => {
            console.log(data);
        }, (error) => {
            console.log(error);
        })
    </script>
</body>

</html>

回调地狱

// 引入fs模块-CommonJS
const fs = require('fs');
// 回调地狱：一直回调，回调套回调（异步）
/* fs.readFile('./resources/aa.txt', (err, data1) => {
    console.log(data1.toString());
    fs.readFile('./resources/bb.txt', (err, data2) => {
        console.log(data2.toString());
        fs.readFile('./resources/cc.txt', (err, data3) => {
            console.log(data3.toString());
            let res = data1 + data2 + data3;
            console.log(res);
        })
    })
}) */
const p = new Promise((resolve, reject) => {
    fs.readFile('./resources/aa.txt', (err, data1) => {
        resolve(data1)
    })
});
// value是第一次回调的返回值(aa.txt的内容)
p.then(value => {
        // console.log(value.toString());
        return new Promise((resolve, reject) => {
            fs.readFile('./resources/bb.txt', (err, data2) => {
                resolve([value, data2])
            })
        })
    }).then(data => {
        // console.log(data.toString());
        return new Promise((resolve, reject) => {
            fs.readFile('./resources/cc.txt', (err, data3) => {
                data.push(data3)
                resolve(data)
            })
        })
    }).then(value => {
        console.log(value.toString());
    })
    // console.log(p);

catch

<!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>
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('出错了')
                resolve('成功了')
            }, 600)
        });
        p.then(value => {
            console.log(value);
        }, error => {
            console.log(error);
        });
        // 捕获错误
        // p.catch(reason => {
        //     console.warn(reason);
        // })
    </script>
</body>

</html>

Set

ES6提供了新的数据结构Set（集合），它类似于数组，但成员的值都是唯一的，集合实现了iterator（迭代器）接口，所以可以使用[扩展运算符]和[for…in…]进行遍历集合的属性和方法

1.size：返回集合的元素个数

2.add：增加一个新元素，返回当前集合

3.delete：删除元素，返回boolean值

4.has：检测集合中是否包含某个元素，返回boolean值

<!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>
        // 声明一个set
        let s = new Set();
        // 可以传入一个初始参数（可迭代的数据）
        let s2 = new Set(['zs', 'ls', 'ww', 'zl']);
        console.log(typeof s); //object
        console.log(s2);
        // 元素的个数
        console.log(s2.size); //4
        // 添加新的元素
        console.log(s2.add('tq')); //返回添加新元素后的数组
        // 删除一个元素
        console.log(s2.delete('ww')); //删除成功返回true，失败返回false
        // 监测是否存在某个元素
        console.log(s2.has('ls')); //存在返回true，不存在返回false
        // 清空整个数组
        // s2.clear()
        console.log(s2);
        // set实现了迭代器效果，所以可以使用for...of/in...遍历
        for (const item of s2) {
            console.log(item);
        }
    </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>
        let arr = [1, 5, 8, 4, 2, 4, 9, 8, 6, 2, 4, 5];
        // 1.数组去重(Set里面的成员都是唯一的，所以可以实现去重)
        // let res = [...new Set(arr)];
        // let res = Array.from(new Set(arr));
        // 2.交集（两个数组都存在的元素）
        let arr2 = [4, 3, 2, 7, 6, 5];
        // filter：返回满足过滤条件(结果为true)的项，将所有的返回结果组成一个数组
        // 将arr2数组转换成集合，就可使用has方法
        // arr2 = new Set(arr2);
        /* let res = [...new Set(arr)].filter(item => {
            return arr2.has(item)
        }) */
        // let res = [...new Set(arr)].filter(item => new Set(arr2).has(item))
        // 3.并集，两个数组合并
        // let res = [...arr, ...arr2];
        // new Set([...arr, ...arr2])成为了一个集合
        // let res = new Set([...arr, ...arr2]);
        // 用扩展运算符再将集合转为数组
        // let res = [...new Set([...arr, ...arr2])];
        // 4.差集，这个数组有，那个数组没有,搞清楚谁是主体，是按照哪个数组查找
        // let res = [...new Set(arr)].filter(item => !(new Set(arr2).has(item))) //[1,8,9]
        let res = [...new Set(arr2)].filter(item => !(new Set(arr).has(item))) //[3, 7]
        console.log(res);
    </script>
</body>

</html>