Java dizisi. 10 blog gönderisinde Başlangıç ​​Seviyesinden İleri Seviyeye kadar 6. Bölüm JavaScript kursu

Bu, sizi başlangıç ​​seviyesinden ileri seviyeye götürecek JavaScript blog yazısı serisinin 6. bölümüdür. Bu dizinin sonunda JavaScript'te kodlamaya başlamak için bilmeniz gereken tüm temel bilgileri öğreneceksiniz. Lafı fazla uzatmadan altıncı derse başlayalım.

Java dizisi – içindekiler tablosu:

1. Diziler – temel bilgiler
2. Java dizisine öğe ekleme
3. Bir diziden öğeleri kaldırma
4. Dizilerde uzunluk bulma
5. dizileri sıralama
6. Dizilerdeki öğeleri tersine çevirme
7. Her biri için
8. Dizilerde içerir

Bu öğretici, önceden kurulmuş bir kodlama ortamınız olduğunu varsayar. Önceki öğreticileri takip ediyorsanız, zaten açmış olmalısınız. Herhangi bir nedenle kurulumunuzu kapattıysanız, tam kurulum talimatlarını bu serinin 4. Kısmında bulabilirsiniz. Bu eğitimde, kodlama için Google Chrome Snippet'leri ortamınızı nasıl kuracağınızı anlatacağız.

Google Chrome'u kullanmakta biraz rahatsanız, bu eğiticiye hazırlanmanın hızlı bir yolunu burada bulabilirsiniz, aksi takdirde kodlama ortamınızı nasıl kuracağınıza ilişkin adım adım talimatların tamamı için 4. Bölüme göz atabilirsiniz.

Mac kullanıyorsanız, konsolu açmak için klavye kısayolu, Chrome'u açtıktan sonra “Option + Command + J” tuşlarına basmaktır. Bir Windows cihazı kullanıyorsanız, Chrome'u açtıktan sonra JavaScript Konsolunu açmak için “Control + Shift + J” klavye kısayolunu kullanabilirsiniz. Veya en üstteki menüye gidip Görünüm -> Geliştirici -> JavaScript Konsolu'na da gidebilirsiniz. Konsolu açtıktan sonra, “Konsol” un hemen yanında bulunan “Kaynaklar” sekmesine tıklayabilirsiniz. Şimdi Snippet'leri gördüğünü gösteriyorsun. Daha önce kullanmaya başladığınız bir snippet'te kodlamaya devam edebilir veya “+ Yeni snippet” butonuna tıklayarak yeni bir snippet oluşturabilirsiniz. Bu eğitim için pratik yapabileceğiniz bir kodlama kurulumunuz olduğu sürece, gitmeye hazırsınız.

Java dizisi - temel bilgiler

Diziler birçok programlama dilinde oldukça kullanılır ve JavaScript de bir istisna değildir. Ve bu iyi bir sebep için. Ancak, başlamak için bir dizinin ne olduğunu merak ediyor olabilirsiniz? Diziler, esasen, belirli tanımlanmış yöntemlerle erişilebilen ve değiştirilebilen ilgili verilerin bir koleksiyonudur. Daha eksiksiz bir anlayışa sahip olmak için bir dizi için bazı örnekler görelim.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["dogs", "cats", "birds", "fishes"];

Birden çok farklı türde veriyi depolamak için bir java dizisi kullanabiliriz. Örneğin, yukarıdaki kodda bazı sayıları, booleanları ve ayrıca string veri tipini sakladık.

Tıpkı diğer değişkenler gibi bir java dizisi oluşturabiliriz, ya const ya da let anahtar sözcükleri sol tarafta ve dizilerin içerikleri denklemlerin sağ tarafında olacak şekilde. Dikkat etmeniz gereken bir şey, dizileri oluştururken, tıpkı yukarıdaki kodda yaptığımız gibi, öğeleri çevrelemek için köşeli parantezleri kullanmamızdır. Ayrıca, veri türünden bağımsız olarak her öğeyi aralarına virgül koyarak ayırırız.

