这篇文章我们来了解JavaScript迭代器相关内容，下文将介绍什么是迭代器，以及自定义迭代器的方法，文中示例代码介绍的非常详细，对大家学习和理解JavaScript迭代器会有一定的帮助，那么感兴趣的朋友接下来一起跟随小编了解看看吧。

    1. 什么是迭代器 ？

• 迭代器就是一种接口机制，为各种不同的数据结构提供统一访问的机制。(即为了让一些不支持遍历的数据结构可遍历)

    最常见的就是Array迭代器，按顺序返回数组中的值。

let arr = [1,2,3,4,5];for (let val of arr) {
    console.log(val);}

    2. 自定义迭代器

    那么我们如何实现迭代器呢？

    首先，它需要满足两点：

• 可迭代协议
• 迭代器协议

    可迭代协议

可迭代协议允许 JavaScript 对象定义或定制它们的迭代行为

    如何满足可迭代协议 ？

要成为可迭代对象， 一个对象必须实现 @@iterator 方法。
这意味着对象（或者它原型链上的某个对象）必须有一个键为@@iterator 的属性，可通过常量 Symbol.iterator 访问该属性

    也就是说要想满足可迭代协议，那么你的对象需要有一个键名为Symbol.iterator的属性，使其成为可迭代对象。

    迭代器协议

迭代器协议定义了产生一系列值（无论是有限个还是无限个）的标准方式。
当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。

    如何满足迭代器协议 ？

    你的对象需要至少实现一个next()方法，这个方法返回一个迭代器对象IteratorResult。这个迭代器对象包含两个属性done和·value。

• done：
  如果迭代器可以产生序列中的下一个值，则为 false。
  如果迭代器已将序列迭代完毕，则为 true
• value
  迭代器返回的值。done 为 true 时可省略
  

    那么我们接下来开始自定义一个迭代器

    由前文所讲，要想自定义迭代器，需要符合以下两个条件：

• 成为可迭代对象，即有一个 Symbol.iterator 属性
  （即可迭代协议：Symbol.iterator）
• 该迭代器对象返回一个 next() 方法，这个 next() 方法返回一个包含value 和 done 属性的对象
  （即迭代器协议：return { next() { return { value, done } }）

let colors = {
    blue : "蓝色",
    green : "绿色",
    yellow : "黄色"}

    colors 现在是一个不可迭代对象，我们想使用 for…of 对其进行遍历，那么就可以自定义迭代器。
    接下来，开始实现：

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors)，keys 就会包括一些不可枚举的属性
	// 那么后面的 len 要减一，减去Symbol.iterator这个属性
	// 根据实际情况选择使用
	let len = keys.length;
	let index = 0;
	
	return {
	    next : function() {
	        if (index < len) {
	            return {
	                value : colors[keys[index++]],
	                done : false
	            }
	        }
	        return { done : true }
	    }
	}}

    让我们对其验证一下：

for (let val of colors) {
    console.log(val);}

    现在大家对于JavaScript迭代器和如何实现迭代器应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多JavaScript迭代器的内容，大家可以关注群英网络其它相关文章。

文本转载自PHP中文网

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue多页面配置是怎样的，单页和多页应用有何不同

  这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下

• axios怎样实现请求封装及使用?

  axios怎样实现请求封装及使用?通常，如果我们是做大型的项目，那么就需要使用到很多接口，而为了使用的方便，将接口封装起来很一个不错的方法，因此下面小编就能给大家分享axios的简单封装，需要的朋友可以参考。

• 使用VUE递归有什么效果，如何用来做多级列表

  本文实例为大家分享了VUE递归树形实现多级列表，供大家参考，具体内容如下什么是递归?简单来说就是在组件中内使用组件本身。为什么要用递归？如果出现很多下拉菜单，同级，分级数据，层级混杂，可以使用v-for的嵌套循环不就完事了。对，没毛病这样的话也可以做，但是如果数据又多加了【很多】级分类呢；使用v-for也能实现，但是代

• 如何使用chatgpt将网站图片转为base64同时优化性能？

  这篇文章主要为大家介绍了让chatgpt将html中的图片转为base64方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 使用JS获取url参数有几种方法，如何实现

  目录一、字符串 split 方法二、使用 URLSearchParams 方法1、解析搜索字符串2、生成搜索字符串3、Node.js 代码三、使用正则匹配方法四、使用第三方库 qs一、字符串 split 方法url地址是字符串形式的，所以利用split方法将参数提取出来，该方法比较常用，而且容易理解（无关正则）let