Najlepszy cukier składniowy javascript

Oto kilka perełek:

Literały:

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

Wartości domyślne:

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

Oczywiście znamy funkcje anonimowe, ale możliwość traktowania ich jako literałów i wykonywania ich na miejscu (jako zamknięcie) jest świetna:

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

Pytanie: Jaki inny wspaniały cukier składniowy jest dostępny w javascript?

Pobieranie aktualnej daty i godziny w milisekundach:

Date.now()

Na przykład, aby określić czas wykonania sekcji kodu:

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

Test członkostwa obiektu:

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

(„a” we właściwościach) // prawda
(„b” we właściwościach) // prawda
(„c” we właściwościach) // false

W Mozilli (i podobno IE7) możesz stworzyć stałą XML używając:

var xml = <elem> </elem>;

Możesz również podstawiać zmienne:

var elem = "html";
var text = "Jakiś tekst";
var xml = <{elem}> {text} </ {elem}>;

Korzystanie z funkcji anonimowych i domknięcia do tworzenia zmiennej prywatnej (ukrywanie informacji) i powiązanych metod get / set:

var getter, setter;

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

Możliwość rozszerzania natywnych typów JavaScript poprzez dziedziczenie prototypowe.

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

Użyj ===do porównania wartości i wpisz:

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

if (i == s) // prawda

if (i === s) // fałsz

Ciągi wieloliniowe:

var str = "To jest \
wszystko jedno \
strunowy.";

Ponieważ nie można wciskać kolejnych wierszy bez dodawania białych znaków do łańcucha, ludzie zazwyczaj wolą łączyć z operatorem plus. Ale to zapewnia przyjemną możliwość tworzenia dokumentów .

Zmień rozmiar tablicy

length nie jest tylko do odczytu . Możesz go użyć do zwiększenia lub zmniejszenia rozmiaru tablicy.

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.

Powtarzanie ciągu, takiego jak „-”, określoną liczbę razy, wykorzystując metodę join w przypadku pustej tablicy:

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

Wyniki w postaci „---”, gdy powtórz == 3.

Podobnie jak w przypadku operatora domyślnym ||jest operatorem strażnik &&.

answer = obj && obj.property

w przeciwieństwie do

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

wywołanie zwrotne do zamiany napisów jest po prostu przydatne.

Programy pobierające i ustawiające :

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

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

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

Daje nam:

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

To nie jest wyłączne dla javascript, ale zapisuje jak trzy linie kodu:

check ? value1 : value2

Trochę więcej na przykładzie Levika:

var foo = (condition) ? value1 : value2;

Array # forEach na JavaScript 1.6

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

Po obj || Składnia {domyślna: prawda}:

wywołując swoją funkcję w ten sposób: hello (requiredOne && requiredTwo && needThree) jeśli jeden parametr jest niezdefiniowany lub fałszywy, wywoła hello (false), czasami przydatne

W sytuacjach analizowania ze stałym zestawem części składowych:

var str = "John Doe";

Możesz przypisać wyniki bezpośrednio do zmiennych, używając synatx "przypisania destrukturyzacji":

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

Co jest nieco bardziej czytelne niż:

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

Na przemian:

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

Zauważ, że jest to funkcja Javascript 1.7 . W tej chwili są to przeglądarki Mozilla 2.0+ i Chrome 6+.

Funkcja natychmiastowego wywołania strzałki:

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

Zapomniałem:

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

Utwórz anonimowy literał obiektu za pomocą prostego: ({})

Przykład: musisz wiedzieć, czy obiekty mają metodę valueOf:

var hasValueOf = !! ({}). valueOf

Dodatkowy cukier syntaktyczny: podwójne nie „!!” za bardzo zwięzłe przekształcenie prawie wszystkiego w Boolean.

Uwielbiam móc eval () string JSON i odzyskać w pełni wypełnioną strukturę danych. Nienawidzę pisać wszystkiego co najmniej dwa razy (raz dla IE, znowu dla Mozilli).

Przypisywanie często używanych słów kluczowych (lub dowolnych metod) do prostych zmiennych, takich jak ths

  var $$ = document.getElementById;

  $$('samText');

Klasa Date w JavaScript zapewniająca półpłynny interfejs. To rekompensuje brak możliwości bezpośredniego wyodrębnienia części daty z klasy Date:

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

Nie jest to w pełni płynny interfejs, ponieważ poniższe informacje dają nam tylko wartość liczbową, która w rzeczywistości nie jest obiektem Date:

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

Domyślna kreacja zastępcza:

var foo = {}; // empty object literal

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

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

Praktyczny przykład:

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

Oto jeden, który właśnie odkryłem: zerowe sprawdzenie przed wywołaniem funkcji:

a = b && b.length;

To jest krótszy odpowiednik:

a = b ? b.length : null;

Najlepsze jest to, że możesz sprawdzić łańcuch nieruchomości:

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

Uwielbiam to, jak łatwo jest pracować z listami:

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

I skróty:

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

W większości innych języków byłby to dość ciężki kod. Wartości domyślne są również piękne. Na przykład raportowanie kodów błędów:

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

int do rzutowania stringów

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

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

Skrót do usuwania wszystkich węzłów potomnych elementu.

Konwertuj ciąg na liczbę całkowitą, domyślnie 0 jeśli jest to niemożliwe,

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

Może być przydatne w niektórych przypadkach, głównie wtedy, gdy 0 jest uważane za zły wynik

Literały szablonów

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

a później zmienna tekstowa będzie taka jak poniżej!

10 + 20 = 30