Javascript dizileri ve nesneleri diziler. ForEach ve ilgili yöntemler. ▍Bazı () yöntem güçleri

Bu derste dizilerle tanışacağız, nasıl oluşturulacağını öğreneceğiz, elemanları üzerinde işlemler gerçekleştireceğiz ve ayrıca onlarla çalışırken mevcut olan temel yöntemleri ve özellikleri ele alacağız.

dizi kavramı

Dizi, bir adı olan ve bir Array nesnesinin örneği olan sıralı bir veri koleksiyonudur. Seri numaraları (indeks) ile erişilen öğelerden oluşur. Dizideki öğelerin numaralandırılması 1'den değil 0'dan başlar.

Aşağıdaki şekil 7 elemanlı bir sayısal diziyi göstermektedir. Bu dizinin elemanları şu verileri içerir: 1 eleman (0 dizin) - sayı 123, 2 eleman (1 dizin) - sayı 214, 3 eleman (2 dizin) - sayı 315, vb.

// dizinin çıktısını alacağımız eleman

Bir dizi oluşturma (bildirme)

Diziler, yeni operatör ve Dizi oluşturucu işlevi kullanılarak JavaScript'te oluşturulur. Array yapıcı işlevinin parantez içinde aşağıdaki değerlerden birini belirtebilirsiniz:

• Sayı. Bu durumda, bu işlev belirtilen sayıda öğeden oluşan bir dizi oluşturacaktır. Bu öğelerin tümü tanımsız değerlere sahip olacaktır.
• Virgülle ayrılmış birkaç değer. Bu durumda, Array yapıcı işlevi belirtilen sayıda öğeden oluşan bir dizi oluşturacak ve bunlara uygun değerleri atayacaktır.
• Hiçbir şey değil. Bu durumda, bu işlev boş bir dizi oluşturacaktır.

Diğer birçok programlama dilinden farklı olarak, JavaScript'teki diziler otomatik olarak yeniden boyutlandırılır, yani. doğası gereği dinamiktirler. Bu dizilerin boyutlandırılması gerekmez. JavaScript dizilerinin bir diğer ayırt edici özelliği, aynı dizinin farklı öğelerinin farklı veri türleri içerebilmesidir.

Dizi öğeleriyle çalışma

Bir dizinin belirli bir elemanına atıfta bulunmak için, bu dizinin adını ve dizinini köşeli parantez içinde belirtmelisiniz. Bu işleme indeksleme işlemi de denir.

Örneğin, boş bir dizi oluşturalım ve buna 4 metin öğesi ekleyelim:

// boş bir dizi oluştur smartphoneColors var smartphoneColors = new Array (); // dizinin 1 elemanına (indeks 0) "Black" değerini atayın smartphoneColors = "Black"; // dizinin 2. elemanına (indeks 1) "Beyaz" değerini atayın smartphoneColors = "Beyaz"; // "Gray" akıllı telefona 3 dizi elemanı (indeks 2) atayınColors = "Gray"; // dizinin 4. öğesine (indeks 3) "Blue" değerini atayın smartphoneColors = "Blue";

Örneğin, smartphoneColors dizisinin 2 ve 4 değerlerini tarayıcı konsoluna (F12) yazdıralım:

Console.log ("2 öğe =" + akıllı telefon Renkleri); konsol.log ("4. öğe =" + akıllı telefon Renkleri);

Dizi uzunluğu (dizideki eleman sayısı)

Bir dizideki eleman sayısı, uzunluk özelliği kullanılarak belirlenir.

// Dizi işlevindeki öğelerin değerlerini listeleyerek bir dizi oluşturun var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // değişken lengthArray dizisinin uzunluğunu atar volumeHDD'ler var lengthArray = volumeHDDs.length;

Bir dizinin ilk elemanı nasıl alınır

Dizinin ilk elemanının değeri, bu dizinin köşeli parantezleri içinde 0 sayısı belirtilerek elde edilir:

// 3 elemanlı bir dizi oluştur var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // dizinin ilk öğesinin değerini al var firstValue = volumeHDDs;

Bir dizinin son elemanı nasıl alınır

Dizinin son öğesinin değeri, bu dizinin köşeli parantezleri içinde dizi_adı.uzunluk-1 ifadesi belirtilerek elde edilir:

// 3 elemanlı bir dizi oluştur var volumeHDDs = new Array ("500Gb", "1Tb", "2Tb"); // dizinin son elemanının değerini al var lastValue = volumeHDDs;

Bir dizi üzerinde yineleme

Dizinin elemanları üzerinde yineleme, for döngüsü kullanılarak gerçekleştirilir.

Örneğin, dizinin tüm öğelerini yineleyelim ve değerlerini tarayıcı konsolunda (F12) görüntüleyelim:

// 4 elemandan oluşan nameStudents dizisi oluşturma var nameStudents = new Array ("Petya", "Vasya", "Kolya", "Maxim"); // dizi öğelerini 0'dan dizi-1'in uzunluğuna kadar yinele (var i = 0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }

Silme operatörü ne işe yarar?

Silme operatörü, diziden bir öğeyi çıkarmak için değil, dizinin belirli bir öğesine tanımsız bir değer atamak için kullanılır.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets'i sil; for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Dizi Nesnesi Yöntemleri

Array nesnesi, dizi öğeleriyle çalışmak için şu yöntemleri içerir: pop (), push (), shift (), unshift (), dilim (), splice (), birleştirme (), bölme (), ters (), sıralama () ...

Bir dizinin son öğesini kaldırma - pop

Pop yöntemi, bir dizinin son öğesini kaldırmak için tasarlanmıştır. Bu yöntemin parametresi yoktur. Sonuç olarak, dizinin son (kaldırılan) öğesinin değerini döndürür.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.pop (); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Bir dizinin sonuna eleman ekleme - itin

Push yöntemi, bir dizinin sonuna bir öğe eklemek için tasarlanmıştır. Bu elemanın değeri, bu metoda parametre olarak belirtilir. Sonuç olarak, push yöntemi, eklenen değeri dikkate alarak dizideki öğelerin sayısını döndürür.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.push ("Jüpiter"); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Bir dizinin ilk öğesini kaldırma - shift

Shift yöntemi, bir diziden ilk öğeyi kaldırmak için tasarlanmıştır, yani. 0 indeksli eleman. Dizinin diğer tüm elemanları başa kaydırılır, yani. dizinleri 1 azaltılır. Bu yöntem, yürütme sonucunda silinen dizi öğesinin değerini döndürür.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.shift(); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Bir dizinin başına eleman ekleme - kaydırmayı kaldır

unshift yöntemi, bir dizinin başına bir öğe eklemek için tasarlanmıştır. Bu elemanın değeri, bu metoda parametre olarak belirtilir. Sonuç olarak bu yöntem, katma değeri dikkate alarak dizideki eleman sayısını döndürür.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.unshift ("Jüpiter"); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Dizi öğelerini kopyalama - dilim

Slice yöntemi, belirtilen dizi öğelerini kopyalamak için tasarlanmıştır. Bu yöntem orijinal diziyi değiştirmez, ancak sonuç olarak kopyalanan öğelerin yeni bir dizisini döndürür.

Dilim yönteminin 2 parametresi vardır:

• 1 parametre (gerekli) - öğelerin kopyalanmaya başlanacağı öğenin dizinini belirtmek için kullanılır;
• 2 parametre (isteğe bağlı) - kopyalamak istediğiniz öğenin dizinini belirtmek için kullanılır. Bunu belirtmezseniz, belirtilen dizinin sonuna kadar olan elemanlar kopyalanacaktır.

var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets = namePlanets.slice (2,3); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Eleman ekleme ve/veya çıkarma - ekleme

Ekleme yöntemi, dizi öğelerini eklemek ve/veya kaldırmak içindir.

1. Ekleme yöntemi, diziden bazı öğelerini kesmenize olanak tanır; diziden kaldırılacaklar:

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.splice (2,2); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

2. Ekleme yöntemi aynı zamanda diziye eleman eklemenize (parametre 2 0 ise) veya aynı anda dizi elemanları ekleyip çıkarmanıza (parametre 2 0'dan büyükse) izin verir.

Bu yöntemin 3 parametresi vardır:

• 1 parametre (gerekli) - elemanları kesmeye başladığımız elemanın indeksini belirtmek için tasarlanmıştır;
• Parametre 2 (gerekli) - kesilecek eleman sayısını belirtmek için tasarlanmıştır;
• 3 ve sonraki parametreler (isteğe bağlı) - diziye eleman eklemek için tasarlanmıştır.

var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.splice (1,1, "Uranüs", "Neptün", "Satürn"); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Diziyi dizgeye dönüştür - katıl

Join yöntemi, bir diziyi bir dizgeye dönüştürmek içindir. Bu yöntem, dizi öğelerini bir dizgeye dönüştürürken aralarında bağlantı dizesi olarak kullanılan bir parametreye sahiptir. Parametre olarak hiçbir şey belirtilmezse, dizi öğelerini birleştirmek için virgül (",") kullanılır.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); var strPlanets = namePlanets.join(); konsol.log ("Satır:" + strPlanets); var strPlanets2 = namePlanets.join (""); konsol.log ("Satır:" + strPlanets2);

Dizeyi diziye dönüştür - bölme

Split yöntemi, bir dizeyi diziye dönüştürmek içindir. Bu yöntemin, verilen dizenin bir dizi dizeye bölüneceği bir dize belirtebileceğiniz bir parametresi vardır.

Var strElementComputers = "Sistem Birimi, Monitör, Klavye, Fare, Sütunlar, Yazıcı"; var elementComputers = strElementComputers.split (","); konsol.log ("Dizideki öğe sayısı:" + elementComputers.length); for (var i = 0; i<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }

Dizi öğelerini ters sırada yeniden sıralama - ters

Ters yöntem, dizi öğelerini ters sırada yeniden sıralamak için tasarlanmıştır.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.reverse(); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Dizi öğelerini sıralama - sıralama

Sıralama yöntemi, bir dizinin öğelerini sıralamak içindir. Varsayılan olarak, bu yöntem diziyi dizeler olarak sıralar.

Var namePlanets = new Array ("Venüs", "Merkür", "Dünya", "Mars"); namePlanets.sort(); konsol.log ("Dizideki öğelerin sayısı:" + namePlanets.length); for (var i = 0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Dizilerle çalışma yöntemlerinin yalnızca bir kısmını anlattım.

Burada dizi elemanlarının eklenmesi, çıkarılması hakkında konuşacağız. Bir diziyi ters çevirme ve sıralamanın yanı sıra dizileri dilimleme, değiştirme ve birleştirme hakkında.

Bir diziye eleman ekleme.

Diziye yeni öğeler eklemek için length özelliğini kullanabilirsiniz:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; konsol.log (myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Bu işe yarayacak çünkü dizi elemanları sıfırdan numaralandırılmıştır ve uzunluk bir tane daha. Uzunluk her zaman eşdeğer dizin + 1 bu nedenle dizinin sonuna yeni bir eleman eklemek çok kolaydır. Garip, ancak dizinin uzunluğundan çok daha büyük bir konuma bir öğe ekleyebilirsiniz:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; konsol.log (myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", tanımsız × 95, "Lindsey Buckingham"] console.log (myArray.length); // 100

Yorumlarda görüldüğü gibi 95 boş slot ve bir "Lindsey Buckingham" elemanı dizinin sonuna eklenecektir. Bundan sonra 100 uzunluğunu elde ederiz. Diziye yeni bir eleman eklemenin bir başka yolu da metodu kullanmaktır. itmek ():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push ("Ringo Starr", "George Martin"); konsol.log (myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Yöntem itmek () her zaman dizinin yeni uzunluğunu döndürür (bizim durumumuzda 5). kullanarak bir öğe ekleyebilirsiniz. ek ():

Var myArray = ["palamut", "kayın", "mongongo", "macadamia"]; myArray.splice (2, 0, "kaju"); // "kaju" dizinini 2 konsol.log (myArray) dizinine ekler; // ["palamut", "kayın", "kaju", "mongongo", "macadamia"]

İkinci argüman 0 olduğunda, hiçbir öğenin kaldırılmayacağı ve bu nedenle sonraki argümanların ilk argümanda belirtilen konumda diziye ekleneceği anlamına gelir.

Bir diziden eleman çıkarma

Bir öğeyi kaldırmak, eklemekten biraz daha zordur. Bir dizinin sonundan bir öğeyi kaldırmak için şunu kullanabilirsiniz: pop():

Var myArray = ["7-yukarı", "Sprite", "Zencefilli Gazoz", "Limonata"]; myArray.pop(); konsol.log (myArray); // ["7'li", "Sprite", "Zencefilli Gazoz"]

Yöntem pop () her zaman dizideki son elemanı kaldırır ve onu döndürür.

Ayrıca kullanabilirsiniz ek () yöntem:

Var myArray = ["manyok", "hindistan cevizi", "acı bakla", "ravent"]; myArray.splice (2, 1); // index 2 console.log'daki (myArray) elemanı kaldır; // ["manyok", "hindistan cevizi", "ravent"]

Yöntemden farklı olarak ek (), eleman eklemek için kullanılan, burada ikinci argüman 1'dir, bu da indeksi 2 olan (veya arka arkaya 3.) elemanı kaldırmak istediğimizi söyler. Bu durumda "lupin" öğesi kaldırılmıştır.

Operatörü kullanarak bir dizinin bir öğesini kaldırabilirsiniz. silmek:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; konsol.log (myArray.length); // 4 myArray'i sil; // Eliza console.log'u (myArray.length) kaldır; // 4 konsol.log (myArray); // ["Byte Bandit", tanımsız × 1, "Jeefo", "Michelangelo"]

İlk önemli not: silmek () eleman kaldırıldıktan sonra dizinin uzunluğunu değiştirmez (dizideki son eleman olsa bile). İkinci: silmek () kaldırılan öğenin değerini tanımsız olarak değiştirir, bu nedenle geri giderken myArray = tanımsız.

Bir diziden bir öğeyi kaldırmanın iyi bir yolu, John Resig'in Array.remove'unu kullanmaktır. Aşağıda, sayfasından alınan bir kullanım örneği verilmiştir:

// Dizi Kaldır - John Resig (MIT Lisanslı) Array.prototype.remove = function (den, to) (var rest = this.slice ((to || from) + 1 || this.length); this.length = itibaren< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

Underscore.js'deki işlevlerden biri olan Viral Patel'in veya jQuery'nin grep () çözümüne bakmak isteyebilirsiniz.

Ek olarak, JavaScript bir yöntem var vardiya (), dizideki ilk elemanı kaldırır ve değerini döndürür. Kodu görelim:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; konsol.log (myArray.length); // 4 var firstItem = myArray.shift(); konsol.log (ilkItem); // Matt Kramer konsol.log (myArray.length); // 3 konsol.log (myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Yöntemi kullanma vardiya ()öğeyi kaldırdık, ancak değerini firstItem değişkenimize kaydettik. Dizinin uzunluğu 4'ten 3'e değişti.

Bu yöntem, yöntemle birlikte yararlı olabilir itmek (). Bunları birlikte kullanarak, bir dizideki öğeleri verimli bir şekilde sıraya koyabiliriz. Baştan bir eleman çıkarıp sonuna yenisini ekleyerek dizinin uzunluğunu koruyoruz.

Aksine, yöntemi kullanabiliriz kaydırmayı kaldır () dizinin başına bir eleman eklemek için:

Var myArray = ["apito", "kastanyetler", "maraca"]; konsol.log (myArray.length); // 3 myArray.unshift ("çan çubuğu", "tan-tan"); konsol.log (myArray.length); // 5 konsol.log (myArray); // ["zil çubuğu", "tan-tan", "apito", "kastanyetler", "maraca"]

Yöntemi kullanma kaydırmayı kaldır () yöntem ile pop(), dizinin başına öğeler ekleyip sonundan kaldırarak geriye doğru sıraya girebilirsiniz.

Dizi elemanlarının ters çevrilmesi ve sıralanması.

Bir dizideki öğeleri çevirmek için kullanabiliriz ters ():

Var myArray = ["geri sayım", "son", "the"]; konsol.log (myArray); // ["geri sayım", "son", "the"] myArray = myArray.reverse(); konsol.log (myArray); // ["Nihai geri sayım"]

Yöntemi kullanarak bir dizinin öğelerini alfabetik olarak sıralamak mümkündür. çeşit ():

Var myArray = ["ksilofonlar", "zebralar", "juggernauts", "avokadolar"]; konsol.log (myArray); // ["ksilofonlar", "zebralar", "juggernauts", "avokadolar"] myArray = myArray.sort (); konsol.log (myArray); // ["avokado", "juggernauts", "ksilofonlar", "zebralar"]

Ama bu sayılarla işe yaramaz.

Var myArray =; konsol.log (myArray); // myArray = myArray.sort(); konsol.log (myArray); //

Numaraları sıralamanız gerekirse, aşağıdaki kodu kullanabilirsiniz:

karşılaştırmaSayıları (a, b) (dönüş a - b;) işlevi var myArray =; konsol.log (myArray); // myArray = myArray.sort (numaraları karşılaştır); konsol.log (myArray); //

Yapıştırılan basit bir işlevle yukarıda gösterildiği gibi çeşit (), sayıları içeren dizi doğru şekilde sıralanacaktır.

Dizileri birleştirmek.

2 veya daha fazla diziyi birleştirebilir ve birleştirilmiş dizilerin öğelerini içeren 1 dizi elde edebilirsiniz. Bunun için şu yöntemi kullanıyoruz. concat ():

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat (myArray2); konsol.log (myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat ("Chris Murphy", "Patrick Pentland"); konsol.log (myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Bir diziyi bölme.

İşlevi kullanarak mevcut bir diziden 1 veya daha fazla öğe içeren yeni bir dizi oluşturabilirsiniz. dilim ():

Var myArray = ["Vokal", "Bas", "Gitar", "Davul", "Elma", "Portakal"]; var myNewArray = myArray.slice (4); konsol.log (myNewArray); // ["Elmalar", "Portakallar"]

Yöntem dilim () 1 veya 2 argüman alır. 1 argüman (indeks) iletilirse, verilen dizinden başlayarak eskisinin tüm öğelerinden yeni bir dizi oluşturulur. 2 argüman iletilirse, ilk argümandan başlayan ve sonuncusu hariç ikinci parametrede indeksi geçirilen öğeye kadar olan öğelerden yeni bir dizi oluşturulur. Daha açık hale getirmek için aşağıdaki kodu görelim:

Var myArray = ["Vokal", "Bas", "Gitar", "Davul", "Elma", "Portakal"]; var myNewArray = myArray.slice (0, 4); konsol.log (myNewArray); // ["Vokal", "Bas", "Gitar", "Davul"]

Bir dizideki öğelerin değiştirilmesi.

Kullanırız ek () diziden elemanları kaldırmak için, ancak dizideki bir elemanı yeni elemanlarla da değiştirebiliriz:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice (3, 1, "Scott Shriner"); // 1 öğeyi dizin 3 konsol.log (myArray) ile değiştirin; // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Yöntem ek () her zaman kaldırılan öğeleri içeren bir dizi döndürür. Satır 2, 1 öğe "Brian Bell" döndürür.

Çözüm

Bu makaleler, JavaScript'te dizilerle çalışma yöntemlerini açıklamaktadır. Bu gönderiye dahil etmediğim bazı ek öğeler MDN'de görüntülenebilir. Yalnızca IE9+'da çalışırlar, bu nedenle kullanışlı olmayabilirler.

Ekleyeceğiniz bir şey var mı? Veya dizileri yönetmenize yardımcı olacak ilginç bir kitaplık biliyor musunuz? Lütfen yorum yap!

• Tercüme

• I. Gerçek diziler arasında döngü yapmak
  1. ForEach Yöntemi ve İlgili Yöntemler
  2. Döngü için
  3. for ... in döngüsünün doğru kullanımı
  4. for ... of loop (bir yineleyicinin örtük kullanımı)
  5. Bir yineleyicinin açık kullanımı
• 1. Gerçek diziler üzerinde yineleme yapmak için yöntemler kullanma
  2. Gerçek bir diziye dönüştürme
  3. Çalışma zamanı nesneleri hakkında bir not

I. Gerçek diziler arasında döngü yapmak

Şu anda, gerçek bir dizinin öğeleri üzerinde yineleme yapmanın üç yolu vardır:

1. Array.prototype.forEach yöntemi;
2. döngü için klasik;
3. Döngüde ... için "iyi biçimlendirilmiş".

Ek olarak, yakında, yeni ECMAScript 6 (ES 6) standardının ortaya çıkmasıyla birlikte iki yol daha bekleniyor:

1. for ... of loop (bir yineleyicinin örtük kullanımı);
2. bir yineleyicinin açık kullanımı.

1. forEach yöntemi ve ilgili yöntemler

Projeniz ECMAScript 5 (ES5) standardının özelliklerini destekleyecek şekilde tasarlandıysa, yeniliklerinden biri olan forEach yöntemini kullanabilirsiniz.

Kullanım örneği:
var a = ["a", "b", "c"]; a.forEach (işlev (giriş) (console.log (giriş);));
Genel olarak, forEach'i kullanmak, bu yöntem için yerel desteğe sahip olmayan tarayıcılar için es5-shim öykünme kitaplığının bağlanmasını gerektirir. Bunlar, bugün hala kullanımda olan IE 8 ve önceki sürümleri içerir.

forEach'in avantajı, otomatik olarak argüman olarak geri çağırma işlevine iletildiklerinden, geçerli dizi öğesinin indeksini ve değerini depolamak için yerel değişkenler bildirmeye gerek olmamasıdır.

Her bir öğe için bir geri aramanın potansiyel maliyeti konusunda endişeleniyorsanız, endişelenmeyin ve bunu okuyun.

ForEach, bir dizinin tüm öğelerini yinelemek üzere tasarlanmıştır, ancak bunun yanı sıra ES5, öğelerin tümü veya bir kısmı üzerinde yineleme yapmak ve bunlarla bazı eylemler gerçekleştirmek için birkaç daha kullanışlı yöntem sunar:

• Her - dizinin her bir öğesi için geri arama, true değerine dönüştürülen bir değer döndürürse true değerini döndürür.
• bazı - dizinin en az bir öğesi için geri arama, true değerine dönüştürülen bir değer döndürürse true değerini döndürür.
• filtre - geri çağırmanın doğru olduğu orijinal dizinin bu öğelerini içeren yeni bir dizi oluşturur.
• map - geri arama tarafından döndürülen değerlerden oluşan yeni bir dizi oluşturur.
• azaltmak - bir diziyi tek bir değere indirger, ilkinden başlayarak geri aramayı dizinin her bir öğesine sırayla uygular (dizi öğelerinin ve diğer son işlevlerin toplamını hesaplamak için yararlı olabilir).
• redüksiyonRight - Azaltmaya benzer şekilde çalışır, ancak öğeler üzerinde ters sırada yinelenir.

2. for döngüsü

Kurallar için iyi yaşlı:

Var a = ["a", "b", "c"]; var indeksi; for (indeks = 0; dizin< a.length; ++index) { console.log(a); }
Dizinin uzunluğu tüm döngü boyunca değişmezse ve döngünün kendisi performans açısından kritik bir kod parçasına aitse (ki bu pek olası değildir), o zaman uzunluğunu saklamak için for'nun "daha uygun" sürümünü kullanabilirsiniz. dizi:

Var a = ["a", "b", "c"]; var index, len; for (indeks = 0, len = a.uzunluk; indeks< len; ++index) { console.log(a); }
Teoride, bu kod öncekinden biraz daha hızlı çalışmalıdır.

Yineleme sırası önemli değilse, optimizasyon açısından daha da ileri gidebilir ve yineleme sırasını tersine değiştirerek dizinin uzunluğunu depolamak için değişkenden kurtulabilirsiniz:

Var a = ["a", "b", "c"]; var indeksi; for (index = a.length - 1; index> = 0; --index) (console.log (a);)
Ancak modern JavaScript motorlarında bu optimize edilmiş oyunlar genellikle hiçbir şey ifade etmez.

3. for ... in döngüsünün doğru kullanımı

for ... in döngüsü kullanmanız tavsiye edilirse, diziler üzerinde yinelemenin amaçlanmadığını unutmayın. Yaygın yanlış anlamanın aksine, for ... in döngüsü, dizi dizinleri üzerinde değil, nesnenin numaralandırılmış özellikleri üzerinde yinelenir.

Ancak, seyrek diziler üzerinde yineleme gibi bazı durumlarda for ... in, aşağıdaki örnekte gösterildiği gibi bazı önlemler aldığınız sürece yararlı olabilir:

// a seyrek bir dizidir var a =; bir = "a"; bir = "b"; bir = "c"; for (var key in a) (if (a.hasOwnProperty (key) && /^0$|^\d*$/.test(key) && key)<= 4294967294) { console.log(a); } }
Bu örnekte, döngünün her yinelemesinde iki kontrol gerçekleştirilir:

1. dizinin key adında kendi özelliğine sahip olması (prototipinden miras alınmamış).
2. bu anahtar, değeri 4294967294'ten küçük bir tamsayının ondalık gösterimini içeren bir dizedir. Son sayı nereden geliyor? ES5'teki bir dizi indeksinin tanımından, bir dizideki bir elemanın sahip olabileceği en büyük indeks şu şekildedir: (2 ^ 32 - 2) = 4294967294.

Tabii ki, bu tür kontroller döngü yürütülürken fazladan zaman alacaktır. Ancak, seyrek bir dizi durumunda, bu yöntem bir for döngüsünden daha verimlidir, çünkü bu durumda yalnızca dizide açıkça tanımlanmış olan öğeler yinelenir. Bu nedenle, yukarıdaki örnekte, for döngüsündeki 10001'e karşı yalnızca 3 yineleme (0, 10 ve 10000, dizinler için) gerçekleştirilecektir.

Bir dizi üzerinde her yineleme yapmanız gerektiğinde böyle hantal bir kontrol kodu yazmamak için, onu ayrı bir fonksiyon olarak tasarlayabilirsiniz:

işlev arrayHasOwnIndex (dizi, anahtar) (array.hasOwnProperty (anahtar) && /^0$|^\d*$/.test(anahtar) && anahtarını döndürür<= 4294967294; }
Ardından, örnekteki döngünün gövdesi önemli ölçüde azaltılacaktır:

(a anahtarını girin) için (if (arrayHasOwnIndex (a, key)) (console.log (a);))
Yukarıdaki kontrol kodu evrenseldir ve tüm durumlar için uygundur. Ancak bunun yerine, resmi olarak ve tamamen doğru olmasa da, çoğu durumda uygun olsa da daha kısa bir sürüm kullanabilirsiniz:

For (anahtar a) (if (a.hasOwnProperty (anahtar) && String (parseInt (anahtar, 10)) === anahtar) (console.log (a);))

4. Döngü for ... of (bir yineleyicinin örtük kullanımı)

ES6, hala taslak durumundayken, yineleyicileri JavaScript'e tanıtmalıdır.

yineleyici bir dizi değer (sonlu veya sonsuz) elde etmek için standart bir yol tanımlayan nesne uygulamalı bir protokoldür.
Yineleyici, sonraki () yönteminin tanımlandığı bir nesnedir - iki özelliğe sahip bir nesne döndüren, bağımsız değişkeni olmayan bir işlev:

1. done (boolean) - yineleyici yinelenen dizinin sonuna ulaştıysa doğrudur. Aksi takdirde, yanlış.
2. değer - yineleyici tarafından döndürülen değeri tanımlar. done özelliği doğruysa tanımsız (yok) olabilir.

Dahil olmak üzere birçok yerleşik nesne. gerçek dizilerin varsayılan yineleyicileri vardır. Gerçek dizilerde bir yineleyici kullanmanın en basit yolu, new for ... yapısını kullanmaktır.

for ... of kullanımına bir örnek:

Var val; var a = ["a", "b", "c"]; for (val of a) (console.log (val);)
Yukarıdaki örnekte, for ... of döngüsü, dizideki her değeri almak için dolaylı olarak Array nesnesinin yineleyicisini çağırır.

5. Bir yineleyicinin açık kullanımı

Yineleyiciler ayrıca açıkça kullanılabilir, ancak bu durumda kod, for ... of döngüsüne kıyasla çok daha karmaşık hale gelir. Şuna benziyor:

Var a = ["a", "b", "c"]; var it = a.entries(); var girişi; while (! (giriş = it.next ())). yapılır) (console.log (giriş.değer);)
Bu örnekte Array.prototype.entries yöntemi, dizinin değerlerini görüntülemek için kullanılan bir yineleyici döndürür. Her yinelemede giriş.değer, [anahtar, değer] biçiminde bir dizi içerir.

II. Dizi benzeri nesneler arasında döngü

JavaScript, gerçek dizilere ek olarak şunları da içerir: dizi benzeri nesneler ... Gerçek dizilerle ortak yönleri, uzunluk özelliğine ve dizinin elemanlarına karşılık gelen sayılar biçiminde adlara sahip özelliklere sahip olmalarıdır. Örnekler, NodeList koleksiyonunun DOM'sini ve herhangi bir işlev/yöntem içinde kullanılabilen sözde dizi bağımsız değişkenlerini içerir.

1. Gerçek diziler üzerinde yineleme yöntemlerini kullanma

Hepsi olmasa da en azından çoğu, gerçek diziler üzerinde yineleme yöntemleri, dizi benzeri nesneler üzerinde yineleme yapmak için kullanılabilir.

for ve for ... in yapıları, dizi benzeri nesnelere tam olarak gerçek dizilerle aynı şekilde uygulanabilir.

ForEach ve diğer Array.prototype yöntemleri, dizi benzeri nesneler için de geçerlidir. Bunu yapmak için Function.call veya Function.apply çağrısını kullanmanız gerekir.

Örneğin, bir Node nesnesinin childNodes özelliğine forEach uygulamak istiyorsanız, bunu şu şekilde yapabilirsiniz:

Array.prototype.forEach.call (node.childNodes, function (alt) (// alt nesneyle bir şeyler yapın));
Bu tekniğin yeniden kullanım kolaylığı için, ayrı bir değişkende Array.prototype.forEach yöntemine bir başvuru bildirebilir ve bunu bir steno olarak kullanabilirsiniz:

// (Bu, aşağıdaki tüm kodun aynı kapsamda olduğunu varsayar) var forEach = Array.prototype.forEach; // ... forEach.call (node.childNodes, işlev (alt) (// alt nesneyle bir şeyler yapın));
Dizi benzeri bir nesnenin bir yineleyicisi varsa, nesne üzerinde gerçek dizilerde olduğu gibi yineleme yapmak için açık veya örtük olarak kullanılabilir.

2. Gerçek bir diziye dönüştürün

Ayrıca dizi benzeri bir nesne üzerinde yineleme yapmanın çok basit başka bir yolu daha vardır: onu gerçek bir diziye dönüştürün ve gerçek diziler üzerinde yineleme yapmak için yukarıdaki yöntemlerden herhangi birini kullanın. Dönüştürme için, dizi benzeri herhangi bir nesneye uygulanabilen genel Array.prototype.slice yöntemini kullanabilirsiniz. Bu, aşağıdaki örnekte gösterildiği gibi çok basit bir şekilde yapılır:

Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0);
Örneğin, bir NodeList koleksiyonunu gerçek bir diziye dönüştürmek istiyorsanız, aşağıdaki gibi bir koda ihtiyacınız vardır:

Var divs = Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
Güncelleme: Yorumlarda belirtildiği gibi

Dizileri js'de indekslemeyi, elemanlarını kaldırmayı ve eklemeyi öğrenin.

JavaScript'teki bir dizi, bir değerler listesini depolamak için genel bir nesnedir.

Her türlü veriyi depolayabilmesi bakımından diğer değişkenlere benzer. Ancak bir dizinin bir değişkenden önemli bir farkı vardır: aynı anda birden fazla öğe depolayabilir.

Bir dizi, sıralı bir değerler topluluğudur. Her değere eleman denir ve indeks adı verilen kendi numarası vardır.

Bir dizi içindeki bir eleman herhangi bir tipte olabilir. Ayrıca, bir dizinin öğeleri farklı türlerde olabilir: sayılar, dizeler, mantıksal öğeler ve hatta nesneler veya diğer diziler.

Dizi öğelerinin sırası 0 tabanlıdır. Dizinin her zaman bir indeks ofsetine sahip olacağı ortaya çıktı: ilk elemanın indeksi 0, ikincisi 1, vb.

Aşağıda çeşitli türlerde öğeler içeren bir dizi örneği verilmiştir:

Bir dizi oluşturma (bildirme)

Diziler çok kullanışlıdır çünkü gerektiği kadar veri depolayabilirler. Bir js -dizisinin mümkün olan maksimum boyutu 2 32 elemandır.

JavaScript'e bir dizi oluşturmak istediğimizi söylemeliyiz. Bunun için iki seçenek vardır: köşeli parantez içindeki değer veya yeni anahtar kelime.

Kısa gösterim: köşeli parantez kullanma

Köşeli parantez içine alınmış virgülle ayrılmış bir değerler listesi.

var myArray = ["Jack", "Sawyer", "John", "Desmond"];

Dizinin içeriği köşeli parantezler arasında ne olduğuna göre belirlenir. Bu durumda, her değer bir virgülle ayrılır.

Değerler, basit değişkenlerle aynı şekilde ayarlanır, yani dizeler tırnak içine alınmış olarak bildirilmelidir, vb.

Boş bir dizi bildirmek için parantezleri boş bırakın:

var myArray =;

Uzun gösterim: Array() yapıcısını kullanma

var LosArray = new Array ("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array ("Laura", 2, ["Bob", "Leland", "Dale"]);

Yeni anahtar kelime, JavaScript'e değerleri parametre olarak geçirilen yeni bir dizi oluşturmasını söyler.

Dizinizde kaç eleman olacağını önceden biliyorsanız, bu değeri yapıcıya hemen iletebilirsiniz.

var myArray = new Array (80);

Yukarıdaki ifade, tanımsız değerlere sahip 80 yuvalık boş bir dizi oluşturacaktır.

Boş bir dizi bildirmek:

var myArray = new Array();

Dizi öğelerine erişme

Her bir elemanın indeksini kullanarak, dizideki herhangi bir veri ile çalışabilirsiniz, operatörü kullanarak bunlara atıfta bulunabilirsiniz:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; konsol.log (myArray); // “Jack” console.log'u (myArray) yazdırır; // "Desmond" yazdırır

Bir dizinin birkaç düzeyi olabilir, yani her öğenin kendisi bir dizi olabilir. Sonuç, iki boyutlu bir js dizisi olacaktır. Diğerlerinin içinde yer alan bu dizilere nasıl atıfta bulunabiliriz - " çok boyutlu diziler»?

Örnek olarak, bir aileyi temsil eden bir diziyi ele alalım. Bu aileden çocuklar, ana dizinin içinde ayrı bir diziye kaydedilir:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Bunu şöyle hayal edebilirsiniz:

"Lisa" anlamına atıfta bulunmak için:

var lisa = familyArray; konsol.log (lisa); // "Lisa"yı görüntüler

Neredeyse süresiz olarak bu şekilde devam edebilirsiniz, bu da iç içe geçmiş veri kümelerini dizilerde saklamanıza ve bunlara indeksleri kullanarak erişmenize olanak tanır.

Bir diziye öğe ekleme

Dizi elemanlarına karşılık gelen indekslerini kullanarak nasıl erişeceğimizi bulduk. Benzer şekilde, örneğin şunları bildirerek öğeler ekleyebilir (veya değiştirebilirsiniz):

var myArray = ["Keith", "Güneş"]; myArray = "Juliet"; konsol.log (myArray); // "Keith, Sun, Juliet" yazdırır

Daha önce başka öğe olmayan bir dizine sahip bir öğe bildirirsem ne olur? Dizinin kendisi tüm eksik öğeleri yaratacak ve onlara tanımsız değerini atayacaktır:

var myArray = ["Keith", "Güneş"]; myArray = "Juliet"; konsol.log (myArray.length); // "6" konsol.log (myArray) yazdırır; // yazdırır ["Keith", "Sun", undefined, undefined, undefined, "Juliet"]

js -array öğesinin length özelliğini ne kadar süredir kullandığını öğrenebilirsiniz. Yukarıdaki örnekte, dizide altı eleman vardır ve bunların üçüne bir değer atanmamıştır - bunlar tanımsız olarak işaretlenmiştir.

() yöntemini itin

Push () yöntemini kullanarak bir js dizisine bir veya daha fazla öğe ekleyebilirsiniz. Push () sınırsız sayıda parametre kabul eder, hepsi dizinin sonuna eklenecektir.

var myArray = ["Keith", "Sut"]; myArray.push ("Juliet"); // myArray.push ("Libby", "Shannon" dizisinin sonuna "Juliet" öğesini ekler); // "Libby" ve "Shannon" öğelerini console.log (myaArray) dizisinin sonuna ekler ); // ["Keith", "Güneş", "Juliet", "Libby", "Shannon"] yazdırır

unshift() yöntemi

unshift () yöntemi, dizinin başına öğeler eklemesi dışında, push () ile aynı şekilde çalışır.

var myArray = ["Keith", "Güneş"]; myArray.unshift ("Juliet"); // "Juliet" öğesini myArray.unshift ("Libby", "Shannon") dizisinin başına ekler; // Konsol.log (myArray) dizisinin başına Libby ve Shannon'ı ekler; // ["Libby", "Shannon", "Juliet", "Keith", "Sun"] çıktısını alır

Dizi öğelerini kaldırma

Pop() ve shift() yöntemleri

pop () ve shift () yöntemleri sırasıyla dizinin son ve ilk öğesini kaldırır:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // "Keith" myArray.shift() öğesini kaldırır; // Jack elemanını console.log'u (myArray) kaldırır; // ["Sawyer", "John", "Desmond"] yazdırır

Ekleme () yöntemi

splice () yöntemini kullanarak, öğelerin tam dizinini belirtirken bir diziye öğe ekleyebilir veya kaldırabilirsiniz.

Aşağıdaki örnekte, splice () yöntemi, dizin 2'den başlayarak iki öğe ekler ( yani, üçüncü elementten):

var meyveArray = ["elma", "şeftali", "portakal", "limon", "kireç", "kiraz"]; meyveArray.splice (2, 0, "kavun", "muz"); konsol.log (fruitArray); // Baskılar [elma, şeftali, kavun, muz, portakal, limon, misket limonu, kiraz]

splice() yönteminin ilk parametresi indekstir. Elemanların hangi konumda ekleneceğini/kaldırılacağını belirtir. Örneğimizde indeks 2'yi seçtik ( "turuncu" anlamına gelen).

İkinci parametre, kaldırılacak öğe sayısıdır. 0 değerini belirledik, bu nedenle hiçbir şey silinmeyecek.

Aşağıdaki parametreler isteğe bağlıdır. Diziye yeni değerler eklerler. Bizim durumumuzda, dizin 2'den başlayarak "kavun" ve "muz" eklememiz gerekiyor.

• Tercüme

Günümüzde geliştirilmekte olan çoğu uygulamanın bir tür veri seti ile etkileşime girmesi gerekmektedir. Koleksiyonlardaki öğelerin işlenmesi, karşılaşmış olabileceğiniz yaygın bir işlemdir. Örneğin dizilerle çalışırken, tereddüt etmeden, şuna benzeyen olağan for döngüsünü kullanabilirsiniz: for (var i = 0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Bir ürün listesi görüntülememiz ve gerekirse kategorilere ayırmamız, filtrelememiz, aramamız, bu listeyi veya öğelerini değiştirmemiz gerektiğini varsayalım. Listenin öğelerini içeren bazı hesaplamaları hızlı bir şekilde yapmanız gerekebilir. Diyelim ki bir şeye bir şey eklemeniz, bir şeyi bir şeyle çarpmanız gerekiyor. JavaScript'te, bu tür sorunları çözmeyi normal bir for döngüsü kullanmaktan daha hızlı ve daha kolay hale getiren araçlar bulabilir misiniz?

Aslında, JavaScript bu tür olanaklar sağlar. Bazıları, çevirisini bugün dikkatinize sunduğumuz materyalde tartışılmaktadır. Özellikle, uzatma operatörü, for ... of döngüsü ve include (), bazı (), her (), filtre (), harita () ve azalt () yöntemlerinden bahsediyoruz. Burada esas olarak diziler hakkında konuşacağız, ancak burada tartışılan teknikler genellikle başka tür nesnelerle çalışmak için uygundur.

JS'de geliştirmeye yönelik modern yaklaşımların incelemelerinin genellikle ok işlevleri kullanılarak hazırlanan örnekleri içerdiği belirtilmelidir. Belki onları çok sık kullanmıyorsunuz - belki onlardan hoşlanmadığınız için, belki yeni bir şeyler öğrenmek için çok fazla zaman harcamak istemediğiniz için ya da belki de işinize yaramıyorlar. Bu nedenle, burada çoğu durumda aynı eylemleri gerçekleştirmek için iki seçenek gösterilecektir: normal işlevlerin kullanılması (ES5) ve ok işlevlerinin kullanılması (ES6). Ok işlevlerinde yeni olanlar için, ok işlevlerinin işlev bildirimlerine ve işlev ifadelerine eşdeğer olmadığına dikkat edin. Birini diğerinin yerine koymamalısınız. Özellikle bu, this anahtar sözcüğünün normal ve ok işlevlerinde farklı davranmasından kaynaklanmaktadır.

1. Genişletme operatörü

Spread operatörü, bu operatörün kullanıldığı yerde diziler yerine elemanlarını değiştirerek dizileri "genişletmenize" izin verir. Nesne değişmezleri için benzer bir yaklaşım önerilmiştir.

▍ Spread Operatörünün Güçlü Yönleri

• Bu, bir diziden tek tek öğeleri "çekmenin" basit ve hızlı bir yoludur.
• Bu operatör, dizi ve nesne değişmezleriyle çalışmak için uygundur.
• Bu, işlev argümanlarıyla çalışmak için hızlı ve sezgisel bir yöntemdir.
• Yayılma operatörü kodda fazla yer kaplamaz - üç nokta gibi görünür (...).

▍ Örnek

Diyelim ki bir döngü kullanmadan en sevdiğiniz ikramları listelemekle görevlendirildiniz. Yayılma operatörü ile bu şu şekilde yapılır:

2. Döngünün for ...

for… of deyimi, yinelenebilir nesneler arasında geçiş yapmak için tasarlanmıştır. Bu tür nesnelerin tek tek öğelerine (özellikle dizilerin öğelerine), örneğin bunların değiştirilmesine izin veren erişim sağlar. Normal for döngüsü için bir yedek olarak kabul edilebilir.

▍ for… of döngüsünün güçlü yönleri

• Bu, koleksiyon öğeleri eklemenin veya güncellemenin kolay bir yoludur.
• for… of döngüsü, öğeleri (toplama, çarpma vb.) kullanarak çeşitli hesaplamalar yapmanızı sağlar.
• Herhangi bir koşulu kontrol etmeniz gerektiğinde kullanmak uygundur.
• Bunu kullanmak, daha temiz ve daha okunabilir kodlara yol açar.

▍ Örnek

Bir araç kutusunun içeriğini tanımlayan bir veri yapınız olduğunu ve bu araçları görüntülemek istediğinizi varsayalım. Bir for ... of döngüsü ile bunu nasıl yapacağınız aşağıda açıklanmıştır:

3. include () yöntemi

include () yöntemi, koleksiyondaki belirli bir öğenin, özellikle, örneğin dizeleri içeren bir dizideki belirli bir dizenin varlığını kontrol etmek için kullanılır. Bu yöntem, kontrolün sonuçlarına bağlı olarak doğru veya yanlış döndürür. Kullanırken, büyük/küçük harf duyarlı olduğu akılda tutulmalıdır. Örneğin, koleksiyonun bir SCHOOL dize öğesi varsa ve okul dizesinde include () kullanılarak varlığın kontrolü gerçekleştirilirse, yöntem false döndürür.

▍ include () Yönteminin Güçlü Yönleri

• include () yöntemi, basit veri alma mekanizmaları oluşturmak için kullanışlıdır.
• Geliştiriciye, bazı verilerin bir dizide olup olmadığını belirlemesi için sezgisel bir yol sağlar.
• Öğeleri değiştirmek, filtrelemek ve diğer işlemleri gerçekleştirmek için koşullu ifadelerde kullanmak uygundur.
• Kullanımı gelişmiş kod okunabilirliğine yol açar.

▍ Örnek

Diyelim ki bir araba listesiyle temsil edilen bir garajınız var ve bu garajda belirli bir araba olup olmadığını bilmiyorsunuz. Bu sorunu çözmek için garajda bir arabanın varlığını kontrol etmenizi sağlayan bir kod yazmanız gerekir. include() yöntemini kullanalım:

4. Bazı () yöntemi

Some () yöntemi, aradığınız bazı öğelerin dizide olup olmadığını kontrol etmenizi sağlar. Kontrolün sonuçlarına göre doğru veya yanlış döndürür. Argümanın bir işlev olması ve örneğin normal bir dize olmaması dışında, yukarıdaki include () yöntemine benzer.

▍Bazı () yöntem güçleri

• Some () yöntemi, dizinin ilgilenilen öğelerden en az birini içerip içermediğini kontrol etmemizi sağlar.
• Kendisine iletilen işlevi kullanarak durumu kontrol eder.
• Bu yöntemin kullanımı uygundur.

▍ Örnek

Diyelim ki bir kulübün sahibisiniz ve genel olarak kulübünüze tam olarak kimin geldiğiyle ilgilenmiyorsunuz. Ancak, bazı ziyaretçilerin aşırı alkollü içecek tüketimine yatkın oldukları için, en azından kendi tesisinizde kendilerini bulması ve yanlarında onlara bakacak kimse olmaması durumunda kulübe girmesine izin verilmemektedir. Bu durumda, bir grup ziyaretçi kulübe ancak en az birinin en az 18 yaşında olması durumunda girebilir. Bu tür bir kontrolü otomatikleştirmek için bazı () yöntemini kullanacağız. Aşağıda, uygulaması iki versiyonda gösterilmiştir.

ES5

ES6

5. Her () yöntemi

Her () yöntemi diziyi çaprazlar ve her öğeyi belirli bir koşula göre kontrol eder, dizinin tüm öğeleri koşulu karşılıyorsa true, aksi takdirde false döndürür. Some() yöntemine benzer olduğunu fark edeceksiniz.

▍ Her () Yöntemin Güçlü Yönleri

• Her () yöntemi, bir dizideki tüm öğelerin bir koşulla eşleşip eşleşmediğini kontrol etmenizi sağlar.
• Koşullar, işlevler kullanılarak ayarlanabilir.
• Bildirime dayalı bir programlama yaklaşımını teşvik eder.

▍ Örnek

Bir önceki örneğe geri dönelim. Orada 18 yaşından küçüklerin kulübe girmesine izin verdiniz, ancak biri polise bir açıklama yazdı, ardından hoş olmayan bir duruma girdiniz. Her şey halledildikten sonra, tüm bunlara ihtiyacın olmadığına karar verdin ve kulübü ziyaret etme kurallarını sıkılaştırdın. Artık bir grup ziyaretçi kulübe ancak grubun her bir üyesinin yaşı en az 18 yaşındaysa girebilir. Geçen sefer olduğu gibi, sorunun çözümünü iki versiyonda ele alacağız, ancak bu sefer her () yöntemini kullanacağız.

ES5

ES6

6. Filtre () yöntemi

Filter () yöntemi, belirli bir diziye dayalı olarak, yalnızca orijinal dizinin belirtilen koşulu karşılayan öğelerini içeren yeni bir dizi oluşturmanıza olanak tanır.

▍ Filtre () Yönteminin Güçlü Yönleri

• Filter () yöntemi, orijinal diziyi değiştirmekten kaçınır.
• Gereksiz unsurlardan kurtulmanızı sağlar.
• Kodunuzun okunabilirliğini artırır.

▍ Örnek

Fiyat listesinden yalnızca 30'dan büyük veya eşit olanları seçmeniz gerektiğini varsayalım. Bu sorunu çözmek için filtre () yöntemini kullanalım.

ES5

ES6

7. Harita () yöntemi

map() yöntemi, aynı zamanda yeni bir dizi döndürmesi açısından filter() yöntemine benzer. Ancak, orijinal dizinin öğelerini değiştirmek için kullanılır.

▍Harita () yönteminin güçlü yönleri

• map() yöntemi, orijinal dizinin öğelerini değiştirme ihtiyacını ortadan kaldırır.
• Dizi öğelerini değiştirmek için kullanmak uygundur.
• Kodunuzun okunabilirliğini artırır.

▍ Örnek

Diyelim ki fiyatları olan bir ürün listeniz var. Yöneticinizin, fiyatları %25 azaltılmış yeni bir ürün listesine ihtiyacı var. Bu sorunu çözmek için map() yöntemini kullanalım.

ES5

ES6

8. azaltma () yöntemi

İndirgeme () yöntemi, en basit haliyle, sayısal dizilerin öğelerini toplamanıza olanak tanır. Başka bir deyişle, diziyi tek bir değere dönüştürür. Bu, çeşitli hesaplamalar yapmak için kullanılmasına izin verir.

▍Reduce () yönteminin güçlü yönleri

• İndirgeme () yöntemi, bir dizideki öğelerin toplamını veya ortalamasını hesaplamak için kullanılabilir.
• Bu yöntem hesaplamaları hızlandırır ve basitleştirir.

▍ Örnek

Bir dizide saklanan haftalık giderlerinizi hesaplamanız gerektiğini varsayalım. Bu sorunu azaltma () yöntemini kullanarak çözelim.

ES5

ES6

Etiket ekle