目次
4.3. Object.getOwnPropertyDescriptors
関連ビデオ リンク: Shang Silicon Valley Web フロントエンド ES6 チュートリアル、ES6-ES11_哔哩哔哩_bilibili をカバー
第 3 章 ECMASript 7 の新機能
3.1. Array.prototype.includes
includes メソッドは、要素が配列に含まれているかどうかを検出し、ブール値を返すために使用されます。
const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
//判断
console.log(mingzhu.includes('西游记')); //true
console.log(mingzhu.includes('金瓶梅')); //false3.2. 指数演算子
指数演算子「**」は指数演算を実装するために ES7 で導入されました。これは Math.pow と同じ機能を持ちます。
console.log(2 ** 10); // 1024
console.log(Math.pow(2, 10)); //1024第 4 章 ECMASript 8 の新機能
4.1. 非同期と待機
async と await を組み合わせると、非同期コードを同期コードのように見せることができます
js の同期コードと異種コードの元のリンク:
同期コード
コードは 1 行で実行され、サーバー リクエストを送信し、返されるデータを待機した後、Web ページは空白になります (Web ページの動作がブロックされます)。
非同期コード
このコードは、リクエストの送信後、サーバーからデータが返されるのを待たずに後続のコードを実行し続けます (Web ページはスムーズに実行されます)。
js での一般的な非同期実行コード:
1. ajax リクエスト: 非同期 JavaScript および XML
2. タイマー：一定時間後に実行されます
3．イベント処理機能：イベントトリガー条件が成立した場合のみ実行されます。
4.1.1. 非同期関数
- async関数の戻り値はpromiseオブジェクトです
- Promise オブジェクトの結果は、async 関数実行の戻り値によって決まります。
async function fn(){
// 返回一个字符串
return '尚硅谷';
}
const result = fn();
console.log(result);
//结果:
//Promise
//[[Prototype]]: Promise
//[[PromiseState]]: "fulfilled"
//[[PromiseResult]]: "尚硅谷"
//返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
async function fn(){
return;
}
const result = fn();
console.log(result);
//结果:
//Promise {<fulfilled>: undefined}
//[[Prototype]]: Promise
//[[PromiseState]]: "fulfilled"
//[[PromiseResult]]: undefined
エラーがスローされ、返された結果は失敗した Promise です
async function fn(){
throw new Error('出错啦!');
}
const result = fn();
console.log(result);
//会报错
返された結果が Promise オブジェクトの場合
async function fn(){
return new Promise((resolve, reject)=>{
resolve('成功的数据'); //成功的数据
// reject("失败的错误"); //失败的错误,会报错
});
}
const result = fn();
console.log(result);
then メソッドを呼び出す
async function fn(){
return new Promise((resolve, reject)=>{
resolve('成功的数据'); //成功的数据
// reject("失败的错误"); //出现警告：失败的错误
});
}
const result = fn();
console.log(result);
result.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
})4.1.2. await 式
- await は非同期関数で記述する必要があります
- await の右側の式は通常、Promise オブジェクトです。
- await は Promise 成功の値を返します
- await の Promise が失敗した場合、例外がスローされます。この例外は try...catch でキャプチャして処理する必要があります。
//创建 promise 对象
const p = new Promise((resolve, reject) => {
// resolve("用户数据"); //结果：用户数据
reject("失败啦!"); //失败啦!
})
// await 要放在 async 函数中.
async function main() {
try {
let result = await p;
//
console.log(result);
} catch (e) {
console.log(e);
}
}
//调用函数
main();aysnc と await を組み合わせてファイルを読み取る
//1. 引入 fs 模块
const fs = require("fs");
//读取『为学』
function readWeiXue() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/为学.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readChaYangShi() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/插秧诗.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readGuanShu() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/观书有感.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
//声明一个 async 函数
async function main(){
//获取为学内容
let weixue = await readWeiXue();
//获取插秧诗内容
let chayang = await readChaYangShi();
// 获取观书有感
let guanshu = await readGuanShu();
console.log(weixue.toString());
console.log(chayang.toString());
console.log(guanshu.toString());
}
main();async と await は AJAX リクエストをカプセル化します。
// 发送 AJAX 请求, 返回的结果是 Promise 对象
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 < 300) {
//成功啦
resolve(x.response);
}else{
//如果失败
reject(x.status);
}
}
}
})
}
//promise then 方法测试
// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
// console.log(value);
// }, reason=>{})
// async 与 await 测试 axios
async function main(){
//发送 AJAX 请求
let result = await sendAJAX("https://api.apiopen.top/getJoke");
//再次测试
let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')
console.log(tianqi);
}
main();4.2. オブジェクト.値 和 和 オブジェクト.エントリ
- Object.values() メソッドは、指定されたオブジェクトの列挙可能なすべてのプロパティ値の配列を返します。
- Object.entries() メソッドは、指定されたオブジェクト自体の走査可能なプロパティ [キー、値] の配列を返します。
4.3. Object.getOwnPropertyDescriptors
- このメソッドは、指定されたオブジェクトのすべてのプロパティの説明オブジェクトを返します。
//声明对象
const school = {
name:"尚硅谷",
cities:['北京','上海','深圳'],
xueke: ['前端','Java','大数据','运维']
};//获取对象所有的键
console.log(Object.keys(school));//获取对象所有的值
console.log(Object.values(school));//entries,返回的是一个数组，该数组每个元素也是一个数组[键，值]
console.log(Object.entries(school));//创建 Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
//getOwnPropertyDescriptors获取的是name里面的内容
const obj = Object.create(null, {
name: {
//设置值
value: '尚硅谷',
//属性特性
writable: true,
configurable: true,
enumerable: true
}
});