Koleksi yang diindeks

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