Temel JavaScript programlarını yazmaya alıştığınızda, kodunuzu temizlemek ve kodlamanızı hızlandırmak için bazı gelişmiş sözdizimlerini öğrenmenin zamanı geldi.

JavaScript ve TypeScript, web geliştirme alanında oldukça popüler programlama dilleridir. Her ikisi de, kodlama verimliliğini artırmaya önemli ölçüde katkıda bulunan kapsamlı özellik setlerine ve birçok sözdizimi kısayoluna sahiptir.

Kodunuzu nasıl sıkılaştıracağınızı öğrenin ve bazı yararlı kısayollarla bu dillerden en iyi şekilde yararlanın.

1. Üçlü operatör

Üçlü işleç, koşullu ifadeleri ifade etmek için özlü ve verimli bir sözdizimi sunar. Üç bölümden oluşur: bir koşul, koşul doğru olarak değerlendirilirse çalıştırılacak bir ifade ve yanlışsa çalıştırılacak bir ifade.

Bu işleç, koşullara dayalı kararlar alırken ve buna göre farklı değerler atarken özellikle yararlıdır.

Aşağıdaki örneği göz önünde bulundurun:

sabit yaş = 20;
sabit yaşTürü = yaş >= 18? "Yetişkin": "Çocuk";
konsol.log (yaşTürü); // Çıktı: "Yetişkin"

Bu örnek, değişkenin olup olmadığını kontrol etmek için üçlü operatörü kullanır.

instagram viewer
yaş büyüktür veya eşittir 18. Eğer öyleyse, kod değeri atar Yetişkin değişkene yaşTürü, aksi takdirde "Child" değerini atar.

2. Şablon Değişmezleri

