3

Js迭代器[Symbol.iterator]属性用法及代码示例

 2 years ago
source link: https://www.fly63.com/article/detial/11796
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

迭代器(Iterator)简介

迭代器(Iterator)是一种接口(对象的一个属性方法),为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署了(Iterator)接口,就可以完成遍历操作。ES6提供了新的遍历命令 for of遍历,有iterator接口的数据结构可以使用,用来遍历键值。

我们知道数组本质上是迭代的,但除此之外,还有几个对象用于迭代目的。假设任何不是数组但确实拥有一组列表、集合等的对象,那么 for..of 可用于迭代它。我们使用 for..of 循环来表示任意区间的范围对象。它决定了 for..of 循环的工作范围并迭代循环。

我们将使用 Symbol.iterator 方法(JavaScript 中的内置方法)来迭代上面提到的 range 对象。此方法的用法步骤:

  1. 一旦 for..of 循环开始,它首先检查错误,如果未找到,则访问该方法和具有该方法的对象。
  2. 之后 for..of 循环将运行在对象上。
  3. 要获取下一个即将到来的值,它会调用该输出对象的 next() 方法。
  4. 返回的值将采用 {done:Boolean, value:any} 形式。当 done=true 返回时,循环将被视为完整的循环。

拥有迭代器的数据结构

  • Arrty--数组
  • Argments--函数获取实参的变量
  • Set--ES6新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值
  • Map--是一组键值对的结构,具有极快的查找速度
  • String--字符串
  • TypedArray--描述的是二进制缓存区一个类似数组的视图,也叫类型数组
  • NodeList--是一种类数组对象,用于保存一组有序的节点

用法:

[Symbol.iterator]
  • 范围本身不会有 next() 方法。
  • 当我们调用 range[Symbol.iterator]() 时,会形成一个迭代器,方法 next() 将生成用于进一步迭代的值。

可迭代对象应用场景:

  1. for of场景
  2. 数组展开语法 (对象展开 ES9(ES2018)中新增的一个特性: 用的不是迭代器)
  3. 解构语法  (对象结构 ES9(ES2018)中新增的一个特性: 用的不是迭代器)

迭代器(Iterator)示例

let range = {
from:2,
to:7
};

range[Symbol.iterator] = function() {
return {
now:this.from,
end:this.to,
next() {
if (this.now <= this.end) {
return { done:false, value:this.now++ };
} else {
return { done:true };
}
}
};
};

for (let i of range) {
console.log(i);
}
2
3
4
5
6
7

next方法有如下的要求:

一个无参数或者一个参数的函数,返回一个应当拥有以下两个属性的对象:

done(boolean)

如果迭代器可以产生序列中的下一个值,则为 false。(这等价于没有指定 done 这个属性。)

如果迭代器已将序列迭代完毕,则为 true。这种情况下,value 是可选的,如果它依然存在,即为迭代结束之后的默认返回值。

value

迭代器返回的任何 JavaScript 值。done 为 true 时可省略。

链接: https://www.fly63.com/article/detial/11796


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK