当前位置： 首页 > article >正文

ES6新特性2- Promise的介绍和使用，map和set集合，ES6-新增对象方法， async和await

article 2025/1/17 21:55:39

目录

一、Promise简介

二、Promise的三种状态

三、Promise的基本用法

四、Promise的实例方法

五、Promise的链式调用

 六、Promise封装读取文件

步骤

七、promise封装AJAX请求

map和set()

map()

Set

拓展

注意

ES6-新增对象方法

1. Object.is()

2. Object.assign()

3. Object.getOwnPropertyDescriptors()

4. Object.setPrototypeOf() 和 Object.getPrototypeOf()

5. Object.keys()、Object.values() 和 Object.entries()

6. Object.fromEntries()

 async和await

一、async

二、await

三、使用示例

四、注意事项

一、Promise简介

Promise是ES6（ECMAScript 2015）引入的一个重要特性，它是异步编程的一种解决方案。在Promise出现之前，JavaScript的异步操作大多依赖于回调函数，但随着异步操作的复杂度增加，回调函数会出现“回调地狱”的问题，即过度使用嵌套回调函数导致代码的可读性和维护性变差。Promise的出现解决了这一问题，它提供了一种更优雅、更清晰的异步编程方式。

二、Promise的三种状态

Promise对象有三种状态：

  1. Pending（进行中）：Promise对象初始状态，既没有被兑现（fulfilled），也没有被拒绝（rejected）。
  2. Fulfilled（已成功）：意味着操作成功完成。
  3. Rejected（已失败）：意味着操作失败。

Promise的状态只能从Pending变为Fulfilled或Rejected，且状态一旦改变，就不可逆转。

三、Promise的基本用法
  1. 创建Promise对象
const promise = new Promise((resolve, reject) => { 
// 异步操作 
if (/* 异步操作成功 */) { 
resolve(value); // 将Promise对象的状态从Pending变为Fulfilled 
} else { 
reject(error); // 将Promise对象的状态从Pending变为Rejected 
} 
});
  1. 使用Promise对象

Promise对象提供了.then()、.catch()和.finally()方法用于处理异步操作的结果或错误。

  • .then()方法接受两个可选的回调函数作为参数，第一个回调函数在Promise对象的状态变为Fulfilled时调用，第二个回调函数在Promise对象的状态变为Rejected时调用。
  • .catch()方法是.then(null, rejectionHandler)的简写形式，专门用于捕获前面链中任何.then()的错误。
  • .finally()方法无论Promise最后的状态如何，都会执行提供的回调函数，常用于资源清理或UI恢复等场景。
四、Promise的实例方法
  1. .then()
promise.then( 
function(value) { 
// 处理Fulfilled状态 
}, 
function(error) { 
// 处理Rejected状态 
} 
);
  1. .catch()

	promise.catch(function(error) { 

	// 处理错误 

	});
  1. .finally()
promise.finally(function() { 
// 不管Promise最终是fulfilled还是rejected都会执行的代码 
});

五、Promise的构造函数方法

  1. Promise.all()

Promise.all()方法接受一个Promise数组作为参数，当所有Promise都变为Fulfilled时，返回一个包含所有结果的数组；当任意一个Promise变为Rejected时，立即返回该Promise的错误信息。


	Promise.all([promise1, promise2, promise3]) 

	.then(function(values) { 

	// 处理成功 

	}) 

	.catch(function(error) { 

	// 处理失败 

	});
  1. Promise.race()

Promise.race()方法与Promise.all()类似，也接受一个Promise数组作为参数，但是只要有一个Promise变为Fulfilled或Rejected时，立即返回该Promise的结果或错误信息。


	Promise.race([promise1, promise2, promise3]) 

	.then(function(value) { 

	// 处理成功 

	}) 

	.catch(function(error) { 

	// 处理失败 

	});
  1. Promise.allSettled()

Promise.allSettled()方法也接受一个Promise数组作为参数，当所有Promise都被resolved时（无论是fulfilled还是rejected），返回一个包含所有结果的数组（每个结果包括状态和值）。

Promise.allSettled([promise1, promise2, promise3]) 
.then(function(results) { 
// 处理成功 
}) 
.catch(function(error) { 
// 处理失败（注意：Promise.allSettled()本身不会rejected，因此这里的catch通常不会执行） 
});
  1. Promise.resolve() 和 Promise.reject()
  • Promise.resolve()：创建并返回一个已经resolved的Promise，通常用于将非Promise值转换为Promise，或者快速返回一个成功的Promise。
  • Promise.reject()：创建并返回一个已经被rejected的Promise，用于快速抛出错误。
五、Promise的链式调用

