CODEWITHSUNDEEP
javascriptarraysiteratorreverseecmascript-6
Xotic750
Xotic750

Reputation: 23492

ES6 reverse iterate an array using for..of, have I missed something in the spec?

In ES6 we now have iterators and for..of to iterate them. we have some built-ins for arrays; notably keys, values and entries.

These methods allow one to perform much of the iteration one would commonly perform. But, what about iteration in reverse? This is also a very common task and I don't see anything in the spec specifically for it? Or maybe I missed it?

Ok, we have Array.prototype.reverse but I don't necessarily want to reverse a large array in place and then reverse it again when finished. I also don't want to use Array.prototype.slice to make a temporary shallow copy and reverse that just for iteration.

So I took a look a generators and came up with these working solutions.

(function() {
  'use strict';

  function* reverseKeys(arr) {
    let key = arr.length - 1;

    while (key >= 0) {
      yield key;
      key -= 1;
    }
  }

  function* reverseValues(arr) {
    for (let key of reverseKeys(arr)) {
      yield arr[key];
    }
  }

  function* reverseEntries(arr) {
    for (let key of reverseKeys(arr)) {
      yield [key, arr[key]];
    }
  }

  var pre = document.getElementById('out');

  function log(result) {
    pre.appendChild(document.createTextNode(result + '\n'));
  }

  var a = ['a', 'b', 'c'];

  for (var x of reverseKeys(a)) {
    log(x);
  }

  log('');
  for (var x of reverseValues(a)) {
    log(x);
  }

  log('');
  for (var x of reverseEntries(a)) {
    log(x);
  }
}());
<pre id="out"></pre>

Is this really the way that reverse iteration is intended in ES6 or have I missed something fundamental in the spec?

Upvotes: 15

Views: 8302

Answers (3)

trincot
trincot

Reputation: 350841

If your input is an array, then what you implemented is a good approach: at the core you have a for loop with a decreasing index variable. It only consumes O(1) auxiliary space to achieve the goal.

As an alternative you could also use one of the methods introduced by ECMAScript 2023 that iterate the array in reverse, such as findLast, and use the callback to access each element and ensure that this callback never returns a truthy value:

const arr = [1, 2, 3, 4];
arr.findLast(x => console.log(x)); // 4 3 2 1

This is not really an iterator, but it does allow a reverse traversal over an array in a functional way.

Upvotes: 0

dimadeveatii
dimadeveatii

Reputation: 85

Have a look at https://www.npmjs.com/package/itiriri.
It's a library that has similar methods as arrays, but works with iterators.

import { query } from 'itiriri';

const m = new Map();
m.set(1, 'a');
m.set(2, 'b');
m.set(3, 'c');

const result = query(m);

for (const [k, v] of result.reverse()) {
  console.log(k + ' - ' + v)
}

query returns an iterable that has similar methods as arrays. In above example reverse() is used. There are also fitler, slice, map, concat etc.

If you need back an array, or a map from a query you can use one of .toArray(), .toMap() or .toSet() methods.

Upvotes: 3

Xotic750
Xotic750

Reputation: 23492

Is this really the way that reverse iteration is intended in ES6?

There was a proposal for reverse iteration, discussed on esdicuss and a git project outlining a spec, but nothing much seemed to happen with respect to it. ES6 is finalised now, so it's not something that is going to be added this time around. Anyway, for arrays and strings I've written a little code to fill in the gaps (in my opinion) and I will post it here as it may help others. This code is based on my browsers today and some improvements could possibly be made if there was more of ES6 implemented on them. I may get around to a gist or a small github project later.

Update: I have created a GitHub project for work on this.

Upvotes: 8

Related Questions