Javascript’de Linq

Selamlar;

Bugün benim de C# CodeBehind’da aşağıdaki sıralama örneğinde de görüldüğü gibi bolca kullandığım  Linq’i front tarafta yani javascript’de nasıl kullanabileceğimizi tartışacağız.

Javascript’de Linq kullanabileceğimiz aşağıda sıralanmış olan bir çok kütüphane bulunmaktadır. Ben bugün “linq.js” kütüpahanesini kullanarak size ilgili örnekleri yapacağım.

1. linq.js – LINQ for JavaScript

2. LINQ to JavaScript (JSLINQ)

3. JLinq

4. Reactive Extensions for Javascript (RxJS)

5. $Linq

Öncelikle ilgili Linq.js javascript kütüpahanesini ya https://linqjs.codeplex.com/ ‘dan ya da nuget’den aşağıda görülen paket indirilerek projeye eklenmelidir. linq.js yaklaşık 90 method içeren Intellisense destekli ve 2 versiyonu olan bir kütüpahanedir. Birinci versiyonu javascript için (linq.js) diğeri JQuery için(JQuery.linq.js) dir.

linqPack

Örnek 1-) Max, Min, Ortalama Ve Sıralama: Öncelikle aşağıda görüldüğü gibi Link.min.js projeye eklenmiştir. Daha sonra grades değişkenine Array[] tipinde bir sayı dizisi atanmıştır. İlgili sayı dizisinin ortalaması “average()” methodu ile bulunur. “Enumerable” Linq.js altındaki tüm methodlara erişilen bir başlangıç noktasıdır. Enumerable.from(grades) ile alınacak dizi belirlenmiş ve daha sonra average() ile ortalama bulunmuştur.  “min()” ile grades dizisindeki en küçük değer “max()” ile en büyük değer bulunmuştur. Diziyi sıralama işi “orderBy()” ile yapılmaktadır. Ama burada işler biraz daha değişiktir. CodeBehind’da kullandığımız lambda “=>” işlemini burada function yani orderBy(function(x) {return x}) almaktadır. Sonunda da “toArray()” ile array diziye çevrilmektedir.

Ekran Çıktısı:

ortalama2

Örnek 2-) Sayfalama, Atlayıp Belli Sayıda Değer Çekme: Aşağıdaki örnekde görüldüğü gibi arr[] dizisine 1’den 1000’e kadar bir sayı dizisi atılmıştır. Daha sonra “skip(500)” ile ilk 500 değer atlanmış ve “take(10)” ile sonraki 10 değer alınmıştır. Böylece örneğin bir sayfada 10 kayıdın gösterildiği 100 sayfalık bir yapıda 51. sayfa aşağıdaki gibi gösterilmiştir.

Ekran Çıktısı:

page

Örnek 3-) 2 Diziyi Birleştirme: Farklı servislerden alınan dataların tek bir sonuç olarak user’a gösterilmesi gerekebilir. İşte bu durum için aşağıdaki gibi 2 farklı array’i birleştiren bir örnek yapılmıştır. “concat(arr2)” iki dizi birleştiren bir function’dır.

Ekran Çıktısı:

combine

Örnek 4-) Eğer Kayıt Yok İse Default Değer Döndürme: Eğer çekilen linq sorgusunda istenen koşul sağlanmaz ise belirlenen bir değerin dönülmesi “defaultIfEmpty()” methodu ile yapılmaktadır. Örneğin aşağıda 1’den 5’e kadar sıralı bir dizide değeri 5’den büyükler alınmaya çalışıldığında hiçbir değer gelmeyeceğinden “defaultIfEmpty(5)” ile ayarlanmış 5 default değeri geri döndürülmektedir.

Örnek 5-) Bir Json Data İçinde Filitre Yapıp İstenen Koşullarda Listeleme: Aşağıdaki örnekte görüldüğü gibi  “user” sınıf listesi jsonArray’a atanmıştır. User class’ın “id”,”screen_name” ve “text” propertyleri bulunmaktadır. Belirlenen user listesi içinde Linq ile “id” değeri >45’den büyük olanlar “screen_name”‘e göre sıralanıp “screen_name : text” değerleri ekrana basılmıştır.

