JS - Generators vol. 4

Jednym z zastosowań generatorów są wszelkiej maści wizualizacje, pokazujące jak dana funkcja działa (np. jakiś algorytm sortowania). Zobaczmy na przykładzie map!

Napisany wcześniej polyfill:

Array.prototype.myMap = function(callbackFn, thisArg) {

    var context = thisArg || globalThis;

    var arr = [];              
    for (var i = 0; i < this.length; i++) { 
      arr.push(callbackFn.call(context, this[i], i, this));
    }
    return arr;
  }

Przerabiamy na generator:

Array.prototype.myMap = function*(callbackFn, thisArg) {

    var context = thisArg || globalThis;

    var arr = [];              
    for (var i = 0; i < this.length; i++) { 
      arr.push(callbackFn.call(context, this[i], i, this));
      yield arr.toString();
    }
    //yield arr;
  }

Trochę kombinowania jest z wizualizacją, ale koniec końców to jest patent:

while(true){
    gen = visualize.next();
    if(gen.done === true)
        break;
    console.log(gen.value);
}

//2
//2,4
//2,4,6
//2,4,6,8

Ok, możemy podejść do tego w ten sposób:

Array.prototype.myMap = function*(callbackFn, thisArg) {

    var context = thisArg || globalThis;

    var arr = [];              
    for (var i = 0; i < this.length; i++) { 
      arr.push(callbackFn.call(context, this[i], i, this));
      yield arr.toString();
    }
    return arr;
  }

let arr = [1,2,3,4];
let visualize = arr.myMap((el) => el * 2);

function visualizeFromGenerator(visualize){
    let gen;
    while(true){
        gen = visualize.next();
        if(gen.done === true)
            break;
        console.log(gen.value);
    }
    return gen.value;

}

//2
//2,4
//2,4,6
//2,4,6,8

let finalArr = visualizeFromGenerator(visualize);
console.log(finalArr);
//Array[2,4,6,8]

Jeszcze jedno małe usprawnienie:

Array.prototype.myMap = function*(callbackFn, thisArg) {

    var context = thisArg || globalThis;

    var arr = [];              
    for (var i = 0; i < this.length; i++) { 
      arr.push(callbackFn.call(context, this[i], i, this));
      let arrToShow = [...arr.slice(0, i+1), ...this.slice(i+1)];
      yield arrToShow.toString();
    }
    return arr;
  }

let arr = [1,2,3,4];
let visualize = arr.myMap((el) => el * 2);

function visualizeFromGenerator(visualize){
    let gen;
    while(true){
        gen = visualize.next();
        if(gen.done === true)
            break;
        console.log(gen.value);
    }
    return gen.value;

}

//2,2,3,4 
//2,4,3,4 
//2,4,6,4 
//2,4,6,8

let finalArr = visualizeFromGenerator(visualize);
console.log(finalArr);
//Array[2,4,6,8]

Mając już tę wiedzę możemy robić naprawdę konkretne wizualizacje różnych algorytmów.

JS – Generators vol. 4