JavaScript Dizileri: Olu\u015fturma, \u0130ndeksleme ve Yayg\u0131n Metotlar<\/p>\n
JavaScript’te verileri etkili bir \u015fekilde y\u00f6netmek i\u00e7in olmazsa olmazlardan biri dizilerdir. Veri yap\u0131lar\u0131n\u0131n temelini olu\u015fturan diziler, ayn\u0131 veri tipindeki veya farkl\u0131 veri tiplerindeki \u00f6\u011feleri s\u0131ral\u0131 bir \u015fekilde saklaman\u0131za olanak tan\u0131r. Ancak, dizilerin g\u00fcc\u00fcn\u00fc tam anlam\u0131yla kavramak, sadece temel kullan\u0131m\u0131n\u0131 bilmekten \u00f6teye ge\u00e7meyi gerektirir. Bu makalede, JavaScript dizilerini s\u0131f\u0131rdan uzman seviyesine kadar ele alaca\u011f\u0131z, ger\u00e7ek d\u00fcnya senaryolar\u0131 ile zenginle\u015ftirece\u011fiz ve performans optimizasyonu gibi kritik konulara de\u011finece\u011fiz. JavaScript dizilerinin inceliklerini ke\u015ffetmeye haz\u0131r olun!<\/p>\n
JavaScript dizileri, s\u0131ral\u0131 bir veri koleksiyonudur. Her \u00f6\u011fe, dizinin i\u00e7indeki konumunu belirten bir indeks numaras\u0131yla tan\u0131mlan\u0131r. \u0130ndeksleme, 0’dan ba\u015flar; yani ilk \u00f6\u011fenin indeksi 0, ikincinin indeksi 1 ve b\u00f6yle devam eder. Diziler dinamiktir, yani olu\u015fturulduktan sonra \u00f6\u011fe ekleme ve silme i\u015flemlerini kolayca yapabilirsiniz. Bu esneklik, JavaScript’in programlama g\u00fcc\u00fcn\u00fcn \u00f6nemli bir par\u00e7as\u0131d\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131 listesi, \u00fcr\u00fcn katalogu veya bir oyun i\u00e7indeki karakterlerin konumlar\u0131n\u0131 saklamak i\u00e7in diziler kullan\u0131labilir. Ayr\u0131ca, farkl\u0131 veri tiplerini ayn\u0131 dizi i\u00e7erisinde tutabilirsiniz (\u00f6rne\u011fin, say\u0131lar, dizeler, nesneler). Bu esneklik, verileri yap\u0131land\u0131rman\u0131n \u00e7e\u015fitli yollar\u0131n\u0131 sunar.<\/p>\n
Bir dizi olu\u015fturman\u0131n birka\u00e7 yolu vard\u0131r. En yayg\u0131n y\u00f6ntem, k\u00f6\u015feli parantezler ( <\/code><\/p>\n Bunun yan\u0131 s\u0131ra, <\/code><\/p>\n Dizilerin en \u00f6nemli \u00f6zelliklerinden biri indeksleme yetene\u011fidir. Her bir \u00f6\u011fe, s\u0131ral\u0131 bir konumla (indeks) tan\u0131mlan\u0131r. \u0130ndeksleme 0'dan ba\u015flar ve dizinin son \u00f6\u011fesine kadar devam eder. \u00d6rne\u011fin, <\/code><\/p>\n \u0130ndeks de\u011feri dizinin s\u0131n\u0131rlar\u0131 d\u0131\u015f\u0131ndaysa (\u00f6rne\u011fin, negatif bir indeks veya dizinin uzunlu\u011fundan b\u00fcy\u00fck bir indeks), <\/code><\/p>\n JavaScript, diziler \u00fczerinde \u00e7e\u015fitli i\u015flemler ger\u00e7ekle\u015ftirmenizi sa\u011flayan bir\u00e7ok yerle\u015fik metot sunar. Bu metotlar, dizileri y\u00f6netmeyi, manip\u00fcle etmeyi ve veri analizi yapmay\u0131 kolayla\u015ft\u0131r\u0131r. Ba\u015flang\u0131\u00e7 seviyesinde \u00f6\u011frenilmesi gereken en \u00f6nemli metotlar\u0131 inceleyelim:<\/p>\n Bu metotlar\u0131 kullanarak, bir e-ticaret sitesinde \u00fcr\u00fcn listesini y\u00f6netmek veya bir oyun skor tablosunu g\u00fcncellemek gibi bir\u00e7ok senaryoyu kolayca ele alabilirsiniz. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepetine yeni bir \u00fcr\u00fcn eklemek i\u00e7in Temel metotlar\u0131 \u00f6\u011frendikten sonra, daha geli\u015fmi\u015f metotlar ile verileri daha etkili bir \u015fekilde i\u015flemeye ba\u015flayabilirsiniz. Bu seviyede, dizileri filtreleme, s\u0131ralama ve haritalama gibi daha karma\u015f\u0131k i\u015flemleri ger\u00e7ekle\u015ftirece\u011fiz:<\/p>\n \u00d6rne\u011fin, bir kullan\u0131c\u0131 listesinden sadece belirli bir ya\u015f grubundaki kullan\u0131c\u0131lar\u0131 filtrelemek i\u00e7in JavaScript dizilerinde performans, \u00f6zellikle b\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken kritik bir fakt\u00f6rd\u00fcr. Farkl\u0131 metotlar\u0131n performanslar\u0131 farkl\u0131d\u0131r. \u00d6rne\u011fin, Daha deneyimli geli\u015ftiriciler i\u00e7in, JavaScript dizileriyle ilgili daha ileri d\u00fczey teknikler mevcuttur. Bunlar, performans\u0131 optimize etmek, kodun okunabilirli\u011fini art\u0131rmak ve daha karma\u015f\u0131k veri yap\u0131lar\u0131yla \u00e7al\u0131\u015fmay\u0131 kolayla\u015ft\u0131rmak i\u00e7in kullan\u0131labilir.<\/p>\n Bir diziyi kopyalamak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler mevcuttur. Bunlar\u0131n aras\u0131nda JavaScript, \u00e7ok boyutlu dizileri destekler. Bu, matrisler veya tablolar gibi karma\u015f\u0131k veri yap\u0131lar\u0131yla \u00e7al\u0131\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r. \u00c7ok boyutlu diziler, di\u011fer dizileri eleman olarak i\u00e7eren dizilerdir.<\/p>\n <\/code><\/p>\n B\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken performans\u0131 optimize etmek i\u00e7in baz\u0131 ipu\u00e7lar\u0131 \u015funlard\u0131r:<\/p>\n JavaScript dizileri, web geli\u015ftirme ve di\u011fer bir\u00e7ok alanda yayg\u0131n olarak kullan\u0131l\u0131r. \u0130\u015fte baz\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131:<\/p>\n Bu \u00f6rnekler, JavaScript dizilerinin \u00e7e\u015fitli uygulamalar\u0131n\u0131 g\u00f6stermektedir. Dizilerin esnekli\u011fi ve performans\u0131, bir\u00e7ok farkl\u0131 uygulama i\u00e7in ideal bir veri yap\u0131s\u0131 haline getirir.<\/p>\n Bu makalenin i\u00e7eri\u011fini \u00fc\u00e7 a\u015famada \u00f6\u011frenebilirsiniz:<\/p>\n[]<\/code>) kullanmakt\u0131r:<\/p>\nlet dizi1 = []; \/\/ Bo\u015f bir dizi olu\u015fturma\nlet dizi2 = [1, 2, 3, 4, 5]; \/\/ Say\u0131lardan olu\u015fan bir dizi\nlet dizi3 = [\"elma\", \"armut\", \"muz\"]; \/\/ Dizelerden olu\u015fan bir dizi\nlet dizi4 = [1, \"elma\", true, {ad: \"Ahmet\"}]; \/\/ Kar\u0131\u015f\u0131k veri tiplerinden olu\u015fan bir dizi<\/pre>\nArray<\/code> yap\u0131c\u0131 fonksiyonunu kullanarak da dizi olu\u015fturabilirsiniz:<\/p>\nlet dizi5 = new Array(10); \/\/ 10 elemanl\u0131 bo\u015f bir dizi olu\u015fturur.\nlet dizi6 = new Array(1, 2, 3); \/\/ 1,2,3 elemanlar\u0131n\u0131 i\u00e7eren bir dizi olu\u015fturur.<\/pre>\nJavaScript Dizilerinde \u0130ndeksleme Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
let myArray = [\"a\", \"b\", \"c\"];<\/code> dizisinde, \"a\" \u00f6\u011fesinin indeksi 0, \"b\" \u00f6\u011fesinin indeksi 1 ve \"c\" \u00f6\u011fesinin indeksi 2'dir. Bir \u00f6\u011feye eri\u015fmek i\u00e7in k\u00f6\u015feli parantezler i\u00e7inde indeks numaras\u0131n\u0131 kullan\u0131r\u0131z:<\/p>\nlet myArray = [\"a\", \"b\", \"c\"];\nconsole.log(myArray[0]); \/\/ \"a\" yazd\u0131r\u0131r\nconsole.log(myArray[2]); \/\/ \"c\" yazd\u0131r\u0131r<\/pre>\nundefined<\/code> de\u011feri d\u00f6nd\u00fcr\u00fcl\u00fcr. Bu durum, program\u0131n\u0131zda beklenmedik hatalara yol a\u00e7abilir, bu y\u00fczden indeks kontrol\u00fc \u00f6nemlidir. Ayr\u0131ca, indeks kullanarak bir dizinin belirli bir \u00f6\u011fesini de\u011fi\u015ftirebilirsiniz:<\/p>\nmyArray[1] = \"x\";\nconsole.log(myArray); \/\/ [\"a\", \"x\", \"c\"] yazd\u0131r\u0131r<\/pre>\nJavaScript Dizilerinde Yayg\u0131n Metotlar: Temel Seviye<\/h2>\n
\n
push()<\/code>: Dizinin sonuna bir veya daha fazla eleman ekler.<\/li>\npop()<\/code>: Dizinin sonundaki eleman\u0131 siler ve silinen eleman\u0131 d\u00f6nd\u00fcr\u00fcr.<\/li>\nunshift()<\/code>: Dizinin ba\u015f\u0131na bir veya daha fazla eleman ekler.<\/li>\nshift()<\/code>: Dizinin ba\u015f\u0131ndaki eleman\u0131 siler ve silinen eleman\u0131 d\u00f6nd\u00fcr\u00fcr.<\/li>\nlength<\/code>: Dizinin eleman say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/li>\nslice()<\/code>: Dizinin bir b\u00f6l\u00fcm\u00fcn\u00fc kopyalar.<\/li>\nsplice()<\/code>: Diziye eleman ekler veya siler.<\/li>\nconcat()<\/code>: \u0130ki veya daha fazla diziyi birle\u015ftirir.<\/li>\nindexOf()<\/code>: Belirtilen eleman\u0131n dizideki ilk indeksini d\u00f6nd\u00fcr\u00fcr.<\/li>\nlastIndexOf()<\/code>: Belirtilen eleman\u0131n dizideki son indeksini d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\npush()<\/code> metodunu kullanabilirsiniz.<\/p>\nJavaScript Dizilerinde Yayg\u0131n Metotlar: Orta Seviye<\/h2>\n
\n
filter()<\/code>: Dizideki elemanlar\u0131 bir ko\u015fula g\u00f6re filtreler ve yeni bir dizi d\u00f6nd\u00fcr\u00fcr.<\/li>\nmap()<\/code>: Dizideki her bir elemana bir fonksiyon uygular ve yeni bir dizi olu\u015fturur.<\/li>\nreduce()<\/code>: Dizideki elemanlar\u0131 bir fonksiyon kullanarak tek bir de\u011fer haline getirir.<\/li>\nsort()<\/code>: Dizinin elemanlar\u0131n\u0131 s\u0131ralar.<\/li>\nreverse()<\/code>: Dizinin eleman s\u0131ras\u0131n\u0131 tersine \u00e7evirir.<\/li>\nforEach()<\/code>: Dizideki her bir elemana bir fonksiyon uygular, ancak yeni bir dizi d\u00f6nd\u00fcrmez.<\/li>\nevery()<\/code>: Dizideki t\u00fcm elemanlar\u0131n bir ko\u015fulu sa\u011flamas\u0131n\u0131 kontrol eder.<\/li>\nsome()<\/code>: Dizideki en az bir eleman\u0131n bir ko\u015fulu sa\u011flamas\u0131n\u0131 kontrol eder.<\/li>\n<\/ul>\nfilter()<\/code> metodunu kullanabilirsiniz. Ya da her kullan\u0131c\u0131n\u0131n ya\u015f\u0131n\u0131 bir y\u0131l artt\u0131rmak i\u00e7in map()<\/code> metodunu kullanabilirsiniz. Bu metotlar, kodunuzu daha okunakl\u0131 ve performansl\u0131 hale getirir. reduce()<\/code> metodu ise toplam hesaplama, ortalama hesaplama gibi i\u015flemler i\u00e7in olduk\u00e7a faydal\u0131d\u0131r.<\/p>\nJavaScript Dizilerinin Performans Analizi: Hangi Metodu Ne Zaman Kullanmal\u0131y\u0131m?<\/h2>\n
push()<\/code> ve pop()<\/code> metotlar\u0131, dizinin sonuna veya ba\u015f\u0131ndan eleman ekleme\/\u00e7\u0131karma i\u015flemlerinde en h\u0131zl\u0131 olanlard\u0131r. Ancak, dizinin ortas\u0131na eleman eklemek veya \u00e7\u0131karmak i\u00e7in splice()<\/code> metodunu kullanmak daha yava\u015f olabilir, \u00e7\u00fcnk\u00fc bu i\u015flem dizinin geri kalan elemanlar\u0131n\u0131n yeniden indekslenmesini gerektirir. B\u00fcy\u00fck bir veri k\u00fcmesinde forEach<\/code> kullanmak, for<\/code> d\u00f6ng\u00fcs\u00fcnden daha h\u0131zl\u0131 olabilir. Ancak, her durum i\u00e7in ideal y\u00f6ntem, veri setinin boyutuna ve i\u015flem t\u00fcr\u00fcne ba\u011fl\u0131d\u0131r. Performans testleri ve profil \u00e7\u0131kar\u0131m\u0131 yaparak, projeniz i\u00e7in en uygun y\u00f6ntemi se\u00e7ebilirsiniz.<\/p>\n\n
\n Metot<\/th>\n \u0130\u015flem<\/th>\n Performans<\/th>\n \u00d6nerilen Kullan\u0131m<\/th>\n<\/tr>\n \n push()<\/code>, pop()<\/code><\/td>\nEleman ekleme\/\u00e7\u0131karma (son)<\/td>\n Y\u00fcksek<\/td>\n Eleman ekleme\/\u00e7\u0131karma i\u015flemlerinde tercih edilmelidir.<\/td>\n<\/tr>\n \n unshift()<\/code>, shift()<\/code><\/td>\nEleman ekleme\/\u00e7\u0131karma (ba\u015f)<\/td>\n Orta<\/td>\n Ba\u015ftan eleman ekleme\/\u00e7\u0131karma gerekti\u011finde kullan\u0131lmal\u0131d\u0131r.<\/td>\n<\/tr>\n \n splice()<\/code><\/td>\nEleman ekleme\/\u00e7\u0131karma (orta)<\/td>\n D\u00fc\u015f\u00fck<\/td>\n Sadece gerekli oldu\u011funda kullan\u0131lmal\u0131d\u0131r.<\/td>\n<\/tr>\n \n map()<\/code>, filter()<\/code>, reduce()<\/code><\/td>\nFonksiyonel programlama<\/td>\n Genellikle y\u00fcksek<\/td>\n Veri d\u00f6n\u00fc\u015ft\u00fcrme ve filtreleme i\u015flemleri i\u00e7in idealdir.<\/td>\n<\/tr>\n \n for<\/code> d\u00f6ng\u00fcs\u00fc<\/td>\nEl ile indeksleme<\/td>\n Orta<\/td>\n Daha fazla kontrol gerekti\u011finde kullan\u0131l\u0131r.<\/td>\n<\/tr>\n \n forEach()<\/code><\/td>\nHer elemana fonksiyon uygula<\/td>\n Y\u00fcksek (baz\u0131 durumlarda)<\/td>\n Dizi \u00fczerinde i\u015flem yaparken kullan\u0131\u015fl\u0131d\u0131r.<\/td>\n<\/tr>\n<\/table>\n JavaScript Dizileri: \u0130leri D\u00fczey Teknikler<\/h2>\n
Dizileri Kopyalama Y\u00f6ntemleri<\/h3>\n
slice()<\/code>, spread operator (...)<\/code>, Object.assign()<\/code> ve JSON.parse(JSON.stringify())<\/code> yer al\u0131r. Her y\u00f6ntemin performans ve kopyalama derinli\u011fi farkl\u0131d\u0131r. S\u0131\u011f kopyalama (shallow copy) ile sadece referans kopyalan\u0131r, derin kopyalama (deep copy) ile ise veri tamamen kopyalan\u0131r. Se\u00e7ilecek y\u00f6ntem, kopyalaman\u0131n derinli\u011fine ve performans gereksinimlerine ba\u011fl\u0131d\u0131r.<\/p>\n\u00c7ok Boyutlu Diziler<\/h3>\n
let matrix = [\n [1, 2, 3],\n [4, 5, 6],\n [7, 8, 9]\n];<\/pre>\nPerformans Optimizasyonu \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h3>\n
\n
JavaScript Dizileri: Ger\u00e7ek D\u00fcnya Senaryolar\u0131<\/h2>\n
\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
Yeni Ba\u015flayanlar:<\/h3>\n