es6學習——迭代器介面
阿新 • • 發佈:2022-01-28
為什麼需要迭代器介面
1 對於一般的迭代迴圈 使用了 for(i=0;i<...)這中單一結構,只能通過陣列進行遍歷,且每次遍歷都要獲取陣列值,再通過index取值,不適合所有陣列型別;
2 迭代的順序是固定的 對於具有隱式順序的結構 比如map set等 是不適用的。
迭代器就是用於更好的對物件進行迭代的。
哪些資料型別內建了迭代器介面 (即不用通過迭代器工廠函式就能夠自動實現的)
// 哪些內建了迭代器介面
1 for...in(可以適用於物件和陣列)
會遍歷陣列所有的可列舉屬性 包括原型
Array.prototype.name="zou";
let arr = [1, 2, 3];
for (const item in arr) {
console.log(item); // 0 1 2 name
}
let obj={1:11,2:22,3:33};
for (let item in obj) {
console.log(item); // 1 2 3 獲取鍵名
不足:
1 返回的型別不一定按照真實的陣列的index
2 使用for in會遍歷陣列活物件所有的可列舉屬性,包括原型。例如上慄的原型方法method和name屬性 不想的話 可以用hasOwnProperty
2 for...of 迴圈
只能用來 遍歷數/陣列物件/字串/map/set等擁有迭代器物件的集合 以及arr/map/set的values()/entries()/ keys() 他們也是具有迭代器介面的集合 以及他們的
與forEach()不同的是,它可以正確響應break、continue和return語句 牛逼!!!for in也可以 forEach
forEach
迴圈遍歷陣列不能通過break退出;
let test=1; // false test={1:22}; // false test=function(){}; // false test=new Set(); // true test=new Map(); // true test=[]; // true test="1222"; // true console.log(typeof test[Symbol.iterator] === "function")每個迭代器都表示對可迭代物件的一次性有序遍歷 es6 具有三種集合物件型別:陣列、map、set ,三種類型都擁有如下迭代器 a、entries()返回一個包含鍵值對的迭代器 b、values() 返回一個包含集合中的值的迭代器 c、keys() 返回一個包含集合中的鍵的迭代器,對於set來說鍵和值是相同的,對於map來說,迭代器返回每個不重複的鍵 這些迭代器的返回結果
// let map=new Map();// 先驗證map let map=new WeakMap();// 驗證weakMap let a=1; map.set(a,'11'); map.set(2,'22'); map.set(3,'33'); map.set(4,'44'); let entries=map.entries(); // console.log(entries) // 返回一個包含鍵值對的迭代器[Map Entries] { [ 1, '11' ], [ 2, '22' ], [ 3, '33' ], [ 4, '44' ] } let values=map.values(); // console.log(values) // 返回鍵值的迭代器[Map Iterator] { '11', '22', '33', '44' } let key=map.keys(); console.log(key) // 返回鍵名的迭代器[Map Iterator] { 1, 2, 3, 4 }
可以接收上述所說的迭代器可迭代物件的原生語言特性有: a、 for-of 迴圈 b、 陣列解構 c、 擴充套件操作符 d、 Array.from() e、 建立集合 f、 建立對映 g、 Promise.all() 接收由期約組成的可迭代物件 h、 Promise.race() 接收由期約組成的可迭代物件 i、 yield* 操作符,在生成器中使用 所以一般可以通過for..of對上述的迭代器進行更好的遍歷 進行特性操作 引申:for..in for...of 和forEach區別