Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Koleksi yang diindeks

Koleksi terindeks adalah struktur data tempat elemen disimpan dan diakses menggunakan indeks bernomor. Nilai yang disimpan dalam koleksi yang diindeks akan diberi indeks bernomor mulai dari 0, yaitu pola yang disebut "pengindeksan nol". Selanjutnya, Anda dapat mengakses nilai yang disimpan di koleksi yang diindeks dengan mereferensikan indeksnya.

Array

Array adalah penampung yang dapat menyimpan nol atau beberapa nilai dari jenis data apa pun, termasuk objek kompleks atau array lainnya. Nilai yang disimpan dalam array terkadang disebut "elemen" array.

Membuat array

Seperti halnya 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 akan memberikan cara yang sangat portabel dan iterable untuk menetapkan beberapa nilai ke satu ID.

Sintaksis literal array menggunakan sepasang tanda kurung ([]) yang mengapit nol atau beberapa nilai data yang dipisahkan koma:

const myArray = [];

Sintaksis konstruktor array menggunakan objek Array bawaan JavaScript sebagai konstruktor dengan kata kunci new:

const myArray = new Array();

Literal array dan sintaksis konstruktor array memungkinkan Anda mengisi array dengan informasi saat dibuat, meskipun sintaksisnya sedikit berbeda dalam cara menentukan nilai tersebut. Sintaksis literal array menggunakan nilai yang dipisahkan koma di antara tanda kurung, yang terlihat sama dengan array 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 akan ditetapkan ke posisi ke-nol dalam array yang dihasilkan. Sebagai gantinya, array dibuat dengan jumlah slot kosong untuk nilai tersebut. Hal ini tidak menimbulkan batasan pada array. Item dapat ditambahkan dan dihapus dengan cara yang sama seperti 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") adalah kasus khusus. Slot kosong, bukan berisi nilai undefined atau null secara eksplisit, sering kali, tetapi tidak selalu, diperlakukan sebagai nilai undefined di tempat lain dalam bahasa tersebut.

Anda dapat secara tidak sengaja membuat array sparse menggunakan sintaksis literal array dengan menghapus nilai di antara koma saat membuat literal array:

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

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

Meskipun tidak diperlakukan sebagai nilai yang berarti di semua konteks, slot kosong diperhitungkan ke dalam total panjang array, yang berpotensi menyebabkan hasil yang tidak diharapkan saat melakukan iterasi pada 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 adalah singgungan dari beberapa keputusan desain JavaScript paling awal. Hindari penggunaan array sparse dalam pengembangan modern.

Seperti halnya primitif, literal array mewarisi properti dan metode dari konstruktornya yang terkait. Karena array adalah bentuk objek khusus, sintaksis literal array dan sintaksis new Array() akan menghasilkan 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 identik, dan sintaksis literal array lebih ringkas dan literal, sebaiknya selalu gunakan sintaksis literal array, bukan sintaksis new Array().

Mengakses nilai array

Anda dapat mengakses setiap elemen di dalam array menggunakan notasi kurung, serangkaian tanda kurung ([]) setelah array atau ID-nya berisi angka yang merujuk ke indeks elemen tersebut:


