web-dev-qa-db-fra.com

Meilleur sucre syntaxique javascript

Voici quelques gemmes:

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');

Défauts:

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

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

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

Question: Quel autre grand sucre syntaxique est disponible en javascript?

javascriptlanguage-featuressyntactic-sugar
81
eyelidlessness

Obtenir la date/heure 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");
57
Chris Noe

Test d'adhésion d'objet:

 var props = {a: 1, b: 2}; 
 
 ("a" dans les accessoires) // vrai 
 ("b" dans les accessoires) // true 
 ("c" dans les accessoires) // false
32
Chris Noe

Dans Mozilla (et apparemment 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 = "Du texte"; 
 var xml = <{elem}> {text} </ {elem}>;
26
Chris Noe

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; };
})()
25
Ash

Être en mesure d'étendre les types JavaScript natifs via l'héritage de prototypes.

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

Chaînes multilignes:

 var str = "Ceci est\
 un seul\
 chaîne.";

Comme vous ne pouvez pas mettre en retrait les lignes suivantes sans ajouter également les espaces dans la chaîne, les utilisateurs préfèrent généralement effectuer une concaténation avec l'opérateur plus. Mais cela fournit un document Nice ici document .

21
Chris Noe

Redimensionner la longueur d'un tableau

la propriété length est un pas en lecture seule . Vous pouvez l'utiliser pour augmenter ou diminuer la taille d'un tableau.

var myArray = [1,2,3];
myArray.length // 3 elements.
myArray.length = 2; //Deletes the last element.
myArray.length = 20 // Adds 18 elements to the array; the elements have the undefined value. A sparse array.
21
pramodc84

Utilisez === pour comparer la valeur et type:

 var i = 0; 
 var s = "0"; 
 
 if (i == s) // vrai 
 
 if (i === s) // faux
20
Chris Noe

Répéter une chaîne telle que "-" un nombre de fois spécifique en utilisant la méthode de jointure sur un tableau vide:

var s = new Array(repeat+1).join("-");

Résultats en "---" lorsque répéter == 3.

16
J c

Comme l'opérateur par défaut, || est l'opérateur de garde, &&.

answer = obj && obj.property

par opposition à

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}
15
Skilldrick
var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

le rappel de remplacement de chaîne est simplement utile.

13
Serkan Yersen

Getters et setters :

function Foo(bar)
{
    this._bar = bar;
}

Foo.prototype =
{
    get bar()
    {
        return this._bar;
    },

    set bar(bar)
    {
        this._bar = bar.toUpperCase();
    }
};

Nous donne:

>>> var myFoo = new Foo("bar");
>>> myFoo.bar
"BAR"
>>> myFoo.bar = "Baz";
>>> myFoo.bar
"BAZ"
11
Jonny Buchanan

Ce n'est pas une exclusivité javascript, mais enregistre comme trois lignes de code:

check ? value1 : value2
5
levik

Lors de l'analyse de situations avec un ensemble fixe de composants:

var str = "John Doe";

Vous pouvez affecter les résultats directement dans des variables, en utilisant le synatx "attribution de déstructuration":

var [fname, lname] = str.split(" ");
alert(lname + ", " + fname);

Ce qui est un peu plus lisible que:

var a = str.split(" ");
alert(a[1] + ", " + a[0]);

Alternativement:

var [str, fname, lname] = str.match(/(.*) (.*)/);

Notez qu'il s'agit d'une fonctionnalité Javascript 1.7 . Il s’agit donc des navigateurs Mozilla 2.0+ et Chrome 6+.

4
Chris Noe

Un peu plus sur l'exemple de levik:

var foo = (condition) ? value1 : value2;
4
VirtuosiMedia

Le Array # forEach on Javascript 1.6

myArray.forEach(function(element) { alert(element); });
4
Pablo Cabrera

Suivre obj || {default: true} syntaxe:

appelant votre fonction avec ceci: hello (neededOne && neededTwo && needThree) si un paramètre est indéfini ou false, il appellera hello (false), parfois usefull

4
vvo

Fonction Flèche immédiatement appelée:

var test = "hello, world!";
(() => test)(); //returns "hello, world!";
3
Gerard Simpson

J'ai oublié:

(function() { ... }).someMethod(); // Functions as objects
2
eyelidlessness

Créez un littéral d'objet anonyme avec simplement: ({})

Exemple: besoin de savoir si les objets ont la méthode valueOf:

var hasValueOf = !! ({}). valueOf

Bonus de sucre syntaxique: le double-pas '!!' pour convertir à peu près n'importe quoi en un booléen très succinctement.

2
mkoistinen

J'aime la simplicité de travail avec les listes:

var numberName = ["zero", "one", "two", "three", "four"][number];

Et des hashes:

var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName];

Dans la plupart des autres langues, ce serait un code assez lourd. Les valeurs par défaut sont également belles. Par exemple, rapport de code d'erreur:

var errorDesc = {301: "Moved Permanently",
                 404: "Resource not found",
                 503: "Server down"
                }[errorNo] || "An unknown error has occurred";
1
manixrock

En voici un que je viens de découvrir: vérification de null avant d'appeler la fonction:

a = b && b.length;

Ceci est un équivalent plus court de: 

a = b ? b.length : null;

La meilleure partie est que vous pouvez vérifier une chaîne de propriétés:

a = b && b.c && b.c.length;
1
ming_codes

Assigner les mots-clés fréquemment utilisés (ou n'importe quelle méthode) à des variables simples comme celle-ci

  var $$ = document.getElementById;

  $$('samText');
1
RameshVel

Repli par défaut:

var foo = {}; // empty object literal

alert(foo.bar) // will alert "undefined"

alert(foo.bar || "bar"); // will alert the fallback ("bar")

Un exemple pratique:

// will result in a type error
if (foo.bar.length === 0)

// with a default fallback you are always sure that the length
// property will be available.
if ((foo.bar || "").length === 0)
1
cllpse

La classe de date de JavaScript fournissant une semi-"interface fluide". Cela permet de ne pas pouvoir extraire directement la partie date d'une classe de date:

var today = new Date((new Date()).setHours(0, 0, 0, 0));

Ce n'est pas une interface totalement Fluent car ce qui suit ne nous donnera qu'une valeur numérique qui n'est pas réellement un objet Date:

var today = new Date().setHours(0, 0, 0, 0);
1
palswim

J'adore pouvoir évaluer () une chaîne json et récupérer une structure de données entièrement peuplée.

1
dicroce

Littéraux de modèle

var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;

alors la variable text sera comme ci-dessous!

10 + 20 = 30

0
Mohan Kumar

Convertit la chaîne en entier par défaut à 0 si impossible,

0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0

Peut être utile dans certains cas, surtout quand 0 est considéré comme un mauvais résultat

0
Raimonds

int à la distribution de la chaîne

var i = 12;
var s = i+"";
0
Martijn Laarman
element.innerHTML = "";  // Replaces body of HTML element with an empty string.

Un raccourci pour supprimer tous les nœuds enfants de l'élément.

0
pramodc84