تحديد المتغيرات في JavaScript – CloudSavvy IT
![تحديد المتغيرات في JavaScript - CloudSavvy IT | اخبار مصر مباشر رسم توضيحي يظهر شعار JavaScript](https://egyptlivenews.com/wp-content/uploads/2021/02/تحديد-المتغيرات-في-JavaScript-CloudSavvy-IT-780x470.jpg)
جلبت المسودة النهائية لـ ES6 المكتملة في 2015 طريقة جديدة لتعريف متغيرات JavaScript.هذه let
الكلمة الأساسية تنشئ متغير نطاق الكتلة ، و const
حدد قيمة ثابتة.هذه هي الطريقة التي تختلف بها هذه الأنواع المتغيرة الحديثة عن أنواع المتغيرات الكلاسيكية var
.
فار
قبل ES6 ، var
إنه الخيار الوحيد عند تحديد المتغيرات.يمكنك تغيير قيمة المتغير الذي تم إنشاؤه باستخدام var
. يمكنك أيضًا إعادة تعريف المتغير نفسه.
var demo = "first value"; var demo = "second value"; demo = "third value"; example = "this throws an error - variable not declared";
استعمال var
قم بإنشاء متغير نطاقه هو الوظيفة الحالية. إذا كنت تستخدمه خارج الوظيفة ، فسيكون المتغير الناتج في النطاق العام.
يصف “نطاق” المتغير المكان الذي يمكن استخدامه فيه. يمكن الوصول إلى متغير النطاق الوظيفي من خلال الكود في الوظيفة التي تحدده. يمكن الوصول إلى المتغيرات العالمية في جميع أنحاء الكود.
var myGlobal = "global"; function testA() var myFunctionScope = "testA"; console.log(myFunctionScope); console.log(myGlobal); function testB() myGlobal = "overwritten!"; console.log(myGlobal); // console.log(myFunctionScope); // ERROR testA(); testB(); testA();
في هذا المثال ، يتم عرض الفرق بين متغيرات النطاق العام ومتغيرات نطاق الوظيفة. myGlobal
كلاهما يمكن قراءته (وكتابته) testA
مع testB
. myFunctionScope
فقط في testA
، وهكذا testB
حدث خطأ أثناء محاولة الوصول. هذا هو ناتج هذا المثال:
testA global overwritten! testA overwritten!
قيمة ال myFunctionScope
يتم الاحتفاظ بها بشكل منفصل في كل وظيفة.قيمة ال myGlobal
عندما يتم تحديث كلتا الوظيفتين testB
قم بتغطيته.
أثمر
أحدث let
البديل الحديث للكلمة الرئيسية نعم var
.يمكنك في كثير من الأحيان استخدام ملفات let
في كل الأماكن التي كتبتها من قبل var
. ومع ذلك ، هناك بعض الاختلافات المهمة التي يجب ملاحظتها.
الأكثر أهمية let
الوظيفة هي نطاقها. نطاق المتغير هو كتلة واحدة من التعليمات البرمجية ، وليس الوظيفة بأكملها. في JavaScript ، كتلة التعليمات البرمجية هي جزء من التعليمات البرمجية محاطة بأقواس.كل let
لا يمكن الوصول إلى المتغيرات إلا عن طريق الكود داخل الكتلة الخاصة بهم.
function letTest(x) let demo = "hello world"; if (x > 10) let y = 9000; demo = "foobar"; console.log(demo); // "foobar" console.log(y); // ERROR
في هذا المثال، if
يقوم البيان بإنشاء كتلة تعليمات برمجية جديدة.ترث الكتلة نطاق الكتلة الأصل الخاصة بها ، لذلك demo
المتغيرات لا تزال متاحة.هذه y
نطاق المتغير if
بيان.حاول زيارة y
الخارج if
تسببت الكتلة في خطأ متغير غير محدد.
مثل var
، باستخدام المتغير الذي تم إنشاؤه let
يمكنك تغيير قيمته في أي وقت.ومع ذلك ، لا يمكن إعادة الإعلان عن استخدامها let
سيؤدي استخدام نفس الاسم مرتين في نفس الكتلة إلى حدوث خطأ.
let demo = "test"; demo = "example"; let demo = "test"; // ERROR
الاستثناء هو عند إعادة تعريف المتغيرات في النطاقات المتداخلة.تعني قاعدة النطاق على مستوى الكتلة أن هذا مسموح به – ينتهي بك الأمر مع اثنين متفرق المتغيرات التي لها نفس المعرف.
let foo = "bar"; if (true) let foo = "foobar"; console.log(foo); console.log(foo);
المثال أعلاه سوف ينبعث foobar bar
.هذه foo
يتم إعادة تعريف المتغير في if
منع دون التأثير foo
متغيرات النطاق الخارجي. أنت تفقد حقًا القدرة على الإشارة إلى المتغيرات الخارجية من الكتل الداخلية.
مقدار ثابت
هذه const
الكلمات الرئيسية هي ميزة جديدة أخرى لـ ES6.انها مثل let
. const
هو اختصار لكلمة “ثابت” ، يستخدم للإشارة إلى قيمة ثابتة لا تتغير أبدًا.حاول تحديث قيمة ملف const
المتغير دائما يسبب خطأ.
const foo = "bar"; const foo = "foobar"; // ERROR
لذلك ، يجب عليك دائمًا التهيئة const
المتغيرات مع القيم.لا يجوز تحديد واحد const
وحدد قيمته فيما بعد.
let demoLet; // OK var demoVar; // OK const demoConst; // ERROR const demoConst = "value"; // OK
من الناحية الفنية const
لم يتم تعريف الثابت.إنه في الواقع يخلق ملف مرجع ثابت القيمة. تأثير هذا هو أنه لا يزال بإمكانك تحديث خصائص الكائن المعين للكائن. const
.فقط إذا كنت تستخدم ملفات const
إنه على الجانب الأيسر من الوظيفة.
ما نوع المتغير الذي يجب علي استخدامه؟
يجب عليك استخدام ملفات let
المتغيرات الأكثر شيوعًا في كود JavaScript. يساعد النطاق على مستوى الكتلة وإعادة الإعلان المحظورة على اكتشاف الأخطاء وتجنب عمليات الكتابة غير المقصودة.
استعمال let
أوقف المتغيرات من “التسرب” ، حيث يمكن الوصول إلى المتغيرات في نطاق غير مخصص لاستخدامه. مثال كلاسيكي هو مكرر في حلقة:
for (var i = 0; i <= 10; i++) // do something console.log(i);
سيؤدي هذا إلى 10
تم إطلاق سراحه إلى وحدة التحكم.استعمال let
بدلا من ذلك سوف تصدر undefined
مثل i
المتغير لن يكون متاحًا في if
. نطاق، مجموعة. في هذه الحالة ، عادة ما تكون هذه هي النتيجة المرجوة.
الحلقة تظهر الخطر أيضًا var
إعادة التخصيص:
for (var i = 0; i <= 10; i++) setTimeout(() => console.log(i), 1000);
للوهلة الأولى ، يبدو هذا الرمز مثله ينبغي انقل الأرقام من 1 إلى 10. فى المقابل، 10
سيتم تسجيلها عشر مرات. setTimeout()
غير متزامن i
المعجم في رد الاتصال مرتبط بالنطاق.مثل var i
استخدم في الحلقة i
يحصل المتغير على قيمة جديدة في كل تكرار.عند تشغيل رد نداء المؤقت ، اكتملت جميع التكرارات العشر ، و i
سوف نقرر دائمًا القيمة النهائية – 10
، في ظل هذه الظروف.
استعمال let i
لكن نعلن أ الجديد المتغير يسمى i
لكل تكرار للحلقة. سيحتفظ كل متغير بقيمته الخاصة بعد اكتمال التكرار ، مما يؤدي إلى إخراج السجل المتوقع.
عندما لا تستخدم Let
في بعض الحالات ، يجب ألا تستخدم let
.يجب عليك استخدام ملفات const
عندما تنشئ متغيرًا ، فأنت تعلم أنه لن يتغير أبدًا. إذا حاولت عن غير قصد إعادة توزيع قيمته ، فستتمكن البرامج المجمعة وأدوات التحليل الثابت من تنبيهك.
من الجيد عادةً الحفاظ على المتغيرات ثابتة قدر الإمكان. يساعد هذا في التخلص من الأخطاء الناتجة عن الكتابة العرضية.استعمال const
من خلال توضيح أن القيمة لن تتغير ، يمكن أن تساعدك أيضًا في الإشارة إلى نواياك في قاعدة الشفرة.
ميزات ES6 ، مثل let
مع const
يتم دعمه الآن بشكل عام بواسطة المتصفحات الحديثة. بعض المتصفحات القديمة التي لا تحتوي على دعم ES6 الكامل (خاصة Internet Explorer 11) توفرها أيضًا. ما لم تكن تستهدف منصات قديمة ، فلا داعي للقلق بشأن ما إذا كانت ستكون متاحة أم لا.استعمال let
مع const
اجعل التعليمات البرمجية أكثر نظافة وتقليل مخاطر إخفاء الأخطاء.