中國動漫影視培訓網(wǎng)站源碼sem是什么意思
目錄
迭代器
Iterator 的作用
Iterator 的遍歷過程
?Set
?Map集合
?map和對象區(qū)別?
async異步函數(shù)
迭代器
迭代器（Iterator）就是這樣一種機制。它是一種接口，為各種不同的數(shù)據(jù)結構提供統(tǒng)一的訪問機制。任何數(shù)據(jù)結構只要部署Iterator接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結構的所有成員）。
Iterator 的作用
為各種數(shù)據(jù)結構，提供一個統(tǒng)一的、簡便的訪問接口；
使得數(shù)據(jù)結構的成員能夠按某種次序排列；
ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)，Iterator接口主要供for...of消費。
Iterator 的遍歷過程
-
創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。
-
第一次調用指針對象的next方法，可以將指針指向數(shù)據(jù)結構的第一個成員。
-
第二次調用指針對象的next方法，指針就指向數(shù)據(jù)結構的第二個成員。
-
不斷調用指針對象的next方法，直到它指向數(shù)據(jù)結構的結束位置。
/*** 數(shù)組 keys values entries* 方法全部返回迭代器對象 就可以使用 for of遍歷* 迭代器接口本質就是調用迭代器對象的next方法 指針 * 調用next方法會依次指向內部成員*/
let arr = [1,2,3,4,5];
let keys = arr.keys();
let values = arr.values();
let entries = arr.entries();
console.log(keys.next()); //{ value: 0, done: false }
console.log(keys.next()); //{ value: 1, done: false }
console.log(keys.next()); //{ value: 2, done: false }
console.log(keys.next()); //{ value: 3, done: false }
console.log(keys.next()); //{ value: 4, done: false }
console.log(keys.next()); //{ value: undefined, done: true }
// console.log(values.next());
// console.log(entries.next());
// let result;
// while(!(result = keys.next()).done){
// console.log(result.value); //這里用keys.next() 會再次執(zhí)行一次
// }console.log(keys,values,entries);
for(let key of keys){console.log(key,'key');
}
for(let value of values){console.log(value,'value');
}
for(let entry of entries){console.log(entry,'entry');
}function test(){// arguments 是迭代器對象for(let key of arguments){console.log(key);}
}
test('1','2',3,4,5)
?原生具備 Iterator 接口的數(shù)據(jù)結構如下
?? ?Array、Map、Set、String、TypedArray、arguments、NodeList?
我們還可以把原來不是可迭代的數(shù)據(jù)類型變成可迭代的，這樣就能支持for...of循環(huán)啦，比如說objct!如果我們直接對對象執(zhí)行for...of肯定會出錯：
let obj = {name:'zhangsan',age:12
}for(let key of obj){ //報錯 obj is not iterableconsole.log(key);
}
let obj = {name:'zhangsan',age:12
}// for(let key of obj){ //報錯 obj is not iterable
// console.log(key);
// }
let keys = Object.keys(obj);
console.log(keys);
for(let key of keys){console.log(key);
}
?Set
Set類似于數(shù)組，但是成員的值都是唯一的，沒有重復的值。Set 本身是一個構造函數(shù)，用來生成 Set 數(shù)據(jù)結構。Set 構造函數(shù)可以接受一個數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結構）作為參數(shù)，用來初始化。
/*** set集合* 特點:內部成員值是唯一的* 參數(shù):無或者實現(xiàn)了迭代器接口的數(shù)據(jù)結構 數(shù)組 字符串* 創(chuàng)建使用set構造函數(shù) new Set() typeof*/
let set = new Set();
// console.log(set,typeof(set),set instanceof Object);
// 添加內部成員 add
// 注意:如果是基本數(shù)據(jù)類型相同的值添加兩次會自動去重
// 如果是引用數(shù)據(jù)類型 會添加多次 (引用地址不同)
set.add('hello');
set.add('world');
set.add('hello');
let arr1 = [];
set.add(arr1);
set.add([]);
console.log(set);// 刪除內部成員delete
// 注意:刪除引用數(shù)據(jù)類型的時候如果是內容則無法刪除 是指向地址的變量則可以刪除
set.delete([]); //無法刪除
set.delete(arr1); //可以刪除
console.log(set);// 遍歷set集合
console.log(set.keys());
console.log(set.values());
console.log(set.entries());
for(let key of (set.keys())){console.log(key);
}
set.forEach((key,value)=>{console.log(key,value);
})/*** has 檢驗set集合有沒有該內部成員* 引用數(shù)據(jù)類型最好放引用地址*/
console.log(set.has('hello'));
console.log(set.has([]));/*** 屬性* 查看set內部成員個數(shù) size*/
console.log(set.size);
let obj = {};
set.add(obj);
console.log(set.size);/*** 應用 數(shù)組去重 set*/
let set1 = new Set([1,2,3,4,3,2,1]);
console.log(set1);
let res1 = Array.from(set1);
console.log(res1);
console.log(set1[0]);
let res2 = Array.prototype.slice.call(set1,0);
console.log(res2);let res3 = [...set1];
console.log(res3);let set2 = new Set('hello');
console.log(set2);
?Map集合
Map類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結構，Map 比 Object 更合適。Map 可以接受一個數(shù)組作為參數(shù)。該數(shù)組的成員是一個個表示鍵值對的數(shù)組。
/*** 鍵值對的一種數(shù)據(jù)結構 鍵可以是任意數(shù)據(jù)類型*/
let obj = {name:'zhangsan',age:12,[Symbol('email')]:"123456@qq.com",
}
obj[{}] = 1; //期望出現(xiàn){} =>1 結果出現(xiàn)'[object Object]' => 1
let res = Object.entries(obj);
let map = new Map(res);
console.log(map,typeof map,map instanceof Object);
map.set({},1);
map.set([],function(){});
map.set(undefined,'hello');
console.log(map);
/*** 遍歷map keys values entries forEach*/
console.log(map.keys());
console.log(map.values());
console.log(map.entries());for(let key of map){console.log(key,'22222');
}map.forEach((key,value)=>{console.log(key,value);
})map.forEach((key,value)=>{console.log(value,key,'value是值,key是鍵');
})console.log(map.size);
// 刪除某一個屬性
map.delete('name');
console.log(map);
// 獲取屬性鍵對應的值
console.log(map.get('age'));
console.log(Map.prototype);
console.log(Set.prototype);
?
?map和對象區(qū)別?
????1.map鍵可以是任意數(shù)據(jù)類型，對象鍵只能是字符串或者symbol值
? ? 2.map可以使用for...of遍歷,實現(xiàn)了迭代器接口
? ? 3.對象只能使用for in 循環(huán)遍歷 因為沒有實現(xiàn)迭代器接口
? ? 4.map可以直接調用forEach方法進行遍歷
? ? 5.map的鍵值對數(shù)量可以直接通過size屬性獲取，對象需要手動獲取
? ? 6.map更適合鍵值對，頻繁刪除map做了一些優(yōu)化
? ? 7.map內部鍵值對有序，對象屬性是無序。
async異步函數(shù)
async函數(shù)是使用async關鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構造函數(shù)的實例， 并且其中允許使用await關鍵字。async和await關鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為，而無需刻意地鏈式調用promise。
await關鍵字只在async函數(shù)內有效。如果你在async函數(shù)體之外使用它，就會拋出語法錯誤 SyntaxError 。async/await的目的為了簡化使用基于promise的API時所需的語法。async/await的行為就好像搭配使用了生成器和promise。async函數(shù)一定會返回一個promise對象。如果一個async函數(shù)的返回值看起來不是promise，那么它將會被隱式地包裝在一個promise中。
簡單來說 是一個函數(shù)，是一個異步編程解決方案，內部封裝了generator函數(shù)，是一個語法糖，內部自帶執(zhí)行器，與await配合使用；異步編程，同步處理。
<!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><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head><body><script>async function getFindAll() {try {let res = await axios.get('http://121.199.0.35:8888/index/carousel/findAll');console.log(res);} catch {throw new Error('請求失敗')} finally {console.log('請求完成');}}getFindAll();</script>
</body></html>
?
?