Bu eğiticide, bu eğiticideki her şeyi sırayla kopyalayıp yapıştırabileceğiniz veya her şeyi Chrome'da bir JavaScript snippet'ine yazabileceğiniz şekilde kod yazacağız ve sırayı takip ettiğinizde beklendiği gibi çalışacaktır. Örneğin, bunun sizin için anlamı, öğreticide bir kez const anahtar kelimesiyle bir değişken tanımlıyorsak, normalde aynı isimde başka bir değişken tanımlayamazsınız. Bu nedenle, kodun bir kısmını kısmen kopyalayıp yapıştıracaksanız, bu değişkenleri kodunuzda da tanımladığınızdan emin olmak iyi bir fikirdir. Öğreticiyi sunulduğu sırayla izliyorsanız, bu bir sorun olmamalıdır.

Java dizisi hakkında bilmeniz gereken ilk şeylerden biri, bir dizi oluşturduğunuzda, öğelerine erişmeniz gerektiğidir. Dizilerde "numaralı dizinler" adı verilen bir şey vardır ve bunun sizin için pratikte anlamı şudur: JavaScript'te oluşturduğunuz her öğe, onunla soldan sağa, sıfırdan java dizisinin uzunluğuna kadar ilişkilendirilmiş bir sayı vardır. eksi bir.

Örneğin, evcil hayvanlar için yukarıdaki kodda, değişkenin adını yazarak, köşeli parantezleri açarak, erişmek istediğimiz öğenin dizinini koyarak ve kare parantezi kapatarak “köpekler” in ilk elemanına ulaşabiliriz. :

alert(pets[0]);

Benzer şekilde, daha yüksek sayılar koymak, görüntülediğimiz uyarı kutusunda diğer öğelerin görüntülenmesini tetikleyecektir.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Pet dizisinde 4 elemana sahip olduğumuz ve indekslere 0'dan başladığımız için, dizideki son elemana petler[3] ile ulaşılır ki bu dizinin toplam uzunluğundan 1 eksiktir. Bu noktada merak ediyor olabilirsiniz, artık bir dizi oluşturup o diziden bir öğeye erişebileceğimize göre, o dizide değişiklik yapmaya ne dersiniz? Yeni öğeler eklemeye, mevcut öğeleri değiştirmeye veya öğeleri silmeye ne dersiniz? Pekala, adım adım gidelim ve bir diziye yeni öğeler ekleyerek başlayalım.

Java dizisine öğe ekleme

Bir diziye farklı öğeler eklemenin birden çok yolu vardır. Yeni öğeyi dizinin sonuna eklemek istediğimizi biliyorsak, “push” yöntemini kullanabiliriz. Buna diziye yeni bir öğe gönderme de denir. İtilen öğenin dizinin sonuna geleceğini unutmayın. Örneğin:

pets.push("snakes");
// lets verify that we have snakes as the last item
// by displaying the array contents
alert(pets);

Java dizisine ilk öğe olarak özellikle bir öğe eklemek istediğimizi biliyorsak, “unshift” anahtar sözcüğünü kullanabiliriz. Bunu bir örnekle görelim:

//running this code will shift all the values
// to one side and will add the first pet of dragon
pets.unshift(“dragons”); 
//lets verify this by displaying the contents of the array
alert(pets);

Dizinin sonuna veya başına öğeler ekleyebilmemiz harika, ama ya bir nedenden dolayı diziye belirli konumlara öğeler enjekte etmek istersem. Diyelim ki üçüncü pozisyona kaplumbağaları eklemek istiyorum. Bu mümkün mü? Evet öyle. Bir diziye bir öğe enjekte etmek için, onu dizinin o bölümünü oluşturmak ve dizinin belirli bir bölümüne bir değer atamak gibi tanımlayabiliriz. Ayrıca değerleri girerken indeks değerlerini kullanmayı unutmayınız. Pratik açıdan şöyle görünür:

