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.
})
Nach dem Login kopieren
In der obigen Syntax übergeben wir die Callback-Funktion als Parameter der filter()-Methode.
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
})
Nach dem Login kopieren
In der obigen Syntax müssen wir die Array-Elemente von der Rückruffunktion der Methode map() zurückgeben.
Parameter
Element
Grammatik
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
})
Nach dem Login kopieren
In der obigen Syntax haben wir zuerst die filter()-Methode für das Array und dann die map()-Methode verwendet.
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.
Danach verwenden wir die Methode map() und geben den Logarithmus jedes gefilterten Elements zurück. Der Benutzer kann sehen, dass das logarithmic_values-Array nur sechs Werte enthält, da wir alle negativen Werte im gefilterten Array entfernt haben.
<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>
Nach dem Login kopieren
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.
Danach filtern wir mit der Methode filter() alle Mitarbeiter mit mehr als 3 Jahren Berufserfahrung. Als nächstes erhöhen wir mit der Methode map() die Gehälter aller Mitarbeiter um 50 % und speichern die neuen Gehälter im Array new_salaries.
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>
Nach dem Login kopieren
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!
