Bugün Ustalaşmanız Gereken 15 JavaScript Dizi Yöntemi

Acemi programcılardan kodlama uzmanlarına kadar tüm beceri seviyelerindeki web geliştiricileri, modern web siteleri geliştirmede JavaScript'in önemini görmeye başlıyor. JavaScript o kadar baskındır ki, web uygulamaları oluşturup oluşturmayacağınızı bilmek önemli bir beceridir.

JavaScript dilinde yerleşik en güçlü yapı taşlarından biri dizilerdir. Diziler birçok programlama dilinde yaygın olarak bulunur ve veri depolamak için kullanışlıdır.

JavaScript ayrıca dizi yöntemleri olarak bilinen kullanışlı özellikleri de içerir. İşte bir geliştirici olarak becerilerinizi geliştirmek için yakından bakmanız gereken on beş tane.

Dizi Yöntemleri Nelerdir?

dizi yöntemleri dizilerinize uygulayabileceğiniz JavaScript'te yerleşik işlevlerdir. Her yöntemin, dizinizde bir değişiklik veya hesaplama gerçekleştiren benzersiz bir işlevi vardır, bu da sizi ortak işlevleri sıfırdan kodlama ihtiyacından kurtarır.

JavaScript'teki dizi yöntemleri, dizi değişkeninize eklenen bir nokta gösterimi kullanılarak çalıştırılır. Yalnızca JavaScript işlevleri olduklarından, her zaman isteğe bağlı argümanları tutabilen parantez ile biterler. İşte adı verilen basit bir diziye eklenmiş bir yöntem myArray .

let myArray = [1,2,3]; myArray.pop();

Bu kod adı verilen bir yöntemi uygular. pop diziye.

Örnek Dizi

Her örnek için, diyeceğimiz bir örnek dizi kullanın. myArray , üzerindeki yöntemleri gerçekleştirmek için. Konsolunuzu açıp kod yazmaktan çekinmeyin.

let myArray = [2,4,5,7,9,12,14];

Bu örnekler, aşağıdakilerin temelini bildiğinizi varsayacaktır. JavaScript nedir ve nasıl çalışır . Bunu yapmazsan sorun değil, hepimiz öğrenmek ve büyümek için buradayız.

Bu on beş güçlü dizi yöntemini araştırın!

1. Dizi.push()

Bu ne yapar: itmek() dizinizi alır ve dizinin sonuna bir veya daha fazla öğe ekler, ardından dizinin yeni uzunluğunu döndürür. Bu yöntem mevcut dizinizi değiştirecektir.

20 sayısını çalıştırarak diziye ekleyin itmek() , argüman olarak 20 kullanarak.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

Çalışıp çalışmadığını kontrol edin:

console.log(myArray); [2,4,5,7,9,12,14,20]

Çalıştırmak itmek() myArray'deki yöntem, bağımsız değişkende verilen değeri diziye ekledi. Bu durumda 20. Konsolda myArray'i kontrol ettiğinizde artık değerin dizinin sonuna eklendiğini göreceksiniz.

2. Dizi.concat()

Bu ne yapar: concat() iki veya daha fazla diziyi yeni bir dizide birleştirebilir. Mevcut dizileri değiştirmez, ancak yeni bir tane oluşturur.

Almak myArray ve adlı bir diziyi birleştir yeniArray bunun içine.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

Bu yöntem, değişkenleri kullanırken oldukça basit bir adımda, birleştirmeniz gereken birden çok dizi veya değerle uğraşırken harikalar yaratır.

3. Array.join()

Bu ne yapar: katılmak() bir dizi alır ve dizinin içeriğini virgülle ayırarak birleştirir. Sonuç bir dizgeye yerleştirilir. Virgül yerine bir alternatif kullanmak istiyorsanız bir ayırıcı belirtebilirsiniz.

Bunun myArray kullanarak nasıl çalıştığına bir göz atın. İlk önce, virgül kullanacak olan ayırıcı bağımsız değişkeni olmayan varsayılan yöntemi kullanın.

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

JavaScript, dizideki her değerin virgülle ayrıldığı bir dize çıkarır. Ayırıcıyı değiştirmek için işlevde bir argüman kullanabilirsiniz. Bunu iki argümanla gözlemleyin: tek bir boşluk ve bir dize.

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

İlk örnek, kolayca okuyabileceğiniz bir dize oluşturan bir boşluktur.

İkinci örnek kullanır (' ve ') , ve burada bilinmesi gereken iki şey var.

İlk olarak, değerleri ayırmak için 've' kelimesini kullanıyoruz. İkinci olarak, 've' kelimesinin her iki yanında bir boşluk vardır. Bu, kullanırken akılda tutulması gereken önemli bir şeydir. katılmak() . JavaScript, argümanları tam anlamıyla okur; yani, bu boşluk bırakılırsa, her şey birbirine eklenir (örn. '2and4and5...' vb.) Çok okunabilir bir çıktı değil!

4. Array.forEach()

Bu ne yapar: her biri için() (büyük/küçük harfe duyarlı!) dizinizdeki her öğe üzerinde bir işlev gerçekleştirir. Bu işlev, oluşturduğunuz herhangi bir işlevdir; bir işlevi diziye uygulamak için 'for' döngüsü kullanmaya benzer, ancak kodlamak için çok daha az iş gerektirir.

biraz daha var her biri için() ; sözdizimine bakın, ardından göstermek için basit bir işlev gerçekleştirin.

  
myArray.forEach(function(item){  
//code  
});

kullanıyoruz myArray , her biri için() nokta gösterimi ile uygulanır. Kullanmak istediğiniz işlevi argüman parantezinin içine yerleştirirsiniz. işlev(öğe) örnekte.

Şuna baksana işlev(öğe) . Bu, forEach() içinde yürütülen işlevdir ve kendi argümanına sahiptir. Biz argüman diyoruz kalem . Bu argüman hakkında bilinmesi gereken iki şey var:

forEach() diziniz üzerinde döngü yaptığında, kodu bu argümana uygular. Mevcut öğeyi tutan geçici bir değişken olarak düşünün.
Argümanın adını siz seçersiniz, istediğiniz herhangi bir şey olarak adlandırılabilir. Tipik olarak bu, 'öğe' veya 'öğe' gibi anlaşılmasını kolaylaştıran bir şey olarak adlandırılır.

Bu iki şeyi göz önünde bulundurarak, bu basit örneğe göz atın. Her değere 15 ekleyin ve konsolun sonucu göstermesini sağlayın.

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

kullanıyoruz kalem bu örnekte değişken olarak, bu nedenle işlev, aracılığıyla her değere 15 eklemek için yazılmıştır. kalem . Konsol daha sonra sonuçları yazdırır. İşte bir Google Chrome konsolunda nasıl göründüğü.

Sonuç, dizideki her sayıdır, ancak buna 15 eklenmiş!

5. Dizi.harita ()

Bu ne yapar: harita() dizinizdeki her öğe üzerinde bir işlev gerçekleştirir ve sonucu yeni bir diziye yerleştirir.

Her öğe üzerinde bir işlev çalıştırmak, kulağa forEach() gibi geliyor. Buradaki fark harita() çalıştırıldığında yeni bir dizi oluşturur. forEach() otomatik olarak yeni bir dizi oluşturmaz, bunu yapmak için belirli bir işlevi kodlamanız gerekir.

myArray içindeki her öğenin değerini ikiye katlamak için map() kullanın ve bunları yeni bir diziye yerleştirin. aynısını göreceksin işlev(öğe) biraz daha pratik için sözdizimi.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

Konsoldaki sonuçları kontrol edin.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray değişmez:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift()

Ne yapar: Push() yönteminin nasıl çalıştığına benzer şekilde, kaydırmayı kaldır() method dizinizi alır ve dizinin sonu yerine başına bir veya daha fazla öğe ekler ve dizinin yeni uzunluğunu döndürür. Bu yöntem mevcut dizinizi değiştirecektir.

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

Diziyi konsola kaydederken dizinin başında 0 sayısını görmelisiniz.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Dizi.sort()

Ne yapar: Sıralama, bir dizi üzerinde gerçekleştirilen en yaygın işlemlerden biridir ve oldukça kullanışlıdır. JavaScript'ler çeşit() dizi yöntemi, bir dizi sayıyı veya hatta dizeleri yalnızca tek bir kod satırıyla sıralamak için kullanılabilir. Bu işlem yerindedir ve ilk diziyi değiştirerek sıralanmış diziyi döndürür. için farklı bir sayı kümesi alın. myArray bu zaman.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

Sıralama yerinde yapıldığından, sıralanan dizi için ayrı bir değişken bildirmeniz gerekmez.

console.log(myArray); [10, 12, 34, 55, 65]

Varsayılan olarak, dizi artan düzende sıralanır, ancak isteğe bağlı olarak diziye özel bir işlev iletebilirsiniz. çeşit() diziyi istenen şekilde sıralama yöntemi. Bu durumda, bir adet geçtim ok işlevi diziyi sayısal olarak artan düzende sıralamak için.

8. Dizi.ters()

Ne yapar: Adından da anlaşılacağı gibi, ters() dizideki öğelerin sırasını tersine çevirmek için yöntem kullanılır. Bunun dizinin içeriğini değil, yalnızca sıranın kendisini tersine çevirdiğini unutmayın. Bu yöntemi daha iyi anlamak için bir örnek:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

İşlemi doğrulamak için çıktıyı konsola kaydedin.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

Gördüğünüz gibi, öğelerin sırası tersine çevrildi. Önceden, son dizindeki öğe (6. dizindeki öğe 14) şimdi sıfırıncı dizindeki öğedir ve bu böyle devam eder.

9. Dizi.slice()

Bu ne yapar: dilim() bir dizinin bir bölümünün sığ bir kopyasını almak için kullanılır. Daha basit bir ifadeyle, bu yöntem bir diziden belirli öğeleri dizinlerine göre seçmenize olanak tanır. Almak istediğiniz elementin başlangıç indeksini ve elementleri ve isteğe bağlı olarak bitiş indeksini de iletebilirsiniz.

Bitiş dizinini sağlamazsanız, başlangıç dizininden dizinin sonuna kadar olan tüm öğeler alınır. Bu yöntem yeni bir dizi döndürür ve var olanı değiştirmez.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

Yukarıdaki kodda, ikinci dizinden son dizine kadar olan tüm öğeler, son dizin parametresi geçirilmediğinden alınır. Her iki diziyi de konsola kaydedin.

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

Açıkçası, ilk dizi dilim() yöntemi tarafından değiştirilmez ve bunun yerine dilimlenmişArray değişken. Burada, bitiş indeksi parametresinin de aktarıldığı bir örnek verilmiştir. dilim() yöntem.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Dizi.splice()

Bu ne yapar: ekleme() dizideki öğeleri yerinde kaldırmak veya değiştirmek için kullanılan yararlı bir dizi yöntemidir. Silinecek elemanların indeksini ve sayısını belirleyerek diziyi değiştirir.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

Yukarıdaki örnekte, myArray dizi, dizin 2'den eklenir ve ondan 3 öğe kaldırılır. Dizi şimdi şunlardan oluşuyor:

[2, 4, 12, 14]

Öğeleri yalnızca silmek yerine değiştirmek için, değiştirmek istediğiniz öğelerle istediğiniz sayıda isteğe bağlı parametreyi şu şekilde iletebilirsiniz:

ücretsiz çizgi roman nerede okunur

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Dizi.filtre()

Ne yapar: filtre() yöntemi, bir test içeren bir işlevi alan ve bu testi geçen tüm öğelerle birlikte yeni bir dizi döndüren kullanışlı bir dizi yöntemidir. Adından da anlaşılacağı gibi, bu yöntem, ihtiyacınız olan öğeleri diğer öğelerden filtrelemek için kullanılır. Filtreleme, bir boole değeri döndüren bir işlev kullanılarak yapılır.

İşte bir örnek filtre() Diziden yalnızca 2'ye bölünebilen öğeleri almak için kullanılan yöntem.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

Yukarıdaki örnekte, orijinal diziden her sayıyı alan ve modulo ( % ) ve eşitlik ( === ) Şebeke. Çıktı şöyle görünür:

[2, 4, 12, 14]

12. Array.reduce()

Bu ne yapar: azaltmak() bir indirgeyici işlevi alan ve dönerken tek bir değer çıktısı almak için onu her dizi öğesinde yürüten bir dizi yöntemidir. Gerekli parametreler olarak bir akümülatör değişkeni ve bir akım elemanı değişkeni ile bir indirgeyici işlevi alır. Akümülatörün değeri tüm yinelemelerde hatırlanır ve nihai yinelemeden sonra döndürülür.

