Beste Javascript syntaktischer Zucker

Question

Hier sind einige Edelsteine:

Literale:

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

Standard:

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

Natürlich wissen wir, anonyme Funktionen, aber in der Lage zu sein, sie als Literale zu behandeln und sie an Ort und Stelle (als Verschluss) auszuführen ist groß:

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

Frage: Welche andere großer syntaktischer Zucker in Javascript verfügbar

?

Answer 1

die aktuelle Datumzeit als Millisekunden bekommen:

Date.now()

Zum Beispiel, wenn die Ausführung eines Code-Abschnitts:

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

Answer 2

Objekt Mitgliedschaft Test:

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

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

Answer 3

Mozilla (und dem Vernehmen nach IE7) Sie können eine XML-Konstante erstellen mit:

var xml = <elem></elem>;

Sie können Variablen ersetzen auch:

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

Answer 4

Mit anonymen Funktionen und einen Verschluss eine private Variable (Information Hiding) und die zugehörigen get / set-Methoden zu erstellen:

var getter, setter;

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

Answer 5

Die Möglichkeit, nativer JavaScript-Typen über prototypische Vererbung zu verlängern.

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

Answer 6

Mit === Wert vergleichen und Typ:

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

if (i == s)  // true

if (i === s) // false

Answer 7

Multi-line-Strings:

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

Da Sie nicht die nachfolgenden Zeilen ohne auch Hinzufügen der Leerzeichen in den String einrücken kann, bevorzugen die Menschen im Allgemeinen mit dem Plus-Operator verketten. Aber das tut bietet ein schönes hier dokumentiert Fähigkeit.

Answer 8

Ändern der Größe der Länge eines Arrays

length-Eigenschaft ist ein nicht nur lesen . Sie können es verwenden, um die Größe eines Arrays zu erhöhen oder zu verringern.

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

eine Zeichenfolge Wiederholen wie „-“, um eine bestimmte Anzahl von Malen durch das Join-Verfahren auf einem leeren Array nutzen:

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

Ergebnisse in "---", wenn Wiederholung == 3.

Answer 10

Wie der Standardoperator, || ist der Schutz des Bedieners, &&.

answer = obj && obj.property

im Gegensatz zu

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

Rückruf für Zeichenfolge ersetzen ist nur sinnvoll.

Answer 12

Getter und Setter :

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

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

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

Gibt uns:

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

Answer 13

Dies ist kein Javascript aus, sondern spart wie drei Codezeilen:

check ? value1 : value2

Answer 14

Ein wenig mehr auf Levik des Beispiel:

var foo = (condition) ? value1 : value2;

Answer 15

Die Array # forEach Javascript 1.6

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

Answer 16

Nach obj || {Default: true} Syntax:

Ihre Funktion mit diesem Aufruf: hallo (neededOne && neededTwo && needThree), wenn ein Parameter nicht definiert oder falsch, dann wird es nennen hallo (false), manchmal nützlich

Answer 17

Situationen mit einem festen Satz von Komponenten In Parsen:

var str = "John Doe";

Sie können die Ergebnisse direkt in Variablen zuweisen, die „Destrukturierung Zuordnung“ synatx mit:

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

Welche ist ein bisschen besser lesbar als:

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

Alternativ:

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

Beachten Sie, dass dies ein Javascript 1.7 Funktion. Also das ist Mozilla 2.0+ und Chrome 6+ Browser, zu diesem Zeitpunkt.

Answer 18

Ab sofort aufgerufen, Pfeil Funktion:

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

Answer 19

Ich habe vergessen:

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

Answer 20

Eine anonyme Objektliteral mit einfach: ({})

Beispiel: müssen wissen, ob Objekte, die valueOf Methode haben:

var hasValueOf = !! ({}). ValueOf

Bonus syntaktischer Zucker: das Doppel-nicht '!!' für sehr kurz und bündig so ziemlich alles in einen Boolean umgewandelt wird.

Answer 21

I love () ein JSON-String eval zu können und eine voll bestückte Datenstruktur zurück. Ich hasse es, alles mindestens zweimal schreiben (einmal für IE, wieder für Mozilla).

Answer 22

Zuordnung der häufig verwendete Schlüsselwörter (oder alle Methoden) zu den einfachen Variablen wie die

  var $$ = document.getElementById;

  $$('samText');

Answer 23

JavaScripts Date-Klasse ein semi- "Fluent Interface" bietet. Dies macht sich für nicht unmittelbar in der Lage, den Datumsteil von einem Date-Klasse zu extrahieren:

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

Es ist nicht ein vollständig Fluent Interface, da die folgenden wird uns nur einen numerischen Wert geben, der nicht wirklich ein Date-Objekt ist:

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

Answer 24

Standardrückfall:

var foo = {}; // empty object literal

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

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

Ein praktisches Beispiel:

// 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

Hier ist ein ich gerade entdeckt: NULL-Prüfung vor dem Aufruf von Funktion:

a = b && b.length;

Dies ist eine kürzere entspricht:

a = b ? b.length : null;

Der beste Teil ist, dass Sie eine Eigenschaft Kette überprüfen:

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

Answer 26

Ich liebe, wie einfach es ist, mit Listen zu arbeiten:

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

Und Hashes:

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

In den meisten anderen Sprachen wäre dies ziemlich schwer Code sein. Wertvorgaben sind auch sehr schön. Zum Beispiel Fehlercode Meldung:

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

Answer 27

int String-Umwandlung

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

Answer 28

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

Eine Verknüpfung alle untergeordneten Knoten des Elements zu löschen.

Answer 29

Konvertieren Zeichenfolge säumigen auf Integer 0, wenn imposible,

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

Kann in einigen Fällen sinnvoll sein, vor allem, wenn 0 als schlechtes Ergebnis betrachtet wird

Answer 30

Template Literale

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

dann der Text Variable wird wie unten sein!

  

10 + 20 = 30