نصائح وحيل

المشكلة

كتابة جمل if-else مطولة للشروط البسيطة تجعل الكود أصعب في القراءة والصيانة.

الحل

استخدم المعامل الثلاثي (condition ? true : false) للتعيينات الشرطية في سطر واحد.

الفائدة

يقلل طول الكود بنسبة تصل إلى 70٪ ويحسن قابلية القراءة للشروط البسيطة.

مثال الكود

// بدلاً من:
if (age >= 18) {
    status = 'adult';
} else {
    status = 'minor';
}

// استخدم:
status = age >= 18 ? 'adult' : 'minor';

المشكلة

استخراج قيم متعددة من المصفوفات أو الكائنات يتطلب كتابة كود تعيين متكرر.

الحل

استخدم بناء التفكيك لاستخراج قيم متعددة في سطر واحد.

الفائدة

يجعل الكود أنظف، ويقلل الأخطاء، ويحسن كفاءة تعيين المتغيرات.

مثال الكود

// تفكيك المصفوفة
const [first, second, third] = [1, 2, 3];

// تفكيك الكائن
const { name, age } = user;

المشكلة

حلقات for التقليدية لتحويل المصفوفات مطولة وعرضة للأخطاء مع إدارة الفهرس اليدوي.

الحل

استخدم Array.map() لتحويل المصفوفات بطريقة وظيفية وتصريحية.

الفائدة

يقلل الكود بنسبة 60٪، ويزيل أخطاء الفهرس، ويجعل الغرض أوضح.

مثال الكود

// بدلاً من:
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// استخدم:
const doubled = numbers.map(n => n * 2);

المشكلة

دمج النصوص باستخدام + صعب القراءة والصيانة، خاصة مع متغيرات متعددة.

الحل

استخدم القوالب النصية مع علامات `` وبناء ${} لدمج نصوص أنظف.

الفائدة

يحسن القابلية للقراءة بنسبة 80٪ ويدعم النصوص متعددة الأسطر بدون دمج يدوي.

مثال الكود

// بدلاً من:
const msg = 'Hello ' + name + ', you are ' + age + ' years old.';

// استخدم:
const msg = `Hello ${name}, you are ${age} years old.`;

المشكلة

التحقق من أن الكائن فارغ يتطلب التكرار عبر خصائصه يدوياً.

الحل

استخدم Object.keys(obj).length === 0 للتحقق بسرعة من عدم وجود خصائص.

الفائدة

حل من سطر واحد أسرع وأكثر موثوقية من التكرار اليدوي.

مثال الكود

// تحقق إذا كان الكائن فارغاً
const isEmpty = Object.keys(myObj).length === 0;

// احصل على جميع مفاتيح الكائن
const keys = Object.keys(user); // ['name', 'age', 'email']

المشكلة

إزالة null و undefined و 0 و false و NaN من المصفوفات يتطلب منطق شرطي معقد.

الحل

استخدم Array.filter(Boolean) لإزالة جميع القيم الخاطئة في سطر واحد.

الفائدة

يزيل أكثر من 10 أسطر من المنطق الشرطي ويتعامل مع جميع القيم الخاطئة تلقائياً.

مثال الكود

const arr = [0, 1, false, 2, '', 3, null, undefined, NaN];

// احذف جميع القيم الخاطئة
const clean = arr.filter(Boolean);
// النتيجة: [1, 2, 3]

المشكلة

الدوال تحتاج قيم احتياطية عند عدم توفير المعاملات، مما يتطلب فحوصات يدوية.

الحل

استخدم بناء المعاملات الافتراضية لتعيين القيم الاحتياطية تلقائياً في توقيعات الدوال.

الفائدة

يقلل البرمجة الدفاعية بنسبة 50٪ ويجعل واجهات الدوال موثقة ذاتياً.

مثال الكود

// بدلاً من:
function greet(name) {
    name = name || 'Guest';
    return `Hello ${name}`;
}

// استخدم:
function greet(name = 'Guest') {
    return `Hello ${name}`;
}

المشكلة

نسخ المصفوفات بالطرق التقليدية قد ينشئ مراجع بدلاً من مصفوفات جديدة عن طريق الخطأ.

الحل

استخدم معامل النشر [...arr] لإنشاء نسخة سطحية من المصفوفة.

الفائدة

يمنع أخطاء التعديل وينشئ نسخ مستقلة في بناء بسيط واحد.

مثال الكود

const original = [1, 2, 3];

// انسخ المصفوفة
const copy = [...original];

// ادمج المصفوفات
const merged = [...arr1, ...arr2];

المشكلة

التحقق من شروط OR متعددة ينشئ سلاسل مقارنة طويلة ومتكررة.

الحل

استخدم Array.includes() للتحقق من تطابق قيمة مع أي عنصر في مصفوفة الاحتمالات.

الفائدة

