JavaScript Arrow İşlevleri Sizi Daha İyi Bir Geliştirici Yapabilir

İlan

JavaScript ES6, web geliştirme dünyasına heyecan verici değişiklikler getirdi. JavaScript diline yapılan yeni eklemeler yeni olasılıklar getirdi.

Daha popüler değişikliklerden biri, JavaScript'e ok işlevlerinin eklenmesi idi. Ok işlevleri, JavaScript işlev ifadeleri yazmanın yeni bir yoludur ve uygulamanızda işlev oluşturmanın iki farklı yolunu sunar.

Geleneksel JavaScript işlevlerinde uzmansanız, ok işlevlerinin ayarlanması biraz zaman alabilir. Bunların ne olduğuna, nasıl çalıştıklarına ve size nasıl fayda sağladıklarına bir göz atalım.

JavaScript Ok İşlevleri Nelerdir?

Ok işlevleri, yeni işlev ifadeleri yazmanın yeni bir yoludur. JavaScript ES6 sürümüne dahildir ES6 Nedir ve Javascript Programcılarının Bilmesi GerekenlerES6, ECMA Script (Javascript) programlama dilinin 6. sürümünü ifade eder. Şimdi ES6'nın JavaScript'e getirdiği bazı önemli değişikliklere bakalım. Daha fazla oku . Biraz farklı kurallarla kullandığınız JavaScript işlev ifadelerine benzerler.

Ok işlevleri her zaman anonim işlevlerdir, farklı kurallara sahiptir.

buve geleneksel işlevlerden daha basit bir sözdizimine sahiptir.

Bu işlevler yeni bir ok belirteci kullanır:

=>

Python'da daha önce çalıştıysanız, bu işlevler çok benzer Python Lambda ifadeleri Yeni Başlayanlar İçin Python Lambda İşlevlerini Anlama KılavuzuPython'daki Lambdas, bilinmesi gereken en yararlı, önemli ve ilginç özelliklerden biridir. Bunları nasıl kullanacağınız ve neden faydalı oldukları aşağıda açıklanmıştır. Daha fazla oku .

Bu işlevlerin sözdizimi, normal işlevlerden biraz daha temizdir. Unutmamanız gereken birkaç yeni kural vardır:

• Function anahtar sözcüğü kaldırıldı
• Dönüş anahtar kelimesi isteğe bağlıdır
• Kıvırcık parantez isteğe bağlıdır

Devam etmek için çok sayıda küçük değişiklik var, bu yüzden işlev ifadelerinin temel bir karşılaştırmasıyla başlayalım.

Ok İşlevlerini Kullanma

Ok fonksiyonlarının kullanımı kolaydır. Ok işlevlerini anlamak, geleneksel işlev ifadeleriyle yan yana karşılaştırıldığında daha kolaydır.

İşte iki sayı ekleyen bir işlev ifadesi; önce geleneksel işlev yöntemini kullanarak:

 let addnum = işlev (num1, num2) {dönüş num1 + num2; }; eklenti (1,2); >>3

İki argüman alan ve toplamı döndüren oldukça basit bir işlevdir.

İfade bir ok işlevine değiştirildi:

let addnum = (num1, num2) => {dönüş num1 + num2;}; eklenti (1,2); >>3

İşlev sözdizimi bir ok işlevi kullanılarak oldukça farklıdır. Function anahtar sözcüğü kaldırılır; ok simgesi JavaScript'e bir işlev yazdığınızı bildirir.

Kıvırcık parantezler ve return anahtar kelimesi hala orada. Bunlar ok fonksiyonları ile opsiyoneldir. İşte aynı işlevin daha basit bir örneği:

eklenti = (num1, num2) => num1 + num2 olsun;

Dönüş anahtar kelimesi ve süslü parantezler artık yok. Geriye kalan, orijinal işlev olarak kodun neredeyse yarısı olan çok temiz bir tek satırlık işlevdir. Daha az yazılı kodla aynı sonucu elde edersiniz.

Ok işlevlerinden daha fazlası var. daha derine dalalım, böylece yapabilecekleri konusunda daha iyi bir his elde edersiniz.

Ok İşlev Özellikleri

Ok işlevlerinin birçok farklı kullanımı ve özelliği vardır.

Düzenli İşlevler

Ok işlevleri bir veya daha fazla bağımsız değişken kullanabilir. İki veya daha fazla bağımsız değişken kullanıyorsanız, bunları parantez içine almanız gerekir. Yalnızca bir argümanınız varsa parantez kullanmanıza gerek yoktur.

kare = x => x * x kare (2) olsun; >>4

Ok fonksiyonları argüman olmadan kullanılabilir. İşlevinizde herhangi bir bağımsız değişken kullanmıyorsanız, boş parantez kullanmanız gerekir.

let helloFunction = () => Console.log ("Merhaba okuyucu!"); helloFunction (); >> Merhaba okuyucu!

Bu gibi basit işlevler çok daha az kod kullanır. Bir kompleksin ne kadar kolay olduğunu hayal edin JavaScript slayt gösterisi gibi projelendirme 3 Kolay Adımda JavaScript Slayt Gösterisi OluşturmaBugün size nasıl sıfırdan bir Javacript slayt gösterisi oluşturacağınızı göstereceğim - hemen içeri girelim! Daha fazla oku fonksiyonları yazmanın daha basit bir yoluna sahip olduğunuzda olur.