Şablon sabit değerleri, güçlü ve verimli bir yol sunar. JavaScript dizelerini biçimlendirme ve içlerine değişkenleri veya ifadeleri dahil etmek. Tek veya çift tırnak kullanan geleneksel dize birleştirmenin aksine, şablon sabit değerleri ters tırnaklar (`).

Bu benzersiz sözdizimi, dizelerle çalışırken çeşitli avantajlar sağlar. Şablon sabit değerlerinin kullanımını gösteren aşağıdaki örneği göz önünde bulundurun:

sabit isim = "Alice";
sabit tebrik = Merhaba, ${isim}!`;
konsol.log (selamlama); // Çıktı: "Merhaba Alice!"

örnek şunları içerir: isim kullanarak şablon değişmezindeki değişken ${}. Bu, kolayca dinamik dizeler oluşturmanıza olanak tanır.

3. Nullish Birleştirme Operatörü

nullish birleştirme operatörü (??) bir değişken ya da olduğunda varsayılan değerleri atamak için uygun bir yol sağlar hükümsüz veya Tanımsız. Sol taraftaki işlenen ise sağ taraftaki işleneni döndürür hükümsüz veya Tanımsız.

Aşağıdaki örneği göz önünde bulundurun:

sabit kullanıcı adı = hükümsüz;
sabit displayName = kullanıcı adı?? "Misafir";
konsol.log (görünenAdı); // Çıktı: "Misafir"

Bu örnekte, değişken olduğundan Kullanıcı adı dır-dir hükümsüz, boş birleştirme işleci varsayılan değeri atar Misafir değişkene ekran adı.

4. Kısa Devre Değerlendirmesi

Kısa devre değerlendirmesi, aşağıdakiler gibi mantıksal işleçler kullanarak kısa koşullu ifadeler yazmanıza olanak tanır: && Ve ||. Mantıksal bir operatörün, sonucu belirleyebildiği anda ifadeleri değerlendirmeyi bırakacağı gerçeğinden yararlanır.

Aşağıdaki örneği göz önünde bulundurun:

sabit isim = "John";
sabit tebrik = isim && Merhaba, ${isim}`;
konsol.log (selamlama); // Çıktı: "Merhaba John"

Bu örnek yalnızca ifadeyi değerlendirecek "Merhaba, ${name}" eğer değişken isim doğruluk değeri vardır. Aksi takdirde kısa devre yapar ve değerini atar. isim kendisi değişkene selamlama.

5. Nesne Özellik Atama Kısayolu

Nesneleri oluştururken, değişkenleri aynı ada sahip özellikler olarak atayan bir kestirme notasyon kullanma seçeneğiniz vardır.

Bu kestirme notasyon, hem özellik adını hem de değişken adını gereksiz yere belirtme ihtiyacını ortadan kaldırarak daha temiz ve daha özlü bir kod sağlar.

Aşağıdaki örneği göz önünde bulundurun:

sabit ilkAdı = "John";
sabit soyadı = "doe";
sabit kişi = { ad, soyad };
konsol.log (kişi); // Çıktı: { firstName: "John", lastName: "Doe" }

Bu örnek özellikleri atar ilk adı Ve soy isim steno gösterimi kullanarak.

6. Opsiyonel Zincirleme

İsteğe bağlı zincirleme (?.) ara boş veya tanımsız değerler hakkında endişelenmeden bir nesnenin iç içe geçmiş özelliklerine erişmenizi sağlar. Zincirdeki bir özellik null veya undefined ise, ifade kısa devre yapar ve undefined değerini döndürür.

Aşağıdaki örneği göz önünde bulundurun:

sabit kullanıcı = { isim: "Alice", adres: { şehir: "New York", ülke: "AMERİKA BİRLEŞİK DEVLETLERİ" }};
sabit ülke = kullanici.adresi?.ülke;
konsol.log (ülke); // Çıktı: "ABD"

Yukarıdaki örnekte, isteğe bağlı zincirleme işleci, şu durumlarda kodun bir hata vermemesini sağlar: adres mülkiyet veya ülke özellik eksik.

7. Nesne Yıkımı

nesne yıkımı JavaScript ve TypeScript'te, nesnelerden özellikleri ayıklamanıza ve kısa bir sözdizimi kullanarak bunları değişkenlere atamanıza izin veren güçlü bir özelliktir.

Bu yaklaşım, nesne özelliklerine erişme ve bunları değiştirme sürecini basitleştirir. Bir örnekle nesne yıkımının nasıl çalıştığına daha yakından bakalım:

sabit kullanıcı = { isim: "John", yaş: 30 };
sabit { isim, yaş } = kullanıcı;
konsol.log (isim, yaş); // Çıktı: "John" 30

Bu örnek, değişkenleri ayıklar isim Ve yaş dan kullanıcı nesne yıkımı yoluyla nesne.

8. Yayılma Operatörü

yayılma operatörü (...), bir dizi veya nesne gibi yinelenebilir öğeleri tek tek öğelere genişletmenizi sağlar. Dizileri birleştirmek veya sığ kopyalarını oluşturmak için kullanışlıdır.

Aşağıdaki örneği göz önünde bulundurun:

sabit sayılar = [1, 2, 3];
sabit yeniSayılar = [...sayılar, 4, 5];
konsol.log (yeniSayılar); // Çıktı: [1, 2, 3, 4, 5]

Yukarıdaki örnekte, yayılma operatörü sayılar diziyi, daha sonra bunlarla birleştirilen ayrı öğelere ayırın 4 Ve 5 yeni bir dizi oluşturmak için, yeniNumaralar.

9. Nesne Döngüsü Kısaltması

Nesneler üzerinde yineleme yaparken, için...içinde nesne özelliklerini uygun bir şekilde yinelemek için nesne yok etme ile birlikte döngü.

Bu örneği göz önünde bulundurun:

sabit kullanıcı = { isim: "John", yaş: 30 };
için (sabit [anahtar, değer] ile ilgiliNesne.girişler (kullanıcı)) { 
konsol.kayıt(`${anahtar}: ${değer}`);
}
// Çıktı:
// isim: Can
// yaş: 30

Yukarıdaki örnekte, Object.entries (kullanıcı) her yinelemenin daha sonra değişkenlere dönüştürdüğü bir anahtar-değer çiftleri dizisi döndürür anahtar Ve değer.

10. Bitsel İşleci Kullanan Array.indexOf Shorthand

Çağrıları şuraya değiştirebilirsiniz: Dizi.indexOf bitsel işleci kullanan bir steno yöntemi ~ bir dizide bir öğe olup olmadığını kontrol etmek için. Kısa yol, bulunursa öğenin dizinini döndürür veya -1 eğer bulunamadıysa

Aşağıdaki örneği göz önünde bulundurun:

sabit sayılar = [1, 2, 3];
sabit dizin = ~sayılar.indexOf(2);
konsol.log (dizin); // Çıktı: -2

Yukarıdaki örnekte, ~numbers.indexOf (2) İadeler -2 Çünkü 2 indekste 1, ve bitsel işleç dizini olumsuzlar.

11. Değerleri Birlikte Boole'a Çevirmek!!

İle açıkça bir değeri dönüştürmek bir boole için, çift olumsuzlama işlecini kullanabilirsiniz (!!). Doğru bir değeri etkili bir şekilde şuna dönüştürür: doğru ve sahte bir değer YANLIŞ.

Aşağıdaki örneği göz önünde bulundurun:

sabit değer1 = "Merhaba";
sabit değer2 = "";
konsol.log(!!değer1); // Çıktı: doğru
konsol.log(!!değer2); // Çıktı: yanlış

Yukarıdaki örnekte, !!değer1 İadeler doğru çünkü dize Merhaba doğru iken, !!değer2 İadeler YANLIŞ çünkü boş dize yanlıştır.

Kod Verimliliği ve Okunabilirliği Ortaya Çıkarma

Bu kısayolları JavaScript ve TypeScript'te kullanarak kodlama verimliliğinizi artırabilir ve daha kısa ve okunabilir kodlar üretebilirsiniz. Üçlü operatör, kısa devre değerlendirmesi veya şablon sabit değerlerinin gücünden yararlanılması fark etmeksizin, bu stenolar verimli kodlama için değerli araçlar sağlar.

Ek olarak, nesne özelliği atama kısayolu, isteğe bağlı zincirleme ve nesneyi yok etme forma operatörü ve dizi kısaltmaları verimli dizi sağlarken, nesnelerle çalışmayı basitleştirir manipülasyon. Bu kısayollarda uzmanlaşmak sizi daha üretken ve etkili bir JavaScript ve TypeScript geliştiricisi yapacaktır.