Destructuration en JavaScript

Question

Comme on peut le voir dans le changlog de Mozilla pour JavaScript 1.7, ils ont ajouté une affectation de déstructuration. Malheureusement, je n'aime pas beaucoup la syntaxe (pourquoi écrire a et b deux fois?):

var a, b;  
[a, b] = f();

Quelque chose comme cela aurait été beaucoup mieux:

var [a, b] = f();

Ce serait toujours compatible avec les versions antérieures. Une déstructuration de type Python ne serait pas compatible avec les versions antérieures.

Quoi qu’il en soit, la meilleure solution pour JavaScript 1.5 que j’ai pu trouver est la suivante:

function assign(array, map) {
    var o = Object();
    var i = 0;
    $.each(map, function(e, _) {
        o[e] = array[i++];
    });
    return o;
}

Qui fonctionne comme:

var array = [1,2];
var _ = assign[array, { var1: null, var2: null });
_.var1; // prints 1
_.var2; // prints 2

Mais ça craint vraiment parce que _ n'a pas de sens. C'est juste une coquille vide pour stocker les noms. Mais malheureusement, c'est nécessaire car JavaScript n'a pas de pointeur. Du côté positif, vous pouvez attribuer des valeurs par défaut si les valeurs ne correspondent pas. Notez également que cette solution n'essaie pas de découper le tableau. Donc, vous ne pouvez pas faire quelque chose comme {first: 0, rest: 0} . Mais cela pourrait facilement être fait, si on voulait ce comportement.

Qu'est-ce qu'une meilleure solution?

Answer 1

Tout d’abord, var [a, b] = f () fonctionne très bien en JavaScript 1.7 - essayez-le!

Deuxièmement, vous pouvez lisser légèrement la syntaxe d'utilisation en utilisant avec () :

var array = [1,2];
with (assign(array, { var1: null, var2: null }))
{
   var1; // == 1
   var2; // == 2
}

Bien sûr, cela ne vous permettra pas de modifier les valeurs des variables existantes. IMHO est donc beaucoup moins utile que la fonctionnalité JavaScript 1.7. Dans le code, j'écris maintenant , je renvoie simplement les objets et référence leurs membres. J'attendrai que les fonctionnalités 1.7 deviennent plus largement disponibles.

Answer 2

Vous n’avez pas besoin du mannequin " _ " variable. Vous pouvez créer directement " global " variables en utilisant la portée de l'objet window:

window["foo"] = "bar";
alert(foo); // Gives "bar"

Voici quelques points supplémentaires:

• Je ne nommerais pas cette fonction " attribuer " parce que c'est trop générique un terme.
• Ressembler plus étroitement à JS 1.7 syntaxe, je ferais que la fonction prenne la destination en premier argument et la source en tant que deuxième argument.
• Utiliser un littéral d'objet pour transmettre les variables de destination est cool, mais peut être confondu avec la déstructuration de JS 1.7 où la destination est en réalité un objet et non un tableau. Je préfère utiliser une liste de noms de variables séparés par des virgules.

Voici ce que j'ai proposé:

function destructure(dest, src) {  
    dest = dest.split(",");  

    for (var i = 0; i < src.length; i++) {  
        window[dest[i]] = src[i];  
    }  
}  

var arr = [42, 66];  

destructure("var1,var2", arr); 

alert(var1); // Gives 42
alert(var2); // Gives 66

Answer 3

Voici ce que j'ai fait dans PHPstorm 10:

Fichier - > Paramètres - > Langues & amp; Cadres - > ...

... définissez la version de langage JavaScript sur, par exemple. JavaScript 1.8.5 ...

- > cliquez sur Appliquer.

Answer 4

En JavaScript standard, nous nous habituons à toutes sortes de laideurs et émuler une assignation de déstructuration à l'aide d'une variable intermédiaire n'est pas si mal:

function divMod1(a, b) {
    return [ Math.floor(a / b), a % b ];
}

var _ = divMod1(11, 3);
var div = _[0];
var mod = _[1];
alert("(1) div=" + div + ", mod=" + mod );

Cependant, je pense que le modèle suivant est plus idomatique:

function divMod2(a, b, callback) {
    callback(Math.floor(a / b), a % b);
}

divMod2(11, 3, function(div, mod) {
    alert("(2) div=" + div + ", mod=" + mod );
});

Notez qu'au lieu de renvoyer les deux résultats sous forme de tableau, nous les transmettons en tant qu'arguments à une fonction de rappel.

(Voir le code en cours d'exécution à l'adresse http://jsfiddle.net/vVQE3/ )