JavaScript数组values方法详解

学习文章要努力，但是不要急！今天的这篇文章《JavaScript数组values方法使用教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript中数组的values()方法返回一个迭代器对象，用于遍历数组中的每个值。1. 该方法生成Array Iterator对象，可通过for...of循环或手动调用next()获取值；2. 每次调用next()返回{value: 值, done: 布尔}，done为true表示遍历结束；3. 对稀疏数组处理时，空位被视为undefined并正常迭代，与forEach跳过空洞不同；4. 高级应用场景包括构建惰性数据管道、结合展开运算符生成新数组、实现自定义迭代逻辑等。

JavaScript中，数组的values()方法提供了一种遍历元素的方式，它会返回一个新的Array Iterator对象，这个对象包含了数组中每个索引位置的值。简单来说，它给你一个可以逐个取出数组里所有“值”的工具，你可以用for...of循环来消费它，或者手动调用它的next()方法。这和直接对数组进行for...of遍历看起来很像，但本质上它先生成了一个专门用于迭代值的中间对象。

解决方案

要使用数组的values()方法来遍历元素，核心在于理解它返回的是一个迭代器。

最常见且推荐的方式是结合for...of循环：

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

// 获取一个值的迭代器
const valueIterator = myArray.values();

// 使用 for...of 遍历迭代器
for (const value of valueIterator) {
  console.log(value);
}
// 输出：
// apple
// banana
// cherry

你也可以手动控制迭代过程，通过调用迭代器的next()方法：

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

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

每次调用next()都会返回一个包含value和done属性的对象。value是当前迭代到的值，done表示迭代是否完成。当done为true时，value通常是undefined。

为什么在某些场景下，选择values()而非直接for...of或forEach？

说实话，对于大多数简单的数组遍历任务，直接用for...of循环数组本身，或者使用forEach方法，可能看起来更直观、更简洁。毕竟，直接for...of myArray本身就能拿到值，forEach也直接给你值和索引。那么values()存在的意义是什么呢？

我觉得，values()的关键在于它显式地返回了一个迭代器对象。这意味着它提供了一种更底层的、可控的迭代机制。

• 显式获取迭代器： 当你需要将一个数组的“值迭代能力”作为一个独立的对象传递给另一个函数，或者与其他迭代器进行组合操作时，values()就显得很有用。比如，你可能有一个工具函数，它专门接收一个迭代器作为参数，然后对其进行某种转换或过滤。这时候，myArray.values()就能直接满足这个接口要求。
• 暂停与恢复： 虽然for...of循环内部也是基于迭代器协议，但它是一个“一次性”的消费过程。而如果你手动获取了valueIterator，你可以调用几次next()，做一些事情，然后暂停，之后再继续调用next()从上次停下来的地方继续。这在处理流式数据或者需要精细控制迭代进度的场景下，可能会派上用场。
• 与keys()和entries()的语义一致性： 数组提供了keys()（迭代索引）、values()（迭代值）和entries()（迭代键值对）三个方法，它们都返回迭代器。这种设计保持了API的一致性，让你在需要不同类型迭代器时，有明确的获取方式。当你只关心值，且需要一个明确的迭代器对象时，values()就是最符合语义的选择。

所以，它不是要取代forEach或直接for...of，而是在特定的、对迭代器本身有需求的情况下，提供一个清晰的解决方案。

values()方法在处理稀疏数组时有何表现？

稀疏数组，简单来说，就是数组中有些索引位置没有实际值（比如你直接给arr[5] = 'hello'，但arr[0]到arr[4]是空的）。理解values()在这种情况下如何工作，对于避免一些潜在的意外行为还是挺重要的。

当我第一次接触稀疏数组时，我总觉得它们有点诡异。但实际上，values()方法对稀疏数组的处理方式，和直接对稀疏数组进行for...of遍历是完全一致的。

举个例子：

const sparseArray = ['a', , 'c']; // 索引1是空的

const sparseIterator = sparseArray.values();

console.log(sparseIterator.next()); // { value: 'a', done: false }
console.log(sparseIterator.next()); // { value: undefined, done: false }
console.log(sparseIterator.next()); // { value: 'c', done: false }
console.log(sparseIterator.next()); // { value: undefined, done: true }

你会发现，对于那些“空洞”（missing elements），values()方法会像对待一个值为undefined的元素一样处理它们，即迭代器会产生一个value: undefined的结果，并且done属性仍然是false，直到遍历完所有索引（包括空洞）之后，done才会变成true。

这和forEach的行为有所不同，forEach会跳过稀疏数组中的空洞。而for...in则会遍历所有可枚举的属性名（通常是索引），包括继承的属性，这在遍历数组时通常不推荐。

所以，如果你需要遍历包括空洞在内的所有索引位置，并获取它们对应的值（即使是undefined），那么values()（或直接for...of）是一个可靠的选择。它提供了一种“全覆盖”的遍历视图，这在某些数据处理或数据校验场景下，可能会非常有用。

values()方法在实际开发中可能有哪些高级应用场景？

我觉得，values()虽然看起来简单，但在一些稍微复杂一点的场景里，它的“迭代器”特性就能发挥作用了。

• 构建数据管道（Pipeline）： 想象一下，你有一系列操作需要对数组的每个值进行处理。你可以先用values()获取一个迭代器，然后将其传递给一个生成器函数，这个生成器函数可以对值进行转换，再将转换后的值作为新的迭代器返回。这样可以形成一个惰性求值的数据处理链，每个步骤都在需要时才执行。这比一次性将所有数据加载到内存中进行多次转换要高效得多，尤其是在处理大数据集时。

    function* mapIterator(iterator, transformFn) {
      for (const item of iterator) {
        yield transformFn(item);
      }
    }
  
    function* filterIterator(iterator, predicateFn) {
      for (const item of iterator) {
        if (predicateFn(item)) {
          yield item;
        }
      }
    }
  
    const rawData = [1, 2, 3, 4, 5, 6];
  
    const processedData = mapIterator(
      filterIterator(rawData.values(), num => num % 2 === 0),
      num => num * 10
    );
  
    for (const item of processedData) {
      console.log(item); // 20, 40, 60
    }

  这里，rawData.values()提供了一个基础迭代器，后续的filterIterator和mapIterator都是基于这个迭代器进行操作，整个过程是惰性的，只有在for...of循环真正消费时，值才会被计算。

• 与ES6的展开运算符（Spread Syntax）结合： 你可以用values()获取迭代器，然后立即用展开运算符将其转换为一个新数组。虽然直接展开原数组也可以，但当你已经有一个迭代器，或者想强调是从迭代器中取值时，这不失为一种清晰的写法。

    const originalArray = ['alpha', 'beta'];
    const newArrayFromValues = [...originalArray.values()];
    console.log(newArrayFromValues); // ['alpha', 'beta']

• 实现自定义迭代逻辑的基石： 当你在构建一些需要高度控制迭代过程的复杂数据结构或算法时，values()提供了一个标准的方式来获取数组元素的迭代器。你可以基于这个迭代器，构建更复杂的逻辑，比如限制迭代次数、在特定条件下提前终止、或者与其他类型的迭代器进行交叉操作。这有点像给你的数据流提供了一个标准的“插头”，方便你连接各种“电器”。

总的来说，values()方法在日常的简单遍历中可能不那么显眼，但它作为ES6迭代器协议的一部分，在构建可组合、惰性求值的数据处理管道，以及需要更精细控制迭代过程的场景下，展现出其独特的价值。理解它的本质是迭代器，就能更好地发掘它的潜力。

以上就是《JavaScript数组values方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！