كيفية التحقق مما إذا كان الكائن مصفوفة في JavaScript: دليل كامل
\n\nهل سبق لك أن وجدت نفسك تفكر: "يبدو أننا مررنا مصفوفة، لكن الكود يتعطل مع خطأ"؟ موقف مألوف. في JavaScript، المصفوفات هي كائنات، والتحقق البسيط باستخدام typeof لن يعمل هنا. اليوم سنشرح ثلاث طرق رئيسية للتحقق مما إذا كان الكائن مصفوفة، وسنكتشف أي منها يجب استخدامه في المشاريع الحقيقية.
لماذا typeof غير مناسب؟
\n\nقبل الغوص في التفاصيل، دعنا نفهم لماذا يتعثر المبتدئون غالبًا في هذه النقطة. في JavaScript، المصفوفات هي حالة خاصة من الكائنات. لذلك، فإن عامل typeof للمصفوفة سيعيد "object" وليس "array". جرب بنفسك:
const arr = [1, 2, 3];\nconsole.log(typeof arr); // "object" — غير مفيد\n\nعلاوة على ذلك، typeof null === "object" — هذا خطأ معروف في اللغة ولن يتم إصلاحه. لذا إذا كنت تتحقق من بيانات المستخدم أو من API، فلا يمكنك الاعتماد على typeof. أنت بحاجة إلى طرق أكثر موثوقية.
الطريقة 1: Array.isArray() — المعيار الحديث
\n\nبدءًا من ES5 (عام 2009)، ظهرت في JavaScript طريقة مدمجة Array.isArray(). هذه هي الطريقة الأصح والأبسط للتحقق مما إذا كان الكائن مصفوفة.
const arr = [10, 20, 30];\nconst notArr = { length: 3, 0: 'a', 1: 'b', 2: 'c' };\n\nconsole.log(Array.isArray(arr)); // true\nconsole.log(Array.isArray(notArr)); // false\nconsole.log(Array.isArray('hello')); // false\nconsole.log(Array.isArray(null)); // false\n\nلماذا هو الخيار الأفضل؟ لأن Array.isArray() يعمل بشكل صحيح حتى في السيناريوهات المعقدة: إذا جاءت المصفوفة من iframe أو إطار آخر، فقد يفشل instanceof، لكن Array.isArray() لا يفشل. إنه يتحقق من النوع الداخلي [[Class]] للكائن، وليس من سلسلة النماذج الأولية.
دعم المتصفحات
\nالطريقة مدعومة من قبل جميع المتصفحات الحديثة، بما في ذلك Internet Explorer 9+. إذا كنت بحاجة إلى دعم متصفحات قديمة جدًا (IE 8 وما دونه)، فاستخدم polyfill أو الطريقة الثالثة.
\n\nالطريقة 2: instanceof Array — الكلاسيكية
\n\nعامل instanceof يتحقق مما إذا كان النموذج الأولي Array.prototype موجودًا في سلسلة النماذج الأولية للكائن. يبدو الأمر معقدًا، لكنه عمليًا يعمل كالتالي:
const arr = [1, 2, 3];\nconsole.log(arr instanceof Array); // true\n\nconst obj = { a: 1 };\nconsole.log(obj instanceof Array); // false\n\n// وهنا المفاجأة:\nconst iframeArr = new iframe.contentWindow.Array(1, 2, 3);\nconsole.log(iframeArr instanceof Array); // false! (إذا كانت المصفوفة من إطار آخر)\n\nهذا هو المأزق: إذا كان لديك عدة iframe على الصفحة أو كنت تعمل مع Web Workers، فإن المصفوفات من سياقات عامة مختلفة لها نماذج أولية مختلفة. instanceof لا يأخذ هذا في الاعتبار وقد يعيد false لمصفوفة حقيقية. لذلك، في التطوير الحديث، من الأفضل التخلي عن instanceof للتحقق من المصفوفات.
الطريقة 3: Object.prototype.toString.call() — الجندي العالمي
\n\nهذه الطريقة كانت تُستخدم قبل ظهور Array.isArray(). لا تزال ذات صلة إذا كنت بحاجة إلى كتابة polyfill أو العمل في بيئة لا تتوفر فيها Array.isArray.
function isArray(obj) {\n return Object.prototype.toString.call(obj) === '[object Array]';\n}\n\nconsole.log(isArray([1, 2])); // true\nconsole.log(isArray({ a: 1 })); // false\nconsole.log(isArray('string')); // false\nconsole.log(isArray(null)); // false\n\nكيف يعمل هذا؟ طريقة toString للكائن Object.prototype تعيد سلسلة نصية بالشكل [object Type]. بالنسبة للمصفوفات، تكون دائمًا [object Array]. هذه الطريقة تتجاوز مشكلة iframe، لأنها تتحقق من الداخل