Bagaimana untuk menggunakan kaedah Array.prototype.reduce() dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk menggunakan kaedah Array.prototype.reduce() dalam JavaScript?

PHPz

Lepaskan： 2023-09-11 22:53:02

ke hadapan

1496 orang telah melayarinya

Kaedah

如何在 JavaScript 中使用 Array.prototype.reduce() 方法？

array.reduce() digunakan untuk mengurangkan keseluruhan tatasusunan kepada satu nilai dengan melaksanakan beberapa tugasan pada setiap elemen. Sebagai contoh, apabila kita ingin mendapatkan jumlah semua elemen tatasusunan, kita perlu mengurangkan keseluruhan tatasusunan kepada satu nilai, iaitu jumlah akhir semua elemen tatasusunan.

Kaedah

array.reduce() menjejaki nilai hasil elemen sebelumnya. Selepas itu, ia melaksanakan tugas pada elemen seterusnya menggunakan nilai terhasil yang kami dapat daripada elemen sebelumnya. Elemen pertama tatasusunan mengambil kira nilai awal yang diluluskan sebagai hujah kepada nilai hasil. Dalam tutorial ini, kita akan belajar menggunakan kaedah Array.prototype.reduce() JavaScript.

Tatabahasa

Pengguna boleh menggunakan kaedah array.reduce() mengikut sintaks berikut.

array.reduce((previousResult, element, index, array) => {
   // perform a task
}, startingValue);

Salin selepas log masuk

Kami melepasi fungsi anak panah sebagai nilai parameter pertama dalam sintaks di atas. Fungsi anak panah digunakan sebagai fungsi panggil balik dalam talian.

array.reduce(callback, startingValue);

Salin selepas log masuk

Dalam sintaks di atas, panggil balik ialah fungsi panggil balik.

Parameter

previousResult - Ini ialah nilai hasil yang kami dapat daripada melakukan beberapa operasi pada elemen tatasusunan sebelumnya.
elemen - Ia ialah elemen pada kedudukan indeks dalam tatasusunan.
Indeks - Ia ialah indeks semasa elemen tatasusunan.
Array - Ia sendiri adalah tatasusunan yang digunakan dalam fungsi panggil balik.
startingValue - Ini ialah nilai awal untuk memulakan pembolehubah Result sebelumnya.
panggilan balik - Ini ialah fungsi yang memanggil setiap elemen dalam tatasusunan.

Nilai pulangan

Kaedah

array.reduce() mengembalikan nilai hasil akhir selepas melaksanakan tugas tertentu pada semua elemen tatasusunan.

Contoh 1

Dalam contoh di bawah, kami telah mencipta tatasusunan nombor dan memulakannya dengan beberapa nilai berangka. Selepas itu, kami menggunakan kaedah array.reduce() untuk mencari hasil darab semua nombor.

Selain itu, kami juga menggunakan fungsi panggil balik sebaris sebagai parameter pertama kaedah reduce(). Dalam fungsi panggil balik, kami mendarabkan nilai elemen pembolehubah previousResult dan mengembalikannya.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to find a factorial of a number in JavaScript.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let factorial = numbers.reduce((previousResult, element) => {
         return previousResult = element * previousResult;
      }, 1)
      output.innerHTML += "The factorial of 10 is " + factorial;
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami menggunakan kaedah array.reduce() untuk menggabungkan semua rentetan tatasusunan menjadi satu rentetan. Kami menggunakan operator "+" untuk menggabungkan elemen rentetan semasa dengan hasil sebelumnya ke dalam fungsi panggil balik.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to merge all strings of the array in JavaScript.</h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');  
      let strings = ["Welcome", "To", "the", "TutorialsPoint", "blogs", "!"];
         
      function callback(previousResult, stringElement) {   
         return previousResult + " " + stringElement;  
      }  
      let message = strings.reduce(callback, "");
         
      output.innerHTML += "The Message created from the array of the string values is " + message;
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami mencari jumlah nilai indeks unsur. Pengguna boleh melihat cara kami menggunakan pengindeksan tatasusunan dalam fungsi panggil balik.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numersArray = [20, 30, 40, 50, 60, 70, 80, 90, 100];

      let finalValue = numersArray.reduce((previousResult, element, index, array) => {
         return previousResult + element - index;
      }, 0);
      output.innerHTML += "The resultant value after performing operations on array element is " + finalValue;
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 4

Dalam contoh ini, kami mencipta pelbagai objek. Setiap objek tatasusunan ini mengandungi emp_id, emp_name dan gaji. Kami menggunakan kaedah reduce() untuk mendapatkan jumlah gaji semua pekerja. Dalam fungsi panggil balik kaedah reduce(), kami mengakses setiap objek dan menambah nilai atribut gajinya kepada jumlah pembolehubah. Akhirnya, jumlah gaji semua pekerja dikembalikan.

<html>
<body>
   <h2>Using the <i> array.reduce() </i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arrayOfObjects = [
         { emp_id: "10", emp_name: "Shubham", salary: 10000 },
         { emp_id: "20", emp_name: "Akshay", salary: 20000 },
         { emp_id: "dfd0", emp_name: "John", salary: 20000 },
         { emp_id: "10", emp_name: "Mukund", salary: 50000 },
         { emp_id: "10", emp_name: "salman", salary: 5000 }
      ]
      let totalSalary = arrayOfObjects.reduce((total, object, index, array) => {
         return total + object.salary;
      }, 0);
      output.innerHTML += "The total salary of all employees is " + totalSalary;
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna belajar menggunakan kaedah Array.prototype.reduce() untuk menukar keseluruhan tatasusunan kepada nilai tatasusunan tunggal. Kami telah melihat kes penggunaan kaedah reduce() melalui contoh yang berbeza. Selain itu, kita boleh menggunakan kaedah array.reduce() untuk mencari nilai minimum dan maksimum daripada tatasusunan.

Apabila kita memanggil kaedah array.reduce() dengan tatasusunan kosong sebagai rujukan, ia mengembalikan ralat.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kaedah Array.prototype.reduce() dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!