شرح دالة map

مرحباً،

دالة map تُستخدم عندما تريد تمر على جميع عناصر المصفوفة وترجع مصفوفة جديدة فيها نفس عدد العناصر، لكن كل عنصر يكون بعد تعديل أو إجراء عملية معينة.

مثال:

const names = ["Ali", "Sara", "Omar"]; 
const greetings = names.map(name => `Hello ${name}`); // النتيجة: ["Hello Ali", "Hello Sara", "Hello Omar"]

في هذا المثال قمنا باستخدام المصفوفة القديمة "names" لإنشاء مصفوفة جديدة "greetings" وإجراء عملية معينة في نفس الوقت.

مر على كل العناصر وإجراء عملية معينة دون التأثير على المصفوفة الأساسية

بالتوفيق

نستخدم دالة map عندما نريد تحويل كل عنصر في المصفوفة إلى شيء جديد أو قيمة جديدة مع الاحتفاظ بعدد العناصر.

فإذا كنت تريد مصفوفة جديدة بنفس الطول ولكن كل عنصر فيها تم تعديله قم بإستخدم map.

فمثلا إليك الأمثلة التالية :

تحويل الأرقام:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

لاحظ استخدمنا map هنا لأننا نريد تحويل جميع الأرقام في المصفوفة إلى ضعف الرقم نفسه ولكن نحتفظ بعدد العناصر الأساسية.

مثلا لو أردنا إستخراج خاصية من الكائنات :

const users = [
  { name: "Mohamed", age: 20 },
  { name: "Zen", age: 20 }
];

const names = users.map(user => user.name);
console.log(names); // ["Mohamed", "Zen"]

هنا إستخدمنا map لأننا نريد مصفوفة جديدة تحتوي فقط على أسماء المستخدمين.

تنسيق البيانات وعرضها بطريقة معينة :

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 }
];

const formatted = products.map(p => `${p.id}: ${p.price} USD`);
console.log(formatted); // ["1: 100 USD", "2: 200 USD"]

هنا قمنا بتحويل كل كائن إلى نص.

اريد أمثلة أيضاً لهذه الدالة

في مشاريع حقيقية وليس فقط الأمثلة التوضيحية 

لكي افهمها بشكل افضل

بتاريخ 2 دقائق مضت قال Hxfhf Ucicic:

اريد أمثلة أيضاً لهذه الدالة

في مشاريع حقيقية وليس فقط الأمثلة التوضيحية 

لكي افهمها بشكل افضل

ينبغي عليك معرفة أولا كيف تعمل وما فائدتها وإذا ما واجهتك مشكلة تستطيع map حلها يمكنك إستخدامها.

فإذا ما واجهتك أى مشكلة أو تريد تحويل عناصر مصفوفة ما إلى شكل مختلف تماما  فهنا map هي المناسبة لك .

تخيل مثلا لدينا منتجات ونريد عرضها في مكون React كيف سنفعل ذلك ؟ يمكننا إستخدام حلقة for ولكن هنا map أفضل وأسرع هكذا مثلا :

const products = [
  { id: 1, name: "iPhone", price: 999 },
  { id: 2, name: "Samsung", price: 899 }
];

function ProductList({ products }) {
  return (
    <div className="grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <h3>{product.name}</h3>
          <p>{product.price} USD</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
}

لاحظ كيف إستخدمنا map وقمنا بتحويل كائن المنتج إلى عناصر HTML بها بيانات هذا الكائن .

مثلا لدينا تعليقات للمستخدمين نريد عرضها :

const comments = [
  { id: 1, user: "Mohamed", message: "good Product" },
  { id: 2, user: "Ahmed", message: "Good Price" }
];

function CommentSection({ comments }) {
  return (
    <div>
      <h4>}comments:</h4>
      {comments.map(comment => (
        <div key={comment.id}>
          <strong>{comment.user}</strong>: {comment.message}
        </div>
      ))}
    </div>
  );
}

لاحظ هنا أيضا إستخدمنا map وقمنا بتحويل كائن التعليق إلى عناصر يتم عرض التعليقات بها.

وهكذا في مشروع React يمكنك إستخدام map لعرض المصفوفة التي لديك والعناصر التي بها إلى عناصر HTML