[js] iterator in JS (was: Static vars in javascript)

[T-MOB]

In PHP maak ik nog wel eens een collectie-klasse die om bepaalde data ergens vandaan te vissen. Die klasse bevat dan een array met alle objecten / arrays waar de klasse een collectie van is. Om ze eruit te vissen gebruik ik een functie a la de volgende:

PHP:

function fetchFoo() {
    static $i = 0;
    if (isset($this->foos[$i])) {
        return $this->foos[$i++];
    }
    return ($i = 0);
}

Hiermee kun je in de weergave van de data heel makkelijk door je collectie heenwandelen door een while($foo = $coll->fetchFoo()) loopje te gebruiken.

Nu zou ik graag in javascript hetzelfde voor elkaar krijgen. Waar ik tegenaan loop is dat javascript geen static variabelen kent. Om dezelfde constructie te kunnen gebruiken "moet" ik een property ge-/misbruiken:

JavaScript:

coll.prototype.fetchFoo = function {
    if (this.foos.length > this.i) {
        return this.foos[this.i++];
    }
    return (this.i = 0);
}

Die oplossing vind ik niet zo mooi omdat a) de klasse verder weinig van doen heeft met de iterator, en b) het nogal een zooitje wordt als je meerdere itererende functies krijgt. Moet je dan maar this.j tot en met this.p gaan aanmaken?
De vraag is dus of iemand hier een charmantere oplossing voor heeft.

[crisp]

Opslaan als property van het function-object zelf?

JavaScript:

function foo()
{
    var stat = arguments.callee;
    if (stat.i === undefined) stat.i = 0;
    alert(stat.i);
    stat.i++;
}
foo(); // 0
foo(); // 1

hmmz, niet helemaal wat je bedoelt denk ik. Echter moet je bedenken dat alles in javascript een property is (behalve primitives), dus van misbruik is geen sprake

[ Voor 28% gewijzigd door crisp op 13-05-2006 01:45 ]

[T-MOB]

crisp schreef op zaterdag 13 mei 2006 @ 01:41:
Opslaan als property van het function-object zelf?
[code=js]

hmmz, niet helemaal wat je bedoelt denk ik. Echter moet je bedenken dat alles in javascript een property is (behalve primitives), dus van misbruik is geen sprake

Als ik het goed begrijp maak je nu vanuit de functie zelf een property aan in de instantie van de klasse waarin ie aangeroepen wordt. Dat is iig niet helemaal wat ik bedoel omdat je dan een probleem houdt qua scope. Zou je 2 functies hebben die het op die manier aanpakken dan loop je het risico dat ze elkaars iterator bewerken.
Qua misbruik bedoel ik dat de property i in dit geval specifiek bij de functie hoort en niet zozeer bij de klasse. Met een static variabele blijft ie in PHP alleen bestaan in de scope van de functie, en zo zou ik het ook graag zien in JS. Een closure zou het probleem ook wel oplossen, maar ik heb het idee dat dat nog lomper is dan een property bijhouden in het object.

JavaScript:

function coll() {
    this.foos = new Array();
    
    this.fetchFoo = createFetchFoo(this);
}

function createFetchFoo(obj) {
    i = 0;
    self = obj;
    return function() {
        if (self.foos.length > i) {
            return self.foos[i++];
        }
        return (i = 0);
    }
}

edit.
Hmm, duh. bedenk me net dat bovenstaande al de helft van de oplossing is. Op die manier kun je immers een generieke functie maken om itererende functies te creeren:

JavaScript:

function createIterator(obj, prop) {
    i = 0;
    return function() {
        if (obj[prop].length > i) {
            return obj[prop][i++];
        }
        return (i = 0);
    }
}

... zou het wel ongeveer moeten doen, morgen maar even testen.

[ Voor 17% gewijzigd door T-MOB op 13-05-2006 02:25 ]

[crisp]

Inderdaad, dit lijkt me wel een mooie:

JavaScript:

function Coll()
{
  this.foos = ['aap','noot','mies'];
  this.iterator = new Iterator(this.foos);
}
function Iterator(obj)
{
  this.i = 0;
  this.foos = obj;
}
Iterator.prototype = 
{
    getNext: function()
    {
        if (this.foos.length > this.i)
            return this.foos[this.i++];
        else
            return (this.i = 0);
    }
}

var bla = new Coll;
alert(bla.iterator.getNext());

Zo kan je ook makkelijk getPrevious, reset en dergelijke methods implementeren

[T-MOB]

crisp schreef op zaterdag 13 mei 2006 @ 10:21:
Inderdaad, dit lijkt me wel een mooie:

JavaScript:

...

Zo kan je ook makkelijk getPrevious, reset en dergelijke methods implementeren

Dat ziet er erg handig uit ja, bedankt voor de tip . Is er nog een verschil (in werking) tussen:

JavaScript:

Iterator.prototype = 
{
    getNext: function() {}
}

en

JavaScript:

Iterator.prototype.getNext = function () {}

[crisp]

T-MOB schreef op zaterdag 13 mei 2006 @ 10:46:
[...]

Dat ziet er erg handig uit ja, bedankt voor de tip . Is er nog een verschil (in werking) tussen:
[...]

Nee, da's puur notatie. Bij eigen objecten waarvan je weet dat ze standaard geen prototyped methods hebben is de object notitie wel overzichtelijk:

JavaScript:

Iterator.prototype =
{
    getNext: function() { },
    getPrevious: function() { },
    reset: function() { }
}

[T-MOB]

De topictitel loopt nu een beetje mank met het topic... Maargoed voor de liefhebber de volledige iterator klasse. Hij lijkt redelijk op de PHP implementatie van prev(), next() etc, op de each() functie na.

JavaScript:

function iterator(aInput) {
    
    this.i = 0;
    this.arr = aInput;
}

iterator.prototype = {
    next    :    function() {
                    if (this.arr.length > ++this.i) {
                        return this.arr[this.i];
                    }
                    return (this.i = 0);
                 },
    
    prev    :    function() {
                    if (--this.i >= 0 && this.arr.length > this.i) {
                        return this.arr[this.i];
                    }
                    return (this.i = 0);
                 },
                
    each    :    function() {
                    if (this.arr.length > this.i) {
                        return this.arr[this.i++];
                    }
                    return (this.i = 0);
                 },
    
    current :    function() {
                    return this.arr[this.i];
                 },
    
    reset   :    function() {
                    this.i = 0;
                    return (this.arr.length > this.i) ? this.arr[this.i] : false;
                 },

    end     :    function () {
                    this.i = this.arr.length - 1;
                    return (i >= 0) ? this.arr[this.i] : false;
                 },
                
    key     :    function () {
                    return this.i;
                 }
}

Met nogmaals dank aan Crisp

[crisp]

I like

titlefix

[ Voor 43% gewijzigd door crisp op 13-05-2006 13:13 ]

[crisp]

Uiteraard kan je ook gewoon het Array object prototypen:

JavaScript:

Array.prototype.__key = 0;
Array.prototype.each = function()
{
    if (this.__key < this.length)
        return this[this.__key++];
    return (this.__key = 0);
}

[T-MOB]

crisp schreef op zaterdag 13 mei 2006 @ 21:04:
Uiteraard kan je ook gewoon het Array object prototypen:
[...]

Hoe brilliant is dat! * T-MOB blijft zich verbazen over de grenzeloze mogelijkheden van javascript

[Verwijderd]

Even IEnumerable en IEnumerator implementeren

[user109731]

Wat vinden jullie van zoiets?

JavaScript:

Array.prototype.__key = 0;
Array.prototype.getKey = function(item) {
    if ((this.__key < this.length) && (this.__key >= 0))
        return this[this.__key];
    return (this.__key = 0);
}
Array.prototype.next = function() { return this.getKey(this.__key++); }
Array.prototype.prev = function() { return this.getKey(this.__key--); }
Array.prototype.last = function() { return this.getKey(this.__key = this.length - 1); }
Array.prototype.first = function() { return this.getKey(this.__key = 0); }  

Weet niet zeker of het helemaal 100% werkt, maar you get the point

[ Voor 16% gewijzigd door user109731 op 13-05-2006 23:51 . Reden: tabs weggehaald ]

[crisp]

I'm not too sure of je dat eigenlijk wel dmv prototyping van het Array object zou moeten doen, mijn voorbeeld was meer bedoelt om te laten zien dat het *kan*

[T-MOB]

crisp schreef op zondag 14 mei 2006 @ 00:26:
I'm not too sure of je dat eigenlijk wel dmv prototyping van het Array object zou moeten doen, mijn voorbeeld was meer bedoelt om te laten zien dat het *kan*

Wat is er dan op tegen om de methoden aan het array object toe te voegen? Het werkt een behoorlijk stuk handiger dan telkens weer for (i=0;i<array.length;i++)-loopjes te schrijven.

[crisp]

T-MOB schreef op zondag 14 mei 2006 @ 01:53:
[...]

Wat is er dan op tegen om de methoden aan het array object toe te voegen? Het werkt een behoorlijk stuk handiger dan telkens weer for (i=0;i<array.length;i++)-loopjes te schrijven.

Ik bedoel tov een 'Iterator' of 'Iterable' object, dus:

JavaScript:

var arr = [1,2,3];
var cur;
while ((cur = arr.each()) !== false) { alert(cur); }

tov

JavaScript:

var arr = [1,2,3];
var cur;
var iter_arr = new Iterator(arr);
while ((cur = iter_arr.each()) !== false) { alert(cur); }

[Verwijderd]

Leuke stof! Nog even als sidenote: in JavaScript 1.5 zijn er verschillende native iteration methods voor Arrays, waaronder een forEach():
http://developer.mozilla....s:Array#Iteration_methods

JavaScript:

function printElt(element, index, array) {
    print("[" + index + "] is " + element);
}
[2, 5, 9].forEach(printElt);
// Prints:
// [0] is 2
// [1] is 5
// [2] is 9

Al werkt dat natuurlijk heel anders dan jullie Iterators.

[ Voor 4% gewijzigd door Verwijderd op 14-05-2006 10:43 ]

[crisp]

forEach is javascript 1.6

Het prettige van dergelijke native methods is natuurlijk de performance, voor de rest zijn dit soort toevoegingen natuurlijk redelijk eenvoudig te prototypen - hetgeen uiteraard ook noodzakelijk is voor een niet nader te benoemen browser die javascript 1.3 nog niet eens volledig en correct geimplementeerd heeft

[T-MOB]

crisp schreef op zondag 14 mei 2006 @ 10:23:
[...]
Ik bedoel tov een 'Iterator' of 'Iterable' object, dus:

Mja, ok. Maar de vraag was eigenlijk meer waarom je het Array object niet zou prototypen. Het enige wat ik daar zelf aan probleem bij zou kunnen bedenken is dat het verwarring zou zaaien als in een toekomstige versie van JS de methoden native zoudne worden geimplementeerd. Maar goed, je kunt ook nog een afgeleid Iterator object maken:

JavaScript:

Iterable.prototype = Array.prototype;  
function Iterable () {
        
    for (var i=0; i<arguments.length; i++) {
        this.push(arguments[i]);
    }

 
    this.__i = 0;
    
    this.next = function() {
        if (this.length > ++this.__i) {
            return this[this.__i];
        }
        return (this.__i = 0);
    }
        this.prev {...}, etc;
}

[crisp]

T-MOB schreef op zondag 14 mei 2006 @ 13:47:
[...]

Mja, ok. Maar de vraag was eigenlijk meer waarom je het Array object niet zou prototypen.

Mwa, sommige mensen beschouwen het prototypen van primitive objects als harmfull. Daar is iets voor te zeggen want ik zie het vaak voorkomen dat mensen for (var a in b) constructs gebruiken zonder te checken of a een prototyped method is (dezelfde mensen die zeggen dat het ev0l is checken daar ook niet op overigens *kuch* Dean Edwards *kuch*)

imo zijn er echter wel degelijk situaties waar je een primitive zou willen prototypen, een toSource() implementatie of elke andere vorm van serialisatie bijvoorbeeld.

[ Voor 18% gewijzigd door crisp op 14-05-2006 23:30 ]

[Verwijderd]

Hoi, ik ben wat aan het stoeien met objecten in zowel php5 als javascript.
Nu lukt me dit in php5 prima en in javascript wil ik het ook voor elkaar krijgen.

Al stoeiende kwam ik in dit (oude) topic terecht en ...
Nou het lukt wel en het lukt niet.

Als ik de code van Crips op zichzelfstaand probeer, gaat het prima.
Echter, ik gebruik mootools en wil de classes van mootools gebruiken.
Nu wil ik de iterator binnen een class gebruiken.
Echter, ik krijg de melding dat de function getNext() niet bestaat.
Heeft iemand enig idee, hoe ik dit werkend krijg.
De enige oplossing die me zo te binnen schiet, is om de iterator functie / prototyped function binnen de class te zetten, maar eigenlijk wil ik dit niet: iterators moeten door verschillende classes hergebruikt kunnen worden.

