Dalam pemrograman JavaScript, kita semua terbiasa membuat dan bekerja dengan array satu dimensi. Ini adalah array yang berisi elemen (elemen dari tipe data yang serupa atau beberapa tipe data)
Tetapi juga baik untuk mengetahui bahwa array dua dimensi (array 2D) ada di JS
Pada artikel ini, Anda akan mempelajari apa itu array dua dimensi dan bagaimana cara kerjanya dalam JavaScript. Ini sangat berbeda dari bahasa pemrograman lain karena secara teknis tidak ada array dua dimensi dalam JavaScript
Apa itu Array Dua Dimensi?
Array dua dimensi, juga dikenal sebagai array 2D, adalah kumpulan elemen data yang disusun dalam struktur seperti kisi dengan baris dan kolom. Setiap elemen dalam array disebut sebagai sel dan dapat diakses oleh indeks/indeks baris dan kolomnya
[ a1, a2, a3, ..., an, b1, b2, b3, ..., bn, c1, c2, c3, ..., cn, . . . z1, z2, z3, ..., zn ]Dalam JavaScript, tidak ada sintaks langsung untuk membuat array 2D seperti bahasa pemrograman lain yang umum digunakan seperti C, C++, dan Java
Anda dapat membuat larik dua dimensi dalam JavaScript melalui larik bergerigi — larik larik. Misalnya, di bawah ini adalah tampilan array bergerigi
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _Tapi ada batasannya. Penting untuk dicatat bahwa array dua dimensi memiliki ukuran yang tetap. Ini berarti bahwa setelah dibuat, jumlah baris dan kolom harus diperbaiki. Juga, setiap baris harus memiliki jumlah elemen (kolom) yang sama
Misalnya, larik di bawah ini memiliki tiga baris dan empat elemen
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ];Keterbatasannya adalah bahwa dengan array bergerigi, Anda tidak dapat menentukan baris dan kolom tetap. Ini berarti bahwa array bergerigi dapat memiliki m baris, masing-masing memiliki jumlah elemen yang berbeda
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ];Mengapa Menggunakan Larik 2D dalam JavaScript?
Pada titik ini, Anda mungkin bertanya pada diri sendiri tentang pentingnya larik 2D, terutama jika ini adalah pertama kalinya Anda membaca tentang larik 2D
Dalam JavaScript, kami menggunakan array dua dimensi, juga dikenal sebagai matriks, untuk menyimpan dan memanipulasi data dengan cara yang terstruktur dan terorganisir.
- Mereka memungkinkan penyimpanan dan manipulasi data dalam jumlah besar secara efisien, seperti dalam pemrosesan gambar atau video, simulasi ilmiah, dan aplikasi spreadsheet
- Larik dua dimensi juga memungkinkan penggunaan operasi matriks, seperti perkalian matriks dan transposisi, yang dapat menyederhanakan kalkulasi kompleks dan membuat kode lebih mudah dibaca.
- Array dua dimensi dapat mewakili matriks matematika dalam aljabar linier dan berbagai data, seperti grafik, peta, dan tabel.
- Array dua dimensi umumnya digunakan dalam aplikasi yang melibatkan tabel data, pemrosesan gambar, dan pengembangan game
Cara Mengakses Elemen dalam JavaScript 2D Array
Sebelum Anda mempelajari cara membuat array 2D dalam JavaScript, mari pelajari terlebih dahulu cara mengakses elemen dalam array 2D
Anda dapat mengakses elemen array dua dimensi menggunakan dua indeks, satu untuk baris dan satu lagi untuk kolom. Misalkan Anda memiliki array dua dimensi berikut
let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; _Di atas adalah susunan bergerigi di mana setiap elemen memuat nama siswa, nilai ujian, nilai ujian, dan nilai. Anda dapat mengakses elemen tertentu menggunakan indeks baris dan kolom seperti yang terlihat pada sintaks di bawah ini
arrayName\[rowIndex\][columnIndex]Untuk lebih memahami hal ini, mari ubah larik dua dimensi di atas menjadi tabel menggunakan let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 4
Catatan. pastikan Anda mengganti let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; _5 dengan nama array 2D Anda. Dalam kasus saya, ini adalah let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; _6
Anda akan mendapatkan output seperti ini, menunjukkan indeks baris dan kolom. Ingatlah bahwa array tidak diindeks, artinya item direferensikan dari 0, bukan 1
Harap dicatat bahwa let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 7 kolom dan baris adalah untuk ilustrasi yang menunjukkan indeks/indeks dari array dalam
Anda menggunakan dua tanda kurung siku untuk mengakses elemen array dua dimensi atau multidimensi. Yang pertama mengakses baris, sedangkan yang kedua mengakses elemen di baris yang ditentukan
console.log(MathScore\[4\][0]); // returns 'Ben Liard' console.log(MathScore\[2\][1]); // returns 5 console.log(MathScore\[1\][3]); // returns 'B' console.log(MathScore\[2\][2]); // returns 24Cara mengakses elemen pertama dan terakhir dari larik 2D
Terkadang Anda mungkin perlu menemukan elemen pertama dan terakhir dari array dua dimensi. Anda dapat melakukannya dengan menggunakan indeks pertama dan terakhir dari baris dan kolom
Elemen pertama akan selalu memiliki indeks baris dan kolom 0, artinya Anda akan menggunakan let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 8
Namun, indeks elemen terakhir bisa rumit. Misalnya pada contoh di atas, elemen pertama adalah 'John Doe' sedangkan yang terakhir adalah 'B'
Bagaimana cara menambahkan semua elemen array 2D
Dalam beberapa situasi, semua elemen array 2D Anda bisa berupa angka, jadi Anda mungkin perlu menjumlahkannya dan sampai pada satu digit saja. Anda dapat melakukan ini menggunakan loop bersarang. Anda pertama-tama akan mengulang baris, lalu, untuk setiap baris, Anda mengulang elemennya
let numberArr = [ [10, 20, 60], [8, 10, 52], [15, 5, 24], [26, 28, 43], [12, 16, 51] ]; var sum = 0; numberArr.forEach((row) => { row.forEach((element) => { sum += element; }); }); console.log("The sum of all elements in the array is:" + sum); // returns "The sum of all elements in the array is: 380"Cara Memanipulasi Array 2D di JavaScript
Anda dapat memanipulasi array 2D seperti array satu dimensi menggunakan metode array umum seperti pop, push, splice, dan banyak lagi
Mari kita mulai dengan mempelajari cara menambahkan/menyisipkan baris dan elemen baru ke larik 2D
Cara memasukkan elemen ke dalam array 2D
Anda dapat menambahkan sebuah elemen atau banyak elemen ke array 2D dengan metode push() dan unshift()
Metode push() menambahkan elemen ke akhir array 2D, sedangkan metode unshift() menambahkan elemen ke awal array 2D
let MathScore = [ ["John Doe", 20, 60, "A"], ["Jane Doe", 10, 52, "B"], ["Petr Chess", 5, 24, "F"], ["Ling Jess", 28, 43, "A"], ["Ben Liard", 16, 51, "B"] ]; MathScore.push(["Tom Right", 30, 32, "B"]); MathScore.unshift(["Alice George", 28, 62, "A"]);Ketika Anda let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; _9 atau let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 0 array, Anda akan melihat bahwa baris baru telah ditambahkan
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _0Anda juga dapat menambahkan elemen ke larik dalam, tetapi salah jika mendorong hanya ke satu larik dalam tanpa memengaruhi semua elemen larik. Ini karena array dua dimensi dimaksudkan untuk memiliki jumlah elemen yang sama di setiap array elemen
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _1Alih-alih memengaruhi satu elemen larik, Anda dapat menambahkan elemen ke semua larik elemen sekaligus
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _2Ini akan kembali
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _3Anda juga dapat menggunakan metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; _1 untuk menyisipkan elemen di awal dan metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 2 untuk menyisipkan di tengah array
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _4Di atas, let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 3 adalah posisi di mana Anda ingin array baru dimasukkan (ingat itu diindeks nol), let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 4 digunakan sehingga tidak menghapus elemen, dan kemudian parameter ketiga adalah array yang akan ditambahkan
Ini adalah output
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _5Cara menghapus elemen dari array 2D
Anda juga dapat menghapus elemen dari awal dan akhir array 2D dengan metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 5 dan let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 6. Ini mirip dengan cara kerja metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 7 dan let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 1, tetapi kali ini Anda tidak menambahkan parameter apa pun ke metode tersebut
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _6Ketika Anda let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; _9 atau let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 0 array, Anda akan melihat bahwa elemen array pertama dan terakhir telah dihapus
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _7Anda juga dapat menghapus elemen dari setiap elemen array
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _8Ini akan kembali
let twoDimensionalArr = [ [ a1, a2, a3, ..., an ], [ b1, b2, b3, ..., bn ], [ c1, c2, c3, ..., cn ], . . . [ z1, z2, z3, ..., zn ] ]; _9Anda juga dapat menggunakan metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; _6 untuk menghapus elemen di awal dan metode let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; 2 untuk menghapus elemen array dari posisi tertentu
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 0Pada kode di atas, Anda menghapus satu item dari indeks posisi arrayName\[rowIndex\][columnIndex] 3 dari array 2D let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 6. Ini akan menghasilkan
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 1Catatan. Semua metode larik JavaScript akan beroperasi pada larik 2D karena merupakan larik dari larik. Anda hanya perlu berhati-hati saat menyesuaikan elemen individual dalam larik elemen. Anda membuat perubahan serupa pada semua elemen dengan mengulang, meskipun larik 2D dalam JavaScript tidak ketat
Cara Membuat Array 2D di JavaScript
Ada dua opsi untuk membuat array multidimensi. Anda dapat membuat array secara manual dengan notasi literal array, yang menggunakan tanda kurung siku arrayName\[rowIndex\][columnIndex] 5 untuk membungkus daftar elemen yang dipisahkan dengan koma. Anda juga dapat menggunakan loop bersarang
Cara membuat array 2D menggunakan literal array
Ini seperti contoh yang telah kami pertimbangkan menggunakan sintaks berikut
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 2Misalnya, di bawah ini adalah larik 2D yang menyimpan informasi tentang nilai dan nilai matematika setiap siswa
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; _3Cara membuat array 2D menggunakan loop for bersarang
Ada banyak pendekatan untuk melakukan ini. Tetapi umumnya, Anda membuat loop bersarang di mana loop pertama akan melewati baris sementara loop kedua akan melewati elemen dalam larik dalam (kolom)
Dalam kode di atas, pertama-tama Anda akan melewati baris. Untuk setiap baris, itu akan membuat array kosong di dalam array asli yang dideklarasikan dan disimpan dalam variabel arrayName\[rowIndex\][columnIndex] 6. Anda kemudian akan membuat loop bersarang untuk mengulang melalui kolom dan menambahkan elemen individual
Dalam contoh ini, indeks untuk arrayName\[rowIndex\][columnIndex] _7 digunakan dan akan ditampilkan
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 5Anda dapat memutuskan untuk membuat angka, menginisialisasi dengan 0, dan kemudian meningkatkannya saat Anda mengulang sehingga Anda tidak memiliki angka yang sama untuk semua elemen
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 6Ini akan kembali
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; 7Anda juga dapat memutuskan untuk membuat fungsi yang menerima nilai ini sebagai argumen
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; _8Cara Memperbarui Elemen dalam Array 2D di JavaScript
Ini sangat mirip dengan cara Anda melakukannya dengan larik satu dimensi, di mana Anda dapat memperbarui nilai larik dengan menggunakan indeks untuk menetapkan nilai lain
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 0, 0] ]; _9Anda dapat menggunakan pendekatan yang sama untuk mengubah seluruh baris atau bahkan elemen individual
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 0Ini akan menggantikan nilai indeks let MathScore = [ ['John Doe', 20, 60, 'A'], ['Jane Doe', 10, 52, 'B'], ['Petr Chess', 5, 24, 'F'], ['Ling Jess', 28, 43, 'A'], ['Ben Liard', 16, 51, 'B'] ]; _3 dengan array baru ini
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 1Anda dapat memperbarui setiap elemen dengan melacak indeks baris dan kolom serta memperbarui nilainya
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; 2Ini akan mengubah nama pada baris dengan indeks arrayName\[rowIndex\][columnIndex] 3 menjadi "Jack Jim", seperti yang terlihat di bawah
let myArray = [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9] ]; _3Membungkus
Pada artikel ini, Anda telah mempelajari apa itu array dua dimensi dan bagaimana cara kerjanya dalam JavaScript
Penting untuk diketahui bahwa larik 2D dalam JavaScript masih bekerja sangat mirip dengan larik satu dimensi, jadi jangan ragu untuk mengubah dan memanipulasinya dengan metode JavaScript
Bersenang-senang membuat kode
Anda dapat mengakses lebih dari 150 artikel saya dengan mengunjungi situs web saya. Anda juga dapat menggunakan kolom pencarian untuk melihat apakah saya telah menulis artikel tertentu
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Pengembang Frontend & Penulis Teknis
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai