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?
Odpowiedzi:
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");
źródło
Test członkostwa obiektu:
źródło
W Mozilli (i podobno IE7) możesz stworzyć stałą XML używając:
Możesz również podstawiać zmienne:
źródło
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; }; })()
źródło
if(true) { let _privateVar=123; }
Możliwość rozszerzania natywnych typów JavaScript poprzez dziedziczenie prototypowe.
String.prototype.isNullOrEmpty = function(input) { return input === null || input.length === 0; }
źródło
Użyj
===
do porównania wartości i wpisz:źródło
$var1 = 'string'; $var2 = 'string'; $var1 === $var2; // true
, chociaż$var1
i$var2
nie są identyczne (odniesienia do tej samej wartości przechowywanej w pamięci), tylko tego samego typu i tej samej wartości.var1 = {a : 'b'}; var2 = {a : 'b'}; var1 === var2 // false
.Ciągi wieloliniowe:
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 .
źródło
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.
źródło
push
dla mnie, hehe. Wielkie dzięki.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.
źródło
Podobnie jak w przypadku operatora domyślnym
||
jest operatorem strażnik&&
.w przeciwieństwie do
if (obj) { answer = obj.property; } else { answer = null; }
źródło
null
. Dzieje się tak tylko wtedy, gdyobj === 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.
źródło
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"
źródło
To nie jest wyłączne dla javascript, ale zapisuje jak trzy linie kodu:
źródło
Trochę więcej na przykładzie Levika:
var foo = (condition) ? value1 : value2;
źródło
Array # forEach na JavaScript 1.6
myArray.forEach(function(element) { alert(element); });
źródło
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
źródło
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+.
źródło
SyntaxError: Unexpected token [
.Funkcja natychmiastowego wywołania strzałki:
var test = "hello, world!"; (() => test)(); //returns "hello, world!";
źródło
Zapomniałem:
(function() { ... }).someMethod(); // Functions as objects
źródło
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.
źródło
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).
źródło
Przypisywanie często używanych słów kluczowych (lub dowolnych metod) do prostych zmiennych, takich jak ths
var $$ = document.getElementById; $$('samText');
źródło
this
utracono wartość. Zamiast tego powinieneś użyćdocument.getElementById.bind(document)
. Bezbind
tego jest po prostu przypisaniemHTMLDocument.prototype.getElementById
funkcji, bez informacji, że należy ją wywołaćdocument
.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);
źródło
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)
źródło
Oto jeden, który właśnie odkryłem: zerowe sprawdzenie przed wywołaniem funkcji:
To jest krótszy odpowiednik:
a = b ? b.length : null;
Najlepsze jest to, że możesz sprawdzić łańcuch nieruchomości:
źródło
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";
źródło
int do rzutowania stringów
var i = 12; var s = i+"";
źródło
element.innerHTML = ""; // Replaces body of HTML element with an empty string.
Skrót do usuwania wszystkich węzłów potomnych elementu.
źródło
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
źródło
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!
źródło