Çeşitli JavaScript ipuçlarını ve sözdizimi kısayollarını kullanan bu işlevler, birçok yaygın sorunu çözmenize yardımcı olacaktır.

JavaScript, modern web ve mobil uygulamalar oluşturmak için fiili dildir. Basit web sitelerinden dinamik, etkileşimli uygulamalara kadar çok çeşitli projelere güç verir.

Kullanıcıların seveceği ve takdir edeceği ürünler oluşturmak için yalnızca işlevsel değil aynı zamanda verimli ve bakımı kolay kodlar yazmanız çok önemlidir. Temiz JavaScript kodu, ister bir hobi yan projesi ister karmaşık bir ticari uygulama olsun, herhangi bir web veya mobil uygulamanın başarısı için hayati önem taşır.

JavaScript İşlevlerinin Nesi Bu Kadar İyi?

Bir işlev, herhangi bir uygulamada kod yazmak için gerekli bir bileşendir. Belirli bir görevi gerçekleştirmek için çağırabileceğiniz bir yeniden kullanılabilir kod yığını tanımlar.

Yeniden kullanılabilirliklerinin ötesinde, işlevler oldukça çok yönlüdür. Uzun vadede, bir kod tabanını ölçeklendirme ve sürdürme sürecini basitleştirirler. İle

instagram viewer
JavaScript'in işlevlerini oluşturma ve kullanma, geliştirme süresinden çok tasarruf edebilirsiniz.

Burada, projenizin kodunun kalitesini önemli ölçüde artırabilecek bazı yararlı JavaScript işlevleri verilmiştir.

1. bir kere

Bu üst düzey bir kez işlev, yalnızca tek bir kez çağırabilmenizi sağlamak için başka bir işlevi sarar. Ortaya çıkan işlevi çağırmak için sonraki girişimleri sessizce yok saymalıdır.

Bir veritabanından veri almak için HTTP API istekleri yapmak istediğiniz bir durumu düşünün. ekleyebilirsiniz bir kere için bir geri arama işlevi görür bir olay dinleyici işlevi, böylece bir kez tetiklenir ve artık tetiklenmez.

Böyle bir işlevi şu şekilde tanımlayabilirsiniz:

sabit bir kez = (işlev) => {
izin vermek sonuç;
izin vermek funcCalled = YANLIŞ;
geri dönmek(... argo) => {
eğer (!funcCalled) {
 sonuç = işlev(...args);
 funcCalled = doğru;
 }
geri dönmek sonuç;
 };
};

once işlevi, bir işlevi bağımsız değişken olarak alır ve yalnızca bir kez çağırabileceğiniz yeni bir işlev döndürür. Yeni işlevi ilk kez çağırdığınızda, orijinal işlevi verilen argümanlarla çalıştırır ve sonucu kaydeder.

Yeni işleve yapılan sonraki çağrılar, orijinal işlevi tekrar çalıştırmadan kaydedilen sonucu döndürür. Aşağıdaki uygulamaya bir göz atın:

// DB'den veri almak için bir işlev tanımlayın
işlevgetUserData() {
// ...
}
// getUserData işlevinin yalnızca bir kez çalışabilen bir sürümünü alın
sabit makeHTTPRequestOnlyOnce = bir kez (getUserData);
sabit userDataBtn = belge.querySelector("#btn");
userDataBtn.addEventListener("tıklamak", makeHTTPRequestOnlyOnce);

Once işlevini kullanarak, kullanıcı düğmeyi birkaç kez tıklasa bile kodun yalnızca bir istek göndermesini garanti edebilirsiniz. Bu, gereksiz isteklerden kaynaklanabilecek performans sorunlarını ve hataları önler.

2. boru

Bu boru işlevi, birden çok işlevi bir sırayla zincirlemenize olanak tanır. Dizideki işlevler, önceki işlevin sonucunu girdi olarak alacak ve dizideki son işlev nihai sonucu hesaplayacaktır.

İşte koddaki bir örnek:

// boru işlevini tanımlayın
sabit boru = (...işlevler) => {
geri dönmek(argüman) => {
 funcs.forEach(işlev(işlev) {
 arg = işlev (arg);
 });
geri dönmek tartışma;
 }
}


// Bazı işlevleri tanımlayın
sabit Bir ekle = (A) => bir + 1;
sabit çift ​​= (X) => X * 2;
sabit kare = (X) => x * x;


// fonksiyonlarla bir kanal oluştur
sabit myPipe = boru (addOne, double, square);
// Boruyu bir giriş değeriyle test edin
konsol.log (benim Borum(2)); // Çıktı: 36

Pipe işlevleri, karmaşık işleme mantığını kısaca yazmanıza izin vererek kodun okunabilirliğini ve modülerliğini iyileştirebilir. Bu, kodunuzu daha anlaşılır ve bakımı daha kolay hale getirebilir.

3. harita

map işlevi, yerleşik JavaScript Array sınıfının bir yöntemidir. Orijinal dizinin her öğesine bir geri arama işlevi uygulayarak yeni bir dizi oluşturur.

