في معظم الأحيان، يحتاج تطبيق JavaScript إلى التعامل مع المعلومات. فيما يلي مثالان:
متجر عبر الإنترنت - قد تتضمن المعلومات البضائع المباعة وعربة التسوق.
تطبيق دردشة – قد تتضمن المعلومات المستخدمين والرسائل وغير ذلك الكثير.
يتم استخدام المتغيرات لتخزين هذه المعلومات.
المتغير هو "مخزن مسمى" للبيانات. يمكننا استخدام المتغيرات لتخزين الأشياء الجيدة والزوار والبيانات الأخرى.
لإنشاء متغير في JavaScript، استخدم الكلمة الأساسية let .
تقوم العبارة أدناه بإنشاء (بمعنى آخر: يعلن ) متغيرًا باسم "رسالة":
دع الرسالة؛
الآن، يمكننا وضع بعض البيانات فيه باستخدام عامل المهمة = :
دع الرسالة؛ رسالة = 'مرحبا'؛ // قم بتخزين السلسلة "Hello" في المتغير المسمى message
يتم الآن حفظ السلسلة في منطقة الذاكرة المرتبطة بالمتغير. يمكننا الوصول إليه باستخدام اسم المتغير:
دع الرسالة؛ الرسالة = 'مرحبا!'; تنبيه (رسالة)؛ // يعرض المحتوى المتغير
لكي نكون مختصرين، يمكننا دمج إعلان المتغير والتخصيص في سطر واحد:
دع الرسالة = 'مرحبًا!'; // تحديد المتغير وتعيين القيمة تنبيه (رسالة)؛ // مرحبًا!
يمكننا أيضًا الإعلان عن متغيرات متعددة في سطر واحد:
السماح للمستخدم = 'جون'، العمر = 25، الرسالة = 'مرحبًا'؛
قد يبدو ذلك أقصر، لكننا لا ننصح به. من أجل سهولة القراءة، يرجى استخدام سطر واحد لكل متغير.
المتغير متعدد الأسطر أطول قليلاً، ولكنه أسهل في القراءة:
السماح للمستخدم = 'جون'؛ دع السن = 25؛ دع الرسالة = 'مرحبًا'؛
يقوم بعض الأشخاص أيضًا بتعريف متغيرات متعددة في هذا النمط متعدد الأسطر:
السماح للمستخدم = 'جون'، العمر = 25، رسالة = 'مرحبا'؛
…أو حتى بأسلوب “الفاصلة أولاً”:
اسمح للمستخدم = "جون" العمر = 25 , message = 'مرحبا';
من الناحية الفنية، كل هذه المتغيرات تفعل الشيء نفسه. لذا، فهي مسألة ذوق شخصي وجماليات.
var بدلا من let
في النصوص البرمجية القديمة، قد تجد أيضًا كلمة رئيسية أخرى: var بدلاً من let :
فار الرسالة = 'مرحبا';
الكلمة الأساسية var هي نفسها تقريبًا let . كما أنه يعلن عن متغير ولكن بطريقة "المدرسة القديمة" مختلفة قليلاً.
هناك اختلافات طفيفة بين let و var ، لكنها لا تهمنا بعد. سنغطيها بالتفصيل في الفصل "var" القديم.
يمكننا أن نفهم بسهولة مفهوم "المتغير" إذا تخيلناه على أنه "صندوق" للبيانات، مع ملصق باسم فريد عليه.
على سبيل المثال، يمكن تخيل message المتغيرة كمربع يسمى "message" بالقيمة "Hello!" فيه:
يمكننا وضع أي قيمة في الصندوق.
يمكننا أيضًا تغييره عدة مرات كما نريد:
دع الرسالة؛ الرسالة = 'مرحبا!'; message = 'العالم!'; // تغيرت القيمة تنبيه (رسالة)؛
عند تغيير القيمة، تتم إزالة البيانات القديمة من المتغير:
يمكننا أيضًا الإعلان عن متغيرين ونسخ البيانات من أحدهما إلى الآخر.
Let hello = 'مرحبًا بالعالم!'; دع الرسالة؛ // انسخ "Hello World" من مرحبًا إلى الرسالة رسالة = مرحبا؛ // الآن يحمل متغيران نفس البيانات تنبيه(مرحبا); // مرحبا بالعالم! تنبيه (رسالة)؛ // مرحبا بالعالم!
يؤدي الإعلان مرتين إلى حدوث خطأ
يجب الإعلان عن المتغير مرة واحدة فقط.
يعتبر التصريح المتكرر لنفس المتغير خطأ:
دع الرسالة = "هذا"؛ // تكرار "let" يؤدي إلى خطأ دع الرسالة = "هذا"؛ // SyntaxError: تم الإعلان عن "الرسالة" بالفعل
لذلك، يجب أن نعلن عن المتغير مرة واحدة ثم نشير إليه بدون let .
اللغات الوظيفية
ومن المثير للاهتمام أن نلاحظ وجود ما يسمى لغات البرمجة الوظيفية البحتة، مثل هاسكل، التي تمنع تغيير القيم المتغيرة.
في مثل هذه اللغات، بمجرد تخزين القيمة "في الصندوق"، فإنها تبقى هناك إلى الأبد. إذا أردنا تخزين شيء آخر، فإن اللغة تجبرنا على إنشاء مربع جديد (الإعلان عن متغير جديد). لا يمكننا إعادة استخدام القديم.
على الرغم من أن الأمر قد يبدو غريبًا بعض الشيء للوهلة الأولى، إلا أن هذه اللغات قادرة تمامًا على التطور الجاد. والأكثر من ذلك، هناك مجالات مثل الحسابات المتوازية حيث يمنح هذا القيد فوائد معينة.
هناك نوعان من القيود على أسماء المتغيرات في JavaScript:
يجب أن يحتوي الاسم على أحرف أو أرقام أو الرمزين $ و _ فقط.
يجب ألا يكون الحرف الأول رقمًا.
أمثلة على الأسماء الصالحة:
اسمحوا اسم المستخدم؛ دعونا اختبار123؛
عندما يحتوي الاسم على كلمات متعددة، يتم استخدام CamelCase بشكل شائع. أي: الكلمات تأتي واحدة تلو الأخرى، كل كلمة باستثناء الكلمة الأولى التي تبدأ بحرف كبير: myVeryLongName .
الأمر المثير للاهتمام هو أنه يمكن أيضًا استخدام علامة الدولار '$' والشرطة السفلية '_' في الأسماء. وهي رموز عادية، مثل الحروف تمامًا، دون أي معنى خاص.
هذه الأسماء صالحة:
دع $ = 1؛ // أعلن عن متغير بالاسم "$" دع _ = 2؛ // والآن متغير بالاسم "_" تنبيه($ + _); // 3
أمثلة على أسماء المتغيرات غير الصحيحة:
دع 1 أ؛ // لا يمكن أن يبدأ برقم دع اسمي؛ // الواصلات '-' غير مسموح بها في الاسم
القضية مهمة
المتغيرات المسماة apple و APPLE هما متغيران مختلفان.
يُسمح باستخدام الحروف غير اللاتينية، لكن لا يُنصح باستخدامها
من الممكن استخدام أي لغة، بما في ذلك الحروف السيريلية والشعارات الصينية وما إلى ذلك، مثل هذا:
دع имя = '...'; دع 我 = '...';
من الناحية الفنية، لا يوجد خطأ هنا. مثل هذه الأسماء مسموح بها، ولكن هناك اتفاقية دولية لاستخدام اللغة الإنجليزية في أسماء المتغيرات. حتى لو كنا نكتب نصًا صغيرًا، فقد يكون له حياة طويلة في المستقبل. قد يحتاج الأشخاص من بلدان أخرى إلى قراءتها في وقت ما.
الأسماء المحجوزة
توجد قائمة بالكلمات المحجوزة، والتي لا يمكن استخدامها كأسماء متغيرة لأنها تستخدم من قبل اللغة نفسها.
على سبيل المثال: let و class و return و function محجوزة.
الكود أدناه يعطي خطأ في بناء الجملة:
واسمحوا = 5؛ // لا يمكن تسمية المتغير "let"، خطأ! دع العودة = 5؛ // أيضًا لا يمكن تسميته بـ "العودة"، خطأ!
مهمة دون use strict
عادة، نحتاج إلى تحديد متغير قبل استخدامه. لكن في العصور القديمة، كان من الممكن تقنيًا إنشاء متغير بمجرد تعيين القيمة دون استخدام let . لا يزال هذا يعمل حتى الآن إذا لم نستخدم use strict في البرامج النصية لدينا للحفاظ على التوافق مع البرامج النصية القديمة.
// ملاحظة: لا يوجد "استخدام صارم" في هذا المثال الأعداد = 5؛ // يتم إنشاء المتغير "num" إذا لم يكن موجودًا تنبيه (رقم)؛ // 5
هذه ممارسة سيئة وقد تتسبب في حدوث خطأ في الوضع الصارم:
"استخدام صارم"؛ الأعداد = 5؛ // خطأ: لم يتم تعريف الرقم
للإعلان عن متغير ثابت (غير متغير)، استخدم const بدلاً من let :
const myBirthday = '18.04.1982';
المتغيرات المعلنة باستخدام const تسمى "الثوابت". لا يمكن إعادة تعيينهم. قد تؤدي محاولة القيام بذلك إلى حدوث خطأ:
const myBirthday = '18.04.1982'; عيد ميلادي = '01.01.2001'; // خطأ، لا يمكن إعادة تعيين الثابت!
عندما يتأكد المبرمج من أن المتغير لن يتغير أبدًا، فيمكنه الإعلان عن ذلك باستخدام const لضمان هذه الحقيقة وإبلاغها للجميع.
هناك ممارسة واسعة النطاق لاستخدام الثوابت كأسماء مستعارة للقيم التي يصعب تذكرها والمعروفة قبل التنفيذ.
تتم تسمية هذه الثوابت باستخدام الأحرف الكبيرة والشرطات السفلية.
على سبيل المثال، لنقم بإنشاء ثوابت للألوان بتنسيق يسمى "الويب" (السداسي العشري):
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...عندما نحتاج إلى اختيار لون دع اللون = COLOR_ORANGE؛ تنبيه(لون); // #FF7F00
فوائد:
COLOR_ORANGE أسهل بكثير في التذكر من "#FF7F00" .
من الأسهل كثيرًا أن تخطئ في كتابة "#FF7F00" بدلاً من COLOR_ORANGE .
عند قراءة الكود، يكون COLOR_ORANGE أكثر وضوحًا من #FF7F00 .
متى يجب أن نستخدم الأحرف الكبيرة للثابت ومتى يجب أن نطلق عليه اسمًا عاديًا؟ دعونا نجعل ذلك واضحا.
كونك "ثابتًا" يعني فقط أن قيمة المتغير لا تتغير أبدًا. لكن بعض الثوابت تكون معروفة قبل التنفيذ (مثل القيمة السداسية العشرية للون الأحمر) ويتم حساب بعض الثوابت في وقت التشغيل، أثناء التنفيذ، ولكنها لا تتغير بعد تعيينها الأولي.
على سبيل المثال:
const pageLoadTime = /* الوقت الذي تستغرقه صفحة الويب للتحميل */;
قيمة pageLoadTime غير معروفة قبل تحميل الصفحة، لذلك يتم تسميتها بشكل طبيعي. ولكنها تظل ثابتة لأنها لا تتغير بعد التكليف.
بمعنى آخر، يتم استخدام الثوابت ذات الأسماء الكبيرة فقط كأسماء مستعارة للقيم "المضمنة".
عند الحديث عن المتغيرات، هناك شيء آخر مهم للغاية.
يجب أن يكون لاسم المتغير معنى نظيف وواضح، يصف البيانات التي يخزنها.
تعد تسمية المتغيرات من أهم المهارات وأكثرها تعقيدًا في البرمجة. يمكن أن تكشف نظرة سريعة على أسماء المتغيرات الكود الذي كتبه المبتدئ مقابل المطور ذي الخبرة.
في المشروع الحقيقي، يتم قضاء معظم الوقت في تعديل وتوسيع قاعدة التعليمات البرمجية الموجودة بدلاً من كتابة شيء منفصل تمامًا من البداية. عندما نعود إلى بعض التعليمات البرمجية بعد القيام بشيء آخر لفترة من الوقت، يكون من الأسهل بكثير العثور على معلومات مصنفة بشكل جيد. أو بمعنى آخر، عندما يكون للمتغيرات أسماء جيدة.
يرجى قضاء بعض الوقت في التفكير في الاسم الصحيح للمتغير قبل الإعلان عنه. القيام بذلك سوف يكافئك بسخاء.
بعض القواعد الجيدة التي يجب اتباعها هي:
استخدم أسماء يمكن قراءتها بواسطة الإنسان مثل userName أو shoppingCart .
ابتعد عن الاختصارات أو الأسماء القصيرة مثل a و b و c إلا إذا كنت تعرف ما تفعله.
اجعل الأسماء وصفية وموجزة إلى أقصى حد. ومن أمثلة الأسماء السيئة data value . مثل هذه الأسماء لا تقول شيئا. لا بأس باستخدامها إلا إذا كان سياق الكود يوضح بشكل استثنائي البيانات أو القيمة التي يشير إليها المتغير.
اتفق على الشروط داخل فريقك وفي عقلك. إذا كان زائر الموقع يسمى "مستخدم" فيجب علينا تسمية المتغيرات ذات الصلة currentUser أو newUser بدلاً من currentVisitor أو newManInTown .
يبدو بسيطا؟ في الواقع، هو كذلك، ولكن إنشاء أسماء متغيرة وصفية وموجزة في الممارسة العملية ليس كذلك. أذهب خلفها.
إعادة الاستخدام أو الإنشاء؟
والملاحظة الأخيرة. هناك بعض المبرمجين الكسالى الذين، بدلا من الإعلان عن متغيرات جديدة، يميلون إلى إعادة استخدام المتغيرات الموجودة.
ونتيجة لذلك، فإن متغيراتها تشبه الصناديق التي يرمي فيها الأشخاص أشياء مختلفة دون تغيير ملصقاتهم. ماذا يوجد داخل الصندوق الآن؟ من يعرف؟ نحن بحاجة إلى الاقتراب والتحقق.
يوفر هؤلاء المبرمجون القليل من إعلان المتغير، لكنهم يخسرون عشر مرات أكثر عند تصحيح الأخطاء.
المتغير الإضافي هو الخير وليس الشر.
تعمل أدوات تصغير ومتصفحات JavaScript الحديثة على تحسين التعليمات البرمجية بشكل جيد بما فيه الكفاية، لذلك لن تؤدي إلى حدوث مشكلات في الأداء. يمكن أن يساعد استخدام متغيرات مختلفة لقيم مختلفة المحرك على تحسين التعليمات البرمجية الخاصة بك.
يمكننا الإعلان عن المتغيرات لتخزين البيانات باستخدام الكلمات الأساسية var أو let أو const .
let - هو إعلان متغير حديث.
var - هو إعلان متغير للمدرسة القديمة. عادة لا نستخدمها على الإطلاق، لكننا سنغطي الاختلافات الدقيقة عن let في الفصل القديم "var"، فقط في حالة احتياجك إليها.
const - يشبه let ، ولكن لا يمكن تغيير قيمة المتغير.
يجب تسمية المتغيرات بطريقة تسمح لنا بفهم ما بداخلها بسهولة.
الأهمية: 2
قم بتعريف متغيرين: admin و name .
قم بتعيين القيمة "John" name .
انسخ القيمة من name إلى admin .
إظهار قيمة admin باستخدام alert (يجب إخراج "John").
في الكود أدناه، يتوافق كل سطر مع العنصر الموجود في قائمة المهام.
اسمحوا المشرف، الاسم؛ // يمكن الإعلان عن متغيرين في وقت واحد اسم = "جون"؛ المشرف = الاسم؛ تنبيه (المشرف) ؛ // "جون"
الأهمية: 3
قم بإنشاء متغير باسم كوكبنا. كيف يمكنك تسمية مثل هذا المتغير؟
قم بإنشاء متغير لتخزين اسم الزائر الحالي لموقع الويب. كيف يمكنك تسمية هذا المتغير؟
هذا بسيط:
LetourPlanetName = "Earth";
لاحظ أنه يمكننا استخدام اسم أقصر planet ، ولكن قد لا يكون من الواضح ما هو الكوكب الذي يشير إليه. من الجميل أن تكون أكثر إسهابا. على الأقل حتى يصبح المتغير NotTooLong.
دع اسم المستخدم الحالي = "جون"؛
مرة أخرى، يمكننا اختصار ذلك إلى userName إذا كنا نعرف على وجه اليقين أن المستخدم الحالي.
تعمل برامج التحرير الحديثة والإكمال التلقائي على تسهيل كتابة الأسماء المتغيرة الطويلة. لا تنقذ عليهم. الاسم الذي يحتوي على 3 كلمات جيد.
وإذا لم يكن لدى محررك ميزة الإكمال التلقائي المناسبة، فاحصل على محرر جديد.
الأهمية: 4
افحص الكود التالي:
عيد ميلاد ثابت = '18.04.1982'؛ const age = someCode(birthday);
لدينا هنا birthday ثابت للتاريخ، وكذلك ثابت age .
يتم حساب age من birthday باستخدام someCode() ، وهو ما يعني استدعاء دالة لم نشرحها بعد (سنقوم بذلك قريبًا!) ولكن التفاصيل لا تهم هنا، النقطة المهمة هي أن age يتم حسابه بطريقة ما بناءً على birthday .
هل سيكون من المناسب استخدام الأحرف الكبيرة birthday ؟ بالنسبة age ؟ أو حتى لكليهما؟
عيد ميلاد ثابت = '18.04.1982'؛ // جعل عيد الميلاد كبير؟ const AGE = someCode(BIRTHDAY); // جعل العمر كبير؟
نستخدم عمومًا الأحرف الكبيرة للثوابت "المُرمّزة بشكل ثابت". أو بمعنى آخر، عندما تكون القيمة معروفة قبل التنفيذ ومكتوبة مباشرة في الكود.
في هذا الرمز، birthday هو بالضبط مثل ذلك. لذلك يمكننا استخدام الحالة الكبيرة لذلك.
وفي المقابل، يتم تقييم age في وقت التشغيل. اليوم لدينا عمر واحد، وبعد عام سيكون لدينا عمر آخر. إنه ثابت بمعنى أنه لا يتغير من خلال تنفيذ التعليمات البرمجية. لكنه "أقل ثباتًا" قليلًا من birthday : فهو محسوب، لذا يجب أن نحتفظ به بالحروف الصغيرة.