Dit is mijn code en ik hoop dat iemand mij hiermee kan helpen:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Presentatie</title>
<script type="text/javascript" encoding="utf-8" src="/presentatie/js/mootools.js"></script>
<script type="text/javascript">
var presentation = new Class({
    initialize:             function(){},
    slides:                 new Array(),
    iterator:               new Iterator(this.slides),
    current_slide:          new Object(),
    previous_slide:         new Object(),
    next_slide:             new Object(),
    findSlide:              function(){},
    findSlideById:          function(){},
    findSlideByFunction:    function(){},
    showSlide:              function(){},
    showPreviousSlide:      function(){},
    showNextSlide:          function(){}
});
var slide = new Class({
    initialize:             function(id){
                                this.id = id;
                            },
    id:                     null
});

var pr = new presentation();
pr.slides.push(new slide('item 1'));
pr.slides.push(new slide('item 2'));
pr.slides.push(new slide('item 3'));
pr.slides.push(new slide('item 4'));
pr.slides.push(new slide('item 5'));

/* test */
function Iterator(array)
{
    this.key = 0;
    this.obj = array;
}
Iterator.prototype = 
{
    getNext: function()
    {
        if (this.obj.length > this.key)
            return this.obj[this.key++];
        else
            return (this.key = 0);
    }
}
//var test = new Iterator(['henk','jan','pieter']);
//alert(test.getNext());
alert(pr.iterator.getNext());
</script>
</head>

<body>
</body>
</html>

De foutmelding treedt dus op, op regel 54

[crisp]

binnen een object-constructor verwijst 'this' natuurlijk niet naar het object dat je aan het aanmaken bent

[Verwijderd]

Chips ... dom ... maar natuurlijk ... het was al laat. Heb het nu opgelost door simpelweg een iterator class aan te maken werkt net zo goed eigenlijk en is eveneens natuurlijk herbruikbaar.

Moet trouwens:

JavaScript:

    getNext:                function(){
                                return (this.__object.length > this.__key) ?
                                     this.__object[this.__key++]:
                                     (this.__key = 0);
                            },

niet zijn:

JavaScript:

    getNext:                function(){
                                return (this.__object.length > this.__key) ?
                                     this.__object[this.__key++]:
                                     (this.__key == 0);
                            },

Anders kom je in een oneindige loop terecht met
while ((cur = pr.iterator.getNext()) !== false) { alert(cur); }

[ Voor 59% gewijzigd door Verwijderd op 15-05-2007 08:31 ]

[Clay]

Mwa, sommige mensen beschouwen het prototypen van primitive objects als harmfull.

Ging dat niet meer over het prototypen van dingen aan Object? dan heb je immers pas het for(var i in obj) probleem ... tenzij je dat natuurlijk ook op een array zou willen loslaten, aangezien het wel kan.

Op zich ben ik er ook niet echt een voorstander van, alle instanties van dat object worden van de extra functionaliteit voorzien, of ze het nou nodig hebben of niet (bij Object nog veel erger dan b.v. Function of Array), wat een enorme berg overhead oplevert. Daarbij is het natuurlijk ook zo obscuur als wat om allemaal "handige functies" aan primitives te koppelen. Op een gegeven moment zie je door de bomen het bos niet meer, aangezien er meestal toch niets gedocumenteerd wordt

Dan nog zou ik zelf iig best die 1.6 forEach willen prototypen aan Array als die er niet is:

JavaScript:

if(!Array.prototype.forEach) {
    Array.prototype.forEach = function(handler, scope) {
        var l = this.length;
        for(var i=0; i<l; i++) {
            handler.call(scope || window, this[i], i, this);
        }
    }
}

Net als vroegah met push en splice etc. En dan wil ik weer wat om een nodelist te casten naar array en dan... en dan...

[edit]
_{ja nu zie ik ook die compatibility snippets, maar die .call is dus echt niet nodig toch wel nodig voor de optionele scope}

[ Voor 8% gewijzigd door Clay op 16-05-2007 10:38 ]

[crisp]

Clay schreef op woensdag 16 mei 2007 @ 09:47:
[...]
En dan wil ik weer wat om een nodelist te casten naar array

JavaScript:

var array = [].slice.call(nodelist, 0);

[Clay]

crisp schreef op woensdag 16 mei 2007 @ 10:13:
[...]

