Pythonizing JavaScript

Python has many powerful utility functions such as range, enumerate, zip, etc., which are built on iterable objects and the iterator protocol. Combined with generator functions, these protocols have been available in all Evergreen browsers and Node.js since around 2016, but their usage is surprisingly low, in my opinion. In this article, I’ll implement some of these helper functions using TypeScript in hopes of changing that.

Iterators, iterables and generator functions

Iterator protocol

The iterator protocol is a standard way to generate a sequence of values. For an object to be an iterator, it must adhere to the iterator protocol by implementing the next method, for example:

const iterator = {
  i: 0,
  next() {
    return { done: false, value: this.i++ };
  }
};

We can then call the next method repeatedly to get the value:

console.log(iterator.next().value); // → 0
console.log(iterator.next().value); // → 1
console.log(iterator.next().value); // → 2
console.log(iterator.next().value); // → 3
console.log(iterator.next().value); // → 4

The

next method should return an object containing a value property (containing the actual value) and a done property (specifying whether the iterator has been exhausted, i.e. whether it can no longer produce values). According to MDN, neither attribute is strictly required and if both are missing, the return value is treated as { done: false, value: undefined }.

Iterable object protocol

The Iterable Object protocol allows an object to define its own iteration behavior. To adhere to the Iterable Object protocol, an object must define a method using the Symbol.iterator key that returns an iterator. Many built-in objects such as Array, TypedArray, Set and Map implement this protocol so they can be iterated using a for...of loop.

For example, for an array, the values method is specified as the Symbol.iterator method of the array:

console.log(Array.prototype.values === Array.prototype[Symbol.iterator]); // → true

We can combine the iterator and iterable object protocols to create an iterable iterator as follows:

const iterable = {
  i: 0,
  [Symbol.iterator]() {
    const iterable = this;
    return {
      next() {
        return { done: false, value: iterable.i++ };
      }
    };
  }
};

The names of these two protocols are unfortunately very similar and still confuse me to this day.

As you might have guessed, our iterator and iterable object examples are infinite, meaning they can generate values ​​forever. This is a very powerful feature, but it can also easily become a trap. For example, if we were to use an iterable in a for...of loop, the loop would continue forever; or as a parameter to a Array.from, JS would eventually throw a RangeError because the array would become too large :

// 将无限循环：
for (const value of iterable) {
  console.log(value);
}

// 将抛出 RangeError
const arr = Array.from(iterable);

The reason iterators and iterables can even go infinite is that they are lazily evaluated, i.e. they only produce a value when used.

Generator function

While iterators and iterable objects are valuable tools, they can be a bit cumbersome to write. As an alternative, generator functions were introduced.

Generator functions are specified using function* (or function *, the asterisk can be anywhere between the function keyword and the function name), allowing us to interrupt the execution of the function and return a value using the yield keyword , and resume execution where it left off later, while maintaining its internal state:

const iterator = {
  i: 0,
  next() {
    return { done: false, value: this.i++ };
  }
};

Python Utilities

As mentioned in the introduction, Python has some very useful built-in utilities based on the above protocol. JavaScript has also recently added some helper methods for iterators, such as .drop() and .filter(), but (maybe not yet) has some of the more interesting utilities in Python.

Let’s get hands-on!

Now that the theory part is over, let’s start implementing some Python functions!

Note: None of these implementations shown here should be used as-is in production environments. They lack error handling and boundary condition checking.

enumerate(iterable [,start])

enumerate in Python returns a sequence of tuples for each item in an input sequence or iterable, where the first position contains the count and the second position contains the item:

console.log(iterator.next().value); // → 0
console.log(iterator.next().value); // → 1
console.log(iterator.next().value); // → 2
console.log(iterator.next().value); // → 3
console.log(iterator.next().value); // → 4

enumerate also accepts an optional start parameter indicating where the counter should start:

console.log(Array.prototype.values === Array.prototype[Symbol.iterator]); // → true

Let’s implement this in TypeScript using generator functions. We can use the implementation outlined in the python documentation as a guide

const iterable = {
  i: 0,
  [Symbol.iterator]() {
    const iterable = this;
    return {
      next() {
        return { done: false, value: iterable.i++ };
      }
    };
  }
};

Since strings in JavaScript implement the Iterable Object protocol, we can simply pass the string to our enumerate function and call it like this:

// 将无限循环：
for (const value of iterable) {
  console.log(value);
}

// 将抛出 RangeError
const arr = Array.from(iterable);

repeat(elem [,n])

repeat is part of the built-in itertools library, which repeats the given input elem n times, or infinitely if n is not specified. Once again we can use the implementation in the python documentation as a starting point.

function* sequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const seq = sequence();
console.log(seq.next().value); // → 0;
console.log(seq.next().value); // → 1;
console.log(seq.next().value); // → 2;

// 将无限循环，从 3 开始
for (const value of seq) {
  console.log(value);
}

(The implementation of the cycle and range functions is omitted here because it is too long, but the logic is the same as the original text, just the code is rewritten in TypeScript)

Conclusion

This is my first blog post, I hope you find it interesting and maybe you will use iterators, iterables, and generators in future projects. If you have any questions or need clarification please leave a comment and I'll be happy to provide more information.

One thing to note is that the performance is nowhere near the original for loop using a counter. This may not matter in many cases, but it definitely matters in high-performance scenarios. It bothers me to find that frames are being lost when I draw PCM data to a canvas and use iterators and generators. This may be obvious in hindsight, but it wasn't to me at the time :D

Cheers!

The above is the detailed content of Pythonizing JavaScript. For more information, please follow other related articles on the PHP Chinese website!