JavaScript values() 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 values 方法在 JavaScript 集合中迭代 values。该方法适用于 Array、Map 和 Set。

values() 方法

values 方法返回一个新的迭代器对象，其中包含集合中每个元素的 values。它适用于 JavaScript 中的 Array、Map 和 Set 对象。

此方法提供了一种按顺序访问集合中所有 values 的方法。返回的迭代器遵循迭代协议，允许与 for...of 循环和其他迭代上下文一起使用。

对于 Array，values 等同于数组本身，因为数组元素是 values。对于 Map，它返回存储的 values（而不是键）。对于 Set，它返回 set 元素，因为 Set 只存储 values。

基本 Array values() 示例

以下示例演示了 values 与数组的基本用法。

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

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

我们创建一个数组并获取其 values 迭代器。然后，我们使用 for...of 循环遍历 values。迭代器按顺序提供每个数组元素。

$ node main.js
apple
banana
cherry

在 Map 上使用 values()

values 方法在 Map 对象中特别有用。

const capitals = new Map();
capitals.set('France', 'Paris');
capitals.set('Germany', 'Berlin');
capitals.set('Italy', 'Rome');

const cityIterator = capitals.values();

for (const city of cityIterator) {
    console.log(city);
}

我们创建一个国家-首都对的 Map，并使用 values 来获取仅首都城市的迭代器。迭代器允许我们访问每个 value，而无需处理键。

$ node main.js
Paris
Berlin
Rome

在 Set 上使用 values()

values 方法与 Set 对象的使用方式类似。

const uniqueNumbers = new Set([10, 20, 30, 20, 10]);
const valueIterator = uniqueNumbers.values();

console.log([...valueIterator]); // Convert iterator to array

我们创建一个 Set（它会自动删除重复项）并获取其 values 迭代器。我们使用扩展运算符将迭代器转换为数组，以演示所有唯一 values。

$ node main.js
[ 10, 20, 30 ]

使用 next() 进行手动迭代

我们可以使用 next 方法手动遍历迭代器。

const colors = ['red', 'green', 'blue'];
const colorIterator = colors.values();

console.log(colorIterator.next().value);
console.log(colorIterator.next().value);
console.log(colorIterator.next().value);
console.log(colorIterator.next().done);

我们手动调用迭代器上的 next 以获取每个 value。当没有更多可用 values 时，done 属性变为 true。这演示了迭代器在内部如何工作。

$ node main.js
red
green
blue
true

将 values() 与其他方法结合使用

values 方法可以与其他迭代器方法结合使用。

const scores = new Map([
    ['Alice', 95],
    ['Bob', 88],
    ['Charlie', 92]
]);

const topScores = [...scores.values()].filter(score => score > 90);
console.log(topScores);

我们从 Map 中获取所有 values，将它们转换为数组，然后过滤掉分数高于 90 的元素。这表明 values 可以成为处理管道的一部分。

$ node main.js
[ 95, 92 ]

来源

Array values() - MDN 参考

在本文中，我们演示了如何使用 values 方法处理不同的 JavaScript 集合。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。自 2007 年以来，我一直在撰写编程文章。迄今为止，我撰写了超过 1,400 篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出 所有 JS 数组函数。