Kumpulan terindeks adalah struktur data di mana elemen-elemen disimpan dan
diakses menggunakan indeks bernomor. Nilai yang disimpan dalam koleksi yang diindeks akan
menetapkan indeks bernomor mulai dari 0
, sebuah pola yang disebut "pengindeksan nol".
Anda kemudian dapat mengakses nilai yang disimpan dalam koleksi yang diindeks dengan mereferensikan
indeksnya.
Array
{i>Array<i} adalah kontainer yang dapat menampung nol atau lebih nilai dari jenis data apa pun, termasuk objek kompleks atau array lainnya. Nilai-nilai yang disimpan dalam {i>array <i}disimpan terkadang disebut "elemen" dari himpunan (array).
Membuat array
Seperti jenis data primitif, ada dua pendekatan untuk membuat array: sebagai
literal array, atau dengan memanggil konstruktor Array()
bawaan JavaScript
dengan new Array()
. Menetapkan array ke variabel memberikan
hasil yang sangat portabel
dan iterable untuk menetapkan
beberapa nilai ke
satu ID.
Sintaksis literal array menggunakan sepasang tanda kurung ([]
) yang mengelilingi nol atau lebih
comma separated data:
const myArray = [];
Sintaksis konstruktor array menggunakan objek Array
bawaan JavaScript sebagai
konstruktor dengan kata kunci new
:
const myArray = new Array();
Sintaksis konstruktor array dan literal array memungkinkan Anda mengisi array dengan informasi baru saat dibuat, meskipun sintaksnya sedikit berbeda dalam hal bagaimana ditentukan. Sintaksis literal array menggunakan nilai yang dipisahkan koma di antara tanda kurung, yang terlihat sama dengan larik yang dihasilkan:
const myArray = [ true, null, "String", false ];
myArray;
> [ true, null, "String", false ]
Sintaksis konstruktor array menggunakan nilai yang dipisahkan koma sebagai argumen, dengan satu pengecualian perilaku khusus:
const myArray = new Array( true, null, "String", false );
myArray;
> Array(4) [ true, null, "String", false ]
Jika satu nilai numerik diteruskan ke konstruktor Array
, nilai tersebut
tidak ditetapkan ke posisi nol dalam larik yang dihasilkan. Sebagai gantinya, array
dibuat dengan sejumlah slot kosong untuk nilai. Hal ini tidak memaksakan
batasan pada himpunan (array). Item dapat ditambahkan dan dihapus dengan cara yang sama
seperti dengan literal array.
// Firefox:\
const myArray = new Array( 10 );
myArray;
> Array(10) [ <10 empty slots> ]
// Chrome:
const myArray = new Array( 10 );
myArray;
> (10) [empty × 10]
Array yang berisi slot kosong (terkadang disebut "array sparse") bersifat khusus
penggunaan. Alih-alih berisi nilai undefined
atau null
secara eksplisit, kosongkan
slot sering kali, namun tidak selalu, diperlakukan sebagai nilai undefined
di tempat lain dalam
di bahasa target.
Anda dapat secara tidak sengaja membuat {i>array <i}renggang menggunakan {i>syntax<i} literal array dengan menghilangkan nilai di antara koma saat Anda membuat literal array:
const myArray = [ true,, true, false ];
myArray;
> Array(4) [ true, <1 empty slot>, true, false ]
Meskipun tidak diperlakukan sebagai nilai yang berarti dalam semua konteks, slot kosong diperhitungkan dalam panjang total {i>array<i}, yang berpotensi mengarah ke hasil yang tidak terduga saat melakukan iterasi nilai-nilai array:
const myArray = [ 1,, 3, 4 ];
myArray.length;
> 4
for( const myValue of myArray ) {
console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14
Perilaku ini merupakan sisa dari beberapa keputusan desain JavaScript yang paling awal. Menghindari penggunaan array sparse dalam pengembangan modern.
Seperti halnya primitif, literal array
mewarisi properti dan metode dari konstruktor yang sesuai.
Karena {i>array <i}adalah bentuk khusus dari
objek, {i>array <i}syntax literal dan
Sintaksis new Array()
memberikan hasil yang identik secara fungsional: objek yang
mewarisi prototipenya dari konstruktor Array
.
const arrayLiteral = [];
const arrayConstructor = new Array();
typeof arrayLiteral;
> "object"
arrayLiteral;
> Array []
length: 0
<prototype>: Array []
typeof arrayConstructor;
> "object"
arrayConstructor;
> Array []
length: 0
<prototype>: Array []
Karena kedua hasil tersebut identik, dan sintaksis literal array lebih ringkas
dan literal, kami sangat menyarankan untuk selalu menggunakan
sintaks literal array daripada
Sintaksis new Array()
.
Mengakses nilai array
Anda dapat mengakses elemen individual dalam {i>array<i} menggunakan notasi tanda kurung, sebuah
tanda kurung siku ([]
) yang mengikuti array atau ID-nya yang berisi
angka yang mengacu pada indeks elemen itu:
[ "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
Array di JavaScript tidak bersifat asosiatif, artinya Anda tidak dapat menggunakan string acak sebagai indeks. Namun, model nilai yang digunakan untuk mengakses elemen dalam array dikonversi menjadi nilai string di belakang adegan, yang berarti Anda bisa menggunakan nilai {i>string <i}yang hanya berisi angka karakter:
const myArray = [ "My string", 50, true ];
myArray[ 2 ];
> true
myArray[ "2" ];
> true
Mencoba mengakses elemen di luar yang
ditentukan dalam hasil {i>array<i}
undefined
, bukan error:
const myArray = [ "My string", 50, true ];
myArray[ 9 ];
> undefined
Penetapan destrukturisasi
Penguraian tugas adalah cara ringkas untuk mengekstrak rentang nilai dari array atau objek dan menetapkannya ke sekumpulan pengenal, proses yang terkadang disebut "{i>unpacking<i}" struktur data asli, meskipun tidak memodifikasi array atau objek asli.
Penetapan destrukturisasi menggunakan daftar ID seperti array atau objek untuk
untuk melacak nilai. Dalam bentuk yang paling sederhana, disebut pola binding
destrukturisasi, setiap nilai diekstrak dari array atau objek dan ditetapkan ke
variabel yang sesuai, diinisialisasi menggunakan let
atau const
(atau var
):
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
Gunakan tanda kurung kurawal ({}
) untuk menguraikan objek, dan tanda kurung siku ([]
) untuk
mengurai {i>array<i}.
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
Penguraian array terjadi secara berurutan, dari kiri ke kanan. Masing-masing dalam tugas destrukturisasi sesuai dengan elemen array dengan indeks yang sama:
const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;
myElement;
> 1
mySecondElement;
> 2
myThirdElement;
> 3
Ini juga merupakan perilaku default saat menguraikan struktur objek. Namun, jika yang digunakan dalam tugas destrukturisasi cocok dengan kunci milik objek properti, pengidentifikasi tersebut diisi dengan properti yang sesuai nilai, apa pun urutannya:
const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;
firstValue;
> 1
secondValue;
> 2
thirdValue;
> 3
Elemen dapat dilewati dengan menghilangkan ID:
const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;
firstValue;
> 1
secondValue;
> 3
Sintaksis destrukturisasi juga memungkinkan Anda menetapkan nilai default jika terjadi destrukturisasi
bisa berupa slot kosong, seperti pada kasus larik renggang, atau
Nilai undefined
.
const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;
firstValue;
> true
secondValue;
> "Default string."
Dekonstruksi tidak memaksa nilai ke jenis tertentu. Hal ini berarti bahwa
Nilai "falsy", seperti kosong
string (""
) atau null
, masih dianggap sebagai nilai hasil dekonstruksi yang bermakna:
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
Operator sebar
Menggunakan operator penyebaran (...
), yang diperkenalkan di ES6 untuk memperluas data iterable
seperti array, string, atau literal objek ke dalam elemen individual.
Operator {i>spreadsheet<i} segera diikuti oleh struktur data yang akan diperluas
atau ID variabel yang berisi struktur data tersebut.
const myArray = [ 1, 2, 3 ];
console.log( ...myArray );
> 1 2 3
Sintaksis selisih digunakan terutama untuk menyalin dan menggabungkan array:
const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];
mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Anda dapat menggunakan sintaksis tersebar hanya dalam konteks berikut:
Untuk array dan string, sintaksis sebar hanya berlaku jika nol atau beberapa argumen
dalam panggilan fungsi atau elemen dalam array. Contoh pertama
sintaksis operator tersebar di bagian ini berfungsi karena meneruskan ...myArray
sebagai
argumen ke metode console.log
bawaan.
Misalnya, Anda tidak dapat menetapkan data yang disebar ke variabel di luar array lain:
const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'
Namun, Anda menyalin array dengan menyebarkan array asli ke literal array:
const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];
spreadArray;
> Array(3) [ 1, 2, 3 ]
Untuk menggabungkan elemen yang membentuk dua array atau lebih menjadi satu array:
const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];
myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Atau, untuk meneruskan elemen array sebagai argumen individual dalam panggilan fungsi:
const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
console.log( myArgument, mySecondArgument );
};
myFunction( ...myArray );
> true false
Operator {i>spreadsheet<i} diperluas agar dapat bekerja dengan literal objek di ES2018. Seperti halnya array, Anda dapat menggunakan operator penyebaran untuk menduplikasi atau menggabungkan objek:
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 }
Operator penyebaran membuat "shallow" (dangkal) salinan. Artinya, kode ini tidak menyalin prototipe objek asli dan non-enumerable properti baru.
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 { … }
Perlu diingat bahwa array dan objek tidak dapat digunakan secara bergantian. Anda tidak bisa sebarkan objek ke dalam array, atau array.
Operator istirahat
Meskipun sintaksis operator itu sendiri sama, operator sisanya (...
)
melakukan fungsi yang berlawanan berdasarkan
konteks yang digunakannya. Daripada fokus pada
memperluas struktur data iterable menjadi elemen individu, seperti pada
tugas destrukturisasi atau sebagai
parameter fungsi, operator sisanya menggabungkan
elemen ke dalam struktur
data yang iterable. Namanya berasal dari
digunakan untuk
mengumpulkan "sisanya" dari satu set nilai data.
Saat digunakan dengan tugas destrukturisasi, sintaksisnya disebut "rest property" sintaksis.
const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];
[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;
myFirstElement;
> "First"
mySecondElement;
> "Second"
remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]
Jika digunakan untuk memberikan argumen dalam jumlah tak terbatas ke fungsi, {i>syntax<i}nya disebut "rest parameter" sintaksis:
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%
Array berjenis adalah fitur ES6 yang didesain untuk menyimpan data biner terstruktur, untuk saat bekerja dengan file yang diunggah atau WebGL.
Seperti halnya Simbol, %TypedArray%
fungsi intrinsik (biasanya didokumentasikan sebagai %TypedArray%
atau @@TypedArray
sehingga tidak dapat disangka properti global) bukan fungsi konstruktor di
arti konvensional, dan Anda tidak dapat memanggilnya dengan new
atau memanggilnya secara langsung.
Sebaliknya, %TypedArray%
mengacu pada superclass induk individu
mereka, yang masing-masing bekerja
dengan format data biner tertentu. Tujuan
superclass %TypedArray%
intrinsik menyediakan properti dan metode utilitas yang
semua subclass konstruktor %TypedArray%
dan instance-nya mewarisi.
Menguji pemahaman Anda
Mengingat `const myArray = [ 30, 50, 70 ];` apa fungsi `myArray[1]` kembali?
70
Jika `myArray` memiliki tiga nilai, apa yang ditampilkan oleh `myArray[9]`?
Undefined
Null
9