JavaScript işlevlerinin ne kadar esnek olabileceğini ve bunları esnek, yeniden kullanılabilir kod oluşturmak için nasıl kullanabileceğinizi öğrenin.

JavaScript, çoğu modern tarayıcı tarafından desteklenen güçlü bir dildir ve yeni başlayanlar için harika bir seçimdir.

Tıpkı diğer birçok modern programlama dilinde olduğu gibi, JavaScript de bir kod bloğunu ayırmanıza ve onu başka bir yerde yeniden kullanmanıza izin veren işlevleri destekler. Ayrıca değişkenlere atama işlevleri kullanabilir ve bunları diğer değerler gibi parametre olarak iletebilirsiniz.

Yüksek Mertebeden Fonksiyonlar Nelerdir?

Üst düzey bir işlevin en basit tanımı, diğer işlevleri parametre olarak kabul ederek veya döndürerek onlar üzerinde işlem yapan bir işlevdir. Yüksek mertebeden fonksiyonlar yoğun olarak kullanılmaktadır. işlevsel programlama paradigması. Eğer sen JavaScript'e yeni başlıyorum, üst düzey işlevleri kavramak biraz zor olabilir.

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

işlevdönüştürmek(fn) {
izin vermek sonuç Dizisi = [];





instagram viewer



geri dönmekişlev (sıralamak) {
için (izin vermek ben = 0; i < dizi.uzunluk; ben++) {
 sonuçArray.push (fn (dizi[i]))
 }
geri dönmek sonuç dizisi
 }
}

Yukarıdaki kod bloğunda, dönüştürmek fonksiyon alan daha yüksek mertebeden bir fonksiyondur. fn parametre olarak işlev görür ve alan anonim bir işlev döndürür. sıralamak parametre olarak.

Amacının dönüştürmek işlevi, dizideki öğeleri değiştirmektir. İlk olarak, kod bir değişken tanımlar sonuç dizisi ve onu boş bir diziye bağlar.

bu dönüştürmek işlevi, içindeki her bir öğe arasında döngü oluşturan anonim bir işlev döndürür. sıralamak, ardından öğeyi şuna iletir: fn hesaplama için işlev ve sonucu içine iter sonuç dizisi. Döngü tamamlandıktan sonra, anonim işlev şunu döndürür: sonuç dizisi.

sabit işlev1 = dönüştür((X) => X * 2)
konsol.log (işlev1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Yukarıdaki kod bloğu, tarafından döndürülen anonim işlevi atar. dönüştürmek sabit değişkene fonksiyon fonksiyon1. fn ürününü iade eder X hangisinin yerine geçer dizi[i].

Kod ayrıca bir diziyi parametre olarak iletir. fonksiyon1 ve ardından sonucu konsola kaydeder. Bunu yazmanın daha kısa bir yolu şöyle olacaktır:

konsol.log (dönüştür((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript, temel olarak aynı şeyi yapan yerleşik bir üst düzey işleve sahiptir. dönüştürmek, daha sonra ele alacağız.

Umarım, JavaScript'teki üst düzey işlevlerin nasıl çalıştığını anlamaya başlamışsınızdır. Aşağıdaki fonksiyona bir göz atın ve ne yaptığını tahmin edip edemeyeceğinize bakın.

işlevfiltre ve dönüşüm(fn, arrayToBeFiltered, koşul) {
izin vermek filteredArray = [];
için (izin vermek ben = 0; i < diziToBeFilted.uzunluk; ben++) {
eğer (koşul (diziToBeFilted[i])) {
izin vermek y = transform (fn)([ diziToBeFilted[i] ])[0]
 filteredArray.push (y)
 } başka {
 filteredArray.push (diziToBeFiltered[i])
 }
 }
geri dönmek filtre dizisi
}

Bu kod bloğu, şüphelendiğiniz şeyi yapan bir işlevi tanımlar; dizideki belirli bir koşulu karşılayan öğeleri kontrol eder ve bunları dönüşüm() işlev. Bu işlevi kullanmak için şöyle bir şey yaparsınız:

filtreAndTransform((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => % x 20)

aksine dönüştürmek işlev, filtre ve dönüşüm function parametre olarak iki işlevi alır: fn Ve durum. bu durum işlev, parametrenin geçilip geçilmediğini, çift sayı olup olmadığını kontrol eder ve doğru döndürür. Aksi halde false döndürür.

Eğer durum true olarak çözümlenir (koşul karşılanır), ancak o zaman dönüştürmek fonksiyon denir. Bir dizi ile çalışıyorsanız ve belirli öğeleri dönüştürmek istiyorsanız, bu mantık kullanışlı olabilir. Bu kodu tarayıcı konsolunda çalıştırırsanız, aşağıdaki yanıtı almalısınız:

[ 1, 4, 3, 8, 5 ]

Fonksiyonun sadece belirli bir koşulu sağlayan öğeleri dönüştürdüğünü, koşulu karşılamayan öğeleri olduğu gibi bıraktığını görebilirsiniz.

JavaScript'te Array.map() Yüksek Dereceli İşlev

map() gibi dizi yöntemleri dizileri değiştirmeyi kolaylaştıran üst düzey işlevlerdir. İşte nasıl çalıştığı.

izin vermek dizi = [ 1, 2, 3, 4, 5 ];
izin vermek transformedArray = dizi.map((X) => X * 2);

oturum açtığınızda dönüştürülmüş dizi tarayıcı konsolunda, aynı sonucu almalısınız, dönüştürmek daha önce bahsedilen işlev:

[ 2, 4, 6, 8, 10 ]

dizi.harita() iki parametre alır, birinci parametre elemanın kendisine atıfta bulunurken, ikinci parametre elemanın indeksine (dizideki konumu) atıfta bulunur. Sadece dizi.harita() ile aynı sonuçları elde edebilirsiniz. filtre ve dönüşüm işlev. İşte bunu nasıl yapacağınız:

izin vermek dizi = [ 1, 2, 3, 4, 5 ];
izin vermek transformedArray = dizi.map((X) => X % 20? X * 2: X);

Yukarıdaki kod bloğunda işlev, geçerli öğenin ve öğe çift ise 2'nin çarpımını döndürür. Aksi takdirde, öğeye dokunulmadan geri döner.

Yerleşik ile harita işlevi, birkaç kod satırına olan ihtiyacı ortadan kaldırmayı başardınız, böylece çok daha temiz kod ve daha az hata oluşma şansı elde ettiniz.

JavaScript'te Array.filter() İşlevi

çağırdığınızda filtre bir dizideki yöntem, yönteme ilettiğiniz işlevin dönüş değerinin doğru veya yanlış olduğundan emin olun. bu filtre yöntemi, iletilen koşulu karşılayan öğeleri içeren bir dizi döndürür. İşte nasıl kullandığınız.

işlevcheckFirstLetter(kelime) {
izin vermek ünlüler = "aeiou"
eğer (sesli harfler.içerir(kelime[0].toLowerCase())) {
geri dönmek kelime;
 } başka {
geri dönmek;
 }
}
izin vermek kelimeler = [ "Merhaba", "itibaren", "", "çocuklar", "ile ilgili", "gezegen", "Toprak" ];
izin vermek sonuç = kelimeler.filtre((X) => checkFirstHarf (x))

Yukarıdaki kod bloğu, kelimeler ilk harfi sesli olan herhangi bir kelimeyi sıralar ve filtreler. Kodu çalıştırdığınızda ve günlüğe kaydettiğinizde sonuç değişken, aşağıdaki sonuçları almalısınız:

[ 'ile ilgili', 'Toprak' ];

JavaScript'te Array.reduce() İşlevi

bu azaltmak() üst düzey fonksiyon iki parametre alır. İlk parametre indirgeme fonksiyonudur. Bu indirgeme işlevi, iki değeri birleştirmek ve bu değeri döndürmekten sorumludur. İkinci parametre isteğe bağlıdır.

Fonksiyona iletilecek ilk değeri tanımlar. Bir dizideki tüm öğelerin toplamını döndürmek istiyorsanız, aşağıdakileri yapabilirsiniz:

izin vermek bir = [ 1, 2, 3, 4, 5];
izin vermek toplam = 0;
için (izin vermek ben = 0; i < a.uzunluk; ben++) {
 toplam = toplam + a[i];
}
konsol.log (toplam);

Kodu çalıştırırsanız, toplam 15 olmalıdır. ile farklı bir yaklaşım da benimseyebilirsiniz. azaltmak işlev.

izin vermek bir = [ 1, 2, 3, 4, 5 ];
toplam = a.azalt((c, n) => c+n);
konsol.log (toplam);

Yukarıdaki kod bloğu, önceki örneğe kıyasla çok daha temiz. Bu örnekte, indirgeme işlevi iki parametre alır: C Ve N. C geçerli öğeyi ifade ederken N dizideki bir sonraki öğeyi ifade eder.

Kod çalıştığında, indirgeme işlevi önceki adımdaki sonuca mevcut değeri eklediğinizden emin olarak diziden geçer.

Yüksek Mertebeden Fonksiyonların Gücü

JavaScript'teki işlevler güçlüdür, ancak üst düzey işlevler işleri bir sonraki seviyeye taşır. İşlevsel programlamada yaygın olarak kullanılırlar ve dizileri kolaylıkla filtrelemenize, küçültmenize ve eşlemenize olanak tanırlar.

Üst düzey işlevler, uygulama oluştururken daha modüler ve yeniden kullanılabilir kod yazmanıza yardımcı olabilir.