في ما يقرب من 5 سنوات من العمل كمطور ويب، فإن وظائف المصفوفات الثلاثة هذه هي الوظائف التي أستخدمها غالبًا لإدارة البيانات والتفاعل مع المصفوفات. بالنسبة لمشروع React نفسه، تعد وظائف المصفوفة الثلاث هذه قوية جدًا لمعالجة البيانات، وإليك استخدامات أكثر أو أقل فعالية لهذه الوظائف الثلاث.

خريطة لقائمة render

import React from 'react';

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

function UserList() {
  return (
    

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

مرشحات للعرض الشرطي

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

تقليل لحساب البيانات

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;

الجمع بين الخريطة والتصفية والتقليل في 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;

خاتمة

في تطبيقات React، لا تعد الخرائط والتصفية والتصغير أدوات لمعالجة البيانات فحسب، بل تعد أيضًا طرقًا لعرض واجهة المستخدم بشكل ديناميكي وفعال. ومن خلال فهم هذه الوظائف وإتقانها، يمكننا إنشاء تطبيقات أكثر نمطية وسهلة القراءة وقابلة للتطوير. لذا، استمر في استكشاف هذه الوظائف وتنفيذها في مشاريع React الخاصة بنا للحصول على أقصى قدر من النتائج