迭代器自定义遍历对象
生活随笔
收集整理的這篇文章主要介紹了
迭代器自定义遍历对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要說起迭代器自定義遍歷對象，首頁要知道什么是迭代器？
生成器概念在Java，Python等語言中都是具備的，ES6也添加到了JavaScript中。Iterator可以使我們不需要初始化集合，以及索引的變量，而是使用迭代器對象的 next 方法，返回集合的下一項的值，偏向程序化。
迭代器是帶有特殊接口的對象。含有一個next()方法，調用返回一個包含兩個屬性的對象，分別是value和done，value表示當前位置的值，done表示是否迭代完，當為true的時候，調用next就無效了。
ES5中遍歷集合通常都是 for循環，數組還有 forEach 方法，對象就是 for-in，ES6 中又添加了 Map 和 Set，而迭代器可以統一處理所有集合數據的方法。迭代器是一個接口，只要你這個數據結構暴露了一個iterator的接口，那就可以完成迭代。ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>迭代器</title> </head> <body><script>//聲明一個數組const xiyou = ['唐僧','孫悟空','豬八戒','沙僧'];//使用 for...of 遍歷數組// for(let v of xiyou){// console.log(v);// }let iterator = xiyou[Symbol.iterator]();//調用對象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());</script> </body> </html>如上圖所示，可以使用?for...of 遍歷數組，直接得到值的遍歷。也可以使用迭代器的方式進行遍歷。
迭代器自定義遍歷對象遍歷對象中的某一個屬性？
舉例：使用for..of遍歷banji中stus數組?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義遍歷數據</title> </head><body><script>//聲明一個對象const banji = {name: "終極一班",stus: ['xiaoming','xiaoning','xiaotian','knight'],[Symbol.iterator]() {//索引變量let index = 0;//保存外面的this對象let _this = this;return {next: function () {if (index < _this.stus.length) {const result = { value: _this.stus[index], done: false };//下標自增index++;//返回結果return result;}else{return {value: undefined, done: true};}}};}}//遍歷這個對象 for (let v of banji) {console.log(v);}</script> </body></html>如上所示，我們使用自定義的一個[Symbol.iterator](){ }函數，在內部完成一個迭代器的操作，然后在外部通過for..of遍歷，即可實現效果；
總結
以上是生活随笔為你收集整理的迭代器自定义遍历对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dnf手游和端游有什么区别 《地下城与勇
- 下一篇： Promise读取多个文件