Dizine eklenen koleksiyonlar

Dizine eklenmiş koleksiyon, öğelerin numaralı dizinler kullanılarak depolandığı ve bunlara erişildiği bir veri yapısıdır. Dizine eklenmiş bir koleksiyonda depolanan değerlere 0 tarihinden itibaren numaralandırılmış dizinler atanır. Bu dizin, "sıfır dizinli" şeklinde adlandırılır. Ardından, dizinlerine başvurarak dizine eklenmiş bir koleksiyonda depolanan değerlere erişebilirsiniz.

Dizi

Dizi, karmaşık nesneler veya diğer diziler de dahil olmak üzere herhangi bir veri türünden sıfır veya daha fazla değer barındırabilen kapsayıcıdır. Bir dizide depolanan değerler bazen dizinin "öğeleri" olarak adlandırılır.

Dizi oluşturma

Temel veri türlerinde olduğu gibi dizi oluşturmak için iki yaklaşım mevcuttur: Değişmez dizi olarak veya JavaScript'in yerleşik Array() oluşturucusunu new Array() ile çağırmak. Bir değişkene dizi atamak, tek bir tanımlayıcıya birden çok değer atamak için son derece taşınabilir ve iterable bir yol sağlar.

Dizi değişmez söz dizimi, sıfır veya daha fazla virgülle ayrılmış veri değerini çevreleyen bir parantez ([]) kullanır:

const myArray = [];

Dizi oluşturucu söz dizimi, JavaScript'in yerleşik Array nesnesini new anahtar kelimesiyle kurucu olarak kullanır:

const myArray = new Array();

Hem dizi değişmez değeri hem de dizi oluşturucu söz dizimi, bir diziyi oluşturulduğunda bilgilerle doldurmanıza olanak tanır. Ancak söz dizimi, bu değerlerin tanımlanma biçiminde biraz farklılık gösterir. Dizi değişmez söz dizimi, parantezler arasında virgülle ayrılmış değerler kullanır ve bu da elde edilen diziyle aynı görünür:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

Dizi oluşturucu söz dizimi, virgülle ayrılmış değerleri bağımsız bir davranış olarak tek bir özel davranış istisnasıyla bağımsız değişken olarak alır:

const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]

Array oluşturucuya tek bir sayısal değer geçirildiğinde, bu değer elde edilen dizide sıfır. konuma atanmaz. Bunun yerine, değerler için bu sayıda boş alanla bir dizi oluşturulur. Bu işlem, diziye herhangi bir sınırlama getirmez. Öğeler, değişmez dizi değeri ile aynı şekilde eklenebilir ve kaldırılabilir.

// Firefox:\
const myArray = new Array( 10 );

myArray;
> Array(10) [ <10 empty slots> ]

// Chrome:
const myArray = new Array( 10 );

myArray;
> (10) [empty × 10]

Boş slotlar içeren diziler (bazen "seyrek diziler" olarak da adlandırılır) özel durumlardır. Boş alanlar, undefined veya açıkça null değeri içermek yerine genellikle dilin başka bir yerinde undefined değerleri olarak değerlendirilir (ancak her zaman değildir).

Değişmez dizi oluştururken virgüllerin arasına bir değer atıp dizi değişmez söz dizimini kullanarak yanlışlıkla bir seyrek dizi oluşturabilirsiniz:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Boş bir alan, tüm bağlamlarda anlamlı bir değer olarak kabul edilmese de dizinin toplam uzunluğuna dahil edilir. Bu durum, bir dizinin değerlerinin üzerine tekrar yapıldığında beklenmedik sonuçlara yol açabilir:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Bu davranış, JavaScript'in ilk tasarım kararlarından bazılarının arkasındadır. Modern geliştirmede az dizi kullanmaktan kaçının.

Temel değerlerde olduğu gibi bir dizi değişmez değeri, özellikleri ve yöntemleri karşılık gelen oluşturucudan devralır. Dizi, özel bir nesne biçimi olduğundan dizi değişmez söz dizimi ve new Array() söz dizimi, işlevsel olarak aynı sonuçları oluşturur: Prototipini Array oluşturucudan devralan bir nesne.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

İki sonuç aynı olduğundan ve dizi değişmez değeri söz dizimi daha kısa ve değişmez olduğundan her zaman new Array() söz dizimi yerine dizi değişmez söz dizimini kullanmanızı önemle tavsiye ederiz.

Dizi değerlerine erişme

Köşeli parantez gösterimini, diziyi izleyen bir parantez kümesi ([]) veya öğenin dizinine işaret eden bir sayı içeren tanımlayıcısını kullanarak dizi içindeki bağımsız öğelere erişebilirsiniz:

[ "My string", "My other string" ][ 1 ];
> "My other string"

const myArray = [ "My string", 50, true ];

myArray[ 0 ];
> "My string"

myArray[ 1 ];
> 50

myArray[ 2 ];
> true

JavaScript'teki diziler ilişkisel nitelikte değildir. Diğer bir deyişle, rastgele dizeleri dizin olarak kullanamazsınız. Bununla birlikte, bir dizideki öğelere erişmek için kullanılan sayısal değerler arka planda bir dize değerine zorlanır. Yani yalnızca sayısal karakterler içeren bir dize değeri kullanabilirsiniz:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Dizide tanımlananların dışındaki bir öğeye erişmeye çalıştığınızda hata meydana gelmez, undefined ile sonuçlanır:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Atama yıkılıyor

Atamayı yok etme, dizilerden veya nesnelerden bir değer aralığını ayıklamanın ve bunları bir tanımlayıcı grubuna atamanın kısa bir yoludur. Bu işlem bazen orijinal veri yapısının "paketini açma" olarak da adlandırılır ancak orijinal diziyi veya nesneyi değiştirmez.

Atama, değerlerin takibini yapmak için dizi veya nesne benzeri bir tanımlayıcılar listesi kullanır. Bağlama kalıbı yıkma olarak adlandırılan en basit biçimde, her değer dizi veya nesneden paketten çıkarılır ve karşılık gelen bir değişkene atanır. Bu değişken, let veya const (ya da var) kullanılarak başlatılır:

const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;

const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;

myFirstElement;
> "My string"

mySecondElement;
> "Second string"

myProp;
> false

mySecondProp;
> true

Bir nesneyi yok etmek için süslü ayraç ({}), diziyi yok etmek için ise köşeli parantezleri ([]) kullanın.

const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };

const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable

const { myElement, mySecondElement } = myArray;

myElement
> undefined

mySecondElement;
> undefined

Bir dizinin yapısı, soldan sağa sırayla gerçekleşir. Yapı bozma atamasındaki her bir tanımlayıcı, dizinin aynı dizine sahip öğesine karşılık gelir:

const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Bu, aynı zamanda bir nesne oluşturulurken varsayılan davranıştır. Bununla birlikte, yapılandırma atamasında kullanılan tanımlayıcılar, nesnenin özelliklerinin anahtarlarıyla eşleşirse bu tanımlayıcılar, belirtildikleri sıraya bakılmaksızın karşılık gelen özellik değerleriyle doldurulur:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Öğeler, bir tanımlayıcı atlanarak atlanabilir:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

Söz dizimini bozmak, yapılandırılmamış bir değerin, seyrek bir dizide olduğu gibi boş bir slot veya bir undefined değeri olması durumunda varsayılan değerler atamanıza da olanak tanır.

const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;

firstValue;
> true

secondValue;
> "Default string."

Yapı oluşturma, değerleri belirli türlere zorlamaz. Bir başka deyişle, boş dizeler ("") veya null gibi "yanlış" değerler, anlamlı tekilleştirilmiş değerler olarak kabul edilir:

const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;

falseValue;
> false;

nullValue;
> null

zeroValue;
> 0

emptyStringValue;
> ""

emptySlot;
> true

undefinedValue;
> true

Yayma operatörü

Dizi, dize veya nesne değişmez değeri gibi yinelenebilir bir veri yapısını bağımsız öğelere genişletmek için ES6'da sunulan yayma operatörünü (...) kullanın. Yayılım operatörünün hemen ardından, genişletilecek veri yapısı veya bu veri yapısını içeren değişkenin tanımlayıcısı gelir.

const myArray = [ 1, 2, 3 ];

console.log( ...myArray );
> 1 2 3

Yayma söz dizimi, öncelikli olarak dizileri kopyalamak ve birleştirmek için kullanılır:

const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];

mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Yayılma söz dizimini yalnızca aşağıdaki bağlamlarda kullanabilirsiniz:

Diziler ve dizeler için yayılma söz dizimi, yalnızca bir işlev çağrısında ya da bir dizideki öğelerin sıfır veya daha fazla bağımsız değişkenin beklendiği durumlarda uygulanır. Bu bölümdeki ilk yayma operatörü söz dizimi örneği, ...myArray öğesini yerleşik console.log yöntemine bağımsız değişken olarak geçirdiğinden işe yarar.

Örneğin, yayılmakta olan verileri başka bir dizinin dışındaki bir değişkene atayamazsınız:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

Ancak, bir diziyi orijinal diziyi değişmez değer dizesine yayarak kopyalarsınız:

const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];

spreadArray;
> Array(3) [ 1, 2, 3 ]

İki veya daha fazla diziyi oluşturan öğeleri tek bir dizide birleştirmek için:

const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];

myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]

Veya bir dizinin öğelerini, işlev çağrısında bağımsız bağımsız değişkenler olarak iletmek için:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

Yayma operatörü ES2018'de nesne değişmez değerleriyle çalışacak şekilde genişletildi. Dizilerde olduğu gibi, nesneleri çoğaltmak veya birleştirmek için yayma operatörünü kullanabilirsiniz:

const myObj = { myProperty : true };
const mySecondObj = { ...myObj };

mySecondObj;
> Object { myProperty: true }

const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };

myMergedObj;
> Object { myProperty: true, additionalProperty: true }

Yayma operatörü "yüzek" kopyalar oluşturur. Yani, orijinal nesnenin prototipini ve enumerable (enumerable) özelliklerini kopyalamaz.

const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
    myEnumerableProp: {
        value: true,
        enumerable: true
    },
    myNonEnumerableProp: {
        value: false,
        enumerable: false
    }
});
const myNewObj = { ...myObj };

myObj;
> Object { myEnumerableProp: true, … }
    myEnumerableProp: true
    myNonEnumerableProp: false
    <prototype>: Object { protoProp: "My prototype." }

myNewObj;
> Object { myEnumerableProp: true }
    myEnumerableProp: true
    <prototype>: Object { … }

Dizilerin ve nesnelerin birbirinin yerine kullanılamayacağını unutmayın. Bir nesneyi bir diziye ya da bir nesnenin içine diziyi yayınlayamazsınız.

Dinlenme operatörü

Operatörün söz dizimi aynı olsa da geri kalan operatör (...), kullanıldığı bağlama göre tersi işlevi gerçekleştirir. Geri kalan operatör, tekrarlanabilir bir veri yapısını atamaların yapılandırılmasında veya bir işlev parametresinde yaptığı gibi bağımsız öğelere genişletmek yerine, öğeleri tekrarlanabilir bir veri yapısında birleştirir. Bu ad, bir dizi veri değerinin "geri kalanını" toplamak için kullanılmasından kaynaklanmaktadır.

Yapı bozma atamasıyla birlikte kullanıldığında, söz dizimi "dinlenme özelliği" söz dizimi olarak adlandırılır.

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Bir işleve sınırsız sayıda bağımsız değişken sağlamak için kullanıldığında, söz dizimi "rest parametresi" söz dizimi olarak adlandırılır:

function myFunction( ...myParameters ) {
    let result = 0;
    myParameters.forEach( ( myParam ) => {
        result += myParam;
    });
    return result;
};

myFunction( 2, 2 );
> 4

myFunction( 1, 1, 1, 10, 5 );
> 18

myFunction( 10, 11, 25 );
> 46

%TypedArray%

Türlü diziler, örneğin yüklenen dosyalar veya WebGL ile çalışırken yapılandırılmış ikili program verilerini depolamak için tasarlanmış bir ES6 özelliğidir.

Semboller'de olduğu gibi, %TypedArray% içsel işlev (genellikle %TypedArray% veya @@TypedArray olarak belirtilir, böylece genel bir mülkle karıştırılamaz) geleneksel anlamda bir kurucu işlev değildir ve new ile çağıramaz veya doğrudan çağıramazsınız. Bunun yerine %TypedArray%, her biri belirli bir ikili veri biçimiyle çalışan bağımsız kurucuların üst üst sınıfını ifade eder. İçsel %TypedArray% üst sınıfı, tüm %TypedArray% oluşturucu alt sınıflarının ve örneklerinin devraldığı özellikler ve yardımcı yöntemler sağlar.

Öğrendiklerinizi sınayın

`const myArray = [ 30, 50, 70 ];` sorgusunda `myArray[1]` ne döndürür?

50

30

70

"Dizim" üç değer içeriyorsa "Dizim[9]" ne döndürür?

Undefined

Hata mesajı

9

Null