JS `Array.prototype.values()`：获取数组值的迭代器

嘿，各位代码界的弄潮儿们，今天咱们来聊聊 JavaScript 数组里一个挺实在的小伙伴：Array.prototype.values()。别看它名字平平无奇，用好了也能让你的代码更优雅，更高效。

开场白：迭代器的那些事儿

在深入 values() 之前，咱们先简单回顾一下迭代器（Iterator）的概念。迭代器就像一个旅行指南，它知道怎么一步步地遍历一个数据结构（比如数组、Map、Set）。它有两个关键方法：

next(): 返回一个对象，包含 value (当前元素的值) 和 done (是否遍历结束) 两个属性。
Symbol.iterator: 一个特殊的 Symbol 属性，用来让一个对象可迭代。

简而言之，迭代器就是一种访问集合数据的标准方式。 ES6 引入了迭代器，让我们可以使用 for...of 循环等语法来轻松地遍历各种数据结构。

Array.prototype.values()：闪亮登场

Array.prototype.values() 方法返回一个新的 数组迭代器 对象，该对象按顺序包含数组中每个索引的值。也就是说，它会创建一个迭代器，专门用来遍历数组的值。

语法

array.values()

这个方法不需要任何参数，直接调用就行。

返回值

一个迭代器对象。

实战演练：代码说话

光说不练假把式，咱们直接上代码：

const myArray = ['apple', 'banana', 'cherry'];

// 使用 values() 方法获取迭代器
const iterator = myArray.values();

// 使用 next() 方法遍历
console.log(iterator.next()); // 输出: { value: 'apple', done: false }
console.log(iterator.next()); // 输出: { value: 'banana', done: false }
console.log(iterator.next()); // 输出: { value: 'cherry', done: false }
console.log(iterator.next()); // 输出: { value: undefined, done: true }

这段代码演示了如何使用 values() 方法创建一个迭代器，然后通过 next() 方法逐个访问数组的值。当遍历到数组末尾时，done 属性变为 true，value 属性变为 undefined。

for...of 循环的妙用

更优雅的遍历方式当然是 for...of 循环：

const myArray = ['apple', 'banana', 'cherry'];

for (const value of myArray.values()) {
  console.log(value);
}

// 输出:
// apple
// banana
// cherry

for...of 循环会自动调用迭代器的 next() 方法，直到 done 属性为 true。这样，我们可以更简洁地遍历数组的值，而无需手动调用 next() 方法。

values() vs. keys() vs. entries()

JavaScript 数组还有另外两个类似的迭代器方法：keys() 和 entries()。咱们来对比一下它们的区别：

方法	返回值	遍历内容
`values()`	数组值的迭代器	数组的值
`keys()`	数组索引（键）的迭代器	数组的索引
`entries()`	数组键值对的迭代器（返回 `[index, value]` 形式）	数组的索引和值

举个例子：

const myArray = ['apple', 'banana', 'cherry'];

// keys()
for (const key of myArray.keys()) {
  console.log(key);
}
// 输出:
// 0
// 1
// 2

// entries()
for (const entry of myArray.entries()) {
  console.log(entry);
}
// 输出:
// [0, 'apple']
// [1, 'banana']
// [2, 'cherry']

keys() 方法返回的是数组的索引，entries() 方法返回的是键值对。根据不同的需求，选择合适的方法。

values() 的应用场景

需要只遍历数组的值，而不需要索引时。 例如，只想对数组中的每个元素进行某种操作，而不需要知道元素的位置。
与其他可迭代对象进行统一处理。 JavaScript 中有很多可迭代对象（比如 Map、Set、String），它们都有 values() 方法。使用 values() 可以方便地将它们统一处理。
自定义迭代逻辑。 虽然 for...of 循环已经很方便了，但有时候我们需要更精细地控制迭代过程。使用 values() 可以获取迭代器对象，然后自定义迭代逻辑。

高级用法：自定义迭代逻辑

假设我们需要遍历数组的值，但只输出偶数索引的值。可以这样实现：

const myArray = ['apple', 'banana', 'cherry', 'date', 'fig'];

const iterator = myArray.values();
let index = 0;
let result = iterator.next();

while (!result.done) {
  if (index % 2 === 0) {
    console.log(result.value);
  }
  index++;
  result = iterator.next();
}

// 输出:
// apple
// cherry
// fig

这段代码手动控制了迭代过程，只输出了偶数索引的值。当然，这种情况下使用普通的 for 循环可能更简洁，但这个例子展示了如何自定义迭代逻辑。

兼容性

Array.prototype.values() 方法是 ES6 引入的，所以需要注意兼容性。对于不支持 ES6 的浏览器，可以使用 polyfill 来提供支持。现代浏览器基本都支持了。

性能考量

Array.prototype.values() 本身性能很好，因为它只是返回一个迭代器对象，并不会立即遍历整个数组。实际的遍历操作是在调用 next() 方法或者使用 for...of 循环时才发生的。因此，在大多数情况下，使用 values() 不会带来明显的性能问题。

注意事项

values() 方法返回的是一个新的迭代器对象，每次调用都会创建一个新的迭代器。
迭代器对象是单向的，只能从头到尾遍历一次。一旦遍历结束，就无法再次使用。
如果数组在迭代过程中被修改，迭代器的行为是未定义的。应该避免在迭代过程中修改数组。

总结：values() 的价值

Array.prototype.values() 方法是一个简单但实用的工具，可以方便地遍历数组的值。它与其他迭代器方法（keys()、entries()）一起，为我们提供了更灵活的数组遍历方式。在合适的场景下使用 values()，可以使我们的代码更简洁、更易读、更高效。

最后的彩蛋：迭代器的本质

迭代器本质上是一种设计模式，它将遍历集合的算法与集合本身分离。这样，我们就可以在不改变集合结构的情况下，使用不同的迭代器来遍历集合。这种分离的思想是软件设计中非常重要的原则之一。

好了，今天的讲座就到这里。希望大家对 Array.prototype.values() 有了更深入的了解。在实际开发中，灵活运用这些小技巧，可以让你写出更优雅、更高效的 JavaScript 代码。记住，代码的魅力在于不断学习和探索！

发表回复 取消回复

发表回复取消回复