عندما تشعر بالراحة عند كتابة برامج JavaScript الأساسية ، فقد حان الوقت لتعلم بعض البنية المتقدمة لتنظيف شفرتك وتسريع عملية الترميز.

تعد JavaScript و TypeScript من لغات البرمجة الشائعة للغاية في مجال تطوير الويب. كلاهما يحتوي على مجموعات ميزات واسعة والعديد من اختصارات بناء الجملة التي تساهم بشكل كبير في تحسين كفاءة الترميز.

تعرف على كيفية تشديد التعليمات البرمجية الخاصة بك وتحقيق أقصى استفادة من هذه اللغات باستخدام بعض الاختصارات المفيدة.

1. مشغل ثلاثي

يوفر المعامل الثلاثي صيغة موجزة وفعالة للتعبير عن العبارات الشرطية. يتكون من ثلاثة أجزاء: شرط ، وتعبير يتم تشغيله إذا كان الشرط صحيحًا ، وتعبيرًا لتشغيله إذا كان خطأ.

يثبت هذا المشغل أنه مفيد بشكل خاص عند اتخاذ القرارات بناءً على الشروط وتعيين قيم مختلفة وفقًا لذلك.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت العمر = 20;
مقدار ثابت ageType = age> = 18? "الكبار": "طفل";
وحدة التحكم.log (ageType) ؛ // الإخراج: "بالغ"

يستخدم هذا المثال العامل الثلاثي للتحقق مما إذا كان المتغير أم لا عمر أكبر من أو يساوي 18. إذا كان الأمر كذلك ، فإن الكود يعين القيمة الكبار إلى المتغير العمر، وإلا فإنه يقوم بتعيين القيمة "التابعة".

instagram viewer

2. قالب حرفي