يقلل تعقيد الشروط بنسبة 70٪ ويجعل الكود أكثر قابلية للصيانة.

مثال الكود

// بدلاً من:
if (status === 'active' || status === 'pending' || status === 'approved') {
    // ...
}

// استخدم:
if (['active', 'pending', 'approved'].includes(status)) {
    // ...
}

المشكلة

الوصول إلى خصائص الكائنات المتداخلة يتطلب فحوصات null/undefined متعددة.

الحل

استخدم التسلسل الاختياري (?.) للوصول الآمن للخصائص المتداخلة بدون فحوصات null صريحة.

الفائدة

يزيل 90٪ من كود فحص null ويمنع أخطاء "Cannot read property".

مثال الكود

// بدلاً من:
const city = user && user.address && user.address.city;

// استخدم:
const city = user?.address?.city;

المشكلة

استخدام filter() للعثور على عنصر واحد يعالج المصفوفة بالكامل دون داعٍ.

الحل

استخدم Array.find() الذي يتوقف عند أول تطابق، مما يحسن الأداء.

الفائدة

أسرع بما يصل إلى 100 مرة للمصفوفات الكبيرة ويوضح الغرض بشكل أفضل.

مثال الكود

const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];

// غير فعال:
const user = users.filter(u => u.id === 2)[0];

// فعال:
const user = users.find(u => u.id === 2);

المشكلة

إزالة التكرار من المصفوفات يتطلب حلقات متداخلة أو منطق filter معقد.

الحل

حول المصفوفة إلى Set (الذي يخزن قيم فريدة فقط) ثم ارجعها لمصفوفة.

الفائدة

حل من سطر واحد أسرع بـ 50 مرة من الطرق التقليدية.

مثال الكود

const numbers = [1, 2, 2, 3, 3, 3, 4];

// احذف التكرار
const unique = [...new Set(numbers)];
// النتيجة: [1, 2, 3, 4]

المشكلة

التحويلات المعقدة للمصفوفات تتطلب تمريرات متعددة ومتغيرات وسيطة.

الحل

استخدم Array.reduce() لتحويل المصفوفات إلى أي شكل (مجموع، كائن، بيانات مجمعة).

الفائدة

حل بتمريرة واحدة يتعامل مع التحويلات المعقدة بكفاءة.

مثال الكود

const numbers = [1, 2, 3, 4, 5];

// اجمع المصفوفة
const sum = numbers.reduce((acc, n) => acc + n, 0);

// جمّع حسب الخاصية
const grouped = items.reduce((acc, item) => {
    acc[item.category] = acc[item.category] || [];
    acc[item.category].push(item);
    return acc;
}, {});

المشكلة

تصحيح مصفوفات الكائنات باستخدام console.log() يجعل البيانات صعبة القراءة والمقارنة.

الحل

استخدم console.table() لعرض المصفوفات والكائنات في جدول منسق.

الفائدة

يجعل تصحيح الأخطاء أسرع بـ 10 مرات مع تصور جدولي واضح قابل للفرز.

مثال الكود

const users = [
    {id: 1, name: 'John', age: 30},
    {id: 2, name: 'Jane', age: 25}
];

// اعرض كجدول
console.table(users);

المشكلة

استخدام || للقيم الافتراضية يعامل 0 و false كقيم خاطئة، مما يسبب سلوك غير متوقع.

الحل

استخدم ?? (دمج القيم الفارغة) الذي يُفعّل فقط لـ null/undefined وليس 0/false.

الفائدة

يمنع الأخطاء عند العمل مع 0 أو false أو نصوص فارغة كقيم صالحة.

مثال الكود

const count = 0;

// خطأ: count تصبح 10 (غير متوقع)
const value1 = count || 10;

// صحيح: count تبقى 0
const value2 = count ?? 10;

المشكلة

بناء الدالة التقليدي في الاستدعاءات يضيف إطناب غير ضروري.

الحل

استخدم دوال الأسهم (=>) لبناء استدعاءات مختصرة مع إرجاع ضمني.

الفائدة

يقلل كود الاستدعاءات بنسبة 40٪ ويربط سياق this تلقائياً.

مثال الكود

// تقليدي
numbers.map(function(n) {
    return n * 2;
});

// دالة سهم
numbers.map(n => n * 2);

المشكلة

تعيين الكائنات ينشئ مراجع، مما يسبب تعديلات عرضية.

الحل

استخدم Object.assign({}, obj) أو نشر {...obj} لإنشاء نسخ سطحية.

الفائدة

يمنع أخطاء التعديل ويسمح بمعالجة آمنة للكائنات.

مثال الكود

const original = {name: 'John', age: 30};

// انسخ الكائن
const copy1 = Object.assign({}, original);
const copy2 = {...original};

// ادمج الكائنات
const merged = {...obj1, ...obj2};

المشكلة

التحقق من أن أي/جميع العناصر تحقق شرطاً يتطلب حلقات يدوية مع جمل break.

الحل

استخدم Array.some() للتحقق من تطابق أي عنصر، Array.every() لجميع العناصر.

الفائدة

أكثر قابلية للقراءة ويوقف التنفيذ مبكراً لأداء أفضل.

مثال الكود

const numbers = [1, 2, 3, 4, 5];

// تحقق إذا كان أي رقم > 3
const hasLarge = numbers.some(n => n > 3); // true

// تحقق إذا كانت جميع الأرقام > 0
const allPositive = numbers.every(n => n > 0); // true

المشكلة

تسطيح المصفوفات المتداخلة يتطلب دوال تكرارية أو منطق reduce معقد.

الحل

استخدم Array.flat(depth) لتسطيح المصفوفات إلى عمق محدد في سطر واحد.

الفائدة

يزيل أكثر من 20 سطر من كود التسطيح التكراري.

مثال الكود

const nested = [1, [2, 3], [4, [5, 6]]];

// سطّح مستوى واحد
const flat1 = nested.flat(); // [1, 2, 3, 4, [5, 6]]

// سطّح جميع المستويات
const flat2 = nested.flat(Infinity); // [1, 2, 3, 4, 5, 6]

المشكلة

استدعاءات await المتسلسلة تضيع الوقت عندما يمكن تشغيل العمليات بالتوازي.

الحل

استخدم Promise.all() لتنفيذ عمليات متزامنة متعددة في نفس الوقت.

الفائدة

يمكن أن يقلل وقت التنفيذ بنسبة 70٪ للعمليات المتزامنة المستقلة.

مثال الكود

// متسلسل (بطيء): 3 ثوان إجمالاً
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// متوازي (سريع): ثانية واحدة إجمالاً
const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
]);

المشكلة

تحويل NodeLists أو Sets أو النصوص إلى مصفوفات يتطلب تحويل يدوي معقد.

الحل

استخدم Array.from() لتحويل أي قابل للتكرار إلى مصفوفة مع خريطة اختيارية.

الفائدة

حل تحويل عالمي يعمل مع جميع الأنواع القابلة للتكرار.

مثال الكود

// حول NodeList إلى مصفوفة
const divs = Array.from(document.querySelectorAll('div'));

// أنشئ مصفوفة من نص
const chars = Array.from('hello'); // ['h','e','l','l','o']

// أنشئ مصفوفة مع خريطة
const squares = Array.from({length: 5}, (_, i) => i * i);
// [0, 1, 4, 9, 16]

المشكلة

التنفيذ الشرطي غالباً يتطلب جمل if مطولة للحالات البسيطة.

الحل

استخدم && للتنفيذ الشرطي و || للقيم الاحتياطية في سطر واحد.

الفائدة

يقلل الشروط البسيطة من 5 أسطر إلى سطر واحد.

مثال الكود

// نفّذ إذا كان الشرط صحيحاً
isLoggedIn && redirectToDashboard();

// استخدم قيمة احتياطية
const name = userName || 'Guest';

// سلسل الشروط
user && user.isAdmin && showAdminPanel();

المشكلة

تحليل JSON مع تواريخ أو أنواع خاصة يتطلب معالجة يدوية لاحقة.

الحل

استخدم معامل reviver في JSON.parse() لتحويل القيم أثناء التحليل.

الفائدة

يؤتمت تحويل الأنواع ويزيل حلقات التحويل المنفصلة.

مثال الكود

const json = '{"date":"2024-01-01T00:00:00.000Z","count":"42"}';

const data = JSON.parse(json, (key, value) => {
    // حول نصوص التاريخ إلى كائنات Date
    if (key === 'date') return new Date(value);
    // حول النصوص الرقمية إلى أرقام
    if (key === 'count') return parseInt(value);
    return value;
});

المشكلة

إنشاء كائنات من متغيرات يتطلب أزواج مفتاح-قيمة متكررة.

الحل

استخدم ES6 المختصرة لحذف القيمة عندما يكون المفتاح واسم المتغير متماثلين.

الفائدة

يقلل كود إنشاء الكائنات بنسبة 50٪ ويحسن القابلية للقراءة.

مثال الكود

const name = 'John';
const age = 30;
const city = 'NYC';

// بدلاً من:
const user1 = {name: name, age: age, city: city};

// استخدم:
const user2 = {name, age, city};

المشكلة

قياس وقت تنفيذ الكود يتطلب حسابات Date.now() يدوية.

الحل

استخدم console.time() و console.timeEnd() لقياس وقت التنفيذ بسهولة.

الفائدة

قياس أداء بسيط ودقيق بدون حسابات طوابع زمنية يدوية.

مثال الكود

console.time('معالجة المصفوفة');

const result = largeArray.map(item => {
    // معالجة معقدة
    return processItem(item);
});

console.timeEnd('معالجة المصفوفة');
// الناتج: معالجة المصفوفة: 234.56ms