Bu yöntemin popüler bir kullanım durumu, dizideki tüm öğelerin toplamını hesaplamaktır. Bu işlevin uygulanması aşağıdaki gibidir:

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0, akümülatör değişkeninin başlangıç değeri olarak kullanılan yukarıdaki örnekte ikinci parametre olarak geçirilir. NS sumOfNums değişkenin dönüş değerini içerecektir. azaltmak() dizideki tüm öğelerin toplamı olması beklenen yöntem.

console.log(sumOfNums); 53

13. Array.includes()

Ne yapar: Bir dizide bir öğe olup olmadığını kontrol etmek için aramak oldukça sık kullanılan bir işlemdir ve bu nedenle JavaScript'in bunun için yerleşik bir yöntemi vardır. içerir() dizi yöntemi. Bunu nasıl kullanacağınız aşağıda açıklanmıştır:

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

Bu yöntem, gerekli bir parametreyi, aranacak öğeyi ve isteğe bağlı bir parametre olan, aramaya başlanacak dizi dizinini alır. Bu elemanın mevcut olup olmadığına bağlı olarak, geri dönecektir. NS veya YANLIŞ sırasıyla. Bu nedenle, çıktı olacaktır:

true  
false  
true  
false

14. Dizi.indexOf()

Bu ne yapar: indeksi() yöntemi, dizide belirtilen bir öğenin ilk oluşumunun bulunabileceği dizini bulmak için kullanılır. include() yöntemine benzer olsa da, bu yöntem, öğe dizide yoksa sayısal dizini veya -1'i döndürür.

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

indeksi() yöntem, bir öğenin mevcut olup olmadığını kontrol etmek için katı eşitlik kullanır; bu, veri türünün yanı sıra değerin de aynı olması gerektiği anlamına gelir. İsteğe bağlı ikinci parametre, aramaya başlamak için dizini alır. Bu kriterlere göre çıktı şöyle görünecektir:

1  
-1  
4

15. Dizi.doldur()

Ne yapar: Çoğu zaman, dizideki tüm değerleri 0 gibi statik bir değere ayarlamanız gerekebilir. Bir döngü kullanmak yerine şunu deneyebilirsiniz: doldurmak() Aynı amaç için yöntem. Bu yöntemi, 1 gerekli parametreye sahip bir dizide çağırabilirsiniz: diziyi dolduracak değer ve 2 isteğe bağlı parametre: doldurulacak başlangıç ve bitiş dizini. Bu yöntem, çıkan diziyi değiştirir.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

Çıktıyı konsola kaydederken şunları göreceksiniz:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

JavaScript Yolculuğunuzda Sonraki Adımlar

Diziler, JavaScript dilinin güçlü bir parçasıdır, bu nedenle bir geliştirici olarak hayatınızı kolaylaştıracak çok sayıda yerleşik yöntem vardır. Bu on beş yöntemde ustalaşmanın en iyi yolu pratik yapmaktır.

JavaScript öğrenmeye devam ettikçe, MDN harika bir kaynaktır ayrıntılı belgeler için. Konsolda rahat olun, ardından programcılar için en iyi JavaScript editörleriyle becerilerinizi bir üst seviyeye taşıyın. JavaScript ile web sitenizi oluşturmaya hazır mısınız? Neden düşünebileceğiniz bazı çerçevelere bir göz atmıyorsunuz?

Paylaş Paylaş Cıvıldamak E-posta Öğrenmeye Değer 6 JavaScript Çerçevesi

Geliştirmeye yardımcı olacak birçok JavaScript çerçevesi vardır. İşte bilmeniz gerekenler.

Sonrakini Oku İlgili konular

Programlama
JavaScript
Kodlama İpuçları

Yazar hakkında Nitin Ranganath(31 Makale Yayınlandı)

Nitin, JavaScript teknolojilerini kullanarak web uygulamaları geliştiren hevesli bir yazılım geliştiricisi ve bilgisayar mühendisliği öğrencisidir. Serbest web geliştiricisi olarak çalışıyor ve boş zamanlarında Linux ve Programlama için yazmayı seviyor.

Nitin Ranganath'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın