Cara menggunakan penggunaan foreach di javascript

Example 1

Calls a function for each element in fruits:

const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

Try it Yourself »


Definition and Usage

The forEach() method calls a function for each element in an array.

The forEach() method is not executed for empty elements.


Syntax

array.forEach(function(currentValue, index, arr), thisValue)

Parameters

function() Required.
A function to run for each array element.
currentValue Required.
The value of the current element.
index Optional.
The index of the current element.
arr Optional.
The array of the current element.
thisValue Optional. Default undefined.
A value passed to the function as its this value.

Return Value



More Examples

Compute the sum:

let sum = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);

function myFunction(item) {
  sum += item;
}

Try it Yourself »

Multiply each element:

const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)

function myFunction(item, index, arr) {
  arr[index] = item * 10;
}

Try it Yourself »

Browser Support

forEach() is an ECMAScript5 (ES5) feature.

ES5 (JavaScript 2009) fully supported in all browsers:

Chrome IE Edge Firefox Safari Opera
Yes 9-11 Yes Yes Yes Yes

Sudah ada beberapa contoh langsung, tetapi saya perhatikan dari bagaimana Anda mengatakan pertanyaan Anda bahwa Anda mungkin berasal dari latar belakang PHP, dan Anda mengharapkan JavaScript bekerja dengan cara yang sama - tidak. A PHP array sangat berbeda dari JavaScript Array.

Dalam PHP, array asosiatif dapat melakukan sebagian besar dari apa yang dapat diindeks array array numerik (fungsi array_* berfungsi, Anda dapat count() itu, dll.) Anda cukup membuat array dan mulai menetapkan string-indexes alih-alih numerik.

Dalam JavaScript, semuanya adalah objek (kecuali untuk primitif: string, numerik, boolean), dan array adalah implementasi tertentu yang memungkinkan Anda memiliki indeks numerik. Apa pun yang didorong ke array akan mempengaruhi length-nya, dan dapat diulang menggunakan metode Array (map, forEach, reduce, filter, find, dll.) Namun, karena semuanya adalah objek, Anda selalu bebas untuk hanya menetapkan properti, karena itu adalah sesuatu yang Anda lakukan pada objek apa pun. Notasi braket persegi hanyalah cara lain untuk mengakses properti, jadi dalam kasus Anda:

array['Main'] = 'Main Page';

sebenarnya setara dengan:

array.Main = 'Main Page';

Dari uraian Anda, dugaan saya adalah Anda menginginkan 'array asosiatif', tetapi untuk JavaScript, ini adalah kasus sederhana menggunakan objek sebagai hashmap. Selain itu, saya tahu ini adalah contoh, tetapi hindari nama yang tidak bermakna yang hanya menjelaskan tipe variabel (mis. array), dan nama berdasarkan apa yang seharusnya dikandungnya (mis. pages). Objek sederhana tidak memiliki banyak cara langsung yang baik untuk beralih, jadi sering kali kita akan berubah menjadi array terlebih dahulu menggunakan metode Object (Object.keys dalam kasus ini - ada juga entries dan values yang ditambahkan ke beberapa browser sekarang) yang dapat kita loop .

// assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));

Dalam bahasa pemrograman JavaScript dikenal dengan metode forEach. Metode forEach juga digunakan untuk mengulang array, tetapi menggunakan fungsi yang berbeda dari “for loop” klasik. Pada seri tutorial JavaScript kali ini, Codekey akan mengajak kamu untuk belajar JavaScrpit terkait dengan penggunaan metode foreach JavaScript.

Tutorial ini akan membahas apa itu metode foreach JavaScript dan bagaimana pengaplikasiannya. Jika Kamu tertarik dengan topik pembahasan kali ini, pastikan kamu membaca penjelasannya sampai akhir!

Foreach JavaScript

ForEach yang ada di JavaScript menerapkan fungsi yang ditentukan untuk setiap item dalam array tertentu secara individual. Metode ini hanya menjalankan fungsi yang ditentukan dalam item array yang memiliki nilai. Nilai pengembalian dari JavaScript forEach tidak ditentukan. Loop ini pertamA kali diperkenalkan dengan ECMAScript 3.

Metode forEach melewati fungsi callback untuk setiap elemen array bersama dengan parameter berikut:

  • Current Value (wajib) – Nilai elemen array saat ini
  • Indeks (opsional) – Nomor indeks elemen saat ini
  • Array (opsional) – Objek array tempat elemen saat ini berada

Kegunaan forEach

Loop forEach() pada JavaScript digunakan ketika kamu ingin menimbulkan metode tertentu ke seluruh array. Namun perlu Kamu ingat bahwa array bukanlah bagian dari elemen. Jika Kamu perlu memanggil fungsi ke semua item array, sebaiknya Kamu menerapkan array JavaScript forEach loop.

Contoh kode forEach() yang kami miliki di sini menggunakan nomor yang Kamu masukkan untuk mengalikan setiap nomor yang berisi array, dan menampilkan hasilnya dalam demo nama container:

<p>Masukkan nilai: <input type="number" id="perkalian" value="5"></p> 

<button onclick="numbers.forEach(myFunction)">Perkalian</button> 

<p>Hasil perkalian: <span id="hasil"></span></p>

var numbers = [7, 21, 5, 19];
function myFunction(item, index, arr) {
    arr[index] = item * document.getElementById("perkalian").value;
    document.getElementById("hasil").innerHTML = numbers;
}

Saat ini, contoh di bawah ini akan mengambil setiap nilai di dalam array dan menampilkan jumlah dari nilai tersebut:

<button onclick="numbers.forEach(myFunction)">Tambah</button>

<p>Hasil: <span id="hasil"></span></p>


var sum = 0;
var numbers = [99, 66, 33, 111];
function myFunction(item) {
    sum += item;
    hasil.innerHTML = sum;
}

Tidak ada batasan dalam hal fungsi yang dapat Kamu panggil pada elemen dengan JavaScript forEach(). Kamu dapat memodifikasi item menggunakan fungsi JavaScript apa pun.

Metode yang ditentukan tidak akan diterapkan ke elemen yang tidak memiliki nilai. Misalnya, metode JavaScript forEach tidak akan memengaruhi array jarang di mana sebagian besar item tidak memiliki nilai.

Contoh berikut menunjukkan penggunaan JavaScript forEach():

Penjelasan tentang Syntax forEach

Perhatikan cuplikan kode di bawah ini. Di dalamnya, kamu dapat melihat sintaks yang benar digunakan atau menulis JavaScript forEach():

array.forEach(function(current_Value, index, array), this_Value)

JavaScript forEach dapat memiliki dua parameter utama: fungsi yang akan diterapkan ke item array, dan this_Value. Fungsi yang ditentukan juga memiliki argumennya:

  • current_value menunjukkan nilai item yang sedang diproses.
  • Parameter kedua mengungkapkan indeks dari elemen yang sama.
  • Argumen terakhir disebut array, dan menunjukkan array yang akan dipengaruhi oleh fungsi.

Catatan: hanya current_value yang diperlukan untuk masuk – parameter lainnya bersifat opsional.

Parameter Deskripsi
function(current_value, index, array) Diperlukan. Sebuah fungsi masing-masing elemen array akan dijalankan
this_Value Opsional. Nilai untuk menjadi nilai ini.

Jika dilewati, ia akan diteruskan sebagai tidak terdefinisi (undefined).

Demikianlah penjelasan tentang forEach JavaScript yang digunakan untuk mengulang array. Namun perlu kamu catat bahwa ia berbeda dengan foorLoop. Jika kamu tertarik belajar JavaScript kunjungi seri tutorial JavaScript di Codekey.

Situs Codekey menyediakan berbagai tutorial untuk kamu belajar berbagai bahasa pemrograman, tidak terbatas pada JavaScript saja. Kami memberikan materi, pembahasan, tutorial, tips, serta trik untuk kamu belajar bahasa pemrograman dan menjadi programmer handal. Pastikan kamu mendapatkan update terbaru dari situs Codekey.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

forEach di JavaScript untuk apa?

forEach() merupakan method array di JavaScript yang mengeksekusi fungsi yang disediakan sekali untuk setiap elemen array. Method ini mengembalikan nilai undefined dan tidak mengubah array asli, tapi jika dibutuhkan kita bisa memodifikasi array sumber di dalam badan fungsi.

Apa yang dimaksud dengan perulangan atau looping JavaScript?

Loop atau perulangan pada javascript digunakan untuk melakukan tugas berulang berdasarkan suatu kondisi. Loop atau perulang pada umumnya tersedia pada semua bahasa pemrograman meskipun implementasi dan sintaks berbeda-beda.

forEach di JavaScript untuk apa?

forEach() merupakan method array di JavaScript yang mengeksekusi fungsi yang disediakan sekali untuk setiap elemen array. Method ini mengembalikan nilai undefined dan tidak mengubah array asli, tapi jika dibutuhkan kita bisa memodifikasi array sumber di dalam badan fungsi.

Apa yang dimaksud dengan perulangan atau looping JavaScript?

Loop atau perulangan pada javascript digunakan untuk melakukan tugas berulang berdasarkan suatu kondisi. Loop atau perulang pada umumnya tersedia pada semua bahasa pemrograman meskipun implementasi dan sintaks berbeda-beda.