0Pricing
JavaScript Academy · درس

تحويل البيانات بطريقة تصريحية

حوّلوا البيانات باستخدام map وfilter وreduce.

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

التصريحي مقابل الإجرائي

توضح الشيفرة الإجرائية كيفية التنفيذ (الحلقات والعدادات والتغيير)، بينما توضح الشيفرة التصريحية ما المطلوب. وتتيح لك أساليب المصفوفات مثل map وfilter وreduce وصف التحويلات دون كتابة حلقات يدويًا.

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

map: تحويل كل عنصر

تُرجع map مصفوفة جديدة بالطول نفسه، بعد تحويل كل عنصر بواسطة دالتك. وتبقى المصفوفة الأصلية دون تغيير.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: الاحتفاظ ببعض العناصر

تُرجع filter مصفوفة جديدة تحتوي فقط على العناصر التي تُرجع دالتك الشرطية لها قيمة truthy.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: طي العناصر في قيمة واحدة

تختزل reduce المصفوفة إلى قيمة واحدة من خلال التجميع. مرّر دالة اختزال وقيمة ابتدائية.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

تسلسل العمليات

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

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

خط معالجة واقعي

اجمع بين filter وmap وreduce للإجابة عن سؤال يتعلق بمجموعة بيانات في تعبير واحد.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

التحويل إلى أشكال جديدة

يمكن لـ map إعادة تشكيل الكائنات، وليس الأرقام فقط. حوّل كل سجل إلى الحقول التي تحتاج إليها.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

يمكن لـ reduce بناء أي شيء

لا يقتصر reduce على عمليات الجمع. إذ يمكنه بناء الكائنات وتجميع البيانات، بل وإعادة تنفيذ map وfilter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

الترتيب مهم

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

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

لا تغيير في أي موضع

لا تغيّر هذه الأساليب المصفوفة المصدر مطلقًا. وهذا يجعل خطوط المعالجة آمنة وقابلة للتنبؤ، ويناسب الأسلوب الوظيفي تمامًا.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

استخدام flatMap مع النتائج المتداخلة

عندما ينتج map مصفوفات، ينفذ flatMap التحويل والتسطيح لمستوى واحد في خطوة واحدة.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

تحقق سريع

التحويلات التصريحية.

مراجعة

يصف التحويل التصريحي ما المطلوب، لا كيفية تنفيذه. يحوّل map العناصر، وتختار filter بعضها، ويطوي reduce العناصر في قيمة واحدة؛ ويمكنك تسلسلها في خطوط معالجة واضحة. لا يغيّر أي منها المصدر، وتكون التصفية المبكرة أكثر كفاءة، ويمكن لـ reduce بناء أي بنية. استخدم flatMap عندما ينتج map مصفوفات.

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

هل درس «تحويل البيانات بطريقة تصريحية» مجاني؟

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

ماذا ستتعلم في «تحويل البيانات بطريقة تصريحية»؟

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

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

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

كم من الوقت يستغرق درس «تحويل البيانات بطريقة تصريحية»؟

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

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

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

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

  1. الدوال النقية والآثار الجانبية
  2. تحويل البيانات بطريقة تصريحية
  3. تجنّب التعديل المباشر
  4. النمط الخالي من الوسائط
← العودة إلى JavaScript Academy