js 如何用values获取数组元素的迭代器-js教程-PHP中文网

javascript数组迭代器与传统遍历方式的核心区别在于惰性求值与显式控制，传统方式如for循环和foreach会立即遍历所有元素，而values()返回的迭代器通过next()按需返回值，节省资源；2. 除了values()，还可使用keys()获取索引迭代器，entries()获取索引-值对迭代器，三者共同提供多维度遍历能力；3. 在处理大数据集、需手动控制流程、传递可迭代对象或结合生成器时，优先使用values()迭代器，因其支持惰性加载和细粒度操作，提升性能与灵活性。

js 如何用values获取数组元素的迭代器

在 JavaScript 中，你可以直接使用数组实例上的

values()

登录后复制

方法来获取一个包含数组中每个元素值的迭代器。这个迭代器允许你以一种更现代、更符合 ES6 规范的方式遍历数组内容，而不仅仅是传统的索引访问。它返回的是一个

Array Iterator

登录后复制

对象，你可以用

for...of

登录后复制

循环来消费它，或者手动调用

next()

登录后复制

方法一步步地取出值。

解决方案

获取 JavaScript 数组元素的迭代器，核心就是利用

Array.prototype.values()

登录后复制

方法。这个方法会返回一个新的

Array Iterator

登录后复制

对象，其中包含了数组中每个索引对应的值。

举个例子，假设我们有一个数字数组：

const numbers = [10, 20, 30, 40];
const valueIterator = numbers.values();

console.log(valueIterator.next());    // { value: 10, done: false }
console.log(valueIterator.next());    // { value: 20, done: false }
console.log(valueIterator.next());    // { value: 30, done: false }
console.log(valueIterator.next());    // { value: 40, done: false }
console.log(valueIterator.next());    // { value: undefined, done: true }

登录后复制

当然，在实际开发中，我们很少会这样手动调用

next()

登录后复制

。更常见、也更推荐的方式是结合

for...of

登录后复制

循环来使用这个迭代器，因为它会自动处理

next()

登录后复制

调用和

done

登录后复制

状态：

const fruits = ['apple', 'banana', 'cherry'];
const fruitIterator = fruits.values();

for (const fruit of fruitIterator) {
  console.log(fruit);
}
// 输出：
// apple
// banana
// cherry

登录后复制

值得注意的是，

for...of

登录后复制

循环本身就是为可迭代对象设计的。由于数组本身就是可迭代的（它默认实现了

Symbol.iterator

登录后复制

方法，而这个方法在内部通常就指向了

values()

登录后复制

方法），所以直接在数组上使用

for...of

登录后复制

循环，效果与先调用

values()

登录后复制

再循环是等价的，并且通常更简洁：

const colors = ['red', 'green', 'blue'];

for (const color of colors) { // 内部其实也是在利用 values() 提供的迭代器
  console.log(color);
}

登录后复制

在我看来，理解

values()

登录后复制

的存在，更多的是帮助我们理解 JavaScript 的迭代器协议，以及在某些特定场景下（比如你需要一个显式的迭代器对象来传递或控制遍历过程）它的价值。

JavaScript 数组迭代器与传统遍历方式有何不同？

这真是一个好问题，因为很多人可能会疑惑，既然

for...of

登录后复制

循环直接作用于数组就能达到目的，为什么我们还需要

values()

登录后复制

这样的方法呢？在我看来，理解其中的差异和迭代器的本质，能帮助我们更深入地掌握 JavaScript 的运行机制，并在特定场景下做出更优的选择。

传统的数组遍历方式，比如

for

登录后复制

循环（

for (let i = 0; i < arr.length; i++)

登录后复制

）和

forEach

登录后复制

方法，它们的工作方式是直接访问数组的每一个元素，或者说，它们是“急切”地遍历整个数组。

for

登录后复制

循环通过索引来定位元素，而

forEach

登录后复制

则为数组中的每个元素执行一个回调函数。它们在遍历开始时，通常就已经“知道”了所有要处理的元素。

而迭代器，特别是通过

values()

登录后复制

获取的迭代器，其核心思想是“惰性求值”（lazy evaluation）。它并不会在创建时就立即把数组的所有元素都准备好。相反，它提供了一个

next()

登录后复制

方法，每次调用时才返回下一个元素。这意味着，如果你只取迭代器中的前几个元素，那么后面的元素就不会被处理，这在处理非常大甚至理论上无限的数据流时，可以节省大量的内存和计算资源。

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

413

查看详情

考虑一个场景：你有一个非常庞大的数据集，可能是一个巨大的数组，或者是一个通过某种方式分块加载的数据。如果你用

forEach

登录后复制

，它会尝试一次性处理所有数据，这可能会导致内存溢出。但如果你使用

values()

登录后复制

获得的迭代器，你可以按需取用数据，每次只处理当前需要的，从而大大降低内存压力。

此外，迭代器提供了一种统一的遍历协议。不仅仅是数组，

Map

登录后复制

、

Set

登录后复制

、字符串以及自定义的可迭代对象（通过实现

Symbol.iterator

