En iyi javascript sözdizimsel şeker

İşte bazı mücevherler:

Değişmezler:

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

Varsayılanlar:

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

Elbette anonim işlevleri biliyoruz, ancak bunları değişmez değerler olarak ele alıp yerinde (bir kapanış olarak) çalıştırabilmek harika:

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

Soru: Javascript'te başka hangi harika sözdizimsel şeker var?

Geçerli tarih saatini milisaniye olarak alma:

Date.now()

Örneğin, bir kod bölümünün yürütülmesini zamanlamak için:

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

Nesne üyelik testi:

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

("a" sahne içinde) // doğru
(props'ta "b") // doğru
(props'ta "c") // yanlış

Mozilla'da (ve bildirildiğine göre IE7'de) aşağıdakileri kullanarak bir XML sabiti oluşturabilirsiniz:

var xml = <elem> </elem>;

Değişkenleri de değiştirebilirsiniz:

var elem = "html";
var text = "Bazı metinler";
var xml = <{elem}> {metin} </ {elem}>;

Özel bir değişken (bilgi gizleme) ve ilişkili get / set yöntemlerini oluşturmak için anonim işlevler ve bir kapatma kullanma

var getter, setter;

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

Prototip kalıtım yoluyla yerel JavaScript türlerini genişletebilme.

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

===Değer ve türü karşılaştırmak için kullanın :

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

eğer (i == s) // doğru

eğer (i === s) // yanlış

Çok satırlı dizeler:

var str = "Bu \
hepsi bir \
string. ";

Dizeye boşluk eklemeden sonraki satırları girintileyemeyeceğiniz için, insanlar genellikle artı operatörüyle bitiştirmeyi tercih ederler. Ancak bu, burada güzel bir belge özelliği sağlar.

Bir Dizinin Uzunluğunu Yeniden Boyutlandırma

length özelliği salt okunur değildir . Bir dizinin boyutunu artırmak veya azaltmak için kullanabilirsiniz.

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.

Boş bir dizide birleştirme yönteminden yararlanarak "-" gibi bir dizeyi belirli sayıda tekrarlamak:

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

Tekrar == 3 olduğunda "---" ile sonuçlanır.

Varsayılan operatör gibi ||, koruma operatörüdür &&.

answer = obj && obj.property

aksine

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

dizge değiştirme için geri arama sadece yararlıdır.

Getiriciler ve ayarlayıcılar :

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

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

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

Bize verir:

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

Bu, javascript'e özel değildir, ancak üç satır kod gibi kaydeder:

check ? value1 : value2

Levik örneğinden biraz daha fazlası:

var foo = (condition) ? value1 : value2;

Javascript 1.6'da Her için Dizi #

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

Obj || {varsayılan: doğru} sözdizimi:

işlevinizi şununla çağırmak: merhaba (requiredOne && requiredTwo && needThree) Bir parametre tanımsız veya yanlışsa, merhaba (yanlış), bazen yararlı

Sabit bir bileşen parça setiyle durumları ayrıştırmada:

var str = "John Doe";

"Yıkıcı atama" sözdizimini kullanarak sonuçları doğrudan değişkenlere atayabilirsiniz:

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

Hangisi biraz daha okunaklı:

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

Alternatif olarak:

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

Bunun bir Javascript 1.7 özelliği olduğunu unutmayın. Bu, şu anda Mozilla 2.0+ ve Chrome 6+ tarayıcıları.

Anında Çağrılan Ok işlevi:

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

Unuttum:

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

Basitçe şununla anonim bir nesne oluşturun: ({})

Örnek: nesnelerin valueOf yöntemine sahip olup olmadığını bilmeniz gerekir:

var hasValueOf = !! ({}). valueOf

Bonus sözdizimsel şeker: çift değil '!!' hemen hemen her şeyi bir Boolean'a çok kısa bir şekilde dönüştürmek için.

Bir json dizesini değerlendirmeyi () ve tam olarak doldurulmuş bir veri yapısını geri almayı seviyorum. Her şeyi en az iki kez yazmaktan nefret ediyorum (bir kez IE için, bir kez de Mozilla için).

Sık kullanılan anahtar kelimeleri (veya herhangi bir yöntemi) bu gibi basit değişkenlere atama

  var $$ = document.getElementById;

  $$('samText');

JavaScript'in Date sınıfı yarı "Akıcı Arayüz" sağlar. Bu, tarih bölümünün doğrudan bir Date sınıfından çıkarılamaması anlamına gelir:

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

Tamamen Akıcı bir Arayüz değildir, çünkü aşağıdakiler bize yalnızca gerçekte bir Date nesnesi olmayan sayısal bir değer verecektir:

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

Varsayılan yedek:

var foo = {}; // empty object literal

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

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

Pratik bir örnek:

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

İşte yeni keşfettiğim bir şey: işlevi çağırmadan önce boş kontrol:

a = b && b.length;

Bu daha kısa bir eşdeğerdir:

a = b ? b.length : null;

En iyi bölüm, bir mülk zincirini kontrol edebilmenizdir:

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

Listelerle çalışmanın ne kadar basit olduğunu seviyorum:

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

Ve karmalar:

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

Diğer dillerin çoğunda bu oldukça ağır bir koddur. Varsayılan değer değerleri de güzel. Örneğin hata kodu raporlama:

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

int'den dizeye döküm

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

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

Öğenin tüm alt düğümlerini silmek için bir kısayol.

Dize, tam sayıya, imkansızsa varsayılan olarak 0'a dönüştür

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

Bazı durumlarda yararlı olabilir, çoğunlukla 0 kötü sonuç olarak kabul edildiğinde

Şablon değişmez değerleri

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

Daha sonra metin değişken, aşağıdaki gibi olacak!

10 + 20 = 30