Promise支持链式调用，可以使用.then()方法将多个异步操作串起来执行。每个.then()方法返回一个新的Promise对象，因此可以继续调用.then()方法进行下一步操作。

promise 
.then(function(result1) { 
return result2; // 或者返回另一个Promise对象 
}) 
.then(function(result2) { 
return result3; 
}) 
.catch(function(error) { 
// 处理错误 
}) 
.finally(function() { 
// 清理资源或恢复UI 
});
 六、Promise封装读取文件
const fs = require('fs').promises;  
  
// 定义一个异步函数来读取文件  
async function readFileAsync(filePath) {  
    try {  
        const data = await fs.readFile(filePath, 'utf8');  
        console.log('文件内容:', data);  
    } catch (error) {  
        console.error('读取文件时出错:', error);  
    }  
}  
  
// 调用函数并传入文件路径  
const filePath = './example.txt';  
readFileAsync(filePath);
步骤

引入fs.promises

const fs = require('fs').promises;
fs.promises 提供了一组返回Promise的方法，用于文件系统操作。

定义异步函数readFileAsync:

async function readFileAsync(filePath) {

读取文件:

const data = await fs.readFile(filePath, 'utf8');
//使用await关键字等待fs.readFile方法返回的Promise解决，并将文件内容存储在data变量中。第二个参数'utf8'指定了文件的编码格式。

处理文件内容或错误:

console.log('文件内容:', data);
//如果文件读取成功，将文件内容打印到控制台。
} catch (error) {  
    console.error('读取文件时出错:', error);  
}
//如果文件读取失败，捕获错误并打印到控制台。

调用函数:

const filePath = './example.txt';  
readFileAsync(filePath);
//调用readFileAsync函数并传入文件路径
七、promise封装AJAX请求
// 定义一个函数，该函数返回一个Promise对象  
function ajaxRequest(url, method = 'GET', data = null) {  
    return new Promise((resolve, reject) => {  
        // 创建一个XMLHttpRequest对象  
        const xhr = new XMLHttpRequest();  
  
        // 初始化请求  
        xhr.open(method, url, true);  
  
        // 设置请求头（如果需要）  
        // xhr.setRequestHeader('Content-Type', 'application/json');  
  
        // 处理请求完成后的响应  
        xhr.onload = () => {  
            if (xhr.status >= 200 && xhr.status < 300) {  
                // 请求成功，解析并返回响应数据  
                try {  
                    const response = JSON.parse(xhr.responseText);  
                    resolve(response);  
                } catch (error) {  
                    reject(new Error('Error parsing JSON response'));  
                }  
            } else {  
                // 请求失败，返回错误信息  
                reject(new Error(`Request failed with status ${xhr.status}: ${xhr.statusText}`));  
            }  
        };  
  
        // 处理网络错误  
        xhr.onerror = () => {  
            reject(new Error('Network Error'));  
        };  
  
        // 发送请求（如果是POST请求，则传递数据）  
        if (method === 'POST' && data !== null) {  
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');  
            xhr.send(JSON.stringify(data));  
        } else {  
            xhr.send();  
        }  
    });  
}  
  
// 使用示例  
ajaxRequest('https://api.example.com/data')  
    .then(response => {  
        console.log('Success:', response);  
    })  
    .catch(error => {  
        console.error('Error:', error.message);  
    });  
  
// 发送POST请求的示例  
const postData = { key: 'value' };  
ajaxRequest('https://api.example.com/submit', 'POST', postData)  
    .then(response => {  
        console.log('POST Success:', response);  
    })  
    .catch(error => {  
        console.error('POST Error:', error.message);  
    });

定义函数ajaxRequest：
该函数接收三个参数：url（请求的URL），method（请求方法，默认为GET），data（请求数据，默认为null）。
返回一个Promise对象。
创建XMLHttpRequest对象：
使用new XMLHttpRequest()创建一个新的请求对象。
初始化请求：
使用xhr.open(method, url, true)初始化请求。
设置请求头：
如果需要发送JSON数据，可以添加Content-Type头。
处理响应：
使用xhr.onload处理请求完成后的响应。
如果响应状态码在200到299之间，则解析JSON数据并调用resolve。
如果响应状态码不在此范围内，则调用reject。
处理网络错误：
使用xhr.onerror处理网络错误。
发送请求：
根据请求方法（GET或POST）调用xhr.send()发送请求。
如果是POST请求，则将数据转换为JSON字符串并发送。
使用示例：

// 发送POST请求的示例  
const postData = { key: 'value' };  
ajaxRequest('https://api.example.com/submit', 'POST', postData)  
    .then(response => {  
        console.log('POST Success:', response);  
    })  
    .catch(error => {  
        console.error('POST Error:', error.message);  
    });

