Array.prototype.values()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Array 实例的 values() 方法返回一个新的 数组迭代器 对象,该对象迭代数组中每个项目的值。

¥The values() method of Array instances returns a new array iterator object that iterates the value of each item in the array.

Try it

语法

¥Syntax

js
values()

参数

¥Parameters

没有任何。

¥None.

返回值

¥Return value

新的 可迭代的迭代器对象

¥A new iterable iterator object.

描述

¥Description

Array.prototype.values()Array.prototype[Symbol.iterator]() 的默认实现。

¥Array.prototype.values() is the default implementation of Array.prototype[Symbol.iterator]().

js
Array.prototype.values === Array.prototype[Symbol.iterator]; // true

当在 稀疏数组 上使用时,values() 方法会迭代空槽,就好像它们具有值 undefined 一样。

¥When used on sparse arrays, the values() method iterates empty slots as if they have the value undefined.

values() 方法是 generic。它只期望 this 值具有 length 属性和整数键控属性。

¥The values() method is generic. It only expects the this value to have a length property and integer-keyed properties.

示例

¥Examples

使用 for...of 循环进行迭代

¥Iteration using for...of loop

因为 values() 返回一个可迭代的迭代器,所以你可以使用 for...of 循环来迭代它。

¥Because values() returns an iterable iterator, you can use a for...of loop to iterate it.

js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();

for (const letter of iterator) {
  console.log(letter);
} // "a" "b" "c" "d" "e"

使用 next() 进行迭代

¥Iteration using next()

因为返回值也是一个迭代器,所以可以直接调用它的 next() 方法。

¥Because the return value is also an iterator, you can directly call its next() method.

js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
iterator.next(); // { value: "a", done: false }
iterator.next(); // { value: "b", done: false }
iterator.next(); // { value: "c", done: false }
iterator.next(); // { value: "d", done: false }
iterator.next(); // { value: "e", done: false }
iterator.next(); // { value: undefined, done: true }
console.log(iterator.next().value); // undefined

重用可迭代对象

¥Reusing the iterable

警告:数组迭代器对象应该是一次性使用的对象。请勿重复使用。

¥Warning: The array iterator object should be a one-time use object. Do not reuse it.

values() 返回的可迭代对象不可重用。当 next().done = truecurrentIndex > lengthfor...of 循环结束,进一步迭代时没有效果。

¥The iterable returned from values() is not reusable. When next().done = true or currentIndex > length, the for...of loop ends, and further iterating it has no effect.

js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
}
// "a" "b" "c" "d" "e"
for (const letter of values) {
  console.log(letter);
}
// undefined

如果使用 break 语句提前结束迭代,则迭代器在继续迭代时可以从当前位置恢复。

¥If you use a break statement to end the iteration early, the iterator can resume from the current position when continuing to iterate it.

js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
  if (letter === "b") {
    break;
  }
}
// "a" "b"

for (const letter of values) {
  console.log(letter);
}
// "c" "d" "e"

迭代期间的突变

¥Mutations during iteration

values() 返回的数组迭代器对象中没有存储任何值;相反,它存储创建时使用的数组的地址,并在每次迭代时读取当前访问的索引。因此,其迭代输出取决于步进时存储在该索引中的值。如果数组中的值发生更改,则数组迭代器对象的值也会更改。

¥There are no values stored in the array iterator object returned from values(); instead, it stores the address of the array used in its creation, and reads the currently visited index on each iteration. Therefore, its iteration output depends on the value stored in that index at the time of stepping. If the values in the array changed, the array iterator object's values change too.

js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
console.log(iterator); // Array Iterator { }
console.log(iterator.next().value); // "a"
arr[1] = "n";
console.log(iterator.next().value); // "n"

迭代法 不同,数组迭代器对象在创建时不会保存数组的长度,而是在每次迭代时读取一次。因此,如果数组在迭代过程中增长,迭代器也将访问新元素。这可能会导致无限循环。

¥Unlike iterative methods, the array iterator object does not save the array's length at the time of its creation, but reads it once on each iteration. Therefore, if the array grows during iteration, the iterator will visit the new elements too. This may lead to infinite loops.

js
const arr = [1, 2, 3];
for (const e of arr) {
  arr.push(e * 10);
}
// RangeError: invalid array length

迭代稀疏数组

¥Iterating sparse arrays

values() 将像 undefined 一样访问空槽。

¥values() will visit empty slots as if they are undefined.

js
for (const element of [, "a"].values()) {
  console.log(element);
}
// undefined
// 'a'

在非数组对象上调用 values()

¥Calling values() on non-array objects

values() 方法读取 thislength 属性,然后访问键为小于 length 的非负整数的每个属性。

¥The values() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length.

js
const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: "d", // ignored by values() since length is 3
};
for (const entry of Array.prototype.values.call(arrayLike)) {
  console.log(entry);
}
// a
// b
// c

规范

Specification
ECMAScript Language Specification
# sec-array.prototype.values

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看