Bunu kullanarak

Kavramı bu JavaScript kullanmanın en zor kısmı olma eğilimindedir. Ok fonksiyonları yapmak bu kullanımı daha kolay.

Ok işlevlerini kullandığınızda bu çevreleme işlevi tarafından tanımlanır. Bu, iç içe geçmiş işlevler ve gereksinimler oluşturduğunuzda ortaya çıkan sorunlar oluşturabilir bu ana işlevinize uygulamak için

Aşağıda, normal işlevlerle kullanmanız gereken geçici çözümü gösteren popüler bir örnek verilmiştir.

işlev Person () {var that = this; // 'this' öğesini yeni bir değişkene atamanız gerekir. That.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Değerini atama bu değişkeni ana işlevinizin içindeki bir işlevi çağırdığınızda okunabilir hale getirir. Bu dağınık, ok işlevlerini kullanarak bunu yapmanın daha iyi bir yolu var.

işlev Person () {this.age = 0; setInterval (() => {this.age ++; // Artık yeni bir değişken bildirilmeden 'this' kullanabilirsiniz}, 1000); }

İşlevler için mükemmel olsalar da, bir nesnenin içinde yöntem oluşturmak için kullanılmamalıdırlar. Ok işlevleri için doğru kapsamı kullanmaz bu.

İşte içinde bir ok işlevi kullanarak yöntem oluşturan basit bir nesne. Yöntem, soslar çağrıldığında bir değişkendir. Bunun yerine, hiç çalışmıyor.

hadi pizza = { Topingler: 5, removeToppings: () => {this.toppings--; } } // 5 soslu bir pizza nesnesi. > Pizza. >> {Topingler: 5, removeToppings: f} pizza.removeToppings (); // Yöntem nesneye hiçbir şey yapmaz> pizza. >> {Topingler: 5, removeToppings: f} // Hala 5 Toping'e sahip.

Dizilerle Çalışma

Ok işlevlerini kullanarak dizi yöntemleriyle çalışmak için kullanılan kodu basitleştirebilirsiniz. Diziler ve dizi yöntemleri JavaScript'in çok önemli parçalarıdır Bugün Ustalaşmanız Gereken 5 JavaScript Dizi YöntemiJavaScript dizilerini anlamak istiyor ancak bunlarla başa çıkamıyor musunuz? Yardım için JavaScript dizisi örneklerimize bakın. Daha fazla oku böylece onları çok kullanacaksınız.

Gibi bazı yararlı yöntemler vardır map dizinin tüm öğelerinde bir işlev çalıştıran ve yeni diziyi döndüren yöntem.

myArray = [1,2,3,4]; myArray.map (function (element) { dönüş elemanı + 1; }); >> [2,3,4,5]

Bu, dizideki her değere bir tane ekleyen oldukça basit bir işlevdir. Aynı işlevi daha az kodla bir ok işlevi kullanarak yazabilirsiniz.

myArray = [1,2,3,4]; myArray.map (element => { dönüş elemanı + 1; }); >> [2,3,4,5]

Şimdi okumak çok daha kolay.

Nesne Değişmezleri Oluşturma

Ok işlevleri, JavaScript'te nesne değişmez değerleri oluşturmak için kullanılabilir. Düzenli işlevler bunları oluşturabilir, ancak biraz daha uzundur.

let createObject = işlev createName (ilk, son) {return {ilk: ilk, son: son}; };

Aynı nesneyi daha az kod kullanarak bir ok işleviyle yapabilirsiniz. Ok gösterimini kullanarak işlev gövdesini parantez içine almanız gerekir. İşte ok işlevleriyle geliştirilmiş sözdizimi.

let createArrowObject = (ilk, son) => ({ilk: ilk, son: son});

JavaScript Ok İşlevleri ve Ötesi

Artık JavaScript ok işlevlerinin bir geliştirici olarak hayatınızı kolaylaştıracak bazı farklı yollarını biliyorsunuz. Sözdizimini kısaltır, size daha fazla kontrol sağlar bu, nesneleri oluşturmayı kolaylaştırın ve dizi yöntemleriyle çalışmanın yeni bir yolunu sunun.

JavaScript ES6'da ok işlevlerinin ve diğer birçok özelliğin tanıtımı, JavaScript'in web geliştirmede ne kadar önemli olduğunu gösterir. Yine de yapabileceğiniz çok daha fazla şey var.

JavaScript hakkında daha fazla bilgi edinmek ister misiniz? bizim JavaScript hile sayfası Ultimate JavaScript Hile SayfasıBu hile sayfasıyla JavaScript öğelerinde hızlı bir şekilde bilgi edinin. Daha fazla oku değerli bilgiler sağlar ve hakkında daha fazla bilgi edinir JavaScript nasıl çalışır JavaScript Nedir ve Nasıl Çalışır?Web geliştirmeyi öğreniyorsanız, JavaScript ve HTML ve CSS ile nasıl çalıştığı hakkında bilmeniz gerekenler şunlardır. Daha fazla oku sizi daha iyi bir geliştirici yapabilir.