登录后复制

）都可以通过

for...of

登录后复制

循环来遍历，而这一切都离不开迭代器协议的支撑。这种统一性让代码更具通用性和可读性。

除了

values()

登录后复制

，JavaScript 还有哪些方法可以获取数组的迭代器？

是的，除了

values()

登录后复制

之外，JavaScript 的

Array

登录后复制

原型上还提供了另外两个非常实用的方法，它们也返回不同类型的迭代器，用于满足不同的遍历需求。这三个方法一起构成了数组迭代器的“三驾马车”：

```
Array.prototype.keys()
```
登录后复制
这个方法返回一个包含数组中每个索引的迭代器。如果你只关心数组元素的索引，而不是它们的值，那么
```
keys()
```
登录后复制
就非常方便。
```
const students = ['Alice', 'Bob', 'Charlie'];
const indexIterator = students.keys();

for (const index of indexIterator) {
  console.log(`Index: ${index}`);
}
// 输出：
// Index: 0
// Index: 1
// Index: 2
```
登录后复制
在我看来，
```
keys()
```
登录后复制
在你需要手动构建基于索引的逻辑，或者与一些需要索引作为参数的函数配合时，显得特别有用。
```
Array.prototype.entries()
```
登录后复制
这个方法返回一个包含数组中每个索引-值对的迭代器。每个返回的项都是一个
```
[index, value]
```
登录后复制
格式的数组。这是我在实际工作中用得最多的一个迭代器方法，因为它能同时提供索引和值，非常灵活。
```
const products = ['Laptop', 'Mouse', 'Keyboard'];
const entryIterator = products.entries();

for (const [index, product] of entryIterator) {
  console.log(`Product at index ${index}: ${product}`);
}
// 输出：
// Product at index 0: Laptop
// Product at index 1: Mouse
// Product at index 2: Keyboard
```
登录后复制
```
entries()
```
登录后复制
结合数组解构赋值
```
[index, value]
```
登录后复制
简直是天作之合，让代码既简洁又清晰。如果你需要像
```
forEach
```
登录后复制
那样同时获取索引和值，但又想利用迭代器的惰性特性，或者需要一个显式的迭代器对象，那么
```
entries()
```
登录后复制
是你的不二之选。

这三个方法共同提供了对数组内容不同维度的迭代访问，覆盖了我们日常开发中绝大多数的遍历需求。

在实际项目中，何时应该优先使用

values()

登录后复制

迭代器？

在日常开发中，直接使用

for...of

登录后复制

循环遍历数组通常是最常见且推荐的做法，因为它简洁直观。然而，理解

values()

登录后复制

方法的独特之处，能帮助我们在某些特定场景下做出更明智的选择。我个人觉得，以下几种情况，

values()

登录后复制

迭代器（或其衍生的迭代器概念）会显得尤为重要或更有优势：

处理非常大的数据集或潜在无限数据流： 这是迭代器最显著的优势之一。如果你的数组非常庞大，或者你正在处理一个来自网络流、文件读取等按需生成的数据序列，使用
```
values()
```
登录后复制
获得的迭代器可以实现惰性加载。你只在需要时才从迭代器中取出下一个值，而不是一次性将所有数据加载到内存中。这对于内存优化和性能提升至关重要。虽然 JavaScript 数组本身是有限的，但当你将迭代器与其他可迭代对象（如生成器函数返回的迭代器）结合使用时，这种优势会更加明显。

需要手动控制遍历流程时： 有时候，你可能不希望简单地从头到尾遍历整个数组。你可能需要在某个条件满足时暂停遍历，或者跳过一些元素，或者在外部循环中驱动内部的遍历。在这种情况下，直接获取

values()

登录后复制

迭代器并手动调用

next()

登录后复制

方法，能给你提供更细粒度的控制。

const tasks = ['prepare data', 'process data', 'analyze results', 'generate report'];
const taskIterator = tasks.values();

let currentTask = taskIterator.next();
while (!currentTask.done && currentTask.value !== 'analyze results') {
  console.log(`Executing: ${currentTask.value}`);
  currentTask = taskIterator.next();
}
console.log(`Reached critical step: ${currentTask.value}`);
// 输出：
// Executing: prepare data
// Executing: process data
// Reached critical step: analyze results

登录后复制

这种显式的控制在构建一些复杂的流程控制逻辑时非常有用。

将数组作为通用可迭代对象传递给其他函数时： 如果你有一个函数，它被设计为接收任何可迭代对象（而不仅仅是数组），那么传递一个通过
```
values()
```
登录后复制
获取的迭代器，可以明确地表明你只关心值，并且希望函数以迭代器协议的方式来消费数据。这增加了函数的通用性和健壮性。
与其他迭代器协议或生成器函数结合使用时： 当你开始涉足更高级的迭代器模式，比如将多个迭代器链式连接，或者使用生成器函数来创建自定义迭代逻辑时，
```
values()
```
登录后复制
提供的迭代器对象就成为了一个基础构件。理解它如何工作，能帮助你更好地设计和实现复杂的迭代流程。