Array.prototype[Symbol.iterator]()

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 实例的 [Symbol.iterator]() 方法实现了 可迭代协议,并允许大多数需要迭代的语法使用数组,例如 扩展语法for...of 循环。它返回一个 数组迭代器对象,它产生数组中每个索引的值。

¥The [Symbol.iterator]() method of Array instances implements the iterable protocol and allows arrays to be consumed by most syntaxes expecting iterables, such as the spread syntax and for...of loops. It returns an array iterator object that yields the value of each index in the array.

该属性的初始值与 Array.prototype.values 属性的初始值是相同的函数对象。

¥The initial value of this property is the same function object as the initial value of the Array.prototype.values property.

Try it

语法

¥Syntax

js
array[Symbol.iterator]()

参数

¥Parameters

没有任何。

¥None.

返回值

¥Return value

Array.prototype.values() 返回值相同:一个新的 可迭代的迭代器对象,它生成数组中每个索引的值。

¥The same return value as Array.prototype.values(): a new iterable iterator object that yields the value of each index in the array.

示例

¥Examples

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

¥Iteration using for...of loop

请注意,你很少需要直接调用此方法。[Symbol.iterator]() 方法的存在使得数组 iterable,像 for...of 循环这样的迭代语法会自动调用该方法来获取要循环的迭代器。

¥Note that you seldom need to call this method directly. The existence of the [Symbol.iterator]() method makes arrays iterable, and iterating syntaxes like the for...of loop automatically call this method to obtain the iterator to loop over.

HTML

html
<ul id="letterResult"></ul>

JavaScript

js
const arr = ["a", "b", "c"];
const letterResult = document.getElementById("letterResult");
for (const letter of arr) {
  const li = document.createElement("li");
  li.textContent = letter;
  letterResult.appendChild(li);
}

结果

¥Result

手动滚动迭代器

¥Manually hand-rolling the iterator

你仍然可以手动调用返回的迭代器对象的 next() 方法,以实现对迭代过程的最大控制。

¥You may still manually call the next() method of the returned iterator object to achieve maximum control over the iteration process.

js
const arr = ["a", "b", "c", "d", "e"];
const arrIter = arr[Symbol.iterator]();
console.log(arrIter.next().value); // a
console.log(arrIter.next().value); // b
console.log(arrIter.next().value); // c
console.log(arrIter.next().value); // d
console.log(arrIter.next().value); // e

使用相同的函数处理字符串和字符串数组

¥Handling strings and string arrays with the same function

因为 strings 和数组都实现了可迭代协议,所以可以设计一个通用函数来以相同的方式处理两个输入。这比直接调用 Array.prototype.values() 要好,后者要求输入是一个数组,或者至少是一个具有这种方法的对象。

¥Because both strings and arrays implement the iterable protocol, a generic function can be designed to handle both inputs in the same fashion. This is better than calling Array.prototype.values() directly, which requires the input to be an array, or at least an object with such a method.

js
function logIterable(it) {
  if (typeof it[Symbol.iterator] !== "function") {
    console.log(it, "is not iterable.");
    return;
  }
  for (const letter of it) {
    console.log(letter);
  }
}

// Array
logIterable(["a", "b", "c"]);
// a
// b
// c

// String
logIterable("abc");
// a
// b
// c

// Number
logIterable(123);
// 123 is not iterable.

规范

Specification
ECMAScript Language Specification
# sec-array.prototype-@@iterator

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看