Dizine eklenen koleksiyonlar

Dizine eklenen koleksiyon, öğelerin depolandığı ve kullanılarak erişilir. Dizine eklenmiş bir koleksiyonda depolanan değerler 0 öğesinden başlayarak numaralı dizinler atanmıştır. Bu kalıp, "sıfır-dizine ekleme" olarak adlandırılır. Ardından, dizine eklenen bir koleksiyonda depolanan değerlere takip edebilirsiniz.

Dizi

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

Dizi oluşturma

Temel veri türlerinde olduğu gibi, dizi oluşturmak için de iki yaklaşım mevcuttur: bir dizi sabit değerini veya JavaScript'in yerleşik Array() oluşturucusunu çağırarak new Array() ile. Değişkenlere dizi atamak, daha kolay taşınabilir atamanın iterable yöntemi, tek bir tanımlayıcıya birden çok değer ekleyebilirsiniz.

Dizi düz söz dizimi, sıfır veya daha fazla parantez içine alınmış bir dizi ayraç ([]) kullanır virgülle ayrılmış veri değerleri:

const myArray = [];

Dizi oluşturucu söz dizimi, JavaScript'in yerleşik Array nesnesini new anahtar kelimesine sahip kurucu:

const myArray = new Array();

Hem düz dizi hem de dizi oluşturucu söz dizimi, bir diziyi oluşturulduğundan daha az bilgi sağlar. Ancak, söz diziminde bu iki tanımlanmıştır. Dizi düz söz dizimi, köşeli parantezler içinde gösterilir:

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 değişken olarak bir tane ile alır özel davranış istisnası:

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

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

Array oluşturucusuna tek bir sayısal değer iletildiğinde bu değer elde edilen dizide sıfırıncı konuma atanmamıştır. Bunun yerine, değeri için bu sayıda boş alanla oluşturulur. Bu, herhangi bir dizideki sınırlamaları vardır. Öğeler de aynı şekilde eklenebilir ve kaldırılabilir aynı işlevi görür.

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

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

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

myArray;
> (10) [empty × 10]

Boş alanlar içeren diziler (bazen "seyrek diziler" olarak da adlandırılır) özeldir durumlarda işe yarar. Bir undefined veya açık bir şekilde null değeri içermek yerine, boş alanlar her zaman olmasa da genellikle dünyanın başka yerlerinde undefined değerleri olarak ele alınır. dili'ne dokunun.

Dizi düz söz dizimini kullanarak yanlışlıkla seyrek bir dizi oluşturabilirsiniz: bir dizi değişmez değeri oluştururken virgüller arasında bir değeri atlamak:

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

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

Her bağlamda anlamlı bir değer olarak değerlendirilmese de, boş bir alan dizinin toplam uzunluğuna dahil edilir. Böylece, yineleme sırasında beklenmedik sonuçlar bir dizinin değerleri:

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 en eski tasarım kararlarının bazılarında geçerlidir. Modern geliştirmede seyrek diziler kullanmaktan kaçının.

Temel elemanlarda olduğu gibi, düz dizi özellikleri ve yöntemleri karşılık gelen oluşturucudan devralır. Dizi, nesnenin özel bir biçimi olduğundan, dizi düz söz dizimi ve new Array() söz dizimi, işlev açısından özdeş sonuçlar oluşturur: prototipini Array oluşturucudan devralır.

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

typeof arrayLiteral;
> "object"

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

typeof arrayConstructor;
> "object"

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

Çünkü iki sonuç benzerdir ve dizi düz söz dizimi daha kısadır. yerine her zaman düz dizi new Array() söz dizimi.

Dizi değerlerine erişme

Dizideki bağımsız öğelere, ayraç gösterimini, bir diziden veya[] o öğenin dizinini ifade eden sayı:

