اذهب إلى المحتوى

نشرح في هذه المقالة التوابع الجديدة للتعامل مع المجموعة set في لغة جافا سكريبت JavaScript، والتي أصبحت متوفرة ومتاحة على جميع متصفحات الويب منذ النسخة Firefox 127. فمن المفيد الاطلاع على توابع المجموعات لاسيما للمطورين الجدد الذين يتعاملون مع بنية المجموعة set لأول مرة ويتطلعون لاستخدامها في بناء تطبيقاتهم، حيث سنسلط الضوء على المزايا الرئيسية لهذه التوابع ونوضح سبب الحاجة لاستخدامها في بناء التطبيقات من خلال الأمثلة العملية.

ما هي التوابع الجديدة للتعامل مع المجموعات

نستعرض فيما يلي أهم التوابع الجديدة للمجموعة set المدعومة من أغلب المتصفحات الحديثة وهي كالتالي:

  • التابع ()intersection : يعيد مجموعة جديدة تحتوي على العناصر الموجودة في كلا المجموعتين أي تقاطع المجموعتين
  • التابع ()union: يعيد مجموعة جديدة تضم جميع العناصر الموجودة في المجموعتين أي اجتماع المجموعتين
  • التابع ()difference: يعيد مجموعة جديدة تحتوي على العناصر غير المتشابهة في المجموعتين أي فرق المجموعتين
  • التابع ()symetricDifference: يعيد مجموعة جديدة تحتوي على العناصر الموجودة في أحد المجموعتين وغير الموجودة في المجموعة الثانية
  • التابع ()isSubsetOf: يعيد قيمة منطقية تشير فيما إذا كانت جميع عناصر المجموعة الأولى مجموعة فرعية محتواة ضمن المجموعة الثانية أي هل المجموعة الأولى مجموعة جزئية من المجموعة الثانية.
  • التابع ()isSupersetOf: يعيد قيمة منطقية تشير إلى ما إذا كانت المجموعة الأولى مجموعة شاملة للمجموعة الثانية، أي هل جميع العناصر في المجموعة الثانية موجودة في المجموعة الأولى.
  • التابع ()isDisjointFrom: يرجع قيمة منطقية تشير فيما إذا كانت المجموعتان مستقلتين أي المجموعة الأولى لا تحتوي على عناصر مشتركة مع المجموعة الثانية.

سنوضح لك في الفقرات القادمة معنى واستخدام هذه التوابع باستخدام الأمثلة العملية.

ما هي المجموعة في لغة جافا سكريبت JavaScript

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

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

set1

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

const dogs = new Set();
const yoshi = { name: "Yoshi", personality: "Friendly" };
dogs.add(yoshi);

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

اجتماع مجموعتين

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

لدينا في المثال التالي مجموعتان ونريد الحصول على مجموعة ثالثة تضم جميع عناصر المجموعتين ولكن بدون تكرار، سنكتب كالتالي:

// إنشاء اجتماع المجموعتين
const unionSet = set1.union(set2);

// عرض العناصر في الاجتماع
unionSet.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = item;
  unionList.appendChild(li);
});

set2

نستخدم عناصر المحتوى النصي textContent في لغة HTML لكل عنصر من عناصر القائمة، مما يشكل لدينا مجموعات من السلاسل النصية sets of strings. وتكمن أهمية استخدام المجموعات عندما نخزن أنواع متعددة من البيانات داخلها، مثل المصفوفات والكائنات.

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

تقاطع مجموعتين

يمكننا باستخدام تقاطع المجموعات معرفة العناصر الموجودة في كلتا المجموعتين وتحديد العناصر المشتركة بينهما. في المثال التالي، سنستخدم تقاطع المجموعات لاستخراج العناصر المشتركة بين المجموعتين وعرضها بدلاً من دمجها في مجموعة ثالثة كما فعلنا باستخدام التابع union في الفقرة السابقة:

// إنشاء مجموعة تقاطع المجموعتين
const intersectionSet = set1.intersection(set2);

// المرور على العناصر في القوائم وتحديد العناصر المشتركة
allListItems.forEach((item) => {
  if (intersectionSet.has(item.textContent)) {
    item.className = "match";
  }
});

