Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan kedua-dua peta dan penapis pada tatasusunan menggunakan JavaScript?

Bagaimana untuk menggunakan kedua-dua peta dan penapis pada tatasusunan menggunakan JavaScript?

PHPzke hadapan: 2023-08-28 20:29:05829semak imbas

Kaedah

如何使用 JavaScript 在数组上同时使用映射和过滤器？

filter() digunakan untuk menapis nilai dalam tatasusunan dan kaedah map() digunakan untuk memetakan nilai baharu ke tatasusunan lain berdasarkan setiap nilai tatasusunan lama.

Kadangkala, kita perlu menggunakan kaedah filter() dan map() pada masa yang sama. Sebagai contoh, kami ingin menapis semua nombor positif daripada tatasusunan dan memetakan nilai logaritmanya kepada tatasusunan baharu

Sebelum memulakan tutorial ini, mari kita lihat pengenalan kaedah penapis() dan peta(). Dalam tutorial ini, kita akan belajar cara menggunakan kedua-dua kaedah pemetaan dan penapisan pada tatasusunan menggunakan JavaScript.

Sintaks kaedah array.filter()

Pengguna boleh menggunakan kaedah JavaScript filter() mengikut sintaks berikut.

array.filter((element, index, self) => {
   // write a condition to filter values.
   
   // based on the filtering condition, return a boolean value to include in the filtered array.
})

Dalam sintaks di atas, kami menghantar fungsi panggil balik sebagai parameter kaedah penapis().

array.map() kaedah sintaks

Pengguna boleh menggunakan kaedah JavaScript map() mengikut sintaks berikut.

array.map((element, index, self) => {
   // perform some action on the element of the array
   
   // return element for a new array
})

Dalam sintaks di atas, kita perlu mengembalikan elemen tatasusunan daripada fungsi panggil balik kaedah map().

Parameter

elemen – Apabila melelaran pada tatasusunan menggunakan kaedah penapis(), ia ialah elemen semasa tatasusunan.
indeks – Ia ialah indeks unsur dalam tatasusunan.
diri - Ia adalah susunan itu sendiri.

Gunakan kedua-dua kaedah array.map() dan array.filter()

Bahagian ini akan mengajar kami menggunakan kaedah penapis() dan peta() bersama-sama pada tatasusunan tunggal.

Tatabahasa

Pengguna boleh menggunakan kaedah map() dan penapis() bersama-sama mengikut sintaks berikut.

let logarithmic_values = array.filter((element, index, self) => {
   
   // filtering condition
})
.map((element, index, self) => {
   // return value from map method
})

Dalam sintaks di atas, kami mula-mula menggunakan kaedah penapis() pada tatasusunan dan kemudian menggunakan kaedah map().

Contoh 1

Dalam contoh di bawah, tatasusunan mengandungi nombor positif dan negatif. Kami mengambil tatasusunan sebagai rujukan dan memanggil kaedah penapis() pada tatasusunan untuk menapis semua nilai positif dalam tatasusunan. Dalam fungsi panggil balik kaedah penapis(), kami mengembalikan benar jika nombor lebih besar daripada sifar, sebaliknya ralat.

Selepas itu, kami menggunakan kaedah map() dan mengembalikan logaritma setiap elemen yang ditapis. Pengguna boleh melihat bahawa tatasusunan nilai_logaritma mengandungi enam nilai sahaja kerana kami telah mengalih keluar semua nilai negatif dalam tatasusunan yang ditapis.

<html>
<body>
   <h3>Using the <i> array.map() and array.filter() </i> methods together in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = [10, 20, -2, -4, 32, -6, -7, -8, 10, 11, -20]
      let logarithmic_values = array.filter((element, index, self) => {
         if (element > 0) {
            return true;
         }
         return false;
      })
      .map((element, index, self) => {
         return Math.log(element);
      })
      output.innerHTML += "The original array values are " + array + "<br/>";
      output.innerHTML += "The logarithmic_values are " + logarithmic_values + "<br/>";
   </script>
</body>
</html>

Contoh 2

Dalam contoh di bawah, kami mencipta tatasusunan objek, setiap objek dalam tatasusunan mengandungi ID pekerja, tahun perkhidmatan dan gaji.

Selepas itu, kami menggunakan kaedah penapis() untuk menapis semua pekerja yang berpengalaman lebih daripada 3 tahun. Seterusnya, kami menggunakan kaedah map() untuk menaikkan gaji semua pekerja sebanyak 50% dan menyimpan gaji baharu dalam tatasusunan new_salaries.

Dalam output, pengguna pada mulanya boleh melihat jumlah gaji selepas kenaikan.

<html>
<body>
   <h2>Using the <i> array.map() and array.filter() </i> methods together in JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // Creating the array of objects
      let array = [{ emp_id: "01", experience: 3, salary: 50000 },
      { emp_id: "02", experience: 7, salary: 30000 },
      { emp_id: "03", experience: 6, salary: 20000 },
      { emp_id: "04", experience: 5, salary: 10000 },
      { emp_id: "05", experience: 3, salary: 5000 },
      { emp_id: "06", experience: 2, salary: 40000 },
      { emp_id: "07", experience: 1.5, salary: 60000 },
      { emp_id: "08", experience: 2, salary: 70000 }]
      
      // use the forEach() loop method to find the total initial salary
      let total_initial_salary = 0;
      array.forEach((employee) => {
         total_initial_salary += employee.salary;
      })
      
      // filter all employees with experience greater than 3 years.
      let new_salaries = array.filter((element) => {
         if (element.experience > 3) {
            return true;
         }
         return false;
      })
      .map((element) => {
         
         // increase the salary of all employees by 50%, who have experienced greater than 3 years
         return element.salary * 0.5;
      })
      
      // find the sum of new salaries
      let new_salary = total_initial_salary;
      let total_increased_salary = new_salaries.forEach((salary) => {
         new_salary += salary
      })
      output.innerHTML += "The initial total salaries of all employees is " + total_initial_salary + "<br/>";
      output.innerHTML += "The total salaries of all employees after increasing salaries for some employees is " + new_salary + "<br/>";
   </script>
</body>
</html>

Pengguna mempelajari cara menggunakan kaedah filter() dan map() bersama-sama melalui pelbagai contoh. Dalam contoh pertama, kami menggunakan kaedah penapis() dan peta() dengan tatasusunan nombor. Dalam contoh kedua, kami juga mempelajari cara menggunakan kaedah penapis() dan peta() dengan tatasusunan objek.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kedua-dua peta dan penapis pada tatasusunan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript Array Filter 回调函数 map 对象

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Buat menu hamburger WordPress yang mesra mudah alihArtikel seterusnya：Buat menu hamburger WordPress yang mesra mudah alih

Artikel berkaitan

Lihat lagi