تقدم القوالب الحرفية طريقة قوية وفعالة لـ تنسيق سلاسل JavaScript ودمج المتغيرات أو التعبيرات بداخلها. على عكس تسلسل السلسلة التقليدي باستخدام علامات اقتباس مفردة أو مزدوجة ، تستخدم الحروف الحرفية للقالب backticks (`).

يوفر هذا التركيب الفريد العديد من المزايا عند العمل مع السلاسل. ضع في اعتبارك المثال التالي الذي يوضح استخدام القوالب الحرفية:

مقدار ثابت الاسم = "أليس";
مقدار ثابت تحية = مرحبا ، $ {name}!`;
وحدة التحكم.log (تحية) ؛ // الإخراج: "مرحبًا ، أليس!"

يتضمن المثال اسم متغير في النموذج الحرفي باستخدام ${}. يتيح لك هذا إنشاء سلاسل ديناميكية بسهولة.

3. عامل ائتلاف لاغي

عامل الاندماج الصفري (??) يوفر طريقة مناسبة لتعيين القيم الافتراضية عندما يكون المتغير أيضًا باطل أو غير معرف. تقوم بإرجاع معامل الجانب الأيمن إذا كان المعامل الأيسر كذلك باطل أو غير معرف.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت اسم المستخدم = باطل;
مقدار ثابت displayName = username ؟؟ "ضيف";
وحدة التحكم.log (اسم العرض) ؛ // الإخراج: "ضيف"

في هذا المثال ، منذ المتغير اسم المستخدم يكون باطل، يعين عامل الاندماج الصفري القيمة الافتراضية ضيف إلى المتغير اسم العرض.

4. تقييم قصر الدائرة

يتيح لك تقييم الدائرة القصيرة كتابة تعبيرات شرطية موجزة باستخدام عوامل منطقية مثل && و ||. يستفيد من حقيقة أن العامل المنطقي سيتوقف عن تقييم التعبيرات بمجرد أن يتمكن من تحديد النتيجة.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت الاسم = "جون";
مقدار ثابت تحية = الاسم && مرحبا ، $ {name}`;
وحدة التحكم.log (تحية) ؛ // الإخراج: "مرحبًا جون"

هذا المثال سوف يقيم التعبير فقط مرحبًا $ {name} ` إذا كان المتغير اسم له قيمة صادقة. خلاف ذلك ، فإنه يقصر الدوائر ويحدد قيمة اسم نفسها إلى المتغير تحية.

5. اختصار تعيين خاصية الكائن

عند إنشاء كائنات ، لديك خيار استخدام تدوين مختصر يعين المتغيرات كخصائص تحمل الاسم نفسه.

يلغي هذا الترميز المختصر الحاجة إلى ذكر اسم الخاصية واسم المتغير بشكل متكرر ، مما ينتج عنه رمز أكثر وضوحًا وإيجازًا.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت الاسم الأول = "جون";
مقدار ثابت اسم العائلة = "الفلاني";
مقدار ثابت شخص = {firstName، lastName} ؛
وحدة التحكم.log (شخص) ؛ // الإخراج: {firstName: "John" ، LastName: "Doe"}

هذا المثال يعين الخصائص الاسم الأول و اسم العائلة باستخدام تدوين الاختزال.

6. تسلسل اختياري

تسلسل اختياري (?.) يسمح لك بالوصول إلى الخصائص المتداخلة لكائن دون القلق بشأن القيم الفارغة أو غير المحددة الوسيطة. إذا كانت الخاصية في السلسلة فارغة أو غير محددة ، فإن التعبير يقصر الدوائر ويعود غير معرف.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت المستخدم = { اسم: "أليس", عنوان: { مدينة: "نيويورك", دولة: "الولايات المتحدة الأمريكية" }};
مقدار ثابت country = user.address؟ .country؛
وحدة التحكم.log (البلد) ؛ // الإخراج: "USA"

في المثال أعلاه ، يضمن عامل التسلسل الاختياري أن الكود لا يتسبب في حدوث خطأ إذا كان عنوان الملكية أو دولة الخاصية مفقودة.

7. تدمير الكائن

تدمير الكائن هي ميزة قوية في JavaScript و TypeScript تتيح لك استخراج الخصائص من الكائنات وتعيينها إلى متغيرات باستخدام صيغة موجزة.

يبسط هذا الأسلوب عملية الوصول إلى خصائص الكائن ومعالجتها. دعنا نلقي نظرة فاحصة على كيفية عمل تدمير الكائن بمثال:

مقدار ثابت المستخدم = { اسم: "جون", عمر: 30 };
مقدار ثابت {الاسم ، العمر} = مستخدم ؛
وحدة التحكم.log (الاسم والعمر) ؛ // الإخراج: "جون" 30

هذا المثال يستخرج المتغيرات اسم و عمر من مستخدم كائن عن طريق تدمير الكائن.

8. عامل انتشار

عامل الانتشار (...) يمكّنك من توسيع عناصر متكررة ، مثل مصفوفة أو كائن ، إلى عناصر فردية. من المفيد الجمع بين المصفوفات أو إنشاء نسخ ضحلة منها.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت أرقام = [1, 2, 3];
مقدار ثابت newNumbers = [... أرقام ، 4, 5];
وحدة التحكم.log (newNumbers) ؛ // الإخراج: [1، 2، 3، 4، 5]

في المثال أعلاه ، يقوم عامل الانتشار بتوسيع نطاق أعداد مجموعة في عناصر فردية ، والتي يتم دمجها بعد ذلك مع 4 و 5 لإنشاء مجموعة جديدة ، أرقام جديدة.

9. اختزال حلقة الكائن

عند التكرار فوق الكائنات ، يمكنك استخدام الامتداد لـ... في حلقة بالاقتران مع تدمير الكائن لتكرار خصائص الكائن بسهولة.

ضع في اعتبارك هذا المثال:

مقدار ثابت المستخدم = { اسم: "جون", عمر: 30 };
ل (مقدار ثابت [مفتاح ، قيمة] لهدف.entries (مستخدم)) { 
وحدة التحكم.سجل(`$ {مفتاح}: {القيمة}`);
}
// انتاج:
// الاسم: جون
// العمر: 30

في المثال أعلاه ، مدخلات الكائن (مستخدم) تُرجع مصفوفة من أزواج المفتاح والقيمة ، والتي يقوم كل تكرار بإتلافها في المتغيرات مفتاح و قيمة.

10. Array.indexOf الاختزال باستخدام عامل تشغيل Bitwise

يمكنك استبدال المكالمات إلى Array.indexOf طريقة باختصار باستخدام عامل تشغيل أحادي ~ للتحقق من وجود عنصر في المصفوفة. يقوم الاختزال بإرجاع فهرس العنصر إذا تم العثور عليه أو -1 إذا لم يتم العثور عليها.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت أرقام = [1, 2, 3];
مقدار ثابت الفهرس = ~ number.indexOf (2);
وحدة التحكم.log (فهرس) ؛ // الإخراج: -2

في المثال أعلاه ، ~ number.indexOf (2) عائدات -2 لأن 2 في الفهرس 1، والعامل أحادي المعامل ينفي الفهرس.

11. صب القيم على منطقية مع!!

ل صراحة تحويل قيمة بالنسبة إلى قيمة منطقية ، يمكنك استخدام عامل النفي المزدوج (!!). إنه يحول بشكل فعال قيمة صادقة إلى حقيقي وقيمة زائفة خطأ شنيع.

خذ بعين الاعتبار المثال التالي:

مقدار ثابت القيمة 1 = "مرحبًا";
مقدار ثابت القيمة 2 = "";
وحدة التحكم.log (!! value1) ؛ // الإخراج: صحيح
وحدة التحكم.log (!! value2) ؛ // الإخراج: خطأ

في المثال أعلاه ، !! القيمة 1 عائدات حقيقي لأن السلسلة مرحبًا هو صريح ، بينما !! القيمة 2 عائدات خطأ شنيع لأن السلسلة الفارغة خاطئة.

فتح كفاءة الكود والقراءة

من خلال استخدام هذه الاختصارات في JavaScript و TypeScript ، يمكنك تحسين كفاءة الترميز وإنتاج كود أكثر إيجازًا وقابلية للقراءة. سواء كان ذلك باستخدام المشغل الثلاثي ، أو تقييم الدائرة القصيرة ، أو الاستفادة من قوة القيم الحرفية للقالب ، فإن هذه الاختصارات توفر أدوات قيمة للتشفير الفعال.

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