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

المتغيرات: بداية الجنون
المتغيرات عبارة عن حاويات تحتوي على قيم، حيث تقوم بتخزين البيانات أو معالجتها. أعني، لماذا لدينا ثلاث طرق لإنشائها: var، وlet، وconst؟ لماذا ؟ اضحك في ES6.
var: قالوا إن var هو مدفع فضفاض. مثل لعب لعبة الحظ. فلا تقترب منه.
let: مثالي للمتغيرات التي يمكن أن تتغير. أسهل في الإدارة.
Const: للقيم التي تظل كما هي. غير منقولة. أوه — const لا يعني أن القيمة لا يمكن أن تتغير، بل يعني فقط أنه لا يمكنك إعادة تعيينها.
ملاحظة: كان ECMAScript 2015 أو ES6 هو المراجعة الرئيسية الثانية لجافا سكريبت.
أوه، لقد قلنا وداعًا لتسلسل السلاسل، ومرحبًا بحرف القالب. باستخدام النماذج الحرفية، يمكنك الآن استخدام العلامات الخلفية وتضمين المتغيرات بسهولة باستخدام ${}. أصبحت الحياة أسهل قليلاً هنا، ولكن هل تعرف متى تستخدم علامات الاقتباس الخلفية مقابل علامات الاقتباس؟ آخر العقل بندر.

// Good old concat
const message = "Hi, "   name   ". You are "   age   " years old.";
// Template literal
const message = `Hi, ${name}! You are ${age} years old.`;

الوظائف: AKA Mr. الوظيفة هي مجموعة من البيانات التي تؤدي مهمة. يتكون من الكلمة الأساسية للوظيفة، واسم الوظيفة، والمعلمة أم لا، وبيان Js بين قوسين متعرجين.

وظيفة الترحيب () { console.log("مرحبا أيها الرفاق المناضلون؟!"); }

function greet() {
  console.log("Hello, fellow strugglers?!");
}

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

تحية ثابتة = () => { console.log("مرحبا أيها الرفاق المناضلون؟!"); }

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

الحلقات: الرقص مع اللانهائي.

الطرق العديدة للمعاناة. يمكن للحلقات تنفيذ كتلة من التعليمات البرمجية عدة مرات. إنها مفيدة، إذا كنت تريد تشغيل نفس الكود مرارًا وتكرارًا، وفي كل مرة بقيمة مختلفة. وهم كثيرون:
1. بينما تستمر الحلقة:
في التكرار طالما أن الشرط صحيح. شر. وأنا لا أتحدث عن ابن عمه، افعل ذلك. 2. للحلقة:
جيد للحلقة يا رجل. الحلقة الموثوقة. مألوفة جدا. آمنة جدًا ومليئة بإمكانيات رمي ​​حلقات لا نهائية عندما تنسى زيادة متغير. 3. forEach:
الذي يشبه ابن عم الحلقة الأكثر روعة والأكثر محببة. لا يحتاج إلى عدادات، ولا يأخذني إلى ما لا نهاية. يا راجل. 4. & 5.
for..in and for..of: أحدهما رائع للتكرار فوق الكائنات، والآخر مخصص للتكرار فوق المصفوفات. أستمر في الخلط بينهم وأتعلم من خلال الألم. مازلت أتعلم.
//للحلقة من أجل (دع i = 0؛ i console.log(num));

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

المصفوفات: القائمة التي تستمر في البحث

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

let ShoppingList = ["apples"، "bananas"، "chocolate"]; ShoppingList.push("آيس كريم"); console.log(shoppingList); // ['تفاح'، 'موز'، 'شوكولاتة'، 'آيس كريم']

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']

يقوم أسلوب التصفية () بإنشاء مصفوفة جديدة مليئة بالعناصر التي تجتاز الاختبار الذي توفره الوظيفة.

تقوم طريقة find () بإرجاع قيمة العنصر الأول الذي يجتاز الاختبار. طرق المصفوفات كثيرة جدًا، وأحتاج إلى توثيق لكل منها؟، أعني أن هناك الطول، واللصق، والشريحة، والانضمام، والبوب، والدفع، والإلغاء، والتحويل، والخريطة..، فلنتوقف هنا.


دع الأرقام = [1، 2، 3، 4، 5]؛ دع EvenNumbers = أرقام. مرشح (num => num % 2 === 0); console.log(evenNumbers); // [2، ​​4]

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

الكائنات: المصفوفات المربكة

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

//بدون طريقة دع عربة التسوق = { التفاح: 3، الموز: 2، الشوكولاتة: 1 }; // مع الطريقة دع العربة = { العناصر: ["تفاحة"، "موز"]، إضافة عنصر (عنصر) { this.items.push(item); } }; cart.addItem("الشوكولاته"); console.log(cart.items); // ["تفاحة"، "موز"، "شوكولاتة"]

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

تلاعب DOM: حيث بدأت النضالات الحقيقية

بمجرد أن شعرت بالثقة تجاه المصفوفات والكائنات، فكرت: "حان الوقت للتعامل مع DOM! أنا عمليا مطور ويب الآن! أنت لا تعرف شيئًا، هذا ما قاله إيغريت في عبارته الشهيرة. يجب أن يكون هذا سهلاً، قلت مرة أخرى. مجرد الاستيلاء على عنصر وتغييره. إذا كان معرفًا، فإن getElementbyId موجود من أجلي. هناك أيضًا فئة getElementsbyClassName أو queryselector والتي تحتوي على كل أخيها.
ثم هناك عمل addEventListener بأكمله. بالتأكيد ينجح الأمر، لكن في بعض الأحيان، يبدو أن الأحداث تنطلق كما لو أن لها عقلًا خاصًا بها.
ثم حاولت إنشاء عربة التسوق. استغرق الأمر مني أيامًا والكثير من إشارات SOS لزملائي المتعلمين. أنا هنا أقوم بإلحاق الطفل، وإزالة الطفل، وإنشاء العناصر، والتقاط العناصر، وتحديد السمات، والتصميم، واستدعاء الوظائف على الوظائف.
ثم تمت إضافة قاعدة بيانات وهمية بجرأة؛ أنا والتلاعب بالمصفوفة مرة أخرى. أنا أتمكن من الوصول، أنا أدفع، أنا أجد، أنا متعب (استيقظ مرة أخرى).

الواردات والصادرات: مشاركة الجنون بجرأة؟؟

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

انسخ الكود //module.js وظيفة التصدير تحية () { console.log("مرحبًا من الوحدة!"); } // main.js استيراد {تحية} من './module.js'؛ تحية();

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

الآن أنا على وشك البدء في البرمجة كائنية التوجه (OOP) يبدو الأمر خياليًا، لكن دعني أستمتع بعطلة نهاية الأسبوع أولاً قبل أن أضيع مرة أخرى.

شكرا لبقائك حتى النهاية. ولا يزال الهدف أفضل بنسبة 1% كل يوم. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode