0

0

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

煙雲

煙雲

发布时间:2025-08-25 13:07:01

|

1023人浏览过

|

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

Magic AI Avatars
Magic AI Avatars

神奇的AI头像,获得200多个由AI制作的自定义头像。

下载

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

forEach
,它会尝试一次性处理所有数据,这可能会导致内存溢出。但如果你使用
values()
获得的迭代器,你可以按需取用数据,每次只处理当前需要的,从而大大降低内存压力。

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

Map
Set
、字符串以及自定义的可迭代对象(通过实现
Symbol.iterator
)都可以通过
for...of
循环来遍历,而这一切都离不开迭代器协议的支撑。这种统一性让代码更具通用性和可读性。

除了
values()
,JavaScript 还有哪些方法可以获取数组的迭代器?

是的,除了

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

  1. 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()
    在你需要手动构建基于索引的逻辑,或者与一些需要索引作为参数的函数配合时,显得特别有用。

  2. 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()
迭代器(或其衍生的迭代器概念)会显得尤为重要或更有优势:

  1. 处理非常大的数据集或潜在无限数据流: 这是迭代器最显著的优势之一。如果你的数组非常庞大,或者你正在处理一个来自网络流、文件读取等按需生成的数据序列,使用

    values()
    获得的迭代器可以实现惰性加载。你只在需要时才从迭代器中取出下一个值,而不是一次性将所有数据加载到内存中。这对于内存优化和性能提升至关重要。虽然 JavaScript 数组本身是有限的,但当你将迭代器与其他可迭代对象(如生成器函数返回的迭代器)结合使用时,这种优势会更加明显。

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

    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

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

  3. 将数组作为通用可迭代对象传递给其他函数时: 如果你有一个函数,它被设计为接收任何可迭代对象(而不仅仅是数组),那么传递一个通过

    values()
    获取的迭代器,可以明确地表明你只关心值,并且希望函数以迭代器协议的方式来消费数据。这增加了函数的通用性和健壮性。

  4. 与其他迭代器协议或生成器函数结合使用时: 当你开始涉足更高级的迭代器模式,比如将多个迭代器链式连接,或者使用生成器函数来创建自定义迭代逻辑时,

    values()
    提供的迭代器对象就成为了一个基础构件。理解它如何工作,能帮助你更好地设计和实现复杂的迭代流程。

总而言之,虽然

for...of
循环在大多数情况下已经足够,但
values()
方法的存在,让我们能够更深入地理解和利用 JavaScript 的迭代器协议,并在需要精细控制、优化内存或构建通用迭代逻辑时,提供了一个强大的工具

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

223

2025.12.24

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

97

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

361

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1503

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

625

2023.11.24

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

Pandas 教程
Pandas 教程

共15课时 | 1万人学习

ASP 教程
ASP 教程

共34课时 | 4.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号