[ "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 dalam JavaScript tidak bersifat asosiatif, artinya Anda tidak dapat menggunakan string arbitrer sebagai indeks. Namun, nilai numerik yang digunakan untuk mengakses elemen dalam array dikonversi menjadi nilai string di balik layar, yang berarti Anda dapat menggunakan nilai string yang hanya berisi karakter numerik:

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

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Mencoba mengakses elemen di luar yang ditentukan dalam array akan menghasilkan undefined, bukan error:

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

myArray[ 9 ];
> undefined

Penguraian penetapan struktur

Mendestrukturisasi penetapan adalah cara ringkas untuk mengekstrak rentang nilai dari array atau objek dan menetapkannya ke kumpulan ID. Proses ini terkadang disebut "ekstrak" struktur data asli, meskipun tidak mengubah array atau objek aslinya.

Penetapan penataan menggunakan daftar ID seperti array atau objek untuk melacak nilai. Dalam bentuknya yang paling sederhana, yang disebut destrukturisasi pola binding, 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 mengurai objek, dan tanda kurung siku ([]) untuk mengurai array.

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. Setiap ID dalam penetapan 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

Hal ini juga merupakan perilaku default saat mendestrukturisasi objek. Namun, jika ID yang digunakan dalam penetapan destrukturisasi cocok dengan kunci properti objek, ID tersebut akan diisi dengan nilai properti yang sesuai, terlepas dari urutan penetapannya:

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 penguraian juga memungkinkan Anda menetapkan nilai default jika nilai yang didestrukturisasi berupa slot kosong, seperti pada array sparse, atau nilai undefined.

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

firstValue;
> true

secondValue;
> "Default string."

Dekonstruksi tidak memaksakan nilai ke jenis tertentu. Artinya, nilai "falsy", seperti string kosong ("") atau null, masih dianggap sebagai nilai terdekonstruksi 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

Gunakan operator penyebaran (...), yang diperkenalkan di ES6 untuk memperluas struktur data iterable seperti array, string, atau literal objek menjadi elemen individual. Operator penyebaran 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 Spread terutama digunakan 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 penyebaran hanya dalam konteks berikut:

Untuk array dan string, sintaksis penyebaran hanya berlaku jika tidak ada atau lebih argumen dalam panggilan fungsi atau elemen dalam array yang diharapkan. Contoh pertama sintaksis operator spread di bagian ini berfungsi karena meneruskan ...myArray sebagai argumen ke metode console.log bawaan.

Misalnya, Anda tidak dapat menetapkan data yang disebarkan ke variabel di luar array lain:

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

Tetapi Anda menyalin array dengan menyebarkan array asli ke dalam 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 ke dalam 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 penyebaran diperluas agar dapat digunakan dengan literal objek di ES2018. Seperti halnya array, Anda dapat menggunakan operator sebar 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 salinan "shallow". Artinya, fungsi ini tidak menyalin prototipe dan properti non-enumerable objek asli.

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 dapat menyebarkan objek ke dalam array, atau array ke dalam objek.

Operator istirahat

Meskipun sintaksis operator itu sendiri sama, operator sisanya (...) akan melakukan fungsi yang berlawanan berdasarkan konteks penggunaannya. Sebagai ganti memperluas struktur data iterable menjadi elemen individual, seperti dalam penetapan destrukturisasi atau sebagai parameter fungsi, operator lainnya menggabungkan elemen ke dalam struktur data iterable. Nama tersebut berasal dari fakta bahwa digunakan untuk mengumpulkan “sisa” dari satu set nilai data.

Jika digunakan dengan penetapan destrukturisasi, sintaksis ini disebut sintaksis "properti istirahat".

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 yang tidak terbatas ke suatu fungsi, sintaksisnya disebut sintaksis "parameter istirahat":

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 yang memiliki jenis adalah fitur ES6 yang didesain untuk menyimpan data biner terstruktur, misalnya saat bekerja dengan file yang diupload atau WebGL.

Seperti halnya Symbols, fungsi intrinsik %TypedArray% (biasanya didokumentasikan sebagai %TypedArray% atau @@TypedArray sehingga tidak dapat disalahartikan sebagai properti global) bukan fungsi konstruktor dalam arti konvensional, dan Anda tidak dapat memanggilnya dengan new atau memanggilnya secara langsung. Sebagai gantinya, %TypedArray% merujuk pada superclass induk dari masing-masing konstruktor yang masing-masing berfungsi dengan format data biner tertentu. Superclass %TypedArray% intrinsik menyediakan properti dan metode utilitas yang diwarisi oleh semua subclass konstruktor %TypedArray% dan instance-nya.

Menguji pemahaman Anda

Mengingat `const myArray = [ 30, 50, 70 ];` apa yang ditampilkan `myArray[1]`?

70

Jika `myArray` memiliki tiga nilai, apa yang ditampilkan `myArray[9]`?

Undefined

Pesan error

9

Null