Javascript’de Linq

Yazar: borsoft · 29 Haziran 2015

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.

int[] numbers = new int[]{ 1, 9, 4, 6, 2, 9, 11, 31 };
int[] orderedNumbers = numbers.Order(i => i).ToArray();

1 2	int[] numbers = new int[]{ 1, 9, 4, 6, 2, 9, 11, 31 }; int[] orderedNumbers = numbers.Order(i => i).ToArray();

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.

Ö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.

<script src="~/Scripts/linq.min.js"></script>
<script>
var grades = [4.4, 8.2, 5.6, 7.8, 6.9, 5.0, 9.8, 10.0, 7.9];
                //Ortalama 
		var average = Enumerable.from(grades)
			  .average();
		console.log("Ortalama grade: " + average);

                //En Düşük         
		var lowestGrade = Enumerable.from(grades)
				  .min();
		console.log("En Düşük grade: " + lowestGrade);

		//En Yüksek
		var highestGrade = Enumerable.from(grades)
						  .max();
		console.log("En Yüksek grade: " + highestGrade);

                //Sıralı Dizi
		var orderList = Enumerable.from(grades).orderBy(function (x) { return x }).toArray();
		console.log("Sıralı Liste: "+orderList);
</script>

var grades = [4.4, 8.2, 5.6, 7.8, 6.9, 5.0, 9.8, 10.0, 7.9];

//Ortalama

var average = Enumerable.from(grades)

.average();

console.log("Ortalama grade: " + average);

//En Düşük

var lowestGrade = Enumerable.from(grades)

.min();

console.log("En Düşük grade: " + lowestGrade);

//En Yüksek

var highestGrade = Enumerable.from(grades)

.max();

console.log("En Yüksek grade: " + highestGrade);

//Sıralı Dizi

var orderList = Enumerable.from(grades).orderBy(function (x) { return x }).toArray();

console.log("Sıralı Liste: "+orderList);

</script>

Ekran Çıktısı:

Ö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.

var arr = [];
		for (var i = 0; i <= 1000; i++) {
			arr.push(i);
		}

		//1000 kayıt içinden 500 ile 510 arasını almak istiyoruz.
		var result =  Enumerable.from(arr)
					 .skip(500)
					 .take(10)
					 .toArray();
		console.log(result);

var arr = [];

for (var i = 0; i <= 1000; i++) {

arr.push(i);

}

//1000 kayıt içinden 500 ile 510 arasını almak istiyoruz.

var result = Enumerable.from(arr)

.skip(500)

.take(10)

.toArray();

console.log(result);

Ekran Çıktısı:

Ö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.

//2 tane dizimiz var.
		var arr1 = ["a", "b"];
		var arr2 = ["c", "d"];

		//Bu 2 diziyi birleştiriyoruz.
		var result = Enumerable.from(arr1)
					 .concat(arr2)
					 .toArray();
		console.log(result);

//2 tane dizimiz var.

var arr1 = ["a", "b"];

var arr2 = ["c", "d"];

//Bu 2 diziyi birleştiriyoruz.

var result = Enumerable.from(arr1)

.concat(arr2)

.toArray();

console.log(result);

Ekran Çıktısı:

Ö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.

var arr = [1, 2, 3, 4, 5];
		var res = Enumerable.from(arr).where(function (t) { return t > 5 }).defaultIfEmpty(5).toArray();  // [5]
		console.log(res);

var arr = [1, 2, 3, 4, 5];

var res = Enumerable.from(arr).where(function (t) { return t > 5 }).defaultIfEmpty(5).toArray(); // [5]

console.log(res);

Ö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.

var jsonArray = [
    { "user": { "id": 40, "screen_name": "d_linq" }, "text": "to objects" },
    { "user": { "id": 18, "screen_name": "c_playstation" }, "text": "sony" },
    { "user": { "id": 54, "screen_name": "b_spotify" }, "text": "why this kolaveri di" },
    { "user": { "id": 67, "screen_name": "a_xbox" }, "text": "gears of war" }
		]		
     var queryResult = Enumerable.from(jsonArray)
    .where(function (x) { return x.user.id > 45 })
    .orderBy(function (x) { return x.user.screen_name })
    .select(function (x) { return x.user.screen_name + ':' + x.text }).toArray();