Ekran Çıktısı:

select

Örnek 6-): Distinct, Union, Intersect, Except: Aşağıdaki örnekte “distinct()” ile “arr” dizisindeki tekrarlayan elemanların çıkarılmış hali ile bir liste alınır. Yani uniq bir liste oluşturulur. “union()” ile “arr” ve “arr2” dizilerindeki elamanların tekil bileşkesi bulunur. “intersect()” ile “arr” ve “arr2” dizilerindeki ortak eleman kümesi alınır. Yani her ikisinde de bulunan elemanların listesi alınır. “except()” ile “arr” dizisinin “arr2″‘den farkı bulunur. Yani “arr” dizisinde olup “arr2″‘de olmayan eleman kümesi alınır.

Distinct

Örnek 7-): GroupBy : Aşağıdaki örnekde sepette bulunan ürünlerin fiyatları ürün gruplarına göre toplanarak ekrana basılmıştır.

Ekran Çıktısı:

GROUP

Örnek 8-): Range , Where ve Select : Aşağıdaki örnekde 1-30 arası 5 ile bölüne bilen sayılar ekrana 10 ile çarpılarak yazdırılmıştır.

Ekran Çıktısı:

result

Örnek 9-) Dictionary: Aşağıdaki örnekde dictionary bir nesneye alışveriş listesi eklenmiş sonrada tüm liste sıralanarak ekrana basılmıştır.

Ekran Çıktısı:

Dict

Örnek 10-) Join ve ForEach: Aşağıdaki örnekde de görüldüğü gibi “arr1“‘in “Name” kolonu ile “arr2“‘nin “Code” kolonu eşleşmektedir. Buna göre 2 dizi arasında bağ(join) ile Name,Val ve Code alanları forEach ile gezilerek ekrana basılmıştır.

Ekran Çıktısı:

Join

Görüldüğü gibi linq sadece server side tarafta değil client side tarafta da kolaylıkla kullanılabilmektedir. Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/LinqJavascriptBlog.rar

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. mehmet dedi ki:

    makale için teşekkürler mvc de custom filtre yaratma konusunu ele alırmısınız?

  2. Romario dedi ki:

    .NET programlarıyla uğraştığım 2006-2008 döneminde Devexpress’in ‘”Persistent Object” ini kullandığımı hatırlıyorum ve o da Linq’e benziyor.
    Linq .NET’i kullanmayı bıraktığım dönemde (2009) çıktığı için pek öğrenmedim, en çok bir MSDN makalesinde baktığımı hatırlıyorum ve bir çeşit ADO.NET gibi görünüyordu.

    Fakat yıllar sonra Linq ‘i gerçek manasıyla öğrendim ve bu makalede JavaScript vesileyle Linq’in oldukça kullanışlı birşey olduğu da gördüm.

    Tüm örnek kodlar hepsi güzel.

    var average = Enumerable.from(grades).average();

    daki Enumerable, JavaScriptteki Static Class uygulamasına bir örnek. JavaScript çeşitli eksikleri olduğu iddia edilen fakat bence her yola gelen bir dil. Nitekim Microsoft ta hakkını vererek uygulamasını yapmış. Sonuç olarak dil kullanımında unuttuğumuz bazı noktaları hatırlattığı için çok iyi bir makale olmuş, kolay gelsin

  3. Fatih dedi ki:

    Hocam bu yazınızı 1 yıl önce falan okumuştum ne zaman kullanırım diye hep düşünüyordum ve sonunda kullanılacak yer buldum :) Tüm projeyi json verileri ve jQuery widget ile yaptık ek olarak iu içinde devextreme kullandık. Sonuç olarak bu kütüphane cuk diye oturdu :) Örnekleriniz ise farklı kaynak araştırma ihtiyacı gideriyor çünkü en base ihtiyaçları karşıladı elinize sağık :)

    • borsoft dedi ki:

      Selam Fatih,

      İşine yaramasına çok sevindim. İşte bu yüzden makale mükemmel bir bilgi paylaşm aracı :)

      Hoşçakal…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir