What are the built-in iterable objects in JavaScript? A comprehensive analysis of

What are the built-in iterable objects in JS? Complete analysis requires specific code examples

In JavaScript, an iterable object refers to an object whose elements can be accessed using an iterator. After ES6, many built-in data structures implement the iterable protocol and can be traversed through a for...of loop or using an iterator object.

The following are common iterable objects in JS:

1. Array (Array):

Array is the most common iterable object. We can use a for...of loop or use an iterator object iterator to iterate over the elements in an array. The following is an example of an array object:

const arr = [1, 2, 3, 4];

// 使用for...of循环遍历
for (let item of arr) {
  console.log(item);
}

// 使用迭代器对象遍历
const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

2. String (String):

Strings are also iterable objects, and we can directly use the for...of loop Or use an iterator object to iterate over each character in the string.

const str = 'Hello World';

// 使用for...of循环遍历
for (let char of str) {
  console.log(char);
}

// 使用迭代器对象遍历
const iterator = str[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

3. Array-like object (Arguments):

The Arguments object is an array-like object that contains the parameter list passed to the function when the function is called. It is also an iterable object, so you can use a for...of loop to iterate over each parameter in it.

function sum() {
  for (let arg of arguments) {
    console.log(arg);
  }
}

sum(1, 2, 3, 4);

4. Set and Map:

Set and Map are new data structures introduced in ES6. They are also iterable objects and can be used in a for...of loop or using An iterator object traverses its elements.

const set = new Set([1, 2, 3]);

// 使用for...of循环遍历Set中的元素
for (let item of set) {
  console.log(item);
}

// 使用迭代器对象遍历Set中的元素
const iterator = set[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

const map = new Map([
  ['name', 'John'],
  ['age', 25]
]);

// 使用for...of循环遍历Map中的元素
for (let [key, value] of map) {
  console.log(key, value);
}

// 使用迭代器对象遍历Map中的元素
const iterator = map[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

5. Generator object:

Generator is a special function that can pause and resume the execution process through the yield keyword. Generator objects are also iterable objects and can be traversed using a for...of loop or using an iterator object.

function* generatorFunc() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generatorFunc();

// 使用for...of循环遍历Generator中的元素
for (let item of generator) {
  console.log(item);
}

// 使用迭代器对象遍历Generator中的元素
const iterator = generator[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value);
  result = iterator.next();
}

Summary: The above are common built-in iterable objects in JavaScript. They can all be traversed through for...of loops or using iterator objects. By understanding these iterable objects, we can make better use of the features and functionality they provide.

The above is the detailed content of What are the built-in iterable objects in JavaScript? A comprehensive analysis of. For more information, please follow other related articles on the PHP Chinese website!