81 votes

Le meilleur sucre syntaxique de javascript

Voici quelques perles :

Les littéraux :

var obj = {}; // Object literal, equivalent to var obj = new Object();
var arr = []; // Array literal, equivalent to var arr = new Array();
var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something');

Par défaut :

arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as:
arg = !!arg ? arg : 'default';

Bien sûr, nous connaissons les fonctions anonymes, mais pouvoir les traiter comme des littéraux et les exécuter sur place (comme une fermeture) est formidable :

(function() { ... })(); // Creates an anonymous function and executes it

Question : Quel autre sucre syntaxique génial est disponible en javascript ?

2 votes

Je n'étais pas au courant de cette syntaxe de valeur par défaut ||. Sympathique et compacte, mais pas si intuitive. (Peut-être que je ont Je l'ai vu, mais je ne l'ai jamais compris.)

1 votes

J'ai eu beaucoup plus de mal à comprendre la syntaxe ternaire. Elle deviendra une seconde nature après l'avoir écrite plusieurs fois. En ce qui concerne les endroits où vous avez pu la voir, je pense que jquery.js et prototype.js l'utilisent tous les deux.

1 votes

Et si vous expliquiez chacun de ces exemples ?

58voto

Chris Noe Points 8375

Obtention de la date actuelle en millisecondes :

Date.now()

Par exemple, pour chronométrer l'exécution d'une section de code :

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");

0 votes

C'est, en fait, le meilleur sucre syntaxique de javascript. A winnar si yuo.

3 votes

OrbMan, cela dépend probablement du contexte ; si on le passe comme argument, il peut être converti en un objet plutôt qu'en un nombre ou une chaîne, auquel cas le + l'aurait déjà converti en un nombre. En fait, + semble fonctionner comme un raccourci de parseInt(value, 10).

0 votes

Correction : il y a quelques différences avec parseInt(valeur, 10). Par exemple, +[3] et parseInt([3], 10) sont tous deux égaux au nombre 3, mais +[3, 4] == NaN et parseInt([3, 4], 10) == 3.

33voto

Chris Noe Points 8375

Test d'appartenance à un objet :

var props = { a: 1, b: 2 };

("a" in props) // true
("b" in props) // true
("c" in props) // false

0 votes

C'est certainement plus concis que props.a === undefined Merci.

15 votes

Et c'est vrai même si props = { a : undefined }.

0 votes

Pour votre information, Firefox génère une erreur de type lorsque vous essayez d'utiliser "in" sur un objet XPCNativeWrapper. Et à partir de Firefox 4, beaucoup d'objets sont enveloppés. On en revient donc à props.a === undefined dans ces cas-là.

26voto

Chris Noe Points 8375

Dans Mozilla (et apparemment dans IE7), vous pouvez créer une constante XML en utilisant :

var xml = <elem></elem>;

Vous pouvez également substituer des variables :

var elem = "html";
var text = "Some text";
var xml = <{elem}>{text}</{elem}>;

0 votes

Vraiment ? Y a-t-il d'autres moteurs qui supportent cela ?

1 votes

Je me demande juste : que pouvez-vous faire avec cette variable "xml" une fois que vous l'avez créée ? En jouant avec elle dans firebug, il semble qu'elle n'ait pas de méthodes ou de propriétés et que l'on ne puisse pas l'ajouter au DOM.

0 votes

26voto

Ash Points 31541

Utilisation de fonctions anonymes et d'une fermeture pour créer une variable privée (masquage d'informations) et les méthodes get/set associées :

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()

0 votes

Ça m'a pris un moment, mais j'ai compris. C'est super.

0 votes

J'ai découvert une technique similaire il y a quelque temps en parcourant la source de swfobject. L'utilisation de fermetures pour créer des variables/méthodes privées est une chose à laquelle je n'aurais probablement jamais pensé. C'est plutôt cool.

0 votes

Avec la nouvelle version de JS, nous pouvons utiliser le plus simple if(true) { let _privateVar=123; }

22voto

steve_c Points 3887

La possibilité d'étendre les types JavaScript natifs via l'héritage prototypique.

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}

6 votes

Evite juste de faire ça à Array : stackoverflow.com/questions/61088/

0 votes

C'est vrai, mais seulement si vous utilisez la boucle for(a in b). En général, j'utilise des cadres, comme tout le monde, j'en suis sûr. Par conséquent, j'utilise généralement .each().

0 votes

C'est un problème potentiel si cualquier Le code dans votre conteneur utilise for(a in b). Et lorsque ce conteneur est un navigateur, vous pouvez casser d'autres codes dans votre navigateur (par exemple, ce framework). Je me suis fait avoir par celui-là.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X