Meilleur sucre syntaxique javascript

Question

Voici quelques joyaux:

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

Valeurs 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 des fonctions anonymes, mais pouvoir les traiter comme des littéraux et les exécuter sur-le-champ (comme une fermeture) est une excellente chose:

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

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

Answer 1

Obtention de 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");

Answer 2

Test d'appartenance à un objet:

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

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

Answer 3

Dans Mozilla (et apparemment IE7), vous pouvez créer une constante XML à l'aide de:

var xml = <elem></elem>;

Vous pouvez également substituer des variables:

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

Answer 4

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

Answer 5

Possibilité d'étendre les types JavaScript natifs via l'héritage de prototypes.

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

Answer 6

Utilisez === pour comparer la valeur et le type :

var i = 0;
var s = "0";

if (i == s)  // true

if (i === s) // false

Answer 7

Chaînes multilignes:

var str = "This is \
all one \
string.";

Etant donné que vous ne pouvez pas indenter 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. Toutefois, cela offre une belle fonctionnalité ici document .

Answer 8

Redimensionner la longueur d'un tableau

La

propriété de longueur est une lecture seule . Vous pouvez l’utiliser pour augmenter ou réduire 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 empty value. A sparse array.

Answer 9

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

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

Résultats dans " --- " quand répéter == 3.

Answer 10

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

answer = obj && obj.property

par opposition à

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

Answer 11

var tags = {
    name: "Jack",
    location: "USA"
};

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

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

Answer 12

Getters and 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"

Answer 13

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

check ? value1 : value2

Answer 14

Un peu plus sur l'exemple de Levik:

var foo = (condition) ? value1 : value2;

Answer 15

Le Array # forEach sur Javascript 1.6 sur Javascript 1.6

myArray.forEach(function(element) { alert(element); });

Answer 16

Suivant obj || {default: true} syntaxe:

appelez votre fonction avec ceci: hello (neededOne & amp; & amp; needTwo & amp; & amp; & amp; needThree) si un paramètre est indéfini ou false, il appellera hello (false), parfois , utile p>

Answer 17

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, à l'aide de la "affectation de déstructuration". synatx:

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 . Voilà donc les navigateurs Mozilla 2.0+ et Chrome 6+, pour le moment.

Answer 18

Fonction Flèche immédiatement appelée:

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

Answer 19

j'ai oublié:

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

Answer 20

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.

Answer 21

J'aime pouvoir évaluer () une chaîne json et récupérer une structure de données complètement remplie. Je déteste devoir tout écrire au moins deux fois (une fois pour IE et encore une fois pour Mozilla).

Answer 22

Affectation des mots-clés fréquemment utilisés (ou de toute méthode) à des variables simples telles que

  var $ = document.getElementById;

  $('samText');

Answer 23

La classe de date de JavaScript fournissant une "interface fluide" semi- ". 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));

L’interface n’est pas totalement fluide, 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);

Answer 24

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) 

Answer 25

En voici un que je viens de découvrir: contrôle 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;

Answer 26

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

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

Et les hachages:

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";

Answer 27

int to cast string

var i = 12;
var s = i+"";

Answer 28

element.innerHTML = "";  // Replaces body of HTML element with an empty string.

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

Answer 29

Convertir 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 lorsque 0 est considéré comme un résultat incorrect

Answer 30

Littéraux de modèle

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

alors la texte sera comme ci-dessous!

  

10 + 20 = 30