map和set()

map()

map()对象用于保存键值对，任何JS支持的值都可以作为一个键（key）或者是一个value（）

与对象的不同之处：

  1. Object()的键只能是字符串或是ES6的symbol(),而map（）可以是任何值
  2. Map 提供了 get()、set()、has()、delete() 和 clear() 等方法
  3. map对象有一个size属性可以获取map的大小（即键值对的个数）
// 使用字符串字面量作为键  
var map1 = new Map([['name', 'ren'], ['age', 18]]);  
// 添加一个新的键值对到 Map 中  
// 注意：'score' 也应该是一个字符串字面量，除非您之前已经声明了变量 score  
map1.set('score', 85);  
console.log(map1); // 输出 Map(3) { 'name' => 'aille', 'age' => 18, 'score' => 85 } 或类似格式  
// 从 Map 中删除一个键值对  
map1.delete('age');  
// 检查 Map 中是否包含某个键  
console.log(map1.has('score')); // 输出 true  
// 获取 Map 中与某个键关联的值  
console.log(map1.get('score')); // 输出 85  
// 获取 Map 的大小  
console.log(map1.size); // 输出 2  
// 清空 Map  
map1.clear();  
console.log(map1.size); // 输出 0
Set

Set 是一种集合数据结构，它允许你存储任何类型的唯一值（即没有重复的值）。Set 对象是值的集合，其中的值都是唯一的，没有重复的值 。

  • Map 提供了 add()、has()、delete() 和 clear() 等方法和size属性

// 创建一个新的 Set  
const set1 = new Set([1, 2, 3, 4, 5]);  
// 向 Set 中添加一个元素  p
console.log(set1); 
//向set（）中添加一个元素
console.log(set1.add(6));
// 检查 Set 中是否包含某个元素  
console.log(set1.has(1)); // true  
// 从 Set 中删除一个元素  
console.log(set1.delete(5));
// 清空 Set  
set1.clear();  
console.log(set1.size); // 输出 0
拓展

1.利用set可以进行数组去重结合扩展运算符和Array.form()方法

//set(数组去重)  
const arr = [1, 2, 3, 4, 5, 5, 6, 7,7, 8, 9, 10];  
const set2 = new Set(arr);  
//把set转换为数组  
const arr2 = [...set2];  
 console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 const arr3=Array.from(set2);  
 console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2.交集，利用数组方法filter（）和set.has方法结合

//交集  
const set3 = new Set([1, 2, 3]);  
const set4 = new Set([2, 3, 4]);  
 const intersection = new Set([...set3].filter(value => set4.has(value)));  
 console.log(intersection); // Set(2) { 2, 3 }

3.并集

 //并集  
 const union = new Set([...set3,...set4]);  
 console.log(union); // Set(4) { 1, 2, 3, 4 }

4.差集

//差集  
 const difference = new Set([...set3].filter(value => !set4.has(value)));  
 console.log(difference); // Set(1) { 1 }
注意
  • Set 中的值都是唯一的，不会有重复的值。
  • Map 允许使用任何类型作为键（包括对象），而对象的键只能是字符串（或者 Symbol）。
  • 当你使用 for...of 循环遍历 Set 或 Map 时，Set 返回的是值，而 Map 返回的是键值对（即 [key, value] 数组）。

ES6-新增对象方法

1. Object.is()

目的：用来比较两个值是否严格相等。
用法：与严格比较符（===）的行为基本一致，但有两个不同之处：+0不等于-0，NaN等于自身。
示例：

console.log(Object.is(+0, -0)); // false  
console.log(Object.is(NaN, NaN)); // true
2. Object.assign()

目的：用于将对象合并，将源对象可枚举的属性复制到目标对象。
用法：Object.assign(target, ...sources)。第一个参数是目标对象，后面的参数都是源对象。若目标和源有同名属性，或多个源有同名属性，后面的属性会覆盖前面的属性。该方法只考虑对象自身属性，不考虑继承的属性。
示例：

const target = { a: 1, b: 1 };  
const source1 = { b: 2, c: 2 };  
const source2 = { c: 3 };  
Object.assign(target, source1, source2);  
console.log(target); // { a: 1, b: 2, c: 3 }

注意：该方法实行的是浅拷贝。

3. Object.getOwnPropertyDescriptors()

目的：用于获取指定对象所有自身属性（非继承属性）的描述对象，解决Object.assign()无法正确拷贝get和set属性的问题。
用法：Object.getOwnPropertyDescriptors(obj)。
示例：

