JavaScript Utiliser let in loops au lieu de var (exemple des gestionnaires de clic)


Exemple

Disons que nous devons ajouter un bouton pour chaque élément du tableau loadedData (par exemple, chaque bouton doit être un curseur affichant les données; pour des raisons de simplicité, nous allons simplement alerter un message). On peut essayer quelque chose comme ça:

for(var i = 0; i < loadedData.length; i++)
    jQuery("#container").append("<a class='button'>"+loadedData[i].label+"</a>")
        .children().last() // now let's attach a handler to the button which is a child
        .on("click",function() { alert(loadedData[i].content); });

Mais au lieu d'alerter, chaque bouton provoquera la

TypeError: loadedData [i] n'est pas défini

Erreur. C'est parce que la portée de i est la portée globale (ou une portée de fonction) et après la boucle, i == 3 . Ce dont nous avons besoin, ce n'est pas de "nous souvenir de l'état de i ". Cela peut être fait en utilisant let :

for(let i = 0; i < loadedData.length; i++)
    jQuery("#container").append("<a class='button'>"+loadedData[i].label+"</a>")
        .children().last() // now let's attach a handler to the button which is a child
        .on("click",function() { alert(loadedData[i].content); });

Un exemple de loadedData à tester avec ce code:

    var loadedData = [
        { label:"apple",      content:"green and round" },
        { label:"blackberry", content:"small black or blue" },
        { label:"pineapple",  content:"weird stuff.. difficult to explain the shape" }
    ];

Un violon pour illustrer cela