suchen

Heim >Web-Frontend >js-Tutorial >Wie verwende ich sowohl Map als auch Filter für ein Array mit JavaScript?

Wie verwende ich sowohl Map als auch Filter für ein Array mit JavaScript?

PHPz
PHPznach vorne
2023-08-28 20:29:05914Durchsuche

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.

如何使用 JavaScript 在数组上同时使用映射和过滤器？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.
})

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
})

In der obigen Syntax müssen wir die Array-Elemente von der Rückruffunktion der Methode map() zurückgeben.

Parameter

Element
    – Beim Durchlaufen eines Arrays mit der filter()-Methode ist es das aktuelle Element des Arrays.

  • index
    • – Dies ist der Index des Elements im Array.

  • self
    • – Es ist ein Array für sich.

  • Verwenden Sie sowohl die Methoden array.map() als auch array.filter()

    • In diesem Abschnitt lernen wir, die Methoden filter() und map() zusammen auf einem einzigen Array zu verwenden.

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
})

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>

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>

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!

JavaScript Array Filter 回调函数 map 对象
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erstellen Sie ein mobilfreundliches WordPress-Hamburger-MenüNächster Artikel：Erstellen Sie ein mobilfreundliches WordPress-Hamburger-Menü

In Verbindung stehende Artikel

Mehr sehen