مصفوفة 1…N في JavaScript: أسرار السرعة والأداء

مصفوفة 1…N في JavaScript: من البسيط إلى عالي الأداء

مرحباً زميلي المطور! إذا سبق لك أن واجهت مهمة "إنشاء مصفوفة أرقام من 1 إلى N" - فأنت لست وحدك. هذا سؤال شائع جداً على Stack Overflow، حيث حصد آلاف المشاهدات وعشرات الإجابات المتنوعة. قد يبدو الأمر بسيطاً، لكن الشيطان يكمن في التفاصيل: الأداء، قابلية القراءة، وعمومية الكود.

اليوم سنستعرض جميع الطرق الأساسية لإنشاء مصفوفة [1, 2, 3, ..., N] في JavaScript، ونقارنها من حيث السرعة والأناقة ومجال الاستخدام. ستعرف أي طريقة تختار للمشروع العادي، وأيها عندما تكون كل ملي ثانية مهمة. هيا بنا!

لماذا هذا مهم؟ سياق المهمة

تخيل: أنت تكتب خوارزمية فرز، أو تولّد بيانات اختبارية، أو تنشئ شبكة للعبة، أو تريد ببساطة الحصول بسرعة على سلسلة من الأرقام. في كل هذه الحالات تحتاج إلى مصفوفة من 1 إلى N. قد يبدو الأمر بسيطاً - استخدم حلقة for وانطلق. لكن JavaScript الحديثة تقدم الكثير من السكر النحوي لدرجة أنه من السهل أن تحتار.

سنستعرض 5 طرق رئيسية، من الكلاسيكية إلى الأسطر الواحدة الحديثة، ونختبرها في ظروف حقيقية. جهّز وحدة تحكم المتصفح ومحررك المفضل - سيكون الأمر مثيراً!

الطريقة 1: حلقة for الكلاسيكية

طريقة أساسية لكنها موثوقة، يعرفها كل مبتدئ:

function createArrayLoop(n) {\n  const arr = [];\n  for (let i = 1; i <= n; i++) {\n    arr.push(i);\n  }\n  return arr;\n}\n\nconsole.log(createArrayLoop(5)); // [1, 2, 3, 4, 5]

المزايا:

\n
• أقصى قابلية للقراءة - مفهومة حتى لمن بدأوا تعلم JS للتو.
\n
• لا توجد استدعاءات مخفية أو سحر.
\n
• تعمل في جميع البيئات، بما في ذلك المتصفحات القديمة جداً.
\n

العيوب:

\n
• أبطأ من بعض البدائل (لكن ليس بشكل حرج لـ N الصغيرة).
\n
• كثير من الكود لمهمة بسيطة.
\n

الطريقة 2: Array.from() مع دالة map

طريقة حديثة وأنيقة ظهرت في ES6:

const createArrayFrom = n => Array.from({ length: n }, (_, i) => i + 1);\n\nconsole.log(createArrayFrom(5)); // [1, 2, 3, 4, 5]

هنا ننشئ مصفوفة بطول محدد ونملؤها فوراً عبر دالة map. الوسيط الثاني لـ Array.from هو دالة map التي تستقبل الفهرس الحالي i وتعيد i + 1.

المزايا:

\n
• مختصرة جداً ومعبرة.
\n
• لا تتطلب إنشاء مصفوفة فارغة مسبقاً.
\n
• أداء جيد.
\n

العيوب:

\n
• قد تكون أقل وضوحاً للمبتدئين.
\n
• تنشئ كائن وسيط { length: n }.
\n

الطريقة 3: Spread-operator + keys()

واحدة من أكثر الأسطر الواحدة شيوعاً على Stack Overflow:

const createArraySpread = n => [...Array(n).keys()].map(i => i + 1);\n\nconsole.log(createArraySpread(5)); // [1, 2, 3, 4, 5]

كيف يعمل؟ Array(n) ينشئ مصفوفة متفرقة من n عنصر فارغ. .keys() يعيد مكرراً للفهارس (0, 1, 2...). Spread-operator يفردها في مصفوفة عادية، ثم map يزيح القيم بمقدار +1.

المزايا:

\n
• مختصرة جداً (استدعاء واحد).
\n
• تبدو "سحرية" - تثير إعجاب الزملاء في مراجعة الكود.
\n

العيوب:

\n
• الأبطأ بين جميع الطرق لـ N الكبيرة (بسبب المرور المزدوج وإنشاء مصفوفات وسيطة).
\n
• أصعب في الفهم للمبتدئين.
\n
• تستهلك ذاكرة أكبر.
\n

الطريقة 4: Array.fill() + map()

خيار شائع آخر:

const createArrayFill = n => Array(n).fill().ma