ما هو مشغل الدائرة القصيرة في جافا سكريبت؟ ( & amp؛ & amp؛ ، المنطقية AND)

سترى “عامل تشغيل الدائرة القصيرة” & amp؛ & amp؛ كثيرًا في كود JavaScript ، خاصة في React JSX. باستخدام & amp؛ & amp؛ ، تؤدي القيمة الزائفة إلى “قصر دائرة” سطر معين من التعليمات البرمجية ، مما يؤدي إلى توقف التنفيذ.

لماذا تحتاج إلى رمز قصر الدائرة

هناك شيء لم أفهمه لبعض الوقت في React وهو كيفية عرض مكونات React بشكل مشروط.

عندما تكتب كود JSX الخاص بك (الجزء الذي يشبه HTML ويتم إرجاعه بواسطة وظيفة عرض مكون React) ، لا يمكنك استخدام عبارات إذا كما تفعل عادةً في JavaScript.

يبدو أن هذا يخالف إحدى القواعد الأساسية لبرمجة الكمبيوتر. تحتوي جميع لغات البرمجة على “رموز تبديل” (شروط مثل if ) وحلقات وإمكانية إجراء العمليات الحسابية.

بدون القدرة على تفريع الكود في مسارات مختلفة ، كيف تكتب كود React JSX الذي يستجيب للمستخدم؟

هذه إحدى الأوقات التي يكون فيها الفهم العميق لآليات لغة جافا سكريبت مفيدًا حقًا لتحسين قدرتك كمطور React.

عندما تكتب كود JSX ، تترجم React JSX إلى سلسلة من استدعاءات الوظائف إلى React.createElement () . (في React 17 ، تغير ذلك إلى تحويل JSX جديد ، jsx () ، لكن المفهوم هو نفسه).

هذا هو السبب التقني لعدم تمكنك من استخدام عبارة if في JSX: React لا تعرف كيفية ترجمة if إلى createElement () (أو jsx () ) استدعاء الوظيفة. لحسن الحظ ، تحتوي JavaScript على أداة “تقصر” تنفيذ سطر من التعليمات البرمجية: & amp؛ & amp؛ (AND).

(إعادة) تقديم مشغل الدائرة القصيرة ، &؛&؛

إن عامل التشغيل & amp؛ & amp؛ (المنطقي AND) – ويسمى أيضًا “مشغل الدائرة القصيرة” – هو شيء يعرفه كل مطور.

يمكنك استخدام & amp؛ & amp؛ داخل الشروط الشرطية مثل عبارات if و while لتوصيل التعبيرات المنطقية. والنتيجة هي التعبير المنطقي “AND”: يحتاج كلا التعبيرين المرتبطين بـ & amp؛ & amp؛ كلاهما لإرجاع قيم صحيحة لإدخال الشرط.

ومع ذلك ، قد لا تتوقع سلوك “ماس كهربائي”: لم أفعل. ما تعنيه عملية الدائرة القصيرة هو أن JavaScript يتوقف عن التنفيذ بعد قيمة خاطئة إذا تم ضم التعبير التالي بواسطة & amp؛ & amp؛ .

يمكنك بسهولة تخيل لغة برمجة تقيم كلا التعبيرين المرتبطين بـ & amp؛ & amp؛ قبل الانتقال. في حين أنه غير فعال ، يبدو أنه منطقي. ومع ذلك ، فهذه ليست طريقة عمل جافا سكريبت ؛ يتم تقييم JavaScript من اليسار إلى اليمين وستؤدي إلى قصر الدائرة.

هذا يعني أنه قد يكون لديك رمز غير منطقي أو شيء من شأنه أن يؤدي إلى حدوث خطأ بعد & amp؛ & amp؛ ، ولا يهم جافا سكريبت. هذا في الواقع قوي جدًا ، خاصة عند فحص الكتابة. يمكنك تخيل التحقق من مصفوفة باستخدام Array.isArray () قبل الوصول إلى المصفوفة عن طريق توصيل التعبيرين باستخدام & amp؛ & amp؛ في سطر واحد.

استخدام مشغل الدائرة القصيرة & amp؛ & amp؛ بدلاً من if

هناك طريقة أخرى لاستخدام عامل تشغيل الدائرة القصيرة & amp؛ & amp؛ وهي استخدامه لتنفيذ سطر من التعليمات البرمجية بشكل مشروط دون استخدام جملة if على الإطلاق.

دعونا نلقي نظرة على بعض أمثلة التعليمات البرمجية التي توضح تنفيذ ماس كهربائى باستخدام & amp؛ & amp؛ .

كما نلاحظ في مثال الشفرة الأول ، فإن نتيجة استخدام & amp؛ & amp؛ هي نفسها استخدام العبارة if متبوعة بـ {} كتلة التعليمات البرمجية.

نظرًا لأن JavaScript يقرأ الشفرة في سطر معين من اليسار إلى اليمين ، فإن أي قيمة خاطئة متبوعة بـ & amp؛ & amp؛ ستؤدي إلى اختصار التنفيذ.

“يتم تقييم التعبير المنطقي AND من اليسار إلى اليمين ، ويتم اختباره لتقييم” ماس كهربائى “محتمل باستخدام القاعدة التالية:

(بعض التعبيرات الزائفة) & amp؛ & amp؛ expr يتم تقييم دائرة قصر للتعبير الزائف ؛

تعني ماس كهربائى أن الجزء expr أعلاه لم يتم تقييمه ، وبالتالي فإن أي آثار جانبية للقيام بذلك لا تسري (على سبيل المثال ، إذا كان expr هو استدعاء دالة ، فلن يتم الاستدعاء أبدًا). ​​” – مستندات MDN

كما ذكرت سابقًا ، سترى عادةً & amp؛ & amp؛ في كود React JSX ، حيث سيتم عرض مكون React أو عنصر HTML فقط في بعض الشروط: ؛ & lt؛ ComponentToRender / & gt؛ .

بالنسبة للبعض ، سيكون استخدام & amp؛ & amp؛ واضحًا للغاية ( “Like، duh” ) ، لكن الأمر استغرق مني بعض الوقت لفهم معنى “ماس كهربائى” التنفيذ “يعني. لقد وجدت & amp؛ & amp؛ مربكة مثل الفرق بين == و === .

نأمل أن يكون هذا البرنامج التعليمي قد ساعدك في فهم مفهوم JavaScript الأساسي هذا. يمكن أن يتيح لنا تقييم الدائرة القصيرة كتابة رمز بسيط ، طالما أننا نفهم بالضبط كيفية عمل & amp؛ & amp؛ .

أتمنى لك ترميزًا سعيدًا! ? & amp؛ & amp؛ ? === ?

انضم إلى قائمة البريد الإلكتروني الخاصة بي للحصول على وصول مجاني إلى جميع مقالاتي على موقع Medium