Girdi dizisindeki her bir öğenin içinden geçer, onu geri arama işlevine girdi olarak iletir ve her sonucu yeni bir diziye ekler.

Unutulmaması gereken önemli nokta, orijinal dizinin bu süreç boyunca hiçbir şekilde değiştirilmediğidir.

İşte nasıl kullanılacağına dair bir örnek harita:

sabit sayılar = [1, 2, 3, 4, 5];
sabit doubledNumbers = sayılar.map(işlev(sayı) {
geri dönmek sayı * 2;
});
konsol.log (çift Sayı);
// Çıktı: [2, 4, 6, 8, 10]

Bu örnekte, harita işlevi, sayılar dizisindeki her öğe üzerinde yinelenir. Her elemanı 2 ile çarpar ve sonuçları yeni bir dizide döndürür.

Genel olarak, harita işlevleri, JavaScript'te döngüler kullanma, özellikle sonsuz olanlar—sonsuz döngüler, bir uygulamada performans sorunlarına yol açan önemli hesaplama yüküne neden olabilir. Bu, kod tabanını daha kısa ve daha az hataya açık hale getirir.

4. seçmek

Bu seçme işlevi, mevcut bir nesneden belirli özellikleri seçerek ayıklamanıza ve hesaplamanın sonucu olarak bu özelliklerle yeni bir nesne oluşturmanıza olanak tanır.

Örneğin, bir uygulamadaki bir rapor özelliğini düşünün, toplama işlevini kullanarak zahmetsizce özelleştirebilirsiniz. çeşitli raporlara dahil etmek istediğiniz özellikleri açıkça belirterek, istenen kullanıcı bilgilerine dayalı farklı raporlar raporlar.

İşte koddaki bir örnek:

sabit seçmek = (nesne, ...tuşlar) => {
geri dönmek tuşlar.azalt((sonuç, anahtar) => {
eğer (object.hasOwnProperty (anahtar)) {
 sonuç[anahtar] = nesne[anahtar];
 }
geri dönmek sonuç;
 }, {});
};

Pick işlevi, bir nesneyi ve herhangi bir sayıda anahtarı bağımsız değişken olarak alır. Tuşlar, seçmek istediğiniz özellikleri temsil eder. Ardından, yalnızca eşleşen anahtarlara sahip orijinal nesnenin özelliklerini içeren yeni bir nesne döndürür.

sabit kullanıcı = {
 isim: 'Martin',
 yaş: 30,
 e-posta: "[email protected]",
};
konsol.log (seç (kullanıcı, 'isim', 'yaş'));
// Çıktı: { ad: 'Martin', yaş: 30 }

Temel olarak, bir seçme işlevi, karmaşık filtreleme mantığını tek bir işlevde toplayarak kodun anlaşılmasını ve hata ayıklamasını kolaylaştırır.

Ayrıca, kod tekrarını azaltarak kod tabanınız boyunca toplama işlevini yeniden kullanabileceğiniz için kodun yeniden kullanılabilirliğini de geliştirebilir.

5. zip

Bu zip işlevi, dizileri tek bir demet dizisinde birleştirir ve her giriş dizisindeki karşılık gelen öğeleri eşleştirir.

İşte bir zip işlevinin örnek bir uygulaması:

işlevzip(...diziler) {
sabit maksimum Uzunluk = Matematik.min(...diziler.map(sıralamak => dizi.uzunluk));
geri dönmekSıralamak.itibaren(
 { uzunluk: maksimum uzunluk },
 (_, dizin) => diziler.map(sıralamak => dizi[dizin])
 );
};


sabit bir = [1, 2, 3];
sabit b = ['A', 'B', 'C'];
sabit c = [doğru, YANLIŞ, doğru];
konsol.log (zip (a, b, c));
// Çıktı: [[1, 'a', doğru], [2, 'b', yanlış], [3, 'c', doğru]]

Zip işlevi giriş dizilerini kabul eder ve en uzun uzunluklarını hesaplar. Array.from JavaScript yöntemini kullanarak tek bir dizi oluşturur ve döndürür. Bu yeni dizi, her giriş dizisinden öğeler içerir.

Bu, özellikle birden çok kaynaktan gelen verileri anında birleştirmeniz gerektiğinde kullanışlıdır ve normalde kod tabanınızı karıştıracak gereksiz kod yazma gereksinimini ortadan kaldırır.

Kodunuzdaki JavaScript İşlevleriyle Çalışma

JavaScript işlevleri, hem küçük hem de büyük kod tabanları için birçok programlama mantığını işlemek için basitleştirilmiş ve derli toplu bir yol sağlayarak kodunuzun kalitesini büyük ölçüde artırır. Bu işlevleri anlayarak ve kullanarak daha verimli, okunabilir ve bakım yapılabilir uygulamalar yazabilirsiniz.

İyi kod yazmak, yalnızca son kullanıcılar için belirli bir sorunu çözmekle kalmayan, aynı zamanda bunu değiştirmesi kolay bir şekilde yapan ürünler oluşturmayı da mümkün kılar.