Share advanced usage and techniques of built-in iterable objects in JS

Sharing of advanced usage and techniques of built-in JS iterable objects

Introduction:
In JavaScript, iterable objects refer to objects that can be traversed through iterators object. They are a special class of objects that provide a unified way to access their elements. There are many iterable objects built into JavaScript, such as arrays, strings, Sets, Maps, etc. This article will share some advanced usage and techniques to help you make better use of iterable objects.

1. Use for...of loop to traverse the elements of iterable objects
Using for...of loop is the most concise and intuitive way to traverse iterable objects. For example:

const arr = [1, 2, 3];
for (const elem of arr) {
  console.log(elem);
}
// 输出结果：1 2 3

For other iterable objects, such as strings, Sets, and Maps, you can also traverse in the same way. The for...of loop automatically calls the object's iterator to obtain elements in sequence.

2. Custom iterable objects
In addition to the built-in iterable objects, we can also customize iterable objects. Just implement the object's Symbol.iterator method and return an iterator object.

const customIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const elem of customIterable) {
  console.log(elem);
}
// 输出结果：1 2 3 4 5

By customizing iterable objects, we can define the traversal method according to our own needs to meet specific business logic.

3. Convert iterable objects into arrays
Sometimes we need to convert iterable objects into arrays in order to perform array-related operations or operations.

const str = "Hello";
const arr = Array.from(str);
console.log(arr);
// 输出结果：['H', 'e', 'l', 'l', 'o']

Through the Array.from method, we can split the string into an array by characters. This method can be used to process iterable objects such as Strings, Sets, and Maps.

4. Use destructuring assignment to extract elements of iterable objects
We can extract elements in iterable objects through destructuring assignment.

const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

for (const [key, value] of map) {
  console.log(key, value);
}
// 输出结果：key1 value1
//          key2 value2

Through destructuring assignment, we can extract the keys and values ​​​​in the Map at once and use them in the form of variables.

5. Use the spread operator to expand iterable objects
The spread operator (...) can be used to expand iterable objects into independent elements.

const set = new Set([1, 2, 3]);
const arr = [...set];
console.log(arr);
// 输出结果：[1, 2, 3]

Using the spread operator, we can expand the elements in the Set object into an array. This is useful for converting an iterable object to an array before you need to do some specific operation on it.

Conclusion:
This article shares the advanced usage and techniques of JS built-in iterable objects, including using for...of loop traversal, custom iterable objects, converting iterable objects into arrays, and using Destructuring assignment extracts elements and expands iterable objects using the spread operator. These techniques can help us make better use of iterable objects and improve the simplicity and efficiency of the code. Hope this helps!

The above is the detailed content of Share advanced usage and techniques of built-in iterable objects in JS. For more information, please follow other related articles on the PHP Chinese website!