دليلك الشامل: أربع طرق للبحث في المصفوفات باستخدام JavaScript بكفاءة
تُعد المصفوفات (Arrays) من هياكل البيانات الأساسية في JavaScript، والقدرة على البحث فيها بكفاءة أمر حيوي لأي مطور. سواء كنت تسعى لاستخلاص عناصر معينة، التحقق من وجود قيمة ما، أو تحديد موقعها، توفر JavaScript مجموعة غنية من الدوال المدمجة التي تُسهّل هذه المهام. يهدف هذا المقال إلى استكشاف أربع من أكثر هذه الطرق شيوعًا وفعالية للبحث في المصفوفات، مع التركيز على حالات الاستخدام المثلى لكل منها.
سنغوص في تفاصيل كل دالة، موضحين كيفية عملها، بنيتها، ومتى يجب عليك اختيارها لضمان كتابة كود نظيف، فعال، وقابل للصيانة. الطرق التي سنتناولها هي:
Array.filter()Array.find()Array.includes()Array.indexOf()
لنبدأ رحلتنا في عالم البحث المتقدم في المصفوفات!
البحث عن عناصر متعددة: دالة Array.filter()
تُستخدم دالة Array.filter() لاستخراج جميع العناصر من مصفوفة تُحقق شرطًا معينًا. إنها مثالية عندما تحتاج إلى مجموعة فرعية جديدة من المصفوفة الأصلية بناءً على معايير محددة. على سبيل المثال، إذا أردنا الحصول على جميع الأرقام التي تزيد عن 10 من مصفوفة أرقام، يمكننا تحقيق ذلك كالتالي:
const array = [ 10 , 11 , 3 , 20 , 5 ];
const greaterThanTen = array.filter( element => element > 10 );
console .log(greaterThanTen) // الناتج: [11, 20]
بنية دالة Array.filter()
تتبع بنية استخدام دالة Array.filter() النمط التالي:
let newArray = array.filter(callback);
newArray: هي المصفوفة الجديدة التي يتم إرجاعها وتحتوي على العناصر التي استوفت الشرط.array: هي المصفوفة الأصلية التي يتم استدعاء دالةfilterعليها.callback: هي دالة رد الاتصال (callback function) التي يتم تطبيقها على كل عنصر من عناصر المصفوفة. يجب أن تُرجع هذه الدالة قيمة منطقية (trueأوfalse) لتحديد ما إذا كان العنصر يجب أن يُضمن في المصفوفة الجديدة أم لا.
إذا لم يستوفِ أي عنصر في المصفوفة الشرط المحدد، فستُرجع الدالة مصفوفة فارغة. تُعد filter() أداة قوية لبناء مصفوفات جديدة مخصصة دون تعديل المصفوفة الأصلية.
العثور على العنصر الأول: دالة Array.find()
في بعض الأحيان، لا نحتاج إلى جميع العناصر التي تستوفي شرطًا معينًا، بل نكتفي بالعثور على العنصر الأول الذي يُطابق هذا الشرط. هنا يأتي دور دالة Array.find(). على غرار دالة filter()، تستقبل find() دالة رد اتصال (callback) كمعامل، وتُرجع أول عنصر يُحقق شرط دالة رد الاتصال.
لنطبق دالة find() على نفس المصفوفة من المثال السابق:
const array = [ 10 , 11 , 3 , 20 , 5 ];
const greaterThanTen = array.find( element => element > 10 );
console .log(greaterThanTen) // الناتج: 11
بنية دالة Array.find()
بنية دالة Array.find() هي كالتالي:
let element = array.find(callback);
دالة رد الاتصال (callback) هي الدالة التي يتم تنفيذها على كل قيمة في المصفوفة وتستقبل ثلاثة وسائط:
element: العنصر الحالي الذي يتم تكراره (إلزامي).index: فهرس/موضع العنصر الحالي (اختياري).array: المصفوفة التي تم استدعاء دالةfindعليها (اختياري).
من المهم ملاحظة أنه إذا لم يستوفِ أي عنصر في المصفوفة الشرط، فستُرجع الدالة undefined بدلاً من مصفوفة فارغة، وهو فرق جوهري عن دالة filter().
التحقق من وجود قيمة: دالة Array.includes()
ماذا لو أردت ببساطة التحقق مما إذا كان عنصر معين موجودًا ضمن مصفوفة أم لا، دون الاهتمام بموقعه أو استخلاص عناصر أخرى؟ تُحدد دالة Array.includes() ما إذا كانت المصفوفة تتضمن قيمة معينة أم لا، وتُرجع true أو false حسب الاقتضاء. إنها مثالية لعمليات التحقق البسيطة.
في مثالنا السابق، إذا أردنا التحقق مما إذا كان الرقم 20 موجودًا في المصفوفة، يمكننا القيام بذلك كالتالي:
const array = [ 10 , 11 , 3 , 20 , 5 ];
const includesTwenty = array.includes( 20 );
console .log(includesTwenty) // الناتج: true
ستلاحظ اختلافًا رئيسيًا بين هذه الدالة والدوال الأخرى التي ناقشناها: هذه الدالة تقبل قيمة مباشرة كمعامل بدلاً من دالة رد اتصال (callback).
بنية دالة Array.includes()
إليك بنية دالة includes():
const includesValue = array.includes(valueToFind, fromIndex)
valueToFind: القيمة التي تبحث عنها في المصفوفة (إلزامي).fromIndex: الفهرس أو الموضع في المصفوفة الذي تريد البدء منه بالبحث عن العنصر (اختياري). القيمة الافتراضية هي 0.
لفهم مفهوم fromIndex بشكل أفضل، لنعد إلى مثالنا. إذا أردنا التحقق مما إذا كانت المصفوفة تحتوي على الرقم 10 في مواضع أخرى غير العنصر الأول (أي بدءًا من الفهرس 1)، يمكننا القيام بذلك:
const array = [ 10 , 11 , 3 , 20 , 5 ];
const includesTenTwice = array.includes( 10 , 1 );
console .log(includesTenTwice) // الناتج: false
هذا يُظهر أن الرقم 10 موجود فقط في الفهرس 0، وليس بعده.
تحديد موقع العنصر: دالة Array.indexOf()
تُرجع دالة Array.indexOf() الفهرس الأول الذي يمكن العثور فيه على عنصر معين داخل مصفوفة. إذا لم يكن العنصر موجودًا في المصفوفة، فإنها تُرجع القيمة -1. تُعد هذه الدالة مفيدة عندما تحتاج إلى معرفة الموضع الدقيق لقيمة ما.
لنعد إلى مثالنا. لنجد فهرس الرقم 3 في المصفوفة:
const array = [ 10 , 11 , 3 , 20 , 5 ];
const indexOfThree = array.indexOf( 3 );
console .log(indexOfThree) // الناتج: 2
بنية دالة Array.indexOf()
بنيتها مشابهة لبنية دالة includes():
const indexOfElement = array.indexOf(element, fromIndex)
element: العنصر الذي تبحث عنه في المصفوفة (إلزامي).fromIndex: الفهرس أو الموضع في المصفوفة الذي تريد البدء منه بالبحث عن العنصر (اختياري). القيمة الافتراضية هي 0.
من المهم جدًا ملاحظة أن كلتا الدالتين Array.includes() و Array.indexOf() تستخدمان المساواة الصارمة (===) للبحث في المصفوفة. هذا يعني أنه إذا كانت القيم من أنواع مختلفة (على سبيل المثال، السلسلة النصية '4' والرقم 4)، فستُرجعان false و -1 على التوالي، حتى لو بدت القيم متطابقة ظاهريًا.
ملخص طرق البحث في المصفوفات
باستخدام دوال المصفوفات هذه، لم تعد بحاجة إلى حلقات التكرار التقليدية (مثل for loop) للبحث في المصفوفات، مما يجعل كودك أكثر إيجازًا وقابلية للقراءة. اعتمادًا على احتياجاتك، يمكنك تحديد أي من الطرق الأربعة هي الأنسب لحالة استخدامك. إليك ملخص موجز لمتى تستخدم كل طريقة:
- استخدم
Array.filter(): إذا كنت ترغب في العثور على جميع العناصر في مصفوفة تستوفي شرطًا معينًا. - استخدم
Array.find(): إذا كنت ترغب في العثور على أول عنصر فقط يستوفي شرطًا معينًا. - استخدم
Array.includes(): إذا كنت ترغب في التحقق مما إذا كانت المصفوفة تحتوي على قيمة معينة (true/false). - استخدم
Array.indexOf(): إذا كنت ترغب في العثور على فهرس أول ظهور لعنصر معين في مصفوفة.
الخلاصة التقنية
تُقدم JavaScript مجموعة قوية ومتنوعة من دوال البحث في المصفوفات، وكل منها مصمم لمعالجة سيناريوهات محددة بكفاءة. فهم الفروقات الدقيقة بين filter()، find()، includes()، و indexOf() أمر بالغ الأهمية لكتابة كود JavaScript أمثل. فبينما تُعيد filter() مصفوفة جديدة تحتوي على جميع المطابقات، تُركز find() على أول تطابق فقط، وتُعيد undefined في حال عدم وجوده. أما includes() و indexOf()، فهما أدوات مباشرة للتحقق من الوجود وتحديد الفهرس على التوالي، مع الأخذ في الاعتبار اعتمادهما على المساواة الصارمة (===). اختيار الدالة الصحيحة لا يُحسن فقط من أداء التطبيق، بل يُعزز أيضًا من وضوح الكود وسهولة صيانته، مما يجعله أكثر احترافية وقابلية للتوسع.