pets[2] = "turtles";
// lets verify that we have turtles as the third item
// by displaying the contents of the array
alert(pets);

Bir diziden öğeleri kaldırma

Bu noktada, bir diziden öğeleri çıkarmaya ne dersiniz? Bunun için de birden fazla yol var. Muhtemelen en ünlüsü “pop” yöntemini kullanmaktır. Bu, bir şekilde bir dizideki son öğenizi çıkaracaktır. // bu, pets.pop() dizisindeki son öğeyi kaldıracak; // dizi içeriği uyarısını (pets) görüntüleyerek sonuçları doğrulayalım;

Görüldüğü gibi pop yöntemi ile yılanların son pet itemini pet dizimizden kaldırdık.

Bir Java dizisinden öğeleri çıkarmanın başka bir yolu da "shift" anahtar sözcüğünü kullanmaktır. Shift kullandığımızda, ilk eleman silinecek ve geri kalan indeks değerleri onlara uyum sağlayacaktır. Örneğin:

// this will delete the first item
// and will shift the other items into their new index values
// which will be one lower than the previous index values
pets.shift();
// let's also verify this by displaying the array
alert(pets);

“Shift” adı aslında bellek tahsisinin bilgisayar belleğinde nasıl çalıştığından gelir. Yani ilk başta nispeten sezgisel geliyorsa, bu da gayet iyi. Şimdilik, shift yöntemini kullanarak bir diziden ilk öğeyi kaldırabileceğimizi bilmelisiniz.

Dizilerde uzunluk bulma

Gerçek hayatta dizilerle uğraşırken, dizi öğelerinin sayısını saymak istediğimiz birçok zaman olabilir. Bu, yapılacaklar listeleri, okuldaki veya işteki katılımcı listeleri vb. dahil olmak üzere çeşitli yerlerde gerekli olabilir. Bunu başarmak için "uzunluk" adında yerleşik bir dizi özelliğimiz var ve bu bize dizinin toplam uzunluğunu söyleyecek. Örneğin:

alert(pets.length);

dizileri sıralama

Dizileri sıralama, JavaScript'te oldukça yaygın bir işlemdir. JavaScript'te öğeleri sıralamak için farklı özel uygulamalar vardır. Bu özel uygulamalara genel olarak sıralama algoritmaları denir. Farklı sıralama algoritmaları farklı avantajlar ve dezavantajlar getirebilir. Örneğin, bir sıralama algoritması diğerine göre seçilebilir, çünkü biraz daha iyi performans gösterseler bile, kodda uygulanması diğerine kıyasla çok daha kolaydır. Optimize edilmiş performans için farklı sıralama algoritmaları duymuş olabilirsiniz. Bu eğitimde JavaScript tarafından sağlanan yerleşik sıralama yöntemini kullanacağız. Sıralama, özellikle web geliştirmede oldukça yaygın bir sorundur. Örneğin, bir e-ticaret sitesi kuruyorsanız, kullanıcınızın seçim yapması için farklı sıralama durumları uygulamanız gerekir. Hedef kitlenize hangi seçenekleri ve yetenekleri sağlamanız gerektiğine dair katı kurallar olmamasına rağmen, bir web sitesi oluşturucu olarak sizden beklenen oldukça ortak standartlar vardır. Örneğin, kullanıcı olarak, bazı mağaza ürünlerini hem artan hem de azalan fiyatlarda listelemek isteyebilirsiniz. Bu görevler için sıralamayı uygularken, kullanıcının arama sonuçlarını t-shirtler, şapkalar, çantalar vb. gibi belirli diğer kategorilerle de sınırlandırabileceği göz önüne alındığında, bunun nasıl uygulanacağını aklınızda bulundurmalısınız. Bir diziyi sonuna “.sort()” ekleyerek sıralayabiliriz.

pets.sort();
alert(pets);

Dizilerdeki öğeleri tersine çevirme