[ "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 değildir, yani rastgele bir dizeyi dizin olarak kullanamazsınız. Ancak sayısal bir dizideki öğelere erişmek için kullanılan değerler, arkadaki bir dize değerine zorlanır sahneler. Yani yalnızca sayısal değerler içeren bir dize değeri kullanabilirsiniz. karakter:

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

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Dizide tanımlananların dışındaki bir öğeye erişmeye çalışmak undefined, hata değil:

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

myArray[ 9 ];
> undefined

Ödevin yapılandırılması

Atamanın yapılandırılması, sistemden bir değer aralığını çıkarmanın nesneleri test etmek ve bunları bir diziye atamak için Bu, bazen "paketten çıkarma" adı verilen bir işlem orijinal veri yapısı, orijinal diziyi veya nesneyi değiştirmez.

Devre dışı bırakma işleminde, dizi veya nesne benzeri bir tanımlayıcı listesi kullanılarak değerleri izlemektir. Bağlama kalıbı adı verilen en basit biçimiyle her bir değer diziden veya nesneden paketten çıkarılır ve karşılık gelen değişken, let veya const (veya var) kullanılarak başlatıldı:

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 nesnenin yapısını yapılandırmak için küme ayraçları ({}) ve şu işlemleri yapmak için köşeli parantezler ([]) kullanın: nasıl yapılandırılacağını göstereceğim.

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 diziyi kaldırma işlemi, soldan sağa doğru sırayla gerçekleşir. Her biri tanımlayıcıyı içeren kod, yapılandırma atamasındaki aynı dizine sahip dizi:

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

myElement;
> 1

mySecondElement;
> 2

myThirdElement;
> 3

Bu, aynı zamanda bir nesneyi yapılandırırken varsayılan davranıştır. Ancak, yapılandırma atamasında kullanılan tanımlayıcılar, nesnenin bu tanımlayıcılar ilgili mülkle doldurulur. değerleri belirtildikleri sıraya bakılmaksızın:

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

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

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

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

firstValue;
> 1

secondValue;
> 3

Söz diziminin geliştirilmesine, bir yapılandırılmış veri birden çok öğe için değer, seyrek dizide olduğu gibi boş bir alan veya undefined değer.

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

firstValue;
> true

secondValue;
> "Default string."

Yapıçözüm, belirli türlere yönelik değerleri zorlamaz. Bunun anlamı, "falsy" değerleri (ör. boş) dizeler ("") veya null, anlamlı yapı dışı 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

Serpme operatörü

Yinelenebilir verileri genişletmek için ES6'da sunulan yayma operatörünü (...) kullanma dize veya nesne değişmez değeri gibi özellikleri ayrı ayrı öğelere bölebilirsiniz. Dağılım operatörünün hemen ardından genişletilecek veri yapısı gelir. veya bu veri yapısını içeren değişkenin tanımlayıcısıdır.

const myArray = [ 1, 2, 3 ];

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

Yayma söz dizimi, esas 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 ]

Yayma söz dizimini yalnızca şu bağlamlarda kullanabilirsiniz:

Diziler ve dizeler için dağılım söz dizimi, yalnızca sıfır veya daha fazla bağımsız değişken olduğunda geçerlidir olması gerekir. Proje yönetiminin ilk örneği yayılma operatörünün bu bölümde söz konusu sözdizimi, ...myArray yönergesini geçtiği için yerleşik console.log yöntemi için bir bağımsız değişken.

Örneğin, yayılmakta olan verileri başka bir dizi:

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

Ancak bir diziyi, orijinal diziyi bir düz diziye 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 ]

Bunun yerine, 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

Dağılım operatörünün kapsamı genişletildi. ES2018'deki düz nesne değerleri hakkında daha fazla bilgi edinin. 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 }

Sürükleme operatörü "shallow" (sığ) oluşturur kopyalar. Bu, aracın orijinal nesnenin prototipi ve enumer edilemez özellikler.

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 { … }

Diziler ile nesnelerin birbirinin yerine kullanılamayacağını unutmayın. İnşa edeceğiniz bir nesneyi diziye veya bir diziyi bir nesneye yaymak.

Dinlenme operatörü

Operatörün söz dizimi aynı olsa da geri kalan operatör (...) kullanıldığı bağlama göre tam tersi işlevi görür. Şunun yerine: yinelenebilir bir veri yapısını, sonraki adımlarda olduğu gibi, bağımsız öğelere Devirin sızdırılması veya bir işlev parametresi için geri kalan operatör öğeleri yinelenebilir bir veri yapısına dönüştürmenizi sağlar. İsmi, "diğerlerini" toplamak için kümesidir.

Yapıyı kaldırma atamasıyla birlikte kullanıldığında, söz dizimi "rest özelliği" olarak adlandırılır. söz dizimine uygun olmalıdı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" olarak adlandırılır söz dizimi:

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, tek bir ES6 özelliğidir ve Örneğin, yüklenen dosyalarla çalışırken WebGL.

Simgelerde olduğu gibi %TypedArray% intrinsic işlev (genellikle %TypedArray% veya @@TypedArray olarak ifade edilir) (global mülkle karıştırılamaz) normaldir, new ile çağrılamaz veya doğrudan çağrılamaz. Bunun yerine, %TypedArray%, bireyin üst sınıfını belirtir oluşturucuları ile birlikte kullanabilirsiniz. İlgili içeriği oluşturmak için kullanılan intrinsic %TypedArray% üst sınıfı, kullanıcıların ihtiyaç duyduğu özellikleri ve %TypedArray% oluşturucu alt sınıfının tümü ve örnekleri devralır.

Öğrendiklerinizi sınayın