Tutorial ini melihat koleksi di JavaScript, jenis koleksi JavaScript, dan cara menggunakan masing-masing. Kami akan melihat

Table of Contents Show

Apa itu Koleksi JavaScript
Cara Menggunakan Koleksi JavaScript
– Koleksi yang Diindeks
– Koleksi Berkunci
– Koleksi DOM HTML
Apakah array koleksi kunci dalam JavaScript?
Koleksi mana yang memiliki kunci dan nilai *?
Apa itu fungsi kunci dalam JavaScript?
Jenis koleksi mana yang berisi kunci

Koleksi DOM
Koleksi kunci
Koleksi Terindeks

Lanjutkan menggulir untuk mempelajari lebih lanjut

Isi

Apa itu Koleksi JavaScript

Kumpulan dalam JavaScript hanya mewakili kategori data yang ditampilkan melalui berbagai tipe data. JavaScript memiliki berbagai jenis struktur data. Hingga ECMAScript 2015 (ES6), larik dan objek JavaScript adalah struktur data dasar untuk menangani pengumpulan data

Namun, pengenalan ES6 membawa struktur data tambahan untuk mengatasi kekurangan yang ada, berkat pustaka koleksi JavaScript yang diperluas

Cara Menggunakan Koleksi JavaScript

Bagian ini membedah cara menggunakan berbagai kategori koleksi JavaScript

– Koleksi yang Diindeks

Koleksi terindeks adalah sekelompok data yang diurutkan berdasarkan nilai indeks. Indeks koleksi dalam JavaScript berbasis nol, artinya dimulai dari 0 dan bukan 1 dan berakhir pada n-1, dengan n mewakili jumlah objek dalam koleksi tersebut. Dua jenis koleksi yang diindeks tersedia di JavaScript

Array
TypedArray

objek larik

Objek array mewakili daftar terurut yang elemennya dapat diakses menggunakan indeks. JavaScript menawarkan berbagai cara untuk membuat objek Array. Lihat kode di bawah ini

biarkan myArrayA = [x1, x2, … , xN];
biarkan myArrayB = new Array(x1, x2, … , xN);
biarkan myArrayC = Array(x1, x2, … , xN);

Melihat hal di atas, Anda akan menyadari bahwa tidak banyak perbedaan di bawah tenda

Array JavaScript tidak berbasis tipe. Artinya, Anda tidak perlu menentukan tipe array terlebih dahulu. Juga, bukan persyaratan untuk hanya menambahkan elemen homogen. Ini adalah contoh untuk membuatnya jelas

let myArray = [“satu”, 1, “dua”, 2];

Sintaks di atas valid dan menyimpan referensi ke bilangan bulat dan string. Di bawah ini adalah bagaimana Anda dapat mengklasifikasi ulang indeks array

let myArray = [“satu”, 1, “dua”, 2];
// 0 1 2 3 –> nilai indeks

Setiap Array memiliki properti, panjang, yang ditentukan saat Array diinisialisasi. Oleh karena itu, saat membuat larik, nilai diberikan ke properti panjangnya. Misalnya, dalam sintaks di atas, jika Anda menghibur. log(myArray. panjang), outputnya adalah 4

Jika Anda mengubah panjangnya, itu akan mengubah array. Anda dapat memotong array untuk mempersingkat panjangnya atau memperluasnya untuk memperpanjangnya. Kode JavaScript di bawah membuat segalanya lebih jelas

let myArray = [“satu”, 1, “dua”, 2];
menghibur. log(MyArray);
myArray. panjang = 6;
menghibur. log(MyArray);
myArray. panjang = 2;
menghibur. log(MyArray);

Hasil

[“satu”, 1, “dua”, 2]
["satu", 1, "dua", 2, tidak terdefinisi]
[“satu”, 1]

Membuat Array Tanpa Elemen

JavaScript memungkinkan Anda membuat larik tanpa elemen, tetapi dengan panjang tertentu. Ini pada dasarnya seperti memesan/mengalokasikan memori terlebih dahulu. Inilah yang terjadi selama perluasan array dengan mengubah panjangnya, mis. e. , menjadi lebih lama dari sebelumnya. Sintaks di bawah menyajikan berbagai cara yang dapat Anda gunakan untuk memperluas array

biarkan myArray1 = new Array(5);
menghibur. log(myArray1. panjangnya);
biarkan myArray2 = Array(5);
menghibur. log(myArray2. panjangnya);
biarkan myArray3 = [];
myArray3. panjang = 5 // sedikit berbeda;
menghibur. log(myArray3. panjangnya);

Satu-satunya perbedaan antara metode adalah variasi dalam sintaks. Namun demikian, jika Anda ingin membuat larik dengan satu elemen yaitu Angka, gunakan tanda kurung siku dan tentukan elemen konkret alih-alih ukuran larik. Meneruskan nomor ke konstruktor array, Anda membuat array kosong dan mengalokasikannya banyak ruang

Ini kodenya

// Array baru dengan 20 spasi
biarkan myArray1 = Array baru (20)
// Array baru dengan satu elemen
biarkan myArray3 = [20]

Bagaimana Menambahkan Elemen ke Array

Setelah membuat array, Anda sekarang harus menambahkan elemen baru ke dalamnya. Ingat, untuk mengoperasikan hanya koleksi yang diindeks saat Anda berurusan dengan koleksi yang diindeks. Untuk menambahkan elemen secara efektif, akses elemen melalui indeksnya dan tetapkan nilainya. Berikut adalah contoh kode

biarkan myArray = new Array(5)
myArrayA[0] = “satu”
myArrayA[1] = "dua"
myArrayA[2] = “tiga”
myArrayA[3] = “empat”
myArrayA[4] = “lima”
menghibur. log(MyArray)

Hasil

['satu dua tiga empat lima']

Dalam contoh di atas, kami mengalokasikan lima ruang. Meskipun demikian, array dibuat secara dinamis dalam JavaScript, artinya Anda dapat memperbesar atau memperkecilnya kapan saja. Meskipun "membatasi" Array di atas dengan empat spasi, Anda menambahkan lebih banyak elemen ke dalamnya. Berikut adalah sintaks kode yang akan digunakan

ArrayA[5] = ” enam “
ArrayA[6] = “tujuh”
menghibur. log(Array) // Keluaran. ['satu dua tiga empat lima enam tujuh']

Iterasi Melalui Array

Anda bisa menggunakan forEach() atau for loop untuk melakukan iterasi melalui array. Berikut adalah sintaks untuk kejelasan