const obj = { foo: 123, get bar() { return 'abc' } };  
const descriptors = Object.getOwnPropertyDescriptors(obj);  
console.log(descriptors);  
// {  
//   foo: { value: 123, writable: true, enumerable: true, configurable: true },  
//   bar: { get: [Function: get bar], set: undefined, enumerable: true, configurable: true }  
// }

用途：与Object.defineProperties()方法配合，用于对象拷贝。

4. Object.setPrototypeOf() 和 Object.getPrototypeOf()

Object.setPrototypeOf()：设置一个对象的原型。
用法：Object.setPrototypeOf(obj, proto)。
示例：

let proto = {};  
let obj = { x: 10 };  
Object.setPrototypeOf(obj, proto);  
proto.y = 20;  
console.log(obj.y); // 20
Object.getPrototypeOf()：读取一个对象的原型。

用法：Object.getPrototypeOf(obj)。

5. Object.keys()、Object.values() 和 Object.entries()
  • Object.keys()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
  • Object.values()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
  • Object.entries()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

示例：

const obj = { foo: 'bar', baz: 42 };  
console.log(Object.keys(obj)); // ["foo", "baz"]  
console.log(Object.values(obj)); // ["bar", 42]  
console.log(Object.entries(obj)); // [["foo", "bar"], ["baz", 42]]
6. Object.fromEntries()

目的：Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
用法：Object.fromEntries(entries)。
示例：

console.log(Object.fromEntries([['foo', 'bar'], ['baz', 42]]));
 // { foo: "bar", baz: 42 }

 async和await

async和await是ES2016（ES7）中新增的两个关键字，它们旨在简化Promise API的使用，使异步代码看起来和表现起来更像同步代码。

一、async

定义：async是一个修饰符，用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置。被async修饰的函数的返回结果一定是Promise对象。
作用：

  1. 将不是Promise对象的返回值封装为resolved的Promise并返回。
  2. 如果没有返回值，则返回一个rejected的Promise。
  3. 使得对async函数的调用不会造成阻塞，其内部所有的阻塞都被封装在一个Promise对象中异步执行。
二、await

定义：await也是一个修饰符，但只能放在async函数内部。
作用：

  1. 等待一个Promise对象返回的结果。如果等待的不是Promise对象，则返回该值本身。
  2. 阻塞当前async函数的执行，直到等待的Promise对象被resolve或reject。注意，这里的“阻塞”并不会花费CPU资源，因为JavaScript引擎能够同时做其他工作，如执行其他脚本、处理事件等。
  3. 使得异步代码可以按照同步代码的方式书写和阅读，从而提高了代码的可读性和可维护性。
三、使用示例
function takeLongTime(n) {  
    return new Promise(resolve => {  
        setTimeout(() => resolve(n + 200), n);  
    });  
}  
  
async function work() {  
    console.time('work');  
    const time1 = await takeLongTime(300);  
    const time2 = await takeLongTime(time1);  
    const time3 = await takeLongTime(time2);  
    console.log(`你最终挣了${time3}`);  
    console.timeEnd('work');  
}  
  
work();
四、注意事项
  • await只能用在async函数中。
  • 如果await等待的是一个非Promise对象，它会直接返回该值，而不会造成阻塞。
  • 使用async和await时，需要处理可能发生的异常。这可以通过在async函数中使用try...catch语句来实现。

http://www.kler.cn/a/350983.html

相关文章：

  • 玩转随机数：用 JavaScript 掌控不可预测的魔力！
  • 4.Proto 3 语法详解
  • 26_Redis RDB持久化
  • 【DB-GPT】开启数据库交互新篇章的技术探索与实践
  • 【零基础入门unity游戏开发——unity3D篇】地形Terrain的使用介绍
  • 【STM32-学习笔记-7-】USART串口通信
  • Wed前端入门——HTML、CSS
  • PROFINET转SSI协议模块快速使用说明
  • SAP_ABAP_指针
  • 三维测量与建模笔记 - 简介
  • IOCTL
  • Maven与Gradle的区别
  • 【JavaEE】——三次握手（）详细、易理解
  • 中小型医院网站：Spring Boot实践指南
  • Kubernetes ETCD的恢复与备份
  • 如何在Android平板上使用谷歌浏览器进行网页缩放
  • kafka自定义配置信息踩坑
  • php中的错误和异常捕获
  • 主流网络设备的组网方式和配置命令
  • Midjourney中文版：开启AI绘画新纪元
  • Learning to Adapt to Light
  • 【Flutter】Dart：流程控制语句
  • shell案例之一键部署kafka
  • Triton矩阵乘
  • 数据分析：R语言计算XGBoost二分类模型的SHAP值
  • python基于大数据的电影市场预测分析