JavaScript 语言自诞生以来,就有一大段时间没有更新过,导致其语法功能有些落后,不能满足开发者更高效的需求。ES6 引入了许多新特性,其中就包含了遍历器(Iterator)和 for...of 循环。本文将介绍 ES6 中多种遍历器的用法和实际应用场合。
什么是遍历器?
在 ES6 中,遍历器是一种接口,为各种不同的数据结构提供统一的访问机制。开发者通过遍历器,可以像访问数组一样,对任意数据结构进行遍历。
一个对象,用 Symbol.iterator 方法来返回一个遍历器对象。调用该对象的 next 方法,就会依次返回数据结构的每一个成员。如下是一个简单的示例:
----- --- - --- -- --- ----- ---- - ----------------------- ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- ---------- ----- -----
可以看到,通过遍历器访问数组时,会一次返回一个成员,直到最后一个成员返回,遍历结束。每次调用 next 方法,都会返回当前成员和遍历是否结束(done)的信息。
多种遍历器用法
ES6 中提供了多种遍历器的用法,我们将逐一进行介绍。
字符串遍历器
在 ES6 中,字符串被认为是一种类似数组的数据结构,因此也可以使用遍历器进行遍历。每次遍历返回的是字符串中的一个字符。
----- --- - -------- ----- ---- - ----------------------- ------------------------- -- ------- ---- ----- ------ ------------------------- -- ------- ---- ----- ------ ------------------------- -- ------- ---- ----- ------ ------------------------- -- ------- ---- ----- ------ ------------------------- -- ------- ---- ----- ------ ------------------------- -- ------- ---------- ----- -----
数组遍历器
在 ES6 中,数组是一种常见的数据结构,因此也可以使用遍历器进行遍历。每次遍历返回的是数组的一个元素。
----- --- - --- -- --- ----- ---- - ----------------------- ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- ---------- ----- -----
Set 和 Map 遍历器
在 ES6 中,Set 和 Map 是两种新的数据结构,因此也可以使用遍历器进行遍历。每次遍历分别返回 Set 和 Map 中的一个值和键。
----- --- - --- ------- -- ---- ----- ---- - ----------------------- ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- ---------- ----- ----- ----- --- - --- ------------ --- ------- ----- ----- ------- - ----------------------- ---------------------------- -- ------- ------- --- ----- ------ ---------------------------- -- ------- ------- --- ----- ------ ---------------------------- -- ------- ---------- ----- -----
自定义遍历器
在 ES6 中,开发者可以自定义遍历器。只需要在一个对象中,实现 Symbol.iterator 方法,该方法返回一个可遍历对象。
----- --- - - -- -- -- -- -- -- ------------------ ---------- - ----- ---- - ------------------ --- ----- - -- ------ - ----- -- -- - -- ------ -- ------------ - ------ ------ ------ - ---- - ----- --- - ------------ -------- ------ ------- -------- -------------- ----- ------- - - - - -- --- ------ ---- -- ---- - ------------------ -- --- --- --- --- --- -- -
遍历器的实际应用场合
遍历器在前端开发中,应用非常广泛。下面列举了一些实际应用场合。
for...of 循环
for...of 循环是 ES6 中新添加的一种循环方式,可以对各种集合对象进行遍历。for...of 循环的本质是一次遍历器遍历过程。
----- --- - --- -- --- --- ------ ---- -- ---- - ------------------ -- -- -- - -
合并多个数组
使用遍历器可以将多个数组合并成一个数组。
----- ---- - --- -- --- ----- ---- - --- -- --- ----- ---- - --- -- --- ----- ------ - --------- -------- --------- -------------------- -- --- -- -- -- -- -- -- -- --
使用访问器函数
访问器函数 get 和 set 提供了一种更为可读、可写、更易于检测的属性访问方式。这种访问方式可以让开发者更好地控制对属性的访问。
----- --- - - ----- --- -- --- --- -------- - ------ ----------------- -- --- ------------- - ---------------- - ------ -- ------------------ ---------- - ----- ---- - ----------------------------- ------ ----- - -- ------------------------ -- - ---------- - -- ------------------------ -- -
总结
遍历器是 ES6 中新添加的一种接口,它为访问各种数据结构提供了统一的访问机制。本文介绍了 ES6 中多种遍历器用法,其中包括字符串遍历器、数组遍历器、Set 和 Map 遍历器、以及自定义遍历器等。我们还介绍了遍历器的实际应用场合,包括 for...of 循环、合并多个数组、以及使用访问器函数等。希望本文对您的学习和工作有所指导和帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6492ea0648841e98940b44c8