menghibur. log('Tradisional untuk loop. ’)
untuk (biarkan i = 0; i < myArrayA. panjangnya ;
menghibur. log(myArrayA[i]);
}
menghibur. log('Fungsional forEach loop. ’)
myArrayA. forEach( fungsi (elemen){ konsol. log(elemen);});

Metode Larik

Di bawah ini adalah metode larik yang paling umum dalam JavaScript

push() – ini adalah fungsi yang menambahkan elemen di akhir array. Sebagai contoh

biarkan susunanku = [6,7,8];
myArray. dorong(9);
menghibur. log(MyArray);

pop() – fungsi ini melepas elemen terakhir dari array yang diberikan. Lihat kode di bawah ini

biarkan susunanku = [6,7,8,9];
myArray. pop();
menghibur. log(MyArray);

concat() – ini menghubungkan array yang berbeda dalam satu array. Itu bisa dua atau lebih array. Berikut adalah contoh kode untuk kejelasan

// Menggabungkan 2 array mini myArray = [1,2,3]
biarkan myArrayB = [4,5,6];
biarkan finalArrayA = myArrayA. concat(myArrayB);
menghibur. log(finalArrayA);
// Menggabungkan 3 array
myArrayC = [7,8,9];
biarkan finalArrayB = myArray1. concat(MyArrayB, myArrayC);
menghibur. log(finalArrayB);

join(delimiter) – fungsi menggabungkan semua elemen untuk membentuk string, dipisahkan dengan delimiter. Sebagai contoh

let myArray = [“The”, “Sapi”, “Makan”];
biarkan arrayString = myArray. Ikuti(",");
menghibur. log(arrayString);

reverse() – fungsi reverse () mengatur elemen dalam array dalam urutan terbalik. Berikut adalah contoh kode

biarkan myArray1 = [A, B, C];
biarkan dibalik = myArray1. membalik();
menghibur. log(terbalik);

slice(start, end) – menduplikasi sebagian array dari awal hingga akhir-1

biarkan myArray1 = [A, B, C, D, E, F];
myArray1 = myArray1. irisan(C, E);
menghibur. log(myArray1);

Objek TypedArray

Objek TypedArray adalah opsi yang bagus saat bekerja dengan data biner mentah. Contoh data mentah adalah pemrosesan video dan audio

Desain Objek TypedArray

TypedArrays dikelompokkan ke dalam tampilan dan buffer. Buffer adalah kumpulan objek dalam JavaScript yang menyimpan blok data tanpa memanipulasi atau mengakses data tersebut. Untuk memanipulasi atau mengakses data, Anda harus menggunakan view. Biasanya, tampilan menyediakan tipe data, yang mengubah data menjadi TypedArray

Anda akan menggunakan objek ArrayBuffer untuk mengimplementasikan buffer, dan ini mewakili buffer data biner dengan panjang tetap. Anda tidak dapat merepresentasikan buffer ini kecuali jika Anda membuat tampilan (DataView) yang merepresentasikan buffer dalam format tertentu. Berbagai jenis tampilan ada, dan mereka mewakili jenis numerik yang umum

Membuat TypedArray

Objek TypedArray tidak memiliki konstruktor eksplisit. Anda harus membuat buffer dan tampilan saat membuat objek TypedArray dari tipe tertentu. Demikian pula, tidak ada sintaks TypedArray() baru. Instansiasi langsung jenis Array yang Anda inginkan. Sebagai contoh

biarkan tyArray = new Int16Array (16);

Kode di atas merupakan pembuatan sederhana dari buffer dan view untuk Int16Array dengan ukuran 16 byte. Menetapkan nilai ke elemen mirip dengan menetapkan nilai ke objek Array

Misalnya, untuk Int8Array, kode dan keluarannya adalah sebagai berikut

tyArray[0] = 10;
menghibur. log(tyArray);

Outputnya akan

Int8Array [10, 0, 0, 0, 1, 0, 0, 0]

– Koleksi Berkunci

Objek Map dan Set adalah dua jenis koleksi kunci dalam JavaScript. Dengan koleksi kunci, Anda memanipulasi dan mengakses data melalui kunci masing-masing. Meskipun kumpulan objek JavaScript ini dapat memiliki satu nilai yang diatribusikan ke satu kunci, Anda dapat memanipulasinya dengan mengatribusikan Daftar sebagai nilai yang memiliki banyak elemen. Perhatikan bahwa List adalah nilainya, bukan elemen penyusunnya

Objek Peta

Objek peta dalam JavaScript mewakili peta standar yang menampilkan pasangan kunci-nilai, di mana kuncinya bisa dari jenis apa pun. Peta mempertahankan urutan, artinya Anda dapat mengambil data dalam urutan yang sama dengan saat Anda memasukkannya

Peta memiliki fitur Array dan objek. Ini mendukung pasangan nilai kunci seperti objek dan mengingat urutan penyisipan seperti array

Bagaimana Anda Membuat Peta Baru di JavaScript?

Untuk membuat objek peta baru, gunakan konstruktor

biarkan peta = Peta baru();

Konstruktor di atas akan kembali

Peta(0) {}
Selain itu, Anda dapat membuat objek peta baru menggunakan nilai awal

Cara Menambahkan Elemen ke Peta

Fungsi set() digunakan untuk menambahkan elemen ke peta. Metode ini biasanya menerima parameter kunci dan nilai, karenanya ditulis sebagai metode set(key, value). Contohnya

Peta. set ("satu", A);
Peta. set ("dua", B);
Peta. set ("tiga", "tiga");
menghibur. log(petasaya);

Kunci harus berupa string sedangkan nilai dapat berupa jenis apa pun (seperti boolean, string, angka, dll. ) atau objek. perhatikan bahwa jika Anda menggunakan kunci yang sama untuk menambahkan nilai ke Peta beberapa kali, ini akan menggantikan nilai sebelumnya. Sebagai contoh

// membuat peta
biarkan peta = Peta baru();
// Tambahkan nilai ke peta
peta. set('nama', 'Tutorial');
peta. set('ketik', 'postingan blog');
peta. set('penulis', 'Tulollope');

Sekarang, tulis kode di bawah ini

// Tambahkan penulis lain
peta. set('penulis', 'Peter Yu');
Outputnya akan
{“nama” => “Tutorial”, “ketik” => “postingan blog”, “penulis” => “Peter Yu”}

Selain itu, peta bersifat heterogen; . Lihat kode di bawah ini untuk memahami lebih lanjut

Peta { 'satu' => A, 'dua' => B, 'tiga' => 'tiga' }

Cara Mengakses Nilai Dari Peta di JavaScript

Untuk mendapatkan elemen Peta, cukup gunakan fungsi get(key) lalu masukkan kuncinya. Kunci adalah pengidentifikasi unik di peta. Contoh kode sederhana adalah

menghibur. log(myMap. dapatkan("tiga")); . 3

Jenis koleksi JavaScript ini tidak berbasis indeks, oleh karena itu, Anda tidak dapat mengakses nilai tertentu menggunakan tanda kurung siku. Misalnya, myMap[“three”] mengembalikan nilai yang tidak ditentukan. Demikian pula, ketika Anda memanggil get(key) pada kunci yang tidak ada, itu juga mengembalikan undefined

Semua Tentang Kunci Peta di JavaScript. Apa yang perlu Anda ketahui

Seperti yang dinyatakan sebelumnya, kunci Peta adalah jenis apa pun. Ini adalah salah satu perbedaan paling signifikan antara objek JS biasa dan Map. Berikut adalah contoh kode untuk kejelasan

// buat Peta
const fMap = Peta baru();
fMap. set(120, 'Nomor Rumah Saya');
peta menyenangkan. set(benar, 'Saya membuat blog. ’);
biarkan obj = {'nama'. 'tullolope'}
fMap. set(obj, benar);
menghibur. log(fMap);

Keluaran

Peta(3)
{
360 => “Nomor Rumahku”,
true => “Saya membuat blog. ”,
{…} => benar
}

Metode Peta

Metode yang paling umum digunakan di map adalah set() dan get(). Namun, metode lain juga ada. Anda mungkin ingin mengulangi peta. Dalam hal ini gunakan metode forEach(). Metode lain yang menarik adalah

has(key) – ini mengevaluasi salah atau benar, kondisi menjadi ada atau tidak adanya kunci. Gunakan kode di bawah ini untuk menerapkan metode has()

Peta. set("satu", 1);
Peta. set("dua", 2);
Peta. set ("tiga", "tiga");
menghibur. log(petasaya);
Menerapkan fungsi has()
menghibur. log(Peta. Punya satu"));
menghibur. log(myMap. has(“enam”)) // salah

delete(key) – menghapus nilai dan kunci berdasarkan kunci yang diteruskan. Namun, tidak ada yang terjadi jika Anda memberikan kunci yang tidak ada. Sebagai contoh

Peta. hapus ("satu") konsol. log(Peta);
// Keluaran. Peta { 'dua' => 2, 'tiga' => 'tiga' }
Peta. hapus ("enam") konsol. log(petasaya);
// Keluaran. Peta {'dua' => 3, 'tiga' => 'tiga'}

clear() – menghapus seluruh kumpulan key-value pair dari objek peta. Sebagai contoh

Peta. jernih();
menghibur. log(Peta);
// Keluaran. Peta {}

Properti utama Peta adalah ukuran. Properti ini memiliki nilai angka yang mewakili ukuran objek peta

biarkan Peta = Peta baru();
Peta. set("dua", 2);
Peta. set("empat", 4);
menghibur. log(Peta. ukuran);
// Keluaran. 2

Iterator Peta. Iterasi Melalui Peta

fungsi kunci(), nilai(), dan entri() mengevaluasi ke MapIterator. Ini berguna karena Anda kemudian menggunakan forEach atau for-of loop langsung di atasnya. Sebagai contoh

Membuat peta

biarkan ageMap = Peta baru([
['Yohanes', 30],
['Andrew', 34],
['Tagihan', 18],
['Sammy', 9]
]);

Dapatkan semua kunci

menghibur. log(ageMap. kunci());
// Keluaran
// MapIterator {“John”, “Andrew”, “Bill”, “Sammy”}

Dapatkan semua Nilai

menghibur. log(ageMap. nilai());
// Keluaran
// MapIterator {30, 34, 18, 9}

Dapatkan entri

menghibur. log(ageMap. entri());
// Keluaran
// MapIterator {“John” => 30, “Andrew” => 34, “Bill” => 18, “Sammy” => 9}

Koleksi JavaScript. Iterasi Melalui Peta

Metode yang paling efisien adalah fungsi for of dan forEach()

Lihat kode di bawah ini yang menggunakan for of

untuk (biarkan [kunci, nilai] dari Peta){
menghibur. log(kunci + ” ditulis dengan angka adalah ” + nilai)
}

Untuk setiap entri yang memiliki key-value pair Map, yang ditulis dengan angka adalah 1

Lihat kode di bawah ini yang menggunakan metode forEach()

Sintaksnya adalah

Peta. forEach(fungsi(nilai) { konsol. log(nilai);});
Juga, Anda dapat mengambil bot nilai dan kunci menggunakan sintaks
Peta. forEach(fungsi(nilai, kunci) { konsol. log(nilai, kunci);});

Peta vs. Obyek. Kapan Menggunakan Masing-Masing dari Mereka

Pengumpulan objek dalam JavaScript mengikuti notasi nilai kunci, membuatnya sulit untuk membedakan keduanya. Namun demikian, ikuti tips di bawah ini

Gunakan Peta saat semua kunci memiliki tipe dan nilai yang serupa atau saat kunci tidak diketahui hingga waktu proses
Gunakan Objek saat ada operasi logika pada elemen individu, bukan kumpulan elemen

Objek Set

Set mewakili kumpulan nilai saja. Nilainya unik, i. e. , tidak ada duplikat. Atur elemen cetakan dalam urutan penyisipan

Untuk membuat satu set, gunakan sintaks

biarkan Set = set baru();

Koleksi JavaScript. Tambahkan Elemen ke Set

Gunakan fungsi add(value) untuk menambahkan elemen baru ke set. Sebagai contoh

Mengatur. tambahkan(1);
menghibur. log(Atur);

Jika Anda menambahkan duplikat, inilah yang terjadi

Mengatur. tambahkan(1);
Mengatur. tambah ("dua");
Mengatur. tambah ("dua");
Mengatur. tambah(“tiga”);
Mengatur. tambahkan(1);
menghibur. log(Atur);

Keluaran

Tetapkan { 1, 'dua', 'tiga' }

Set tidak akan menampilkan elemen duplikat karena mengenalinya tetapi hanya menyimpan satu salinan. Selain itu, mempertahankan urutan penyisipan. Jadi, jika Anda ingin memfilter elemen, gunakan set

Tetapkan Metode

Metode yang ditetapkan menyerupai metode Peta. Berikut adalah metode umum untuk digunakan

add(value) – digunakan untuk menambahkan nilai baru ke objek Set
delete(value) – menghapus nilai tertentu dari objek Set
has(value) – mengevaluasi ke true atau false berdasarkan apakah nilainya ada di objek Set
clear() – menghapus semua nilai dari objek Set

– Koleksi DOM HTML

Pohon DOM memungkinkan Anda untuk mengakses semua elemen di halaman web. Jika Anda mengakses beberapa elemen sekaligus, mereka dikembalikan sebagai HTMLcollection, yang merupakan kumpulan elemen HTML seperti array. Sederhananya, itu adalah kumpulan node HTML

Koleksi HTML adalah koleksi yang diindeks karena Anda akan mengakses elemen menggunakan nilai indeks. Namun, ini bukan koleksi terindeks sejati JS dalam arti yang lebih ketat karena ini bukan array. Itu tidak memiliki metode array, tetapi akses indeks tersedia

Contoh kode

<. DOCTYPE html>

Kami Di Sini

Metode getElementsByTagName() mengembalikan HTMLCollection.

var y = dokumen. getElementsByTagName(“P”);
dokumen. tulis(y);

Keluarannya adalah

Kita di sini
Metode getElementsByTagName() mengembalikan HTMLCollection
[Koleksi HTML objek]

Kesimpulan

Dalam tutorial koleksi JavaScript ini, kami telah membahasnya

Definisi koleksi JS, grup data yang diekspresikan melalui tipe data yang berbeda
Tiga kategori koleksi JavaScript, yaitu koleksi indexed, keyed, dan HTML DOM
Koleksi yang diindeks dikelompokkan ke dalam Array dan TypedArray, dan mereka mewakili data yang dicantumkan berdasarkan indeks
Koleksi berkunci dibagi menjadi peta dan set, dan mewakili notasi data nilai kunci
Koleksi HTML hanyalah elemen HTML berdasarkan indeks

Pilihan metode pengumpulan JS bergantung pada jenis data yang Anda manipulasi. Anda akan menemukan HTMLCollection jika Anda bekerja di halaman web. Dengan panduan ini, Anda harus mulai memanipulasi tipe data yang berbeda dengan cepat

5/5 - (16 suara)

Posisi adalah Segalanya

Posisi Adalah Segalanya. Sumber Daya Masuk Anda untuk Belajar & Membangun. CSS,JavaScript,HTML,PHP,C++ dan MYSQL

Apakah array koleksi kunci dalam JavaScript?

Properti adalah pasangan kunci-nilai di mana kuncinya harus berupa string dan nilainya dapat bertipe apa pun. Di sisi lain, array adalah kumpulan terurut yang dapat menyimpan data jenis apa pun . Dalam JavaScript, array dibuat dengan tanda kurung siku [. ] dan izinkan elemen duplikat.

Koleksi mana yang memiliki kunci dan nilai *?

A WeakMap adalah kumpulan pasangan kunci/nilai yang kuncinya harus berupa objek, dengan nilai dari sembarang jenis JavaScript, dan yang tidak membuat referensi kuat ke kuncinya.

Apa itu fungsi kunci dalam JavaScript?

Objek. metode keys() mengembalikan array dari nama properti dengan kunci string yang dapat dihitung milik objek tertentu .

Jenis koleksi mana yang berisi kunci

Koleksi harus menjaga urutan elemen. Sebuah ArrayList akan bagus untuk itu. Yang memungkinkan untuk mengambil elemen dengan nilai kunci. HashMap akan bagus untuk itu.