set3

الفرق التناظري لمجموعة

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

const setNotBoth = set1.symmetricDifference(set2);

allListItems.forEach((item) => {
  if (setNotBoth.has(item.textContent)) {
    item.className = "match";
  }
});

set4

استخدامنا في هذا الكود التابع symmetricDifference لحساب الاختلاف التناظري بين المجموعتين set1 و set2. والنتيجة مجموعة تحتوي على العناصر التي توجد في إحدى المجموعتين ولكن ليس في كليهما. قد يكون ما سبق جديد وغير مفهوم بالنسبة لك، لفهم الموضوع قارن الفرق التناظري للمجوعات مع تقاطع المجموعات، وعندها ستجد فالتابع symmetricDifference يعمل بطريقة منطقية معاكسة للتابع intersection، وهنا سينتهي هذا الالتباس بالنسبة لك.

فرق المجموعات

يمكننا استخدام تابع الفرق للتحقق من العناصر الموجودة في إحدى المجموعات وغير الموجودة في المجموعة الأخرى. في المثال التالي، سننشئ مجموعتين بدلاً من مجموعة واحدة. بداية ننشئ المجموعة الأولى set1only باستخدام التابع set1.difference(set2)‎، مما يعطينا العناصر الموجودة في المجموعة الأولى فقط.

بعد ذلك، سنقوم بنفس العملية مع المجموعة الثانية set2only لمعرفة العناصر الموجودة في المجموعة الثانية وغير الموجودة في المجموعة الأولى. ويمكننا باستخدام التابع difference لكل مجموعة تحديد العناصر التي لا تظهر في المجموعة الأخرى.

const set1only = set1.difference(set2);
const set2only = set2.difference(set1);

allListItems.forEach((item) => {
  if (set1only.has(item.textContent)) {
    item.className = "setOneMatch";
  } else if (set2only.has(item.textContent)) {
    item.className = "setTwoMatch";
  }
});

set5

المجموعة الفرعية والمجموعة الشاملة والمجموعة المنفصلة

آخر التوابع والمفاهيم الجديدة الخاصة بالمجموعات التي سنتظرق إليها في هذا المقال هي توابع المجموعة الفرعية Subset والمجموعة الشاملة Superset والمجموعة المنفصلة Disjoint from Set.

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

سنتعرف في البداية على التابعين subset و superset، حيث نحصل على النتيجة من خلال بعض عبارات التحقق المنطقية. على سبيل المثال، يمكننا التحقق مما إذا كانت المجموعة الأولى مجموعة جزئية من المجموعة الثانية، ومن ثم إضافة نص منطقي True أو False للعنصر بناءً على نتيجة التحقق.

if (set1.isSubsetOf(set2)) {
  oneSubTwo.textContent += " [TRUE]";
} else {
  oneSubTwo.textContent += " [FALSE]";
}

set6

يمكننا باستخدام التابع isSubsetOf()‎ التحقق مما إذا كانت جميع عناصر المجموعة الأولى تظهر بالكامل في المجموعة الثانية. بينما يمكننا باستخدام التابع isSupersetOf()‎ التحقق من العكس أي معرفة إذا كانت المجموعة الأولى تحتوي على جميع عناصر المجموعة الثانية بالإضافة إلى عناصر أخرى.

أما التابع الأخير الذي سنتعرف عليه فهو isDisjointFrom()‎، حيث يمكننا من خلاله معرفة ما إذا كانت المجموعتان لا تملكان أي عناصر مشتركة بينهما.

لاحظ في المثال أدناه أن المجموعتين الأولى والثانية لا تحققان شروط التابع isDisjointFrom()‎، لأن هناك عنصر مشترك بينهما وهو العنصر C، أما المجموعة الثالثة فهي منفصلة عن المجموعتين الأولى والثانية لأنها لا تحتوي على أي عناصر مشتركة مع أي منهما.

set7

الخلاصة

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

ترجمة وبتصرف للمقال New JavaScript Set methods لكاتبه Brian Smith.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...