Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?
Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?
- 王林ke hadapan
- 2023-08-25 17:33:061380semak imbas
Dalam JavaScript, kita boleh menggunakan kaedah reduce() untuk menggunakan fungsi pada penumpuk dan setiap kekunci objek (dari kiri ke kanan). Kaedah
reduce() mengambil tatasusunan dan menerima fungsi panggil balik sebagai hujah pertamanya. Lihat array reduce() untuk butiran lanjut. Mari kita lihat sintaks kaedah ini.
Syntax
array array.reduce(callback[, initialValue]);
Parameter
Panggil Balik - Fungsi dilaksanakan pada setiap nilai dalam tatasusunan.
initialValue - Objek yang digunakan sebagai hujah pertama untuk seruan pertama panggilan balik.
Panggil balik Fungsi diluluskan empat parameter
Parameter pertama ialah penumpuk, iaitu hasil daripada panggilan fungsi panggil balik sebelumnya, atau nilai awal jika ini adalah panggilan pertama.
Parameter kedua ialah kunci yang sedang diproses.
Parameter ketiga ialah kunci yang sedang diproses. Nilai yang sedang diproses.
Parameter keempat ialah indeks sedang diproses.
Kemudian kaedah reduce() mengembalikan penumpuk.
Menggunakan kaedah reduce()
Mari kita lihat contoh mudah untuk memahami cara kaedah reduce() berfungsi.
Kami mempunyai tatasusunan objek, setiap objek mempunyai nama dan harta nilai. Kami menggunakan kaedah reduce() untuk menjumlahkan nilai.
Kita boleh melakukan ini dengan menghantar fungsi panggil balik yang menerima penumpuk (hasil daripada panggilan fungsi panggil balik sebelumnya) dan nilai semasa untuk dikendalikan. Fungsi panggil balik kemudian mengembalikan penumpuk ditambah nilai semasa.
Contoh
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
document.getElementById("result").innerHTML = sum;
</script>
</body>
</html>Dalam program di atas, kita mempunyai tatasusunan objek, setiap objek mempunyai nama dan atribut nilai. Kami menggunakan kaedah reduce() untuk menjumlahkan nilai.
Kami meneruskan fungsi panggil balik ((acc, cur) => acc + cur.value), yang menerima acc accumulator sedang diproses (hasil daripada panggilan fungsi panggil balik sebelumnya) dan cur nilai semasa. Fungsi panggil balik kemudian mengembalikan penumpuk ditambah nilai semasa.
Kemudian, kaedah reduce() mengembalikan penumpuk, iaitu jumlah semua nilai.
Kelebihan menggunakan reduce()Satu kelebihan menggunakan reduce() ialah ia boleh menjadikan kod anda lebih mudah dibaca.
Sebagai contoh, jika kita ingin menjumlahkan nilai dalam tatasusunan di atas, kita juga boleh menggunakan gelung for.
Contoh
<html>
<head>
<title>Using for loop</title>
</head>
<body>
<h2> Using for loop to sum the values of objects in an array</h2>
<div id="result"></div>
<script>
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i].value;
}
document.getElementById("result").innerHTML = sum
</script>
</body>
</html>Kaedah reduce() di atas dan gelung for kedua-duanya mencapai hasil yang sama. Namun, kaedah reduce() lebih ringkas dan mudah dibaca.
Satu lagi kelebihan menggunakan reduce() ialah ia boleh digunakan untuk memproses data secara selari.
Sebagai contoh, jika kita mempunyai tatasusunan objek, setiap objek mempunyai nama dan atribut nilai, dan kita mahu memprosesnya secara selari Untuk setiap objek, kita boleh menggunakan kaedah peta ().
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });Walau bagaimanapun, jika kita ingin memproses data secara berurutan, kita boleh menggunakan kaedah reduce().
let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);Kesimpulan
Dalam tutorial ini, kami melihat cara menggunakan fungsi pada penumpuk dan setiap kunci objek menggunakan kaedah reduce(). Kami juga melihat beberapa kelebihan menggunakan reduce() berbanding kaedah lain.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!