Javascript çok boyutlu dizisi nasıl oluşturulur. Desen parçalarını çıkarma. Dizilere Özel Özellikler Ekleme

JavaScript'te ve diğer programlama dillerinde dizilerle çalışmak için farklı yöntemler kullanılır.

Yöntemler, mantık oluşturmayı ve bir komut dosyasında uygulamayı kolaylaştırır.

Aşağıda temel yöntemler JS'de dizilerle çalışmak için.

itmek

Push () yöntemi, dizinin sonuna bir değer ekler.

arr =; dizi.push (312); konsol.log (dizi); // → →

pop

pop () yöntemi, dizideki son öğeyi kaldırır veya değerini döndürür.

arr =; dizi.pop(); konsol.log (dizi); // → →

Dizinin son elemanının değerini alma yeteneğini kullanarak, örnek olarak, görüntü formatını alabiliriz:

img = "https://example.com/img/name.png"; let biçim = img.split (".").pop(); konsol.log (biçim); // → png konsol.log (img.split (".")); // → ["https: // örnek", "com / img / ad", "png"]

vites değiştirmek

unshift() yöntemi, dizinin başına bir öğe ekler.

arr =; arr.unshift (312); konsol.log (dizi); // → →

vardiya

shift() metodu diziden ilk elemanı kaldırır.

arr =; dizi.shift(); konsol.log (dizi); // →;

Shift ve unshift yöntemlerini kullanırken dizinin her öğesinin dizinini değiştirdiğini anlamalısınız. Dizi uzunsa bu, programın yürütülmesini yavaşlatabilir.

bölmek

Split () yöntemi, bir dizeyi diziye dönüştürmek için kullanılır. Split, bir dizeyi belirtilen parametreye göre böler.

str = "Anya, Masha, Sasha, Dasha"; // bu bir dizgedir let arr = str.split (","); konsol.log (dizi); // → ["Anya", "Masha", "Sasha", "Dasha"] bir dizidir

katılmak

Join () yöntemi, bir dizinin öğelerini, parametrede belirtilen sınırlayıcıyla ayrılmış bir dizede birleştirir.

Let arr = ["Notpad ++", "Yüce", "VSCode"]; // bu bir dizidir, let str = arr.join (","); konsol.log ("Kod için düzenleyiciler:" + str); // → "Kod editörleri: Notpad ++, Sublime, VSCode"

dilim

Slice () yöntemi, yönteme iletilen ilk parametrenin indeksine sahip elemandan başlayarak ikinci parametrenin indeksine sahip elemana kadar kaynaktan elemanları kopyaladığı yeni bir dizi oluşturur.

Örneğin: dilim (3, 7) 3, 4, 5, 6 indeksli elemanları döndürür. 7 indeksli eleman diziye dahil edilmez.

Negatif değere sahip bir parametre dilime () geçirilirse, parametrede belirtilen ancak orijinal dizinin sonundan önceden alınmış öğe sayısıyla yeni bir dizi döndürür.

Slice yöntemi, orijinal diziyi değiştirmez.

Dilim () yönteminin nasıl çalıştığına dair bazı örnekler:

arr = ["A", "B", "C", "D", "E", "F", "G"]; // 2'den 5'e kadar indisleri olan elemanları içeren bir dizi döndürür konsol.log (dizi.slice (2, 5)); // → ["C", "D", "E"] // 3 ile dizi.uzunluk konsol.log (dizi.slice (3)); // → ["D", "E", "F", "G"] // Konsol.log orijinal dizisinin bir kopyasını döndürür (dizi.slice ()); // → ["A", "B", "C", "D", "E", "F", "G"] // Şunlardan oluşan yeni bir dizi döndürür son üç orijinal konsol.log öğeleri (arr.slice (-3)); // → ["E", "F", "G"]

ekleme

splice () yöntemi, mevcut öğeleri kaldırarak ve/veya yenilerini ekleyerek dizinin içeriğini değiştirir.

Sözdizimi:

Array.splice (start, deleteCount [, item1 [, item2 [, ...]]])

parametreler:

• Başlat- Dizinin değiştirilmeye başlanacağı dizin. Dizinin uzunluğundan büyükse, gerçek dizin dizinin uzunluğuna ayarlanacaktır. Negatif ise, elemanın sondan itibaren indeksini belirtir.
• deleteCount- Diziden kaldırılan eski öğelerin sayısını gösteren bir tam sayı. deleteCount 0 ise, hiçbir öğe silinmez. Bu durumda, en az bir yeni öğe belirtmelisiniz. Eğer deleteCount daha fazla miktar Dizide kalan elemanlar, dizin başlangıcından başlayarak, daha sonra dizinin sonuna kadar olan tüm elemanlar kaldırılacaktır.
• öğeN- İsteğe bağlı parametreler. Diziye eklenecek öğeler. Herhangi bir öğe belirtmezseniz, splice () yalnızca öğeleri diziden kaldırır.

Geri dönüş değeri

Açıklama

Belirtilen eklenen öğelerin sayısı, kaldırılan öğelerin sayısından farklıysa, dizi çağrıldıktan sonra uzunluğu değişecektir.

arr = [Barça, Miner, Manchester United, Milan, Real Madrid, Ajax, Juventus]; nax = dizi.splice (2, 3); dizi.splice (2, 3); konsol.log (nax); // → [Manchester United, Milan, Real Madrid] console.log (arr); // → [Barca, Madenci] dizi.splice (1, 0, Zenit, CSKA, Spartak); konsol.log (dizi); // → [Barca, Zenit, CSKA, Spartak, Shakhtar]

tersi

Ters () yöntemi, dizi öğelerinin sırasını tersine çevirir. Sonuç olarak, dizinin ilk öğesi son, son öğe ise ilk olur.

arr =; konsol.log (arr.reverce()); // → console.log (["Alice", "BG", "GO", "DDT"]. Ters ()); // → ["DDT", "GO", "BG", "Alice"]

harita

map() yöntemi, bunlarla belirtilen eylemleri gerçekleştiren dizinin öğeleri üzerinde yinelenir ve değiştirilen öğelerle birlikte dizinin bir kopyasını döndürür.

Aşağıdaki örnekte, dizinin her bir elemanına bu elemanın indeksinin değerini ekleyin (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

arr =; let testMap = arr.map ((eleman, indeks) => eleman + indeks); konsol.log (testMap); //

veya örneğin dizinin her değerini 12 ile çarparız

arr =; olsun testMap = arr.map (a => a * 12); konsol.log (testMap); // → →

filtre

Filtre () yöntemi, dizileri filtrelemek için kullanılır. Yalnızca belirtilen koşulu karşılayan öğeleri döndürerek dizi boyunca ilerler.

Örneğin, yalnızca 21'den büyük olanları bırakarak dizinin değerlerini sayılardan filtreleyin.

arr =; let testFilter = arr.filter (eleman => eleman> 21); konsol.log (testFilter); // → →

Koşul 21'den büyük bir şey döndürmek olduğundan, 21'in dizinin sonucuna dahil edilmediğine dikkat edin. 21'in diziye girebilmesi için koşul şundan büyük veya eşittir: element> = 21 olarak ayarlanır.

azaltmak

azaltma () yöntemi, işlevin eylem koşulunda belirtilene göre ara sonucu biriktirirken, dizinin öğelerinden sırayla geçer. Sonunda, yalnızca bir değer döndürür.

Bu yöntem genellikle bir dizideki tüm sayıların toplamını bulmak için kullanılır. Örnek:

arr =; let summa = arr.reduce ((acc, element) => acc + element); konsol.log (toplam); // → 370

çeşit

sort() yöntemi, bir dizinin öğelerini belirtilen parametrelere göre sıralamak için kullanılır.

Örnek - bir dizi sayı alın ve bunları artan düzende sıralayın:

arr =; olsun testSortArr = arr.sort ((a, b) => a - b); konsol.log (testSortArr); // → →

içerir

include () yöntemi, dizinin belirli bir öğe içerip içermediğini belirler ve buna bağlı olarak true veya false döndürür.

include () kullanımına bir örnek.

İşte mantıklı bir ifade:

Hayvan = "köpek" olsun; if (hayvan == "kedi" || hayvan == "köpek" || hayvan == "aslan" || hayvan == "at") (// ........)

include yöntemini kullanarak şöyle yazılabilir:

Hayvan = "köpek" olsun; const hayvanlar = ["kedi", "köpek", "aslan", "at"]; if (animals.includes (animal)) (// ...........)

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

JavaScript'teki bir dizi, bir değerler listesini depolamak için global 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 elemanları şunlar olabilir: farklı şekiller: sayılar, dizeler, booleanlar 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şturun (bildirin)

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 anahtar kelime yeni.

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ış vb. bildirilmelidir.

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ç olarak, iki boyutlu bir js -dizisi elde edersiniz. 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); // "Kate, 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 oluşturacak 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 var ve üçüne bir değer atanmamış - bunlar tanımsız olarak gösteriliyor.

() 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"] çıktısını alı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); // Çıktı [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 öğelerin 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.

kullanarak dizilerle çalışabilirsiniz. farklı yöntemler Array yapıcısı tarafından sağlanır.

Pop / push ve shift / unshift yöntemleri

pop() ve push() yöntemlerini göz önünde bulundurun. Bu yöntemler, yığınlar gibi dizilerle çalışmanıza izin verir. Yığın, öğelere erişimin LIFO ilkesine göre düzenlendiği bir veri yapısıdır (İngilizce son giren ilk çıkar, "son giren ilk çıkar"). Yığın ilkesi bir plaka yığınına benzetilebilir: ikincisini üstten almak için üsttekini çıkarmanız gerekir. Nasıl çalıştığı şekilde gösterilmiştir:

Şimdi push() ve pop() yöntemlerinin değerlendirilmesine geri dönelim. Push () yöntemi, dizinin sonuna bir veya daha fazla yeni öğe ekler ve yeni uzunluğunu döndürür. pop () yöntemi - dizinin son öğesini kaldırır, dizinin uzunluğunu azaltır ve kaldırdığı değeri döndürür. Bu yöntemlerin her ikisinin de değiştirilmiş bir kopyasını oluşturmak yerine diziyi yerinde değiştirdiğini unutmayın.

Var foo =; // foo: foo.push (1,2); // foo: 2 foo.pop (); // foo: 2 foo.push (3) döndürür; // foo: 2 foo.pop (); // foo: 3 foo.push (); // foo:] 2 foo.pop () döndürür // foo: foo.pop (); // foo: 1 var meyve döndürür = ["armut", "muz", "elma"]; var seçilmiş = meyveler.pop (); Document.write ("Sen benimkini seçtin" + seçti); Denemek "

Shift () ve unshift () yöntemleri, dizinin başına öğeler ekleyip çıkarmaları dışında pop () ve push () ile hemen hemen aynı şekilde davranır. unshift () yöntemi, yeni öğelere yer açmak için mevcut öğeleri daha büyük dizinlere kaydırır, dizinin başına bir veya daha fazla öğe ekler ve dizinin yeni uzunluğunu döndürür. shift () yöntemi, dizinin ilk öğesini kaldırır ve sonraki tüm öğeleri işgal edecek şekilde kaydırarak değerini döndürür. boş alan dizinin başında.

Var f =; // f: f.değiştirmeyi kaldır (1); // f: Döndürür: 1 f.unshift (22); // f: Döndürür: 2 f.shift(); // f: Döndürür: 22 f.unshift (3,); // f:, 1] Döndürür: 3 f.shift(); // f: [, 1] Döndürür: 3 f.shift (); // f: Döndürür: f.shift(); // f: Döndürür: 1

birleştirme yöntemi

Array.join() yöntemi, bir dizinin öğelerini tek bir dizede birleştirmek için kullanılır. Yönteme, dizedeki öğeleri ayırmak için kullanılacak olan isteğe bağlı bir dize argümanı iletilebilir. Sınırlayıcı belirtilmemişse, varsayılan sınırlayıcı karakter, yöntem çağrıldığında virgüldür.

Var a = ["Rüzgar", "Yağmur", "Ateş"]; var myVar1 = a.join(); // "Rüzgar, Yağmur, Ateş" var myVar2 = a.join (","); // "Rüzgar, Yağmur, Ateş" var myVar3 = a.join ("+"); // "Rüzgar + Yağmur + Ateş" document.write (myVar1 + "
"+ myVar2 +"
"+ myVar3); Deneyin"

Array.join() yöntemi, bir dizeyi parçalara bölerek bir dizi oluşturan String.split() yönteminin tersidir.

Ters yöntem

Array.reverse () yöntemi, dizideki öğelerin sırasını tersine çevirir ve yeniden düzenlenmiş öğelerle diziyi döndürür. Bu yöntem, yeniden sıralanmış öğelerle yeni bir dizi oluşturmaz, ancak bunları zaten var olan bir dizide yeniden sıralar.

Var myArr = ["bir", "iki", "üç"]; belge.write (myArr.reverse()); Denemek "

concat yöntemi

Array.concat() yöntemi, concat() yöntemine iletilen tüm bağımsız değişkenlerin değerleriyle sırayla doldurulan, concat() yönteminin çağrıldığı orijinal dizinin öğelerini içeren yeni bir dizi oluşturur ve döndürür. Bu argümanlardan herhangi birinin kendisi bir dizi ise, tüm elemanları eklenecektir. Dizi adları bağımsız değişken olarak kullanılır ve öğelerini birleştirmek istediğiniz sırayla belirtilir.

Var a =; a.concat (4, 5) // a.concat() döndürür; // aynı şey - a.concat (,) döndürür // Döndürür

sıralama yöntemi

Array.sort() yöntemi, dizinin öğelerini yerinde sıralar ve sıralanan diziyi döndürür. sort() yöntemi bağımsız değişken olmadan çağrılırsa, dizinin öğelerini alfabetik olarak sıralar (geçici olarak karşılaştırma için bunları dizelere dönüştürür). sort () yöntemi, öğelerin sıralama düzenini belirleyen bir argüman olarak bir karşılaştırma işlevi alabilir.

Var a = ["Kivi", "Portakal", "Armut"]; a.sort(); var s = a.join (","); // Portakal, Armut, Kivi belgesi.write(s); // sayılarla örnek var myArr =; benimArr.sort(); belge.write (benimArr); // 1,10,2 Deneyin "

Muhtemelen sıralama numaralarından biraz farklı bir sonuç görmeyi bekliyordunuz. Bu tür sıralama, sort () yönteminin öğeleri dizelere dönüştürerek sıraladığı için oluşur. Bu nedenle, aldıkları sıra dizedir - sonuçta "10"

Alfabetik olmayan başka herhangi bir sırada sıralamak için, sort () yöntemine argüman olarak bir karşılaştırma işlevi iletebilirsiniz. Ancak, karşılaştırma işlevini kendiniz yazmanız gerektiğini unutmayın. Bu işlevin iki parametresi olmalıdır, çünkü iki argümanından hangisinin sıralanmış listede ilk olarak görüneceğini belirler. Böyle bir işlevi anlamayı ve yazmayı kolaylaştırmak için, öğelerin sırasının belirleneceği birkaç kural vardır:

• İlk argümanın ikinciden önce olması gerekiyorsa, karşılaştırma işlevi negatif bir sayı döndürür (eğer bir
• İlk argümanın ikinciyi takip etmesi gerekiyorsa, karşılaştırma işlevi pozitif bir sayı döndürür (eğer a> b ise)
• İki değer eşitse (yani sıra önemli değilse), karşılaştırma işlevi 0 döndürür (a == b ise)

Karşılaştırma için işlev, argüman olarak dizinin öğelerini kullanır:

foo (a, b) işlevi (// bir test işlevi tanımlayın if (a b) 1 döndürür; 0 döndürür; // eğer a == b) var a =; a.sort (foo); // argüman olarak sadece fonksiyon ismi iletilir document.write (a.join (",")); // aynı şeyi daha kısa yaz var a =; a.sort (işlev (a, b) (// anonim işlev döndürme a - b kullan; // işlev 0 döndürür); belge.write(a); // 1,2,5,10 Deneyin "

Örnekteki ilk giriş, nasıl çalıştığını anlamayı kolaylaştırmak için bu şekilde yazılmıştır. İkinci snippet'te anonim bir işlev kullanmanın ne kadar uygun olduğuna dikkat edin. Sadece bir kez çağrılır, bu nedenle ona bir isim vermeye gerek yoktur.

Not: Dizide tanımsız öğeler varsa, dizinin sonuna sarılırlar.

dilim yöntemi

Array.slice() yöntemi, belirtilen alanı diziden kopyalamak ve kopyalanan öğeleri içeren yeni bir dizi döndürmek için kullanılır. Bu, orijinal diziyi değiştirmez.

Yöntem sözdizimi:

ArrayName.slice (başlangıç, bitiş);

Dizi_adı, yeni bir dizi için belirli bir öğe kümesini almak istediğiniz dizinin adıyla değiştirilmelidir. Yöntem, dizinin döndürülen bölümünün başlangıcını ve sonunu tanımlayan iki bağımsız değişken alır. Yöntem, dizinin bir bölümünü, bitiş hariç, baştan sona kopyalar. Yalnızca bir argüman belirtilirse, döndürülen dizi, belirtilen konumdan dizinin sonuna kadar tüm öğeleri içerecektir. Negatif endeksler kullanabilirsiniz - bunlar dizinin sonundan sayılır.

Var arr =; dizi.slice (0.3); // dizi.slice (3) döndürür; // dizi.slice (1, -1) döndürür; // dizi.slice (-3, -2) döndürür; // İadeler

Ekleme yöntemi

Array.splice () yöntemi, dizilerle çalışmak için genel bir yöntemdir. Dilim () ve concat () yöntemlerinin yaptığı gibi yeni bir değiştirilmiş dizi döndürmek yerine diziyi yerinde değiştirir. Ekleme yöntemi, bir dizideki öğeleri kaldırabilir, yeni öğeler ekleyebilir, öğeleri birer birer ve aynı anda değiştirebilir. Kaldırılan öğelerin bir dizisini döndürür, öğelerin hiçbiri kaldırılmamışsa boş bir dizi döndürür.

Yöntem sözdizimi:

ArrayName.splice (indeks, miktar, elem1, ..., elemN);

İlk bağımsız değişken, dizideki öğeleri eklemeye veya çıkarmaya başlayacağınız dizini belirtir. İkinci argüman, ilk argümanda belirtilen dizinden başlayarak diziden kaldırılacak öğelerin sayısını belirler, ikinci argüman 0 ise, elemanlar kaldırılmaz. İkinci argüman atlanırsa, belirtilen dizinden dizinin sonuna kadar tüm dizi öğeleri kaldırılır. Negatif bir konum numarası kullanıldığında, öğeler dizinin sonundan itibaren sayılır.

Var meyveler = ["portakal", "elma", "armut", "üzüm"]; var silinmiş = meyveler.splice (2,2); // ["armut", "üzüm"] document.write (silindi); var arr =; dizi. ek yeri (4); // İadeler; dizi şu hale geldi: arr.splice (1,2); // İadeler; dizi şöyle oldu: arr.splice (1,1); // İadeler; dizi haline geldi: Deneyin "

splice () yönteminin ilk iki argümanı, kaldırılacak dizi öğelerini belirtir. Bu iki argümanı, ilk argüman tarafından verilen konumdan başlayarak diziye eklenecek öğeleri belirten herhangi bir sayıda ek argüman takip edebilir.

Var meyveler = ["portakal", "elma"]; meyveler.splice (2,0, "karpuz"); // document.write (meyveler) döndürür; // şimdi ["portakal", "elma", "karpuz"] var arr =; dizi.splice (2,0, "a", "b"); // İadeler; arr.splice (2,2,) oldu; // ["a", "b"] döndürür; oldu, 3,4,5] Dene "

Concat ()'den farklı olarak, splice () yönteminin argüman olarak iletilen dizileri ayrı öğelere bölmediğine dikkat edilmelidir. Yani, bir dizi ekleme yöntemine geçirilirse, o dizinin öğelerini değil, dizinin kendisini ekler.

ToString Yöntemi

toString () yöntemi, ayırıcı karakter olarak virgül kullanarak bir dizinin öğelerini bir dizeye dönüştürür.

Var arr = ["Süt", "Ekmek", "Çerezler"]; var yemek = arr.toString(); belge.write (yemek); // Süt, Ekmek, Kurabiye Deneyin "

Yöntemin, argüman olmadan çağrıldığında join () ile aynı dizeyi döndürdüğünü unutmayın.

indexOf ve lastIndexOf

indexOf yöntemi, değeri yönteme argüman olarak iletilen değere eşit olan bir öğenin dizinini döndürür.

indexOf() ve lastIndexOf() yöntemlerinin sözdizimi şöyledir:

Array_name.indexOf (arama_öğesi, dizin) dizi_adı.lastIndexOf (arama_öğesi, dizin)

Yöntemin ilk argümanı, indeksi bulunacak öğenin değerini belirtir, ikinci argüman (isteğe bağlı) aramanın başlatılacağı indeksi belirtir. Birkaç özdeş oluşum varsa, en küçük (ilk) dizin seçilir. İstenen değere sahip bir eleman bulunamazsa, metot -1 değerini döndürür. Yöntemin içinde, arama için katı karşılaştırma (===) kullanılır.

Var a =; a.indexOf (3); // 2 a.indexOf (3,4) döndürür; // 6 a.indexOf (35) döndürür; // -1 döndürür: bu değere sahip eleman yok a.indexOf (2); // bir

lastIndexOf() yöntemi ayrıca, değeri yönteme argüman olarak iletilen değere eşit olan bir öğenin dizinini de döndürür. Tek fark, lastIndexOf() yönteminin en yüksek (son) dizini seçmesidir.

Var a =; a.lastIndexOf (3); // 7 a.lastIndexOf (35) döndürür; // -1 döndürür: bu değere sahip eleman yok a.lastIndexOf (2); // 6

yineleyici yöntemleri

Aşağıda açıklanan yöntemler yineleyicilerdir. Tümünde modern tarayıcılar dizilerle çalışmak için, öğeler üzerinde yineleme yapmak ve bunlar üzerinde çeşitli eylemler gerçekleştirmek üzere tasarlanmış yöntemler vardır. Bunlar forEach (), harita (), filtre (), her (), bazı, azaltma () ve azaltmaRight () yöntemleridir.

0'dan uzunluk - 1'e kadar dizi öğeleri üzerinde yinelenirler ve öğe varsa, onu geri arama işleyici işlevine iletirler.

her biri için

Yöntem sözdizimi:

ArrayName.forEach (geri arama, thisArg)

İlk argüman, forEach () yönteminin dizinin her bir öğesi için çağıracağı bir geri çağırma işlevidir. Çağrılan işleyici işlevinin uygulamasını kendiniz yazmanız gerekir. Çağrılan işlevin üç parametresi olmalıdır: ilk parametre bir argüman olarak dizi öğesinin değerini alır, ikincisi - öğenin dizini ve üçüncüsü - dizinin kendisini. Ancak dizi elemanlarının sadece değerlerini kullanmak istiyorsanız sadece bir parametre ile fonksiyon yazabilirsiniz. İkinci argüman olan thisArg (isteğe bağlı), bu değer olarak iletilecektir.

Var arr =; işlev foo (değer) (var toplam = değer * bu; belgeyi döndür.yazma (toplam + "
");) arr.forEach (foo, 5); // ikinci argüman değer olarak geçirilecek bu // üç parametreli örnek var a =; a.forEach (function (el, idx, a) (document. write ("a [" + idx + "] =" + el + "in [" + a + "]
");)); Denemek"

filtre

Yöntem sözdizimi:

ArrayName.filter (geri arama, thisObject)

Filter () yöntemi, yalnızca geri çağırma işlevine yapılan bir çağrının true döndüreceği dizi öğelerini içeren yeni bir dizi oluşturur ve döndürür.

fonksiyon isBig (eleman, indeks, dizi) (// 10'dan büyük veya 10'a eşit sayıları döndürür (eleman> = 10); // eleman değeri 10'dan büyük veya ona eşitse, ifade true değerini döndürür) var filtrelenmiş = .filter (isBig) ; // filtrelendi

harita

map() yöntemi, dizideki her öğe için geri çağırma (item, idx, ar) işlevinin çağrılmasının sonuçlarından oluşacak yeni bir dizi oluşturur ve döndürür.

Var a =; var b = a.map (işlev (öğe, idx, dizi) (dönüş öğesi * öğe;)); // b =

her ve bazıları

Dizinin tüm öğeleri için, bunları test etmek için kullanılan belirtilen işlev true değerini döndürürse, her () yöntemi true değerini döndürür.

Some () yöntemi, belirtilen işlevde doğrulama sırasında bir veya daha fazla öğe true değerini döndürürse true değerini döndürür.

Var a =; a.every (fonksiyon (x) (dönüş x 10;)) // true: bir sayı> 10

azaltmak ve azaltmak

Yöntem sözdizimi:

ArrayName.reduce (geri arama, initialValue) ArrayName.reduceRight (geri arama, initialValue)

İndirgeme () yöntemi, belirtilen işlevi (geri arama) dizideki iki değere aynı anda uygular, ara sonucu korurken öğeler üzerinde soldan sağa yinelenir.

Geri arama işlevi bağımsız değişkenleri: (previousValue, currentItem, index, array)

• öncekiValue - geri arama işlevinin dönüş sonucu (diğer adıyla ara sonuç)
• currentItem - dizideki geçerli öğe (öğeler sırayla soldan sağa yinelenir)
• dizin - geçerli öğenin dizini
• dizi - işlenmekte olan dizi

initialValue Geri arama işlevine yapılan ilk çağrının ilk argümanı olarak kullanılan nesne. Basit bir ifadeyle, öncekiValue değeri, ilk çağrıldığında initialValue değerine eşittir. initialValue yoksa, dizinin ilk öğesine eşittir ve yineleme ikinciden başlar:

Var a =; foo (prevNum, curNum) (sum = prevNum + curNum; uyarı (toplam); toplam döndür;) var sonuç = a.reduce (foo, 0); belge.write (sonuç); Denemek "

Bu örneğin nasıl çalıştığını görelim. foo için ilk argümanlar:

• prevNum = 0 (başlangıç ​​Değeri 0 olduğundan beri)
• curNum = 1 (geçerli eleman dizinin 1. elemanıdır)

0 sayısı 1'e eklenir. Bu sonuç (toplam: 1), işlevin bir sonraki çalıştırılışında prevNum olarak iletilecektir. Ve böylece son elemente gelene kadar. Döndürülen sonuç - son çalıştırmanın toplamı 15 (1 + 2 + 3 + 4 + 5) olacaktır.

ReduceRight yöntemi, azaltma yöntemine benzer şekilde çalışır, ancak diziyi sağdan sola doğru gider:

Var a = ["h", "o", "m", "e"]; fonksiyon çubuğu (prevStr, curItem) (dönüş prevStr + curItem;) document.write (a.reduceRight (bar)); // emoh

• Tercüme

• I. Gerçek diziler üzerinde yineleme
  1. ForEach Yöntemi ve İlgili Yöntemler
  2. Döngü için
  3. Doğru kullanım için ... döngüde
  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 üzerinde yineleme

Ş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 IE 8 ve üzerini içerir erken sürümler, hala bazı yerlerde kullanılmaktadır.

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 geri aramanın olası maliyetinden endişe ediyorsanı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.
• Some - 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 aramanın true döndürdüğü 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 - 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şmeden kalırsa 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 dizinin uzunluğunu depolamak için "daha optimal" for for sürümünü kullanabilirsiniz. sıralamak:

Var a = ["a", "b", "c"]; var index, len; for (indeks = 0, len = a.uzunluk; indeks< len; ++index) { console.log(a); }
Teorik olarak, 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 anahtar 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? Bir dizideki bir elemanın sahip olabileceği en büyük indeksin (2 ^ 32 - 2) = 4294967294 olduğu anlamına gelen ES5'teki bir dizi indeksinin tanımından.

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 tamamen doğru olmasa da, çoğu durumda uygun olsa da, daha kısa bir sürüm kullanabilirsiniz:

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

4. for ... of döngüsü (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 etmenin standart bir yolunu 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. 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 üzerinde yineleme

JavaScript, gerçek dizilere ek olarak şunları da içerir: dizi benzeri nesneler ... Gerçek dizilerle ortak yönleri, uzunluk özelliklerine 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 (child) (// alt nesneyle bir şeyler yap));
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

Diziler, ardışık birçok değeri “tek bir yerde” saklamanıza izin veren en yaygın kullanılan değişken türlerinden biridir. Ancak, JavaScript söz konusu olduğunda, bırakılacak çok şey var.

Bu yazıda, dizilerle çalışırken uygulayabileceğiniz az bilinen üç tekniğe bir göz atacağız.

1. Dizilere özel özellikler ekleme

JavaScript'te bir dizinin tanımını bulmak için aramayı kullanırsanız, çoğu kaynak belirli bir değişken değerinin nesne olarak temsil edildiğini iddia eder.

Genel olarak konuşursak, JavaScript'te karşılaştığımız birçok şey nesnelerdir. Dilin “ilkel” veri türleri de içerdiğini, ancak değerlerinin bir şekilde nesnelerin içindeki özelliklerde kullanıldığını belirtmek adil olacaktır.

2. Bir döngü içindeki dizi öğelerine erişim

Dizi indeksleri sadece pozitif değerler alabileceğinden, orijin sıfırdan başlar. Daha sonra, döngünün bu yinelemesinde dizi öğesine erişmek için bu dizini kullanabiliriz.

ECMAScript6, diziler arasında dizin kullanmadan ve yeni bir for… of döngüsü aracılığıyla döngü oluşturmanın bir yolunu tanıttı.

for ... of döngüsü, bir dizinin öğeleri üzerinde, öğenin dizinini etkilemeden yinelenecek şekilde tasarlanmıştır.

Var ary = ["portakal", "elma", "liçi"]; for (let item of ary) (console.log (item);) // "orange", "apple", "lychee" Karşılaştırma için: for döngüsündeki öğelerin indekslerini görüntüleme. var ary = ["portakal", "elma", "liçi"]; for (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Eleman sayısı dizinin boyutu değil

Bir dizinin boyutu hakkında konuştuğumuzda, genellikle içinde depolanan öğelerin sayısını kastettiğimizi düşünürüz. Aslında, bu tamamen doğru değildir - uzunluk özelliği, elemanın maksimum indeksine bağlı olarak hesaplanır.

Uzunluk özelliği oldukça belirsizdir. Buna ikna olmak için aşağıdaki manipülasyonlara bakmanız yeterlidir:

Değişken =; ary.uzunluk = 3; konsol.log (ary.length); // 3 ary = "abcd"; konsol.log (ary.length); // 6

Son örnekte, elemanı 5. konuma yerleştirmek yeterliydi, bunun sonucunda dizinin uzunluğu 6'ya eşit oldu. 0'dan 4'e kadar olan dizinlerin otomatik olarak oluşturulacağını düşünüyorsanız, yanlış. Bu, in operatörü kullanılarak doğrulanabilir.

Değişken =; ary.uzunluk = 3; konsol.log (ary.length); // 3 ary = "abcd"; konsol.log (ary.length); // 6 console.log (ary'de 0); // YANLIŞ

Bu durumda, ary dizisine "seyrek" demek doğru olur.

Dizileri kırpmak için uzunluk özelliğini de değiştirebiliriz. Aşağıdaki örnek, ary dizisinin length özelliğinin değerini azaltarak, 5. indeksteki elemanın "kaybını" gösterir.

Değişken =; ary.uzunluk = 3; konsol.log (ary.length); // 3 ary = "abcd"; konsol.log (ary.length); // 6 dizi.uzunluk = 2; konsol.log (ary.length); // 2 konsol.log (ary); // Tanımsız