jses6新特性和方法，JS:ES8新特性-技術動態-匯編語言學習筆記

jses6新特性和方法，JS:ES8新特性

2023-10-15 阅读 28 评论 0

摘要：概述： 1、async 和 await兩種語法結合簡化異步函數的寫法；讓異步代碼看起來像同步代碼一樣； 2、對象方法擴展：Object.values、Object.entries和Object.getOwnPropertyDescriptors； jses6新特性和方法，async 函數： ????????1. asy

概述：

1、async 和 await兩種語法結合簡化異步函數的寫法；讓異步代碼看起來像同步代碼一樣；

2、對象方法擴展：Object.values、Object.entries和Object.getOwnPropertyDescriptors；

jses6新特性和方法，async 函數：

????????1. async 函數的返回值為 promise 對象；
????????2. promise 對象的結果由 async 函數執行的返回值決定；

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>async函數</title>
</head>
<body>
<script>
// async函數：異步函數
async function fn(){
// return 123; // 返回普通數據
// 若報錯，則返回的Promise對象也是錯誤的
// throw new Error("出錯啦！");
// 若返回的是Promise對象，那么返回的結果就是Promise對象的結果
return new Promise((resolve,reject)=>{
// resolve("成功啦！");
reject("失敗啦！");
})
} c
onst result = fn();
// console.log(result); // 返回的結果是一個Promise對象
// 調用then方法
result.then(value => {
console.log(value);
},reason => {
console.warn(reason);
});
</script>
</body>
</html>

await 表達式：
????????1. await 必須寫在 async 函數中；
????????2. await 右側的表達式一般為 promise 對象；
????????3. await 返回的是 promise 成功的值；
????????4. await 的 promise 失敗了, 就會拋出異常, 需要通過 try...catch 捕獲處理；
代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>await表達式</title>
</head>
<body>
<script>
// async函數 + await表達式：異步函數
// 創建Prmise對象
const p = new Promise((resolve,reject)=>{
resolve("成功啦！");
})
async function fn(){
// await 返回的是 promise 成功的值
let result = await p;
console.log(result); // 成功啦！
} f
n();
</script>
</body>
</html>

es6js 新特性，async 和 await 讀取文件案例：

// 導入模塊
const fs = require("fs");
// 讀取
function readText() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/text.txt", (err, data) => {
//如果失敗
if (err) reject(err);
//如果成功
resolve(data);
})
})
} f
unction readTest1() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test1.txt", (err, data) => {
//如果失敗
if (err) reject(err);
//如果成功
resolve(data);
})
})
} f
unction readTest2() {
return new Promise((resolve, reject) => {
fs.readFile("../resources/test2.txt", (err, data) => {
//如果失敗
if (err) reject(err);
//如果成功
resolve(data);
})
})
} /
/聲明一個 async 函數
async function main(){
//獲取為學內容
let t0 = await readText();
//獲取插秧詩內容
let t1 = await readTest1();
// 獲取觀書有感
let t2 = await readTest2();
console.log(t0.toString());
console.log(t1.toString());
console.log(t2.toString());
}
main();

async 和 await 結合發送ajax請求：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>async 和 await 結合發送ajax請求</title>
</head>
<body>
<script>
// async 和 await 結合發送ajax請求
function sendAjax(url){
return new Promise((resolve,reject)=>{
// 1、創建對象
const x = new XMLHttpRequest();
// 2、初始化
x.open("GET",url);
// 3、發送
x.send();
// 4、事件綁定
x.onreadystatechange = function(){
if(x.readyState == 4){
if(x.status>=200 && x.status<=299){
// 成功
resolve(x.response);
}else{
// 失敗
reject(x.status);
}
}
}
});
} 
// 測試
// const result = sendAjax("https://api.apiopen.top/getJoke");
// result.then(value=>{
// console.log(value);
// },reason=>{
// console.warn(reason);
// })
// 使用async和await
async function main(){
let result = await sendAjax("https://api.apiopen.top/getJoke");
console.log(result);
} 
main();
</script>
</body>
</html>

對象方法擴展：
????????1. Object.values()方法：返回一個給定對象的所有可枚舉屬性值的數組；
????????2. Object.entries()方法：返回一個給定對象自身可遍歷屬性 [key,value] 的數組；
????????3. Object.getOwnPropertyDescriptors()該方法：返回指定對象所有自身屬性的描述對象；
代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對象方法擴展</title>
</head>
<body>
<script>
// 對象方法擴展
let school = {
name : "張三",
age : 21,
sex : "男"
} 
// 獲取對象所有的鍵
console.log(Object.keys(school));
// 獲取對象所有的值
console.log(Object.values(school));
// 獲取對象的entries
console.log(Object.entries(school));
// 創建map
const map = new Map(Object.entries(school));
console.log(map);
console.log(map.get("name"));
// 返回指定對象所有自身屬性的描述對象
console.log(Object.getOwnPropertyDescriptors(school));
// 參考內容：
const obj = Object.create(null,{
name : {
// 設置值
value : "張三",
// 屬性特性
writable : true,
configuration : true,
enumerable : true
}
});
</script>
</body>
</html>

原文链接：https://hbdhgg.com/4/139930.html

发表评论: