أساسيات JavaScript للمبتدئين

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

أنواع البيانات البدائية

تتوفر أنواع البيانات البدائية التالية في JavaScript: number ، boolean ، string ، undefined ، null . وتجدر الإشارة على الفور إلى أنه عند العمل مع أنواع البيانات البدائية ، على سبيل المثال ، مع سلسلة حرفية ، فإننا ، حتى بدون إجراء تحويل صريح ، سنتمكن من الوصول إلى أساليبها وخصائصها. النقطة هنا هي أنه عند محاولة إجراء مثل هذه العمليات ، يتم تجهيز الحرف تلقائيًا بغلاف الكائن المناسب.

umbers أرقام

تحتوي جافا سكريبت على نوع واحد فقط من الأرقام - إنها أرقام فاصلة عائمة مزدوجة الدقة. هذا يؤدي إلى حقيقة أن نتائج حساب بعض التعبيرات غير صحيحة حسابيا. قد تعرف بالفعل أنه في JS قيمة التعبير 0.1 + 0.2 ليست 0.3 . في نفس الوقت ، عند العمل مع الأعداد الصحيحة لم يتم ملاحظة مثل هذه المشاكل ، أي 1 + 2 === 3 .

جافا سكريبت تحتوي على كائن Number ، وهو عبارة عن مجمع كائن للقيم الرقمية. يمكن إنشاء كائنات من النوع Number إما باستخدام أمر من النموذج var a = new Number(10) ، أو يمكنك الاعتماد على السلوك التلقائي للنظام الموصوف أعلاه. هذا ، على وجه الخصوص ، يسمح لك باستدعاء الطرق المخزنة في Number.prototype كما هو مطبق على Number.prototype الرقمية:

 (123).toString();  //"123" (1.23).toFixed(1); //"1.2" 

هناك وظائف عامة مصممة لتحويل قيم الأنواع الأخرى إلى نوع رقمي. هذا هو parseInt() و parseFloat() Number() ، التي تعمل في هذه الحالة كدالة عادية تؤدي إلى تحويل النوع:

 parseInt("1")       //1 parseInt("text")    //NaN parseFloat("1.234") //1.234 Number("1")         //1 Number("1.234")     //1.234 

إذا تم الحصول على شيء ما أثناء العملية باستخدام أرقام ليس رقمًا (خلال بعض الحسابات أو عند محاولة تحويل شيء ما إلى رقم) ، فلن تُلقي JavaScript خطأً ، ولكنها ستقدم نتيجة عملية مثل القيمة NaN (Not-a-Number ، ليس رقم). للتحقق مما إذا كانت قيمة معينة NaN ، يمكنك استخدام الدالة isNaN() .

تعمل العمليات الحسابية لـ JS بطريقة مألوفة تمامًا ، ولكن عليك الانتباه إلى حقيقة أن عامل التشغيل + يمكنه إجراء إضافة أرقام وسلسلة من السلاسل.

 1 + 1      //2 "1" + "1"  //"11" 1 + "1"    //"11" 

tr سلاسل

سلاسل JavaScript هي سلاسل أحرف Unicode. يتم إنشاء حرفية السلسلة من خلال إحاطة النص بضم علامات اقتباس مزدوجة ( "" ) أو علامات اقتباس مفردة ( '' ). كما ذكرنا من قبل ، عند العمل مع سلسلة حرفية ، يمكننا الاعتماد على غلاف الكائن المقابل ، الذي يحتوي النموذج الأولي على العديد من الطرق المفيدة ، من بينها substring() ، indexOf() ، concat() .

 "text".substring(1,3) //ex "text".indexOf('x')   //2 "text".concat(" end") //text end 

الأوتار ، مثل القيم البدائية الأخرى ، غير قابلة للتغيير. على سبيل المثال ، لا تقوم طريقة concat() بتعديل سلسلة موجودة ، ولكنها تقوم بإنشاء سلسلة جديدة.

values ​​القيم المنطقية

يتم تمثيل نوع البيانات المنطقية في JS بقيمتين - true false . يمكن للغة تحويل القيم المختلفة تلقائيًا إلى نوع بيانات منطقي. لذا ، false ، بالإضافة إلى القيمة المنطقية false ، هي القيم null ، undefined ، '' (سلسلة فارغة) ، 0 و NaN . كل شيء آخر ، بما في ذلك أي أشياء ، يمثل معاني حقيقية. في سياق العمليات المنطقية ، يتم تحويل كل ما يعتبر صحيحًا إلى true ، ويتم تحويل كل ما يعتبر خطأ إلى false . نلقي نظرة على المثال التالي. وفقًا للمبادئ المذكورة أعلاه ، سيتم تحويل السلسلة الفارغة إلى false ونتيجة لتنفيذ التعليمات البرمجية هذه ، ستصل السلسلة This is false إلى وحدة التحكم.

 let text = ''; if(text) { console.log("This is true"); } else { console.log("This is false"); } 

الأشياء

الكائنات هي هياكل ديناميكية تتكون من أزواج القيمة الرئيسية. يمكن أن تحتوي القيم على أنواع بيانات بدائية ، ويمكن أن تكون كائنات أو وظائف.

تكون الكائنات أسهل في الإنشاء باستخدام بناء الجملة الحرفي للكائن:

 let obj = { message : "A message", doSomething : function() {} } 

يمكن قراءة خصائص الكائن وإضافتها وتحريرها وحذفها في أي وقت. إليك كيفية القيام بذلك:

• خصائص القراءة: object.name, object[expression] .
• كتابة البيانات إلى الخصائص (في حالة عدم وجود الخاصية التي يتم الوصول إليها ، تتم إضافة خاصية جديدة بالمفتاح المحدد): object.name = value ، object[expression] = value object.name = value object[expression] = value .
• إزالة الخصائص: delete object.name ، delete object[expression] .

إليك بعض الأمثلة:

 let obj = {}; //    obj.message = "A message"; //    obj.message = "A new message"; //   delete object.message; //   

يتم تنفيذ الكائنات في اللغة كجداول تجزئة. يمكن إنشاء جدول تجزئة بسيط باستخدام الأمر Object.create(null) :

 let french = Object.create(null); french["yes"] = "oui"; french["no"]  = "non"; french["yes"];//"oui" 

إذا كان الكائن بحاجة إلى أن يصبح غير قابل للتغيير ، يمكنك استخدام الأمر Object.freeze() .

للتكرار عبر جميع خصائص الكائن ، يمكنك استخدام الأمر Object.keys() :

 function logProperty(name){ console.log(name); //  console.log(obj[name]); //   } Object.keys(obj).forEach(logProperty); 

مقارنة قيم الأنواع والكائنات البدائية

في العمل العملي مع القيم البدائية ، يمكنك ، كما سبق ذكره ، إدراكها على أنها كائنات لها خصائص وأساليب ، على الرغم من أنها ليست كائنات. القيم البدائية غير قابلة للتغيير ، يمكن أن يتغير الهيكل الداخلي للأشياء.

المتغيرات

في JavaScript ، يمكن الإعلان عن المتغيرات باستخدام الكلمات الأساسية var و let و const .

باستخدام الكلمة var ، يمكنك تعريف متغير ، وإذا لزم الأمر ، قم بتهيئته بقيمة معينة. إذا لم تتم تهيئة المتغير ، فإن قيمته غير undefined . المتغيرات المعلنة باستخدام الكلمة الأساسية var لها نطاق وظيفي.

الكلمة الرئيسية let مشابهة جدًا لـ var ، والفرق هو أن المتغيرات التي تم تعريفها باستخدام الكلمة الرئيسية let لها نطاق حظر.

المتغيرات المعلنة باستخدام الكلمة الأساسية const لها أيضًا نطاق كتلة ، والتي ، نظرًا لحقيقة أن قيم هذه المتغيرات لا يمكن تغييرها ، ستسمى بشكل أكثر "ثوابت". يمكن مقارنة الكلمة الأساسية const ، التي "تجمد" قيمة متغير معلن باستخدامه ، بطريقة Object.freeze() ، التي "تجمد" الكائنات.

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

المصفوفات

يتم تنفيذ المصفوفات في JavaScript باستخدام الكائنات. ونتيجة لذلك ، عند الحديث عن المصفوفات ، فإننا في الواقع نناقش أشياء تشبه المصفوفات. يمكنك العمل مع عناصر المصفوفة باستخدام مؤشراتهم. يتم تحويل المؤشرات الرقمية إلى سلاسل وتستخدم كأسماء للوصول إلى قيم عناصر الصفيف. على سبيل المثال ، يشبه بناء النموذج arr[1] بنية النموذج arr['1'] ، وسيتيح كلاهما الوصول إلى نفس القيمة: arr[1] === arr['1'] . وفقًا لما ورد أعلاه ، يتم تمثيل صفيف بسيط معلن بواسطة الأمر let arr = ['A', 'B', 'C'] ككائن من النموذج التالي:

 { '0': 'A', '1': 'B', '2': 'C' } 

تؤدي إزالة عناصر الصفيف باستخدام أمر delete ترك ثقوب فيه. لتجنب هذه المشكلة ، يمكنك استخدام الأمر splice() ، ولكنه يعمل ببطء ، لأنه بعد حذف عنصر ما ، فإنه ينقل العناصر المتبقية من الصفيف ، ويحولها بالفعل إلى بداية الصفيف ، إلى اليسار.

 let arr = ['A', 'B', 'C']; delete arr[1]; console.log(arr); // ['A', empty, 'C'] console.log(arr.length); // 3 

تسهل طرق الصفيف تنفيذ هياكل البيانات مثل المكدسات وقوائم الانتظار:

 //  let stack = []; stack.push(1);           // [1] stack.push(2);           // [1, 2] let last = stack.pop();  // [1] console.log(last);       // 2 //  let queue = []; queue.push(1);           // [1] queue.push(2);           // [1, 2] let first = queue.shift();//[2] console.log(first);      // 1 

وظائف

وظائف JavaScript هي كائنات. يمكن تعيين الوظائف للمتغيرات ، وتخزينها في كائنات أو صفائف ، وتمريرها كوسيطات إلى وظائف أخرى ، وإعادتها من وظائف أخرى.

هناك ثلاث طرق لإعلان الوظائف:

• إعلان الوظيفة الكلاسيكية (إعلان الوظيفة أو بيان الوظيفة).
• استخدام التعبيرات الوظيفية (التعبير الوظيفي) ، والتي تسمى أيضًا بالحرفات الوظيفية (الوظيفة الحرفية).
• استخدام صيغة دالات الأسهم (وظيفة السهم).

declaration إعلان الوظيفة الكلاسيكية

مع هذا النهج لإعلان الوظائف ، تنطبق القواعد التالية:

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

إليك ما يبدو عليه إعلان الوظيفة الكلاسيكية:

 function doSomething(){} 

ions التعبيرات الوظيفية

عند استخدام التعبيرات الوظيفية ، يجب مراعاة ما يلي:

• لم تعد الكلمة الأساسية function هي الكلمة الأولى في سطر إعلان الوظيفة.
• اسم الوظيفة اختياري. من الممكن استخدام كل من التعبيرات الوظيفية المجهولة والمسمى.
• يجب أن تتبع أوامر استدعاء مثل هذه الوظائف الأوامر لإعلانها.
• يمكن تشغيل هذه الوظيفة فورًا بعد الإعلان باستخدام بناء جملة IIFE (التعبير عن وظيفة تم استدعاؤها فورًا - تسمى على الفور تعبير الوظيفة).

يبدو التعبير الوظيفي كما يلي:

 let doSomething = function() {} 

functions وظائف السهم

في الواقع ، يمكن اعتبار وظائف السهم "سكر نحوي" لإنشاء تعبيرات وظيفية مجهولة. وتجدر الإشارة إلى أن هذه الوظائف ليس لها كياناتها الخاصة this arguments . يبدو إعلان دالة السهم كما يلي:

 let doSomething = () = > {}; 

to طرق استدعاء الوظائف

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

استدعاء دالة عادية

 doSomething(arguments) 

استدعاء دالة في شكل طريقة كائن

 theObject.doSomething(arguments) theObject["doSomething"](arguments) 

استدعاء دالة منشئ

 new doSomething(arguments) 

استدعاء دالة باستخدام طريقة ()

 doSomething.apply(theObject, [arguments]) doSomething.call(theObject, arguments) 

استدعاء دالة باستخدام طريقة bind ()

 let doSomethingWithObject = doSomething.bind(theObject); doSomethingWithObject(); 

يمكن استدعاء الوظائف باستخدام وسيطات أكثر أو أقل من عدد المعلمات التي تم تحديدها عندما تم الإعلان عنها. أثناء عمل الوظيفة ، سيتم تجاهل الوسيطات "الإضافية" ببساطة (على الرغم من أن الوظيفة ستتمكن من الوصول إليها) ، فإن المعلمات المفقودة ستحصل على القيمة undefined .

للوظائف معلمتان زائفتان: this arguments .

word الكلمات الرئيسية هذا

تمثل this سياق دالة. تعتمد القيمة التي تشير إليها على كيفية استدعاء الوظيفة. في ما يلي معاني this الكلمة الرئيسية اعتمادًا على كيفية استدعاء الوظيفة (يتم وصفها أعلاه مع أمثلة التعليمات البرمجية ، والتي يتم استخدام تركيباتها هنا):

• استدعاء الوظيفة المعتاد هو window / undefined .
• استدعاء دالة في شكل أسلوب كائن هو theObject .
• استدعاء دالة في شكل مُنشئ كائن جديد.
• استدعاء دالة باستخدام طريقة apply() - theObject .
• استدعاء دالة باستخدام طريقة bind() - theObject .

arg وسيطات الكلمات الرئيسية

الكلمة الأساسية arguments هي معلمة زائفة تتيح الوصول إلى جميع الوسائط المستخدمة لاستدعاء الوظيفة. يبدو صفيفًا ، ولكن ليس صفيفًا. على وجه الخصوص ، ليس لديها طرق صفيف.

 function reduceToSum(total, value){ return total + value; } function sum(){ let args = Array.prototype.slice.call(arguments); return args.reduce(reduceToSum, 0); } sum(1,2,3); 

يعد البديل الجديد للمعلمات المتبقية بديلاً arguments الأساسية. في المثال التالي ، args عبارة عن مصفوفة تحتوي على كل شيء تم تمريره إلى الدالة عند استدعاؤها.

 function sum(...args){ return args.reduce(reduceToSum, 0); } 

return عودة المشغل

دالة لا تحتوي على return إرجاع سيتم إرجاع undefined . باستخدام الكلمة الأساسية المرتجعة ، انتبه إلى كيفية عمل آلية الإدراج الفاصلة المنقوطة التلقائية. على سبيل المثال ، لن تُرجع الدالة التالية كائنًا فارغًا ، ولكن قيمة undefined :

 function getObject(){ return { } } getObject() 

لتجنب مشكلة مماثلة ، يجب وضع قوس الفتح المجعد على نفس السطر مثل return :

 function getObject(){ return { } } 

الكتابة الديناميكية

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

 function log(value){ console.log(value); } log(1); log("text"); log({message : "text"}); 

لمعرفة نوع البيانات المخزنة في متغير ، يمكنك استخدام عامل typeof() :

 let n = 1; typeof(n);   //number let s = "text"; typeof(s);   //string let fn = function() {}; typeof(fn);  //function 

نموذج تنفيذ واحد الخيوط

وقت تشغيل JavaScript هو مؤشر ترابط واحد. يتم التعبير عن هذا ، على وجه الخصوص ، في استحالة تنفيذ وظيفتين في وقت واحد (إذا كنت لا تأخذ في الاعتبار إمكانات تنفيذ التعليمات البرمجية غير المتزامنة ، والتي لا نتطرق إليها هنا). يحتوي وقت التشغيل على ما يسمى بقائمة انتظار الأحداث ، والتي تقوم بتخزين قائمة المهام التي تحتاج إلى معالجة. ونتيجة لذلك ، فإن مشكلة أقفال الموارد المتبادلة ليست نموذجية لنظام تنفيذ JS أحادي الترابط ، وبالتالي ، ليست هناك حاجة إلى آلية القفل هنا. ومع ذلك ، يجب تنفيذ التعليمات البرمجية التي تقع في قائمة انتظار الأحداث بسرعة. إذا كان هناك الكثير من العمل الشاق ، في تطبيق المتصفح ، فإن الخيط الرئيسي ، لن تستجيب صفحة التطبيق لإجراءات المستخدم وسيعرض المتصفح إغلاق هذه الصفحة.

معالجة الاستثناء

جافا سكريبت لديها آلية للتعامل مع الاستثناءات. يعمل وفقًا لمبدأ معتاد تمامًا لمثل هذه الآليات: يتم تنفيذ الشفرة التي قد تسبب خطأ باستخدام بنية try/catch . الكود نفسه موجود في كتلة try ، وتتم معالجة الأخطاء في catch .

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

على سبيل المثال ، في جزء التعليمات البرمجية التالي ، ستفشل محاولة تغيير كائن "مجمّد" ، ولكن لن يتم طرح استثناء.

 let obj = Object.freeze({}); obj.message = "text"; 

تظهر بعض أخطاء JS "الصامتة" في وضع صارم ؛ يمكنك تمكينها باستخدام البناء "use strict"; .

نظام النموذج الأولي

يستند أساس آليات JS مثل وظائف المُنشئ ، الأمر Object.create() ، الكلمة الأساسية class ، إلى نظام النموذج الأولي.
خذ بعين الاعتبار المثال التالي:

 let service = { doSomething : function() {} } let specializedService = Object.create(service); console.log(specializedService.__proto__ === service); //true 

هنا ، لإنشاء كائن خدمة specializedService ، كان النموذج الأولي هو إنشاء كائن service ، تم استخدام الأمر Object.create() . نتيجة لذلك ، اتضح أنه يمكن استدعاء طريقة doSomething() عن طريق الوصول إلى كائن خدمة specializedService . بالإضافة إلى ذلك ، هذا يعني أن خاصية __proto__ لكائن service specializedService تشير إلى كائن service .

الآن قم بإنشاء كائن مشابه باستخدام الكلمة الأساسية class :

 class Service { doSomething(){} } class SpecializedService extends Service { } let specializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype); 

ستتم إضافة الأساليب المعلنة في فئة Service إلى كائن Service.prototype . سيكون لمثيلات فئة Service نفس النموذج الأولي ( Service.prototype ). ستقوم كافة المثيلات بتفويض استدعاءات الأسلوب لكائن Service.prototype . نتيجة لذلك ، اتضح أن الأساليب يتم الإعلان عنها مرة واحدة فقط ، في Service.prototype ، وبعد ذلك يتم "توريثها" من قبل كافة مثيلات الفئة.

Chain سلسلة النموذج الأولي

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

حول البرمجة الوظيفية في JavaScript

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

الإغلاق هو وظيفة داخلية لديها حق الوصول إلى المتغيرات المعلنة داخل الوظيفة الأصلية ، حتى بعد تنفيذ الوظيفة الرئيسية.

دالة الترتيب الأعلى هي وظيفة يمكن أن تأخذ وظائف أخرى كوسيطة ، أو ترجع دالات ، أو تفعل كليهما.

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

الملخص

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

أعزائي القراء! ما هي ميزات جافا سكريبت التي تعتقد أن معظم المبتدئين يتسببون فيها؟