JavaScript:

var array = [].slice.call(nodelist, 0);

Ik vind het een geniaaaaaal regeltje maar helaas errort die wel in IE

[Verwijderd]

Clay schreef op woensdag 16 mei 2007 @ 09:47:
Ging dat niet meer over het prototypen van dingen aan Object? dan heb je immers pas het for(var i in obj) probleem ... tenzij je dat natuurlijk ook op een array zou willen loslaten, aangezien het wel kan.

Volgens mij ging het erom dat het prototypen van Array harmful zou zijn omdat je dan niet meer zomaar door een associatief array kan for in-en.

[crisp]

Verwijderd schreef op woensdag 16 mei 2007 @ 14:50:
[...]

Volgens mij ging het erom dat het prototypen van Array harmful zou zijn omdat je dan niet meer zomaar door een associatief array kan for in-en.

Als je met named properties wil werken moet je sowieso geen Array gebruiken

[Verwijderd]

Toch leuk dat deze discussie weer nieuw leven is ingeblazen.

Ik heb de iterator icm met mootools nu werkend trouwens, wellicht dat iemand anders verbeteringen heeft voor de efficiency of iets dergelijks en anders hoop ik dat andere mensen wellicht nog eens iets aan de code kunnen hebben.

JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Presentatie</title>
<script type="text/javascript" encoding="utf-8" src="js/mootools.js"></script>
<script type="text/javascript">
var ArrayIterator = new Class({
    initialize:             function(new_array){
                                this.__object = new_array;
                            },
    __object:               new Array(),
    __key:                  0,
    rewind:                 function(){
                                /* Rewind array back to the start */
                                this.__key = 0;
                            },
    hasPrevious:            function(){
                                /* Check whether array contains entries between start of list and current key */
                                return new Boolean((0 <= (this.__key-1)) && ((this.__key-1) < this.__key));
                            },
    hasNext:                function(){
                                /* Check whether array contains more entries */
                                return new Boolean(this.__key < this.__object.length);
                            },
    previous:               function(){
                                /* Move to previous key */
                                this.__key--;
                            },
    next:                   function(){
                                /* Move to next entry */
                                this.__key++;
                            },
    key:                    function(){
                                /* Return current array key */
                                return this.__key;
                            },
    current:                function(){
                                /* This function returns the current array entry */
                                return this.__object[this.__key];
                            },
    count:                  function(){
                                /* Return the number of elements in the Iterator */
                                return this.__object.length;
                            },
    each:                   function(){
                                this.rewind();
                                while (this.valid()==true) {
                                    if ($type(arguments[0]).toLowerCase()=='function') {
                                        arguments[0]();
                                    }
                                    this.next();
                                }
                            }
});
ArrayIterator.implement({
    current_slide:          new Object(),
    previous_slide:         new Object(),
    next_slide:             new Object(),
    findSlide:              function(){},
    findSlideById:          function(){},
    findSlideByFunction:    function(){},
    showSlide:              function(){ alert(this.current().id); },
    showNextSlide:          function(){ 
                                if (this.hasNext()==true) {
                                    this.next();
                                    this.showSlide();
                                }
                            },
    showPreviousSlide:      function(){
                                if (this.hasPrevious()==true) {
                                    this.previous();
                                    this.showSlide();
                                }                               
                            }
});
var slide = new Class({
    initialize:             function(id){
                                this.id = id;
                            },
    id:                     null
});


function initSlides()
{
    var slides = new Array();
        slides.push(new slide('item1'));
        slides.push(new slide('item2'));
        slides.push(new slide('item3'));
        slides.push(new slide('item4'));
        slides.push(new slide('item5'));
    pr = new ArrayIterator(slides);
    slides = null;
    pr.showSlide(); /* Alert id of first slide */
}
var pr = new Object(); 
window.addEvent('load', initSlides);
</script>
</head>

<body>
<button onmousedown="pr.showPreviousSlide();">vorige</button>
<button onmousedown="pr.showNextSlide();">volgende</button>
</body>
</html>

[crisp]

Clay schreef op woensdag 16 mei 2007 @ 10:34:
[...]


Ik vind het een geniaaaaaal regeltje maar helaas errort die wel in IE

Oh ja, DOM objecten zijn natuurlijk niet native javascript objecten in IE. Tsja, als IE ooit echt standards-compliant wil worden zullen ze dat denk ik als eerste aan moeten gaan pakken...