Bir diziyi tersine çevirmek, sıralama ile birleştirmek için muhtemelen daha yaygındır. Bu durumda biz de bu kodları yukarıdan aşağıya doğru yürüttüğümüz için diziyi sıraladıktan sonra ters çevirme işlemini de uyguluyoruz. Sonuna “.reverse()” ekleyerek ters çevirebilir ve dizileyebiliriz. pet.reverse(); uyarı(evcil hayvanlar);

Diziyi önceki adımda sipariş ettiğimiz için, şimdi hem sıralanmış hem de ters çevrilmiş bir dizimiz olduğunu görebilirsiniz.

Her biri için

Dizilerle çalışırken JavaScript bize dizi öğeleri üzerinde “.forEach()” ile döngü yapmak için uygun bir yol sağlar. Gerçekten istiyorsak, bir dizi üzerinde döngü yapmak için yine de normal bir for döngüsü kullanabiliriz. Aslında önce bir dizi üzerinde döngü oluşturmak için bir for döngüsünün nasıl oluşturulacağını görelim, sonra forEach() kullanımını göreceğiz.

// this will alert us 4 times to feed our pet
for (let a = 0; a < pets.length; a++) {
    alert("Time to feed my pet");
}

Aynı sonucu forEach kullanarak da elde edebiliriz.

pets.forEach(alert("Time to feed my pet"));

For döngülerini veya For Her birini kullanmayı karşılaştırdığımızda, tercihlerinize ve özel durumunuza bağlı olarak bunlardan birini diğerine tercih edebilirsiniz. Özünde, ikisi de kodda farklı stiller ile aynı çıktıları elde eder. ForEach nispeten daha kolay olabilir ve size okumak ve yazmak için bir satır kod kazandırabilir, ancak sonuçta bu sizin seçiminiz olacaktır. Hemen şimdi böyle bir seçim yapmak ve ona bağlı kalmak zorunda değilsiniz. Kod yazarken, programlama yolculuğunuzda ilerlerken aynı sorunu farklı yaklaşımlar kullanarak çözmeyi deneyebilirsiniz.

Dizilerde içerir

Ayrıca bir Java dizisinin içinde bir öğenin olup olmadığını da kontrol edebiliriz. Bu yöntemin gerçek hayatta kullanımına bir örnek, özel bir etkinliğin davet listesinde bir kişinin adını içerip içermediği olabilir. Gerçek uygulama da oldukça yalındır. İlk önce dizinin adını yazıyoruz, bu durumda evcil hayvanlar dizisi ile çalışıyoruz. Ardından farklı dizi özelliklerine ve yöntemlerine erişmek için bir nokta koyuyoruz, ardından “includes” yazıp parantezleri açıp kapatıyoruz ve kontrol etmek istediğimiz öğenin adını yazıyoruz. Dizide var olduğunu bildiğimiz bir öğeyi kontrol eden bir örnek:

alert(pets.includes("dogs"));

Java dizisinde olmadığını bildiğimiz bir öğeyle de aynı şeyi yapmaya çalışırsak, yanıt olarak false almayı bekleriz. Bu durumu da bir örnekle görelim:

alert(pets.includes("puppy"));

Pet dizisinde yavrumuz olmadığı için beklediğimiz gibi false alıyoruz. Bir sonraki derste, hem programlama dünyasında hem de JavaScript'te başka bir ana kavram göreceğiz.

10 blog gönderisinde Başlangıç ​​Düzeyinden İleri Düzeye JavaScript Kursu:

1. JavaScript'te kodlamaya nasıl başlanır?
2. JavaScript temelleri
3. JavaScript'te değişkenler ve farklı veri türleri
4. Snippet'ler ve kontrol yapıları
5. Döngüler ve döngüler için
6. Java dizisi
7. JavaScript işlevleri
8. JavaScript nesneleri
9. JavaScript yöntemleri ve daha fazlası
10. JavaScript kursunun özeti