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
"const myArray = [ 30, 50, 70 ];" verildiğinde "myArray[1]" nedir? nasıl dönebilirim?
70
"myArray"de üç değer varsa "myArray[9]" ne döndürür?
Null
9
Undefined