In den ungefähr fünf Jahren, in denen ich als Webentwickler gearbeitet habe, verwende ich diese drei Array-Funktionen am häufigsten, um Daten zu verwalten und mit Arrays zu interagieren. Für das React-Projekt selbst sind diese drei Array-Funktionen sehr leistungsfähig für die Datenverarbeitung. Hier finden Sie mehr oder weniger effektive Verwendungsmöglichkeiten dieser drei Funktionen.

Karte für renderList

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    

{users.map((user, index) => (
• {user}
))}

Filter für bedingtes Rendering

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    

{filteredUsers.map((user, index) => (
• {user}
))}

Reduzieren, um Daten zu berechnen

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 1200 }
];

function TotalPrice() {
  const totalPrice = products.reduce((acc, product) => acc   product.price, 0);

  return (
    

      
Total Price: ${totalPrice}
    
  );
}

export default TotalPrice;

Kombinieren von Map, Filter und Reduce in React

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500, discount: 200 },
  { id: 2, name: 'Phone', price: 800, discount: 50 },
  { id: 3, name: 'Tablet', price: 1200, discount: 100 }
];

function DiscountedProducts() {
  const discountedProducts = products.filter(product => product.discount > 0);
  const totalDiscount = discountedProducts.reduce((acc, product) => acc   product.discount, 0);

  return (
    

      
Total Discount: ${totalDiscount}
      

        {discountedProducts.map(product => (
          
{product.name} - Discount: ${product.discount}
        ))}
      
    
  );
}

export default DiscountedProducts;

Abschluss

In React-Anwendungen sind Zuordnen, Filtern und Reduzieren nicht nur Werkzeuge zum Bearbeiten von Daten, sondern auch Möglichkeiten, die Benutzeroberfläche dynamisch und effizient zu rendern. Durch das Verständnis und die Beherrschung dieser Funktionen können wir Anwendungen erstellen, die modularer, leichter lesbar und skalierbarer sind. Erkunden und implementieren Sie diese Funktionen also weiterhin in unseren React-Projekten, um maximale Ergebnisse zu erzielen