Bester Javascript syntaktischer Zucker

Hier sind einige Juwelen:

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

Standardeinstellungen:

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

Natürlich kennen wir anonyme Funktionen, aber es ist großartig, sie als Literale behandeln und vor Ort (als Abschluss) ausführen zu können:

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

Frage: Welcher andere großartige syntaktische Zucker ist in Javascript verfügbar?

Abrufen der aktuellen Datums- und Uhrzeitangabe in Millisekunden:

Date.now()

Zum Beispiel, um die Ausführung eines Codeabschnitts zeitlich festzulegen:

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

Objektmitgliedschaftstest:

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

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

In Mozilla (und angeblich IE7) können Sie eine XML-Konstante erstellen, indem Sie:

var xml = <elem> </ elem>;

Sie können auch Variablen ersetzen:

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

Verwenden anonymer Funktionen und eines Abschlusses zum Erstellen einer privaten Variablen (Ausblenden von Informationen) und der zugehörigen Methoden zum Abrufen / Festlegen:

var getter, setter;

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

In der Lage sein, native JavaScript-Typen durch prototypische Vererbung zu erweitern.

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

Verwenden Sie ===diese Option , um Wert und Typ zu vergleichen :

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

if (i == s) // true

if (i === s) // false

Mehrzeilige Zeichenfolgen:

var str = "Dies ist \
alle eins \
Zeichenfolge. ";

Da Sie die nachfolgenden Zeilen nicht einrücken können, ohne auch das Leerzeichen in die Zeichenfolge einzufügen, bevorzugen die Benutzer im Allgemeinen die Verkettung mit dem Plus-Operator. Dies bietet jedoch eine schöne Dokumentfunktion .

Ändern Sie die Länge eines Arrays

Die Eigenschaft length ist nicht schreibgeschützt . 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.

Wiederholen Sie eine Zeichenfolge wie "-" eine bestimmte Anzahl von Malen, indem Sie die Join-Methode für ein leeres Array nutzen:

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

Ergibt "---" bei Wiederholung == 3.

Ist wie der Standardoperator ||der Guard-Operator &&.

answer = obj && obj.property

im Gegensatz zu

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

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

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

Rückruf zum Ersetzen von Zeichenfolgen ist nur nützlich.

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"

Dies ist kein exklusives Javascript, sondern speichert wie drei Codezeilen:

check ? value1 : value2

Ein bisschen mehr zu Leviks Beispiel:

var foo = (condition) ? value1 : value2;

Das Array # forEach in Javascript 1.6

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

Nach obj || {default: true} Syntax:

Rufen Sie Ihre Funktion folgendermaßen auf: hello (requiredOne && requiredTwo && needThree) Wenn ein Parameter undefiniert oder falsch ist, wird hallo (false) aufgerufen, manchmal nützlich

In Parsing-Situationen mit einem festen Satz von Komponenten:

var str = "John Doe";

Sie können die Ergebnisse mithilfe der Synatx "Destrukturierungszuweisung" direkt Variablen zuordnen:

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

Welches ist ein bisschen besser lesbar als:

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

Abwechselnd:

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

Beachten Sie, dass dies eine Javascript 1.7- Funktion ist. Das sind also derzeit die Browser Mozilla 2.0+ und Chrome 6+.

Sofort aufgerufene Pfeilfunktion:

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

Ich habe vergessen:

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

Erstellen Sie ein anonymes Objektliteral mit einfach: ({})

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

var hasValueOf = !! ({}). valueOf

Syntaktischer Bonuszucker: das Doppel-Nicht '!!' für die Umwandlung so ziemlich alles in einen Booleschen sehr prägnant.

Ich liebe es, einen JSON-String auswerten () und eine vollständig aufgefüllte Datenstruktur zurückerhalten zu können. Ich hasse es, alles mindestens zweimal schreiben zu müssen (einmal für IE, wieder für Mozilla).

Zuweisen der häufig verwendeten Schlüsselwörter (oder beliebiger Methoden) zu einfachen Variablen wie ths

  var $$ = document.getElementById;

  $$('samText');

Die Date-Klasse von JavaScript bietet ein Semi "Fluent Interface". Dies gleicht aus, dass der Datumsanteil nicht direkt aus einer Datumsklasse extrahiert werden kann:

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

Es ist keine vollständig fließende Schnittstelle, da im Folgenden nur ein numerischer Wert angegeben wird, der eigentlich kein Datumsobjekt ist:

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

Standard-Fallback:

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) 

Hier ist eine, die ich gerade entdeckt habe: Nullprüfung vor dem Aufruf der Funktion:

a = b && b.length;

Dies ist ein kürzeres Äquivalent zu:

a = b ? b.length : null;

Das Beste daran ist, dass Sie eine Immobilienkette überprüfen können:

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

Ich finde es toll, 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 schwerer Code. Wertvorgaben sind auch sehr schön. Zum Beispiel Fehlercode-Berichterstattung:

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

int to string cast

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

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

Eine Verknüpfung zum Löschen aller untergeordneten Knoten eines Elements.

Konvertieren Sie eine Zeichenfolge in eine Ganzzahl, die standardmäßig auf 0 gesetzt ist, falls dies nicht möglich ist.

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

Kann in einigen Fällen nützlich sein, meistens wenn 0 als schlechtes Ergebnis angesehen wird

Vorlagenliterale

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

dann wird die Textvariable wie folgt sein!

10 + 20 = 30