Section Artikel
- 1 Mengubah Array menjadi String
- 2 Popping dan Pushing
- 3 Popping
- 4 Pushing
- 5 Elemen Shift
- 6 Mengubah Elemen
- 7 Menghapus Elemen
- 8 Menyambung Array
- 9 Menggunakan splice() untuk Menghapus Elemen
- 10 Menggabungkan Array
- 11 Memotong Array
- 12 Automatic toString()
- 13 Menemukan Nilai Max dan Min dalam Array
- 14 Sorting Array
Mengubah Array menjadi String
Method toString() pada JavaScript digunakan untuk mengkonversi array menjadi string dari nilai array yang dipisahkan koma.
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Array Method</h2> <h2>toString()</h2> <p> Method toString() mengembalikan array sebagai string yang dipisahkan koma: </p> <p id="demo"></p> <script> var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"]; document.getElementById("demo").innerHTML = fruits.toString(); </script> </body> </html>
Method join() juga dapat digunakan untuk menggabungkan semua elemen array menjadi string.
Method ini bekerja seperti method toString(), tetapi sebagai tambahan kita dapat menentukan pemisah.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>join()</h2>
<p>Method join() digunakan untuk menggabungkan array menjadi string.</p>
<p> Dalam contoh ini menggunakan "*" sebagai pemisah antar elemen: </p>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
Popping dan Pushing
Sangat mudah untuk menghapus elemen dan menambahkan elemen baru saat menggunakan array.
Menghapus dan menambah elemen inilah yang dimaksud dengan popping dan pushing.
Memunculkan item keluar dari array, atau mendorong item ke dalam array.
Popping
Method pop() digunakan untuk menghapus elemen terakhir dari array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Method</h2>
<h2>pop()</h2>
<p> Method pop() menghapus elemen terakhir dari array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Method pop() mengembalikan nilai yang akan dimunculkan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>pop()</h2>
<p> Method pop() menghapus elemen terakhir dari array.</p>
<p> Nilai kembalian method pop() adalah item yang dihapus. </p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.pop();
document.getElementById("demo3").innerHTML = fruits;
</script>
</body>
</html>
Pushing
Method push() digunakan untuk menambahkan elemen baru ke array (di akhir).
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>push()</h2>
<p>Method push() digunakan untuk menambahkan elemen baru ke array</p>
<button onclick="myFunction()">Cobalah</button>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Method push() mengembalikan nilai panjang array baru.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>push()</h2>
<p>Method push() mengembalikan nilai panjang array baru.</p>
<button onclick="myFunction()">Cobalah</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
document.getElementById("demo2").innerHTML = fruits.push("Kiwi");
document.getElementById("demo1").innerHTML = fruits;
}
</script>
</body>
</html>
Elemen Shift
Shift sama dengan popping yaitu bekerja dengan cara menghapus elemen pertama, bukan yang terakhir.
Method shift() akan menghapus elemen array pertama dan “menggeser” semua elemen lainnya ke indeks yang lebih rendah.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>shift()</h2>
<p> Method shift() menghapus elemen pertama dari sebuah array (dan "menggeser" semua elemen lainnya ke kiri): </p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Method shift() mengembalikan string yang telah “bergeser”.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>shift()</h2>
<p>Method shift() mengembalikan string yang telah "bergeser".</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.shift();
document.getElementById("demo3").innerHTML = fruits;
</script>
</body>
</html>
Kebalikan dari method shift() adalah method unshift(), fungsinya menambahkan elemen baru pada array (di awal), dan menghapus elemen lama.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>unshift()</h2>
<p>method unshift() fungsinya menambahkan elemen baru pada array.</p>
<button onclick="myFunction()">cobalah</button>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Method unshift() juga mengembalikan panjang nilai array baru.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>unshift()</h2>
<p>Method unshift() juga mengembalikan panjang nilai array baru.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo3").innerHTML = fruits;
</script>
<p> <b> Catatan: </b> Metode unshift () tidak berfungsi dengan baik pada Internet Explorer 8 dan versi sebelumnya, nilai akan disisipkan, tetapi nilai yang dikembalikan tidak akan <em> ditentukan </em>. </p>
</body>
</html>
Mengubah Elemen
Elemen array diakses menggunakan nomor indeksnya.
Indeks array dimulai dengan 0. [0] adalah elemen array pertama, [1] adalah yang kedua, [2] adalah yang ketiga dan seterusnya.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Method</h2>
<p>Elemen array diakses menggunakan nomor indeksnya.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Properti length menyediakan cara mudah untuk menambahkan elemen baru ke array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p> Properti length menyediakan cara mudah untuk menambahkan elemen baru pada array tanpa menggunakan metode push ()
</p>
<button onclick="myFunction()">Cobalah</button>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Kiwi";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Menghapus Elemen
Karena array JavaScript adalah objek, elemen dapat dihapus dengan menggunakan operator JavaScript delete.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p> Menghapus elemen meninggalkan lubang yang tidak ditentukan dalam array. </p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>
</body>
</html>
Menggunakan delete dapat meninggalkan lubang yang tidak ditentukan dalam array. Gunakan pop() atau shift() sebagai gantinya.
Menyambung Array
Method splice() bisa digunakan untuk menambahkan item baru ke array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p> Metode splice () menambahkan elemen baru pada array. </p>
<button onclick="myFunction()">cobalah</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
}
</script>
</body>
</html>
Parameter pertama (2) mendefinisikan posisi di mana elemen baru harus ditambahkan (disambung).
Parameter kedua (0) menentukan berapa banyak elemen yang harus dihapus.
Parameter lainnya (“Lemon”, “Kiwi”) menentukan elemen baru yang akan ditambahkan.
Method splice () mengembalikan array dengan item yang dihapus.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p> Metode splice() menambahkan elemen baru pada array, dan mengembalikan array dengan elemen yang dihapus (jika ada). </p>
<button onclick="myFunction()">cobalah</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
function myFunction() {
var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed;
}
</script>
</body>
</html>
Menggunakan splice() untuk Menghapus Elemen
Dengan pengaturan parameter yang benar, kita dapat menggunakan splice() untuk menghapus elemen tanpa meninggalkan “lubang” di array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p> Metode splice () bisa digunakan untuk menghapus elemen array. </p>
<button onclick="myFunction()">Cobalah</button>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Parameter pertama (0) mendefinisikan posisi di mana elemen baru harus ditambahkan (disambung).
Parameter kedua (1) menentukan berapa banyak elemen yang harus dihapus.
Parameter lainnya dihilangkan. Tidak ada elemen baru yang akan ditambahkan.
Menggabungkan Array
Method concat() digunakan untuk membuat array baru dengan menggabungkan array yang ada.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>Method concat() digunakan untuk membuat array baru dengan menggabungkan array.</p>
<p id="demo"></p>
<script>
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Method concat() tidak mengubah array yang ada tetapi selalu mengembalikan array baru.
Method concat() juga dapat menerima beberapa argumen array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>Method concat() digunakan untuk membuat array baru dengan menggabungkan array.</p>
<p id="demo"></p>
<script>
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Method concat () juga dapat mengambil string sebagai argumen.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p> Metode concat() juga bisa menggabungkan nilai string menjadi array</p>
<p id="demo"></p>
<script>
var arr1 = ["Emil", "Tobias", "Linus"];
var myChildren = arr1.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Memotong Array
Method slice() digunakan untuk memotong bagian dari array kemudian menjadi array baru.
Contoh dibawah ini menunjukan cara memotong bagian dari array yang dimulai dari elemen array1 (“Jeruk”).
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>This example slices out a part of an array starting from array element 1 ("Orange"):</p>
<p id="demo"></p>
<script>
var fruits = ["Pisang", "Jeruk", "Apel", "Mangga"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Method slice() akan membuat array baru. Method ini tidak menghapus elemen apa pun dari array sumber.
Contoh ini memotong bagian dari array yang dimulai dari elemen array 3 (“Apple”).
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>Contoh ini memotong bagian dari array yang dimulai dari elemen array 3 ("Apple").)</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Method slice() bisa mengambil dua argumen seperti slice (1, 3).
Method kemudian memilih elemen dari argumen awal, dan hingga (tetapi tidak termasuk) argumen akhir.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>Ketika metode slice() diberikan dua argumen, method akan memilih elemen array dari argumen awal, dan hingga (tetapi tidak termasuk) argumen akhir:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Jika argumen akhir dihilangkan, seperti pada contoh pertama, method slice() memotong sisa array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p> Contoh ini memotong bagian dari array yang dimulai dari elemen array 2 ("Lemon"): </p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Automatic toString()
JavaScript secara otomatis mengonversi array menjadi string yang dipisahkan koma saat nilai primitif yang diharapkan.
Hal seperti ini selalu terjadi ketika kita mencoba mengeluarkan sebuah array.
Kedua contoh ini akan memberikan hasil yang sama.
Contoh 1:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>toString()</h2>
<p> Metode toString() mengembalikan array sebagai string yang dipisahkan koma: </p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
Contoh 2:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p> JavaScript secara otomatis mengonversi array menjadi string yang dipisahkan koma saat nilai sederhana diharapkan: </p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Semua objek JavaScript memiliki method toString().
Menemukan Nilai Max dan Min dalam Array
Tidak ada fungsi bawaan untuk menemukan nilai tertinggi (Max) atau terendah (Min) dalam array JavaScript.
Sorting Array
Sorting array akan dibahas pada bab lain.
