Die Methode „filter()“ wird verwendet, um die Werte im Array zu filtern, und die Methode „map()“ wird verwendet, um neue Werte basierend auf jedem Wert des alten Arrays einem anderen Array zuzuordnen.
Manchmal müssen wir die Methoden filter() und map() gleichzeitig verwenden. Wir möchten zum Beispiel alle positiven Zahlen aus einem Array herausfiltern und ihre logarithmischen Werte einem neuen Array zuordnen
Bevor wir mit diesem Tutorial beginnen, werfen wir einen Blick auf die Einführung der Methoden filter() und map(). In diesem Tutorial erfahren Sie, wie Sie mithilfe von JavaScript sowohl Zuordnungs- als auch Filtermethoden für Arrays verwenden.
Syntax der array.filter()-Methode
Benutzer können die JavaScript-Methode filter() gemäß der folgenden Syntax verwenden.
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. })
Array.map()-Methodensyntax
Benutzer können die JavaScript-Methode „map()“ gemäß der folgenden Syntax verwenden.
array.map((element, index, self) => { // perform some action on the element of the array // return element for a new array })
Parameter
Element
index
self
Verwenden Sie sowohl die Methoden array.map() als auch array.filter()
Benutzer können die Methoden map() und filter() zusammen gemäß der folgenden Syntax verwenden.
let logarithmic_values = array.filter((element, index, self) => { // filtering condition }) .map((element, index, self) => { // return value from map method })
Beispiel 1
Im folgenden Beispiel enthält das Array positive und negative Zahlen. Wir nehmen das Array als Referenz und rufen die Methode filter() für das Array auf, um alle positiven Werte im Array zu filtern. In der Callback-Funktion der filter()-Methode geben wir true zurück, wenn die Zahl größer als Null ist; andernfalls ein Fehler.
<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>
Beispiel 2
Im folgenden Beispiel erstellen wir ein Array von Objekten. Jedes Objekt im Array enthält die Mitarbeiter-ID, die Dienstjahre und das Gehalt.
In der Ausgabe kann der Nutzer zunächst das Gesamtgehalt nach der Erhöhung beobachten.
<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>
Benutzer haben anhand verschiedener Beispiele gelernt, wie die Methoden filter() und map() zusammen verwendet werden. Im ersten Beispiel verwenden wir die Methoden filter() und map() mit einem Zahlenarray. Im zweiten Beispiel haben wir auch gelernt, wie man die Methoden filter() und map() mit einem Array von Objekten verwendet.
Das obige ist der detaillierte Inhalt vonWie verwende ich sowohl Map als auch Filter für ein Array mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!