console.log(queryResult);

var jsonArray = [

{ "user": { "id": 40, "screen_name": "d_linq" }, "text": "to objects" },

{ "user": { "id": 18, "screen_name": "c_playstation" }, "text": "sony" },

{ "user": { "id": 54, "screen_name": "b_spotify" }, "text": "why this kolaveri di" },

{ "user": { "id": 67, "screen_name": "a_xbox" }, "text": "gears of war" }

]

var queryResult = Enumerable.from(jsonArray)

.where(function (x) { return x.user.id > 45 })

.orderBy(function (x) { return x.user.screen_name })

.select(function (x) { return x.user.screen_name + ':' + x.text }).toArray();

console.log(queryResult);

Ekran Çıktısı:

Ö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.

var arr = [1, 2, 2, 3];
		var result1 = Enumerable.from(arr).distinct(function (x) { return x }).toArray();
		console.log("Distinct : "+result1)

		var arr2 = [2, 3, 4, 5, 5];
		var result2=Enumerable.from(arr).union(arr2).toArray();		
		console.log("Union : " + result2)

		var result3 = Enumerable.from(arr).intersect(arr2).toArray();
		console.log("Intersect : " + result3)

		var result4 = Enumerable.from(arr).except(arr2).toArray();
		console.log("Except : " + result4)

var arr = [1, 2, 2, 3];

var result1 = Enumerable.from(arr).distinct(function (x) { return x }).toArray();

console.log("Distinct : "+result1)

var arr2 = [2, 3, 4, 5, 5];

var result2=Enumerable.from(arr).union(arr2).toArray();

console.log("Union : " + result2)

var result3 = Enumerable.from(arr).intersect(arr2).toArray();

console.log("Intersect : " + result3)

var result4 = Enumerable.from(arr).except(arr2).toArray();

console.log("Except : " + result4)

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

var jsonArray = [
    { "basket": { "price": 125, "group": "Elektronic", "name": "GoPro" }},
    { "basket": { "price": 57, "group": "Accessory", "name": "Watch" } },
    { "basket": { "price": 65, "group": "Elektronic", "name": "Ipod" } },
    { "basket": { "price": 90, "group": "Toy", "name": "Lego" } }
		]

    var resultGroup = Enumerable.from(jsonArray).groupBy("$.basket.group", null,
    function (key, g) {
    	var result = {
    		name: key,
    		total: g.sum("$.basket.price")
    	}
    	return result;
    }).toArray();

    for (var i = 0; i < resultGroup.length; i++) {
        console.log("result = " + resultGroup[i].name + " - " + resultGroup[i].total+"TL");
    }

var jsonArray = [

{ "basket": { "price": 125, "group": "Elektronic", "name": "GoPro" }},

{ "basket": { "price": 57, "group": "Accessory", "name": "Watch" } },

{ "basket": { "price": 65, "group": "Elektronic", "name": "Ipod" } },

{ "basket": { "price": 90, "group": "Toy", "name": "Lego" } }

]

var resultGroup = Enumerable.from(jsonArray).groupBy("$.basket.group", null,

function (key, g) {

var result = {

name: key,

total: g.sum("$.basket.price")

}

return result;

}).toArray();

for (var i = 0; i < resultGroup.length; i++) {

console.log("result = " + resultGroup[i].name + " - " + resultGroup[i].total+"TL");

}

Ekran Çıktısı:

Ö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.

Enumerable.range(0, 30)
.where("$ % 5 == 0")
.select("value, index => {index:index, value:value * 10}")
.writeLine("$.index + ':' + $.value")

Enumerable.range(0, 30)

.where("$ % 5 == 0")

.select("value, index => {index:index, value:value * 10}")

.writeLine("$.index + ':' + $.value")

Ekran Çıktısı:

Ö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.

var dict = Enumerable.empty().toDictionary();		
		dict.add("elma", 5); dict.add("muz", 1); dict.add("Kıyma", 1); dict.add("Patates", 3); dict.add("Soğan", 2);				
		
		for (var key in dict.buckets) {
			console.log(key+": "+ dict.get(key)+'kg');
		}

var dict = Enumerable.empty().toDictionary();

dict.add("elma", 5); dict.add("muz", 1); dict.add("Kıyma", 1); dict.add("Patates", 3); dict.add("Soğan", 2);

for (var key in dict.buckets) {

console.log(key+": "+ dict.get(key)+'kg');

}

Ekran Çıktısı:

Ö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.

var arr1 = [{ Name: "A", Val: 1 }, { Name: "B", Val: 2 }, { Name: "C", Val: 3 }];

		var arr2 = [{ Code: "A" }, { Code: "B" }, { Name: "C", Code: "C" }];

		var res1 = Enumerable.from(arr1).join( arr2,
			function (t) { return t.Name },                                      // arr1 selector
			function (u) { return u.Code },                                      // arr2 selector
			function (t, u) { return { Name: t.Name, Val: t.Val, Code: u.Code } }).toArray();  // result selector		
		res1.forEach(function (item) { console.log("Name: "+ item.Name+ " Value:"+ item.Val+" Code: "+item.Code)});

var arr1 = [{ Name: "A", Val: 1 }, { Name: "B", Val: 2 }, { Name: "C", Val: 3 }];

var arr2 = [{ Code: "A" }, { Code: "B" }, { Name: "C", Code: "C" }];

var res1 = Enumerable.from(arr1).join( arr2,

function (t) { return t.Name }, // arr1 selector

function (u) { return u.Code }, // arr2 selector

function (t, u) { return { Name: t.Name, Val: t.Val, Code: u.Code } }).toArray(); // result selector

res1.forEach(function (item) { console.log("Name: "+ item.Name+ " Value:"+ item.Val+" Code: "+item.Code)});

Ekran Çıktısı:

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

Source: http://neue.cc/reference.htm

mehmet dedi ki:

30 Haziran 2015, 16:57

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

Cevapla
- borsoft dedi ki:
  
  4 Temmuz 2015, 00:27
  
  Selamlar Mehmet;
  
  Custom filter konusuna zaten önceden değinmiş güzel bir örnek ile açıklamıştım. İlgili makaleyi blogumdan aşağıdaki linkden erişebilirsin.
  http://www.borakasmer.com/intercepting-filter-pattern-ile-asp-net-mvc-controller-action/
  
  İyi çalışmalar.
  
  Cevapla
Romario dedi ki:

4 Temmuz 2015, 19:08

.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

Cevapla
- borsoft dedi ki:
  
  5 Temmuz 2015, 13:38
  
  Selam Romario;
  Güzel yorumların için çok teşekkür ederim.
  
  Cevapla
Fatih dedi ki:

2 Kasım 2016, 14:44

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 :)

Cevapla
- borsoft dedi ki:
  
  8 Kasım 2016, 20:07
  
  Selam Fatih,
  
  İşine yaramasına çok sevindim. İşte bu yüzden makale mükemmel bir bilgi paylaşm aracı :)
  
  Hoşçakal…
  
  Cevapla

Javascript’de Linq

1. linq.js – LINQ for JavaScript

2. LINQ to JavaScript (JSLINQ)

3. JLinq

4. Reactive Extensions for Javascript (RxJS)

5. $Linq

Bunlar da hoşunuza gidebilir...

6 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler

Javascript’de Linq

1. linq.js – LINQ for JavaScript

2. LINQ to JavaScript (JSLINQ)

3. JLinq

4. Reactive Extensions for Javascript (RxJS)

5. $Linq

Bunlar da hoşunuza gidebilir...

AngularJS Nedir?

Angular2’yi Mvc Üzerine Çalıştırma ve Routing, Http Service, Input, Output ve Custom Pipe

TypeScript’e Giriş

6 Cevaplar

Bir cevap yazın Cevabı iptal et

About

Son Yazılar

Kategoriler

Son Yorumlar

Arşivler