0Pricing
JavaScript Academy · درس

map وfilter — الأساسيات

حوّلوا البيانات واختاروا منها باستخدام map وfilter؛ واربطوهما معًا وتجنبوا التعديل لكتابة شيفرة أكثر أمانًا

map وfilter — الأساسيات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 2. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 2 دروس في المجموع.

مقدمة إلى map وfilter

الهدف: حوّلوا العناصر باستخدام map واختاروا العناصر باستخدام filter.

  • map: تحويل
  • filter: اختيار
  • تسلسل map ← filter
  • من دون تعديل
map وfilter — الأساسيات — رسم توضيحي 1

أساسيات map

يطبّق map دالة على كل عنصر ويعيد مصفوفة جديدة بالطول نفسه.

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map وfilter — الأساسيات — رسم توضيحي 2

أساسيات filter

يعيد filter العناصر التي تعيد دالة الاستدعاء اللاحق لها true فقط، وقد يتغير الطول.

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map وfilter — الأساسيات — رسم توضيحي 3

مثال على التسلسل

ادمجوا الخطوات: استخدموا map للتحويل، ثم filter للاختيار.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map وfilter — الأساسيات — رسم توضيحي 4

توضيح عدم التعديل

عدم القابلية للتعديل: يعيد map/filter مصفوفتين جديدتين، ولا تتغير المصفوفة الأصلية.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map وfilter — الأساسيات — رسم توضيحي 5

نصائح لمصفوفات واضحة

نصائح:

  • سمّوا دوال الاستدعاء اللاحق الصغيرة بأسماء واضحة (n, item).
  • اجعلوا السلاسل قصيرة (خطوتان أو ثلاث كحد أقصى).
  • فضّلوا دوال الاستدعاء اللاحق النقية (من دون آثار جانبية).
map وfilter — الأساسيات — رسم توضيحي 6

اختبار map مقابل filter

تحقق سريع: تحويل كل عنصر.

map وfilter — الأساسيات — رسم توضيحي 7

مراجعة

مراجعة: استخدم map لتحويل القيم، وfilter لاختيار بعضها، وسلسلهما معًا من دون تعديل المصفوفة الأصلية.

map وfilter — الأساسيات — رسم توضيحي 8

الأسئلة الشائعة

هل درس «map وfilter — الأساسيات» مجاني؟

نعم — نص درس «map وfilter — الأساسيات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 2 دروس في المجموع.

ماذا ستتعلم في «map وfilter — الأساسيات»؟

حوّلوا البيانات واختاروا منها باستخدام map وfilter؛ واربطوهما معًا وتجنبوا التعديل لكتابة شيفرة أكثر أمانًا تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 2.

كم من الوقت يستغرق درس «map وfilter — الأساسيات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. map وfilter — الأساسيات
  2. reduce وsome/every وfind — أنماط بسيطة
← العودة إلى JavaScript Academy