Method iterasi array beroperasi pada setiap item array.
Section Artikel
Array.forEach()
Method forEach() memanggil fungsi callback sekali untuk setiap elemen array.
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Array.forEach()</h2> <p> Memanggil fungsi satu kali untuk setiap elemen array. </p> <p id="demo"></p> <script> var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) { txt = txt + value + "<br>"; } </script> </body> </html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Contoh di atas hanya menggunakan parameter nilai. Contoh diatas dapat ditulis ulang.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p> Memanggil fungsi satu kali untuk setiap elemen array. </p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>
Array.forEach() didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama:
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.map()
Method map() akan membuat array baru dengan menjalankan fungsi pada setiap elemen array.
Method map() tidak akan menjalankan fungsi untuk elemen array tanpa nilai.
Method map() tidak akan mengubah array asli.
Contoh ini mengalikan setiap nilai array dengan 2.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p> Membuat array baru dengan menjalankan fungsi pada setiap elemen array. </p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Jika fungsi callback hanya menggunakan parameter nilai, maka parameter indeks dan array dapat dihilangkan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p> Membuat array baru dengan menjalankan fungsi pada setiap elemen array. </p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value) {
return value * 2;
}
</script>
</body>
</html>
Array.map() didukung di semua browser kecuali Internet Explorer 8 atau yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.filter()
Method filter() digunakan untuk membuat array baru dengan elemen array yang lolos pengujian.
Contoh ini membuat array baru dari elemen dengan nilai lebih besar dari 18.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.filter()</h2>
<p> Membuat array baru dengan semua elemen array yang lolos pengujian. </p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Dalam contoh di atas, fungsi callback tidak menggunakan parameter indeks dan array, sehingga dapat dihilangkan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.filter()</h2>
<p> Membuat array baru dengan semua elemen array yang lolos pengujian. </p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
Array.filter () didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.reduce()
Method reduce() digunakan untuk menjalankan fungsi pada setiap elemen array untuk menghasilkan (menguranginya menjadi) satu nilai.
Method reduce() bekerja dari kiri ke kanan dalam array. Lihat juga reduceRight().
Method reduce() tidak akan mengurangi array asli.
Contoh ini menunjukan cara mencari jumlah semua angka dalam array.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Contoh ini menunjukan cara mencari jumlah semua angka dalam array.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 4 argumen:
- Total (nilai awal / nilai yang dikembalikan sebelumnya)
- Nilai item
- Indeks item
- Array itu sendiri
Contoh di atas tidak menggunakan parameter index dan array. Contoh tersebut dapat ditulis ulang menjadi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Contoh ini menunjukan cara mencari jumlah semua angka dalam array.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
Method reduce() dapat menerima nilai awal.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>Contoh ini menunjukan cara mencari jumlah semua angka dalam array.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
Array.reduce() didukung di semua browser kecuali Internet Explorer 8 atau yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Yes | 9.0 | Yes | Yes | Yes |
Array.reduceRight()
Method reduceRight() berfungsi untuk menjalankan fungsi pada setiap elemen array untuk menghasilkan (menguranginya menjadi) satu nilai.
reduceRight() bekerja dari kanan ke kiri dalam array. Lihat juga pada pembahasan reduce().
Method reduceRight() tidak akan mengurangi array asli.
Contoh ini menunjukan caramenemukan jumlah semua angka dalam array.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>Contoh ini menunjukan caramenemukan jumlah semua angka dalam array.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 4 argumen:
- Total (nilai awal / nilai yang dikembalikan sebelumnya)
- Nilai item
- Indeks item
- Array itu sendiri
Contoh di atas tidak menggunakan parameter index dan array. Contoh tersebut dapat ditulis ulang menjadi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>Contoh ini menunjukan caramenemukan jumlah semua angka dalam array.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
Array.reduceRight() didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.every()
Method every() berfungsi untuk memeriksa apakah semua nilai array lulus pengujian.
Contoh ini menunjukan bahwa method memeriksa apakah semua nilai array lebih besar dari 18.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>Method every() berfungsi untuk memeriksa apakah semua nilai array lulus pengujian.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Ketika fungsi callback hanya menggunakan parameter pertama (nilai), parameter lainnya dapat dihilangkan.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>Method every() berfungsi untuk memeriksa apakah semua nilai array lulus pengujian.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
Array.every() didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.some()
Method some() berfungsi untuk memeriksa apakah beberapa nilai array lulus ujian.
Contoh ini menunjukan cara memeriksa apakah beberapa nilai array lebih besar dari 18.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.some()</h2>
<p>Method some() berfungsi untuk memeriksa apakah beberapa nilai array lulus ujian.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Array.some() didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Array.indexOf()
Method indexOf() digunakan untuk mencari array untuk nilai elemen dan mengembalikan posisinya.
Catatan: Item pertama memiliki posisi 0, item kedua memiliki posisi 1, dan seterusnya.
Contoh:
Cari array untuk item “Apple”:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.indexOf()</h2>
<p id="demo"></p>
<script>
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = "Apple is found in position " + a;
</script>
<p>The indexOf() does not work in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Array.indexOf() didukung di semua browser kecuali Internet Explorer 8 atau versi yang lebih lama.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Ya | 9.0 | Ya | Ya | Ya |
Syntax
<em>array</em>.lastIndexOf(<em>item</em>,<em> start</em>)
| item | Yg dibutuhkan. Item yang akan dicari |
| start | Opsional. Di mana memulai pencarian. Nilai negatif akan mulai dari posisi tertentu dihitung dari akhir, dan mencari ke awal |
Array.indexOf() mengembalikan -1 jika item tidak ditemukan.
Jika item tersebut ada lebih dari satu, maka akan mengembalikan pada posisi pertama.
Array.find()
Method find() mengembalikan nilai elemen array pertama yang lolos fungsi pengujian.
Contoh ini menunjukan cara mencari (mengembalikan nilai) elemen pertama yang lebih besar dari 18.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.find()</h2>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 is " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Array.find() tidak didukung di browser lama. Versi browser pertama dengan dukungan penuh tercantum di bawah ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 45 | 12 | 25 | 8 | 32 |
Array.findIndex()
Method findIndex() mengembalikan indeks elemen array pertama yang lolos fungsi uji.
Contoh ini mencari indeks elemen pertama yang lebih besar dari 18.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.findIndex()</h2>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
document.getElementById("demo").innerHTML = "First number over 18 has index " + first;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
Perhatikan bahwa fungsi tersebut membutuhkan 3 argumen:
- Nilai item
- Indeks item
- Array itu sendiri
Array.findIndex() tidak didukung di browser lama. Versi browser pertama dengan dukungan penuh tercantum di bawah ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 45 | 12 | 25 | 8 | 32 |
