كيفية التحقق مما إذا كان الكائن مصفوفة في JavaScript: أفضل 3 طرق

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

كيفية التحقق مما إذا كان الكائن مصفوفة في JavaScript: دليل كامل

\n\n

هل سبق لك أن وجدت نفسك تفكر: "يبدو أننا مررنا مصفوفة، لكن الكود يتعطل مع خطأ"؟ موقف مألوف. في JavaScript، المصفوفات هي كائنات، والتحقق البسيط باستخدام typeof لن يعمل هنا. اليوم سنشرح ثلاث طرق رئيسية للتحقق مما إذا كان الكائن مصفوفة، وسنكتشف أي منها يجب استخدامه في المشاريع الحقيقية.

\n\n

لماذا typeof غير مناسب؟

\n\n

قبل الغوص في التفاصيل، دعنا نفهم لماذا يتعثر المبتدئون غالبًا في هذه النقطة. في JavaScript، المصفوفات هي حالة خاصة من الكائنات. لذلك، فإن عامل typeof للمصفوفة سيعيد "object" وليس "array". جرب بنفسك:

\n\n
const arr = [1, 2, 3];\nconsole.log(typeof arr); // "object" — غير مفيد
\n\n

علاوة على ذلك، typeof null === "object" — هذا خطأ معروف في اللغة ولن يتم إصلاحه. لذا إذا كنت تتحقق من بيانات المستخدم أو من API، فلا يمكنك الاعتماد على typeof. أنت بحاجة إلى طرق أكثر موثوقية.

\n\n

الطريقة 1: Array.isArray() — المعيار الحديث

\n\n

بدءًا من ES5 (عام 2009)، ظهرت في JavaScript طريقة مدمجة Array.isArray(). هذه هي الطريقة الأصح والأبسط للتحقق مما إذا كان الكائن مصفوفة.

\n\n
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\n

دعم المتصفحات

\n

الطريقة مدعومة من قبل جميع المتصفحات الحديثة، بما في ذلك Internet Explorer 9+. إذا كنت بحاجة إلى دعم متصفحات قديمة جدًا (IE 8 وما دونه)، فاستخدم polyfill أو الطريقة الثالثة.

\n\n

الطريقة 2: instanceof Array — الكلاسيكية

\n\n

عامل instanceof يتحقق مما إذا كان النموذج الأولي Array.prototype موجودًا في سلسلة النماذج الأولية للكائن. يبدو الأمر معقدًا، لكنه عمليًا يعمل كالتالي:

\n\n
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 للتحقق من المصفوفات.

\n\n

الطريقة 3: Object.prototype.toString.call() — الجندي العالمي

\n\n

هذه الطريقة كانت تُستخدم قبل ظهور Array.isArray(). لا تزال ذات صلة إذا كنت بحاجة إلى كتابة polyfill أو العمل في بيئة لا تتوفر فيها Array.isArray.

\n\n
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، لأنها تتحقق من الداخل

المدونات

توصيات الكتب