ECMAScript ES6 +: دليل شامل لجافا سكريبت الحديثة

رمز في كل مكان في الشاشة

مرحبًا بك في عالم ECMAScript 6+ المثير (ES6 +)! لقد قطعت JavaScript ، كما نعرفها ، شوطًا طويلاً منذ إنشائها ، ويمثل ES6 + قفزة هائلة إلى الأمام من حيث الميزات وسهولة الاستخدام. في هذه المقالة ، سوف نقدم لك العصر الحديث لتطوير JavaScript من خلال استكشاف بعض التحسينات الأكثر أهمية التي تم تقديمها في ES6 +. دعونا نتعمق في هذه الرحلة الرائعة معًا!

جدول المحتويات

مقدمة: احتضان مستقبل JavaScript

أولاً ، دعنا نناقش سبب كون ES6 + مشكلة كبيرة. قبل وصولها ، كان على مطوري JavaScript الاعتماد على الحلول البديلة والقرصنة لإنجاز مهام معينة ، والتي قد تكون محبطة في بعض الأحيان. مع ES6 + ، تمت معالجة العديد من نقاط الألم هذه ، مما يجعل JavaScript أكثر كفاءة وقوة ومتعة في العمل معها.

جوهر ECMAScript

مرحبًا بك في القسم الأول من رحلتنا إلى عالم ECMAScript! في هذا القسم ، سنغطي أساسيات ECMAScript ، وكيفية مواكبة أحدث إصداراتها ، والموضوع المهم دائمًا وهو توافق المتصفح. دعنا نقفز مباشرة!

تعريف ECMAScript

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

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

مواكبة إصدارات ECMAScript

مع التطور المستمر لـ ECMAScript ، من الضروري مواكبة أحدث الإصدارات لتحقيق أقصى استفادة من الميزات والتحسينات الجديدة. يُطلق على المنظمة المسؤولة عن توحيد ECMAScript اسم ECMA International ، وتقوم بإصدار نسخة جديدة من المواصفات كل عام تقريبًا.

يمكنك متابعة موقع ECMAScript الرسمي ( https://www.ecma-international.org/publications/standards/Ecma-262.htm ) أو العديد من مدونات ومنتديات تطوير الويب من خلال التحديث المستمر ، ستتمكن من كتابة تعليمات برمجية أكثر كفاءة ونظافة وحداثة .

أحد التحديات التي يواجهها مطورو الويب هو التأكد من أن كود JavaScript الخاص بهم يعمل بسلاسة عبر متصفحات مختلفة. نظرًا لأن كل متصفح قد ينفذ ميزات ECMAScript بوتيرة مختلفة ، فمن المهم معرفة الميزات المدعومة في المتصفحات التي تستهدفها.

لحسن الحظ ، هناك بعض الموارد الرائعة المتاحة لمساعدتك في ذلك. أحد هذه الموارد هو Can I use ( https://caniuse.com/ ) ، وهو موقع ويب يوفر معلومات محدثة عن دعم المستعرض لتقنيات الويب المختلفة ، بما في ذلك ميزات ECMAScript.

على سبيل المثال ، لنفترض أنك تريد استخدام Array.prototype.includes () المقدمة في ES2016 (ES7) في التعليمات البرمجية الخاصة بك. يمكنك البحث عن "Array.prototype.includes ()" في Can I use ، وسيُظهر لك النسبة المئوية لدعم المتصفح لهذه الميزة.

إذا وجدت أن ميزة ECMAScript محددة غير مدعومة على نطاق واسع ، فلا يزال بإمكانك استخدامها في الكود الخاص بك عن طريق استخدام polyfill أو transpilers. تعد polyfill جزءًا من التعليمات البرمجية التي توفر وظائف ميزة أحدث في المتصفحات القديمة. أداة التحويل ، مثل Babel ( https://babeljs.io/ ) ، هي أداة تقوم بتحويل كود JavaScript الحديث الخاص بك إلى إصدار أقدم تدعمه المتصفحات على نطاق واسع.

متغيرات ECMAScript وهياكل البيانات المتقدمة

مرحبًا بك في القسم الثاني من مغامرتنا ECMAScript! في هذا القسم ، سوف نتعمق في عالم متغيرات ECMAScript وهياكل البيانات المتقدمة. سنغطي الكلمات الرئيسية "let" و "const" ، والقوالب الحرفية ، ومعالجة السلسلة ، والرموز ، والخرائط ، والمجموعات. لذلك دعونا نتعمق في هذه الميزات الرائعة ونستكشفها!

استخدام الكلمة الرئيسية "اسمح"

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

إليك مثال بسيط:

function showNumbers() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i); // ReferenceError: i is not defined
}

showNumbers();

كما ترى ، تؤدي محاولة الوصول إلى "i" خارج الحلقة for إلى حدوث خطأ مرجعي ، لأن "i" محجوب في نطاق الكتلة ولا يمكن الوصول إليه إلا داخل الحلقة.

استخدام الكلمة الأساسية "const"

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

هذا مثال:

const PI = 3.14159;
console.log(PI); // Output: 3.14159

PI = 3.14; // TypeError: Assignment to constant variable

تؤدي محاولة تغيير قيمة "PI" إلى حدوث خطأ من النوع ، نظرًا لأن متغيرات "const" للقراءة فقط.

صياغة القوالب الحرفية

القوالب الحرفية ، التي تم تقديمها أيضًا في ES6 ، تجعل العمل مع السلاسل في JavaScript أكثر ملاءمة. إنها تسمح لك بتضمين التعبيرات والسلاسل متعددة الأسطر وحتى إجراء الاستيفاء للسلسلة.

هذا مثال:

const name = 'John';
const age = 25;

const greeting = `Hello, my name is ${name}, and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is John, and I am 25 years old.

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

استكشاف التلاعب بالسلسلة

أدخلت ES6 + العديد من طرق معالجة السلاسل المفيدة. دعنا نستكشف القليل:

  • startWith : للتحقق مما إذا كانت السلسلة تبدأ بسلسلة فرعية محددة.
  • endWith : للتحقق مما إذا كانت السلسلة تنتهي بسلسلة فرعية محددة.
  • يتضمن : للتحقق مما إذا كانت السلسلة تحتوي على سلسلة فرعية محددة.

إليك مثال يوضح هذه الطرق:

const message = 'Hello, World!';

console.log(message.startsWith('Hello')); // Output: true
console.log(message.endsWith('World!')); // Output: true
console.log(message.includes('o')); // Output: true

الاستفادة من الرموز

الرموز هي نوع بيانات فريد تم تقديمه في ES6. يتم استخدامها كمعرفات لخصائص الكائن ويضمن أنها فريدة من نوعها ، مما يمنع تضارب الأسماء.

فيما يلي مثال على إنشاء رمز واستخدامه:

const mySymbol = Symbol('mySymbol');

const obj = {
  [mySymbol]: 'Hello, World!',
};

console.log(obj[mySymbol]); // Output: Hello, World!

تنفيذ الخرائط

الخرائط ، المقدمة في ES6 ، هي مجموعة من أزواج القيمة الرئيسية. إنها تشبه الكائنات ، ولكن مع بعض الاختلافات الرئيسية ، مثل الحفاظ على ترتيب الإدراج والسماح بأي نوع بيانات كمفتاح. فيما يلي مثال على إنشاء الخريطة واستخدامها:

const myMap = new Map();

myMap.set('name', 'John');
myMap.set('age', 25);

console.log(myMap.get('name')); // Output: John
console.log(myMap.get('age')); // Output: 25

console.log(myMap.has('name')); // Output: true
myMap.delete('name');
console.log(myMap.has('name')); // Output: false

التعامل مع المجموعات

المجموعات ، إضافة أخرى في ES6 ، هي مجموعات من القيم الفريدة. إنها مفيدة عندما تريد تخزين قائمة من القيم بدون تكرارات.

فيما يلي مثال على إنشاء مجموعة واستخدامها:

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(2); // This value won't be added, as it's a duplicate

console.log(mySet.size); // Output: 3
console.log(mySet.has(2)); // Output: true
mySet.delete(2);
console.log(mySet.has(2)); // Output: false

طرق المصفوفات والصفيفات

مرحبًا بك في القسم الثالث من استكشاف ECMAScript الخاص بنا! في هذا القسم ، سنركز على المصفوفات وطرق المصفوفات ، وتحديدًا عامل انتشار المصفوفة ، وتدمير المصفوفات ، ومصفوفات البحث باستخدام الوظيفة .includes. ستمكنك هذه الميزات من العمل مع المصفوفات بكفاءة وفعالية أكبر. دعنا نتعمق!

باستخدام عامل انتشار الصفيف

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

فيما يلي مثال على كيفية استخدام عامل انتشار:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // Output: [1, 2, 3, 4, 5, 6]

const copiedArr = [...arr1];
console.log(copiedArr); // Output: [1, 2, 3]

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...arr1)); // Output: 6

تدمير المصفوفات

تتيح لك ميزة تدمير الصفيف ، وهي ميزة ES6 أخرى ، فك العناصر من المصفوفة وتعيينها للمتغيرات بطريقة موجزة وأنيقة.

فيما يلي مثال على إعادة هيكلة المصفوفة:

const fruits = ['apple', 'banana', 'cherry'];

const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit); // Output: apple
console.log(secondFruit); // Output: banana
console.log(thirdFruit); // Output: cherry

يمكنك أيضًا استخدام إتلاف المصفوفة مع العامل الباقي لتجميع العناصر المتبقية:

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

البحث في المصفوفات باستخدام الوظيفة .includes

طريقة تضمين. ، المقدمة في ES7 ، تجعل البحث عن عنصر داخل مصفوفة أمرًا سهلاً. يتحقق هذا الأسلوب من وجود العنصر المحدد في المصفوفة وإرجاع قيمة منطقية.

فيما يلي مثال على كيفية استخدام طريقة .includes:

const animals = ['cat', 'dog', 'elephant', 'giraffe'];

console.log(animals.includes('dog')); // Output: true
console.log(animals.includes('lion')); // Output: false

كائنات ECMAScript

مرحبًا بك في القسم الرابع من رحلة ECMAScript الخاصة بنا! في هذا القسم ، سنستكشف كائنات ECMAScript ونغوص في تحسين الكائنات الحرفية ، وإنشاء كائنات باستخدام عامل الانتشار ، وتدمير الكائنات ، والتكرار باستخدام الحلقة for / of ، وتقديم الفئات ، والوراثة باستخدام فئات JavaScript ، والحصول على قيم الفئة وتعيينها . ستساعدك هذه الميزات القوية على العمل مع الكائنات بشكل أكثر فاعلية وكتابة تعليمات برمجية أنظف وأكثر حداثة. هيا بنا نبدأ!

تحسين القيم الحرفية للكائن

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

const name = 'John';
const age = 25;

const person = {
  name,
  age,
  greet() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
  },
};

person.greet(); // Output: Hello, my name is John, and I am 25 years old.

إنشاء كائنات باستخدام عامل الانتشار

لا يقتصر عامل الانتشار على المصفوفات ؛ يمكنك استخدامه مع الأشياء أيضًا! يمكنك دمج الكائنات أو إنشاء نسخ ضحلة باستخدام عامل الانتشار. هذا مثال:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }

const copiedObj = { ...obj1 };
console.log(copiedObj); // Output: { a: 1, b: 2 }

تدمير الأشياء

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

فيما يلي مثال على إعادة هيكلة الكائن:

const user = {
  name: 'John',
  age: 25,
};

const { name, age } = user;

console.log(name); // Output: John
console.log(age); // Output: 25

يمكنك أيضًا استخدام الاسم المستعار لتعيين خصائص لمتغيرات بأسماء مختلفة:

const { name: userName, age: userAge } = user;

console.log(userName); // Output: John
console.log(userAge); // Output: 25

التكرار مع الحلقة for / of

تعد حلقة for / of ، التي تم تقديمها في ES6 ، طريقة ملائمة للتكرار فوق الكائنات القابلة للتكرار مثل المصفوفات والسلاسل والخرائط والمجموعات. يمكنك أيضًا استخدامه مع الكائنات باستخدام أساليب Object.entries أو Object.keys أو Object.values. هذا مثال:

const person = {
  name: 'John',
  age: 25,
};

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

// Output:
// name: John
// age: 25

تقديم الفصول

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

فيما يلي مثال على إنشاء فصل دراسي:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

const john = new Person('John', 25); john.greet(); 
// Output: Hello, my name is John, and I am 25 years old.

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

class Employee extends Person {
  constructor(name, age, title) {
    super(name, age);
    this.title = title;
  }

  work() {
    console.log(`${this.name} is working as a ${this.title}.`);
  }
}

const alice = new Employee('Alice', 30, 'Software Developer');
alice.greet(); // Output: Hello, my name is Alice, and I am 30 years old.
alice.work(); // Output: Alice is working as a Software Developer.

الحصول على قيم الصف وتعيينها

تعتبر أدوات الاستلام والمحددات ضرورية عند العمل مع الفئات لضمان التغليف المناسب والتحكم في الوصول إلى خصائص الفصل. يوفر ES6 طريقة بسيطة لتحديدها باستخدام للحصول على وتعيين .

فيما يلي مثال على استخدام المحاضر والضوابط:

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  get width() {
    return this._width;
  }

  set width(value) {
    this._width = value;
  }

  get height() {
    return this._height;
  }

  set height(value) {
    this._height = value;
  }

  get area() {
    return this._width * this._height;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.width); // Output: 5
console.log(rect.height); // Output: 10
console.log(rect.area); // Output: 50

rect.width = 7;
rect.height = 14;
console.log(rect.area); // Output: 98

وظائف ECMAScript

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

استخدام دالة string.repeat

تسمح لك وظيفة string.repeat ، المُقدمة في ES6 ، بتكرار سلسلة لعدد معين من المرات. إنها وظيفة مفيدة لإنشاء أنماط متكررة أو ملء العناصر النائبة. هذا مثال:

const greeting = 'Hello!';
const repeatedGreeting = greeting.repeat(3);

console.log(repeatedGreeting); // Output: Hello!Hello!Hello!

تعيين معلمات الوظيفة الافتراضية

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

function greet(name = 'world') {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, world!
greet('John'); // Output: Hello, John!

كتابة وظائف السهم

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

const add = (a, b) => a + b;

console.log(add(1, 2)); // Output: 3

بشكل خاص للوظائف القصيرة أحادية التعبير ، وهي رائعة للاستخدام مع وظائف الترتيب الأعلى مثل الخريطة والتصفية والتقليل .

فهم هذا في وظائف السهم

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

فيما يلي مثال يوضح الفرق بين هذا في الوظائف العادية ووظائف الأسهم:

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  },
  greetWithArrow: () => {
    console.log(`Hello, ${this.name}!`);
  },
};

person.greet(); // Output: Hello, John!
person.greetWithArrow(); // Output: Hello, undefined!

لدينا كائن يسمى الشخص باسم خاصية وطريقتين ، تحية مع سهم . الترحيب دالة عادية ، بينما الترحيب دالة السهم.

عندما نطلق على person.greet () ، فإن الكلمة الأساسية الموجودة داخل الترحيب تشير إلى الشخص ، لذلك فإن this.name ستكون مساوية لـ "John" . سيكون ناتج الوظيفة مرحبًا جون! .

ومع ذلك ، عندما نستدعي person.greetWithArrow () ، فإن هذه الكلمة الأساسية الموجودة داخل وظيفة السهم لا تشير إلى الشخص . لا تملك دالات السهم هذا السياق الخاص بها ؛ يرثونها من نطاق التضمين. في هذه الحالة ، يكون النطاق المُضمن هو النطاق العام (أو النافذة في بيئة المستعرض) ، ويكون this.name غير محدد في النطاق العام. نتيجة لذلك ، سيكون ناتج دالة الترحيب Hello، undefined! .

يوضح هذا المثال كيف هذه الكلمة الأساسية بشكل مختلف في الوظائف العادية ووظائف الأسهم ، ويبرز أن وظائف الأسهم قد لا تكون دائمًا الخيار الأفضل عند التعامل مع طرق الكائن التي تعتمد على هذه الكلمة الأساسية .

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

ضع في اعتبارك أن لدينا مكون زر مخصصًا يؤدي إلى تشغيل حدث نقرة:

class CustomButton {
  constructor(text) {
    this.text = text;
    this.button = document.createElement('button');
    this.button.textContent = this.text;
  }

  addClickListener() {
    this.button.addEventListener('click', function() {
      console.log(`Button clicked: ${this.text}`);
    });
  }
}

const myButton = new CustomButton('Click me');
myButton.addClickListener();
document.body.appendChild(myButton.button);

في هذا المثال ، لدينا CustomButton مع مُنشئ يأخذ معلمة نصية وينشئ عنصر زر بهذا النص. طريقة addClickListener مستمع حدث النقر إلى الزر.

عندما نقوم بإنشاء CustomButton وإضافة مستمع للنقرات إليه ، قد تتوقع أن يؤدي النقر فوق الزر إلى تسجيل نص الزر في وحدة التحكم. ومع ذلك ، عند استخدام وظيفة عادية لمستمع الحدث ، فإن هذه الكلمة الأساسية داخل رد الاتصال تشير إلى عنصر الزر نفسه ، وليس CustomButton . نتيجة لذلك ، سيتم إلغاء تعريف this.text الزر الذي تم النقر فوقه: غير محدد .

لإصلاح هذه المشكلة ، يمكننا استخدام وظيفة السهم لمستمع الحدث ، والتي ستحتفظ بهذا السياق من النطاق المرفق:

class CustomButton {
  constructor(text) {
    this.text = text;
    this.button = document.createElement('button');
    this.button.textContent = this.text;
  }

  addClickListener() {
    this.button.addEventListener('click', () => {
      console.log(`Button clicked: ${this.text}`);
    });
  }
}

const myButton = new CustomButton('Click me');
myButton.addClickListener();
document.body.appendChild(myButton.button);

الآن ، عند النقر فوق الزر ، ستقوم وحدة التحكم بتسجيل نص الزر بشكل صحيح ، على سبيل المثال ، النقر فوق الزر: انقر فوقي ، لأن وظيفة السهم تحتفظ بهذا السياق لمثيل CustomButton . يوضح هذا المثال فائدة وظائف السهم وسلوكها عند العمل مع عمليات الاسترجاعات أو مستمعي الأحداث.

العمل مع المولدات

المولدات ، المقدمة في ES6 ، هي وظائف خاصة تتيح لك إنشاء التكرارات والتحكم فيها. يمكن إيقافها مؤقتًا واستئنافها ، مما يجعل من الممكن إنتاج قيم عند الطلب. يُشار إلى المولدات بعلامة النجمة (*) بعد الكلمة للوظيفة واستخدام للإنتاجية لإنتاج القيم.

فيما يلي مثال على استخدام المولد:

function* idGenerator() {
  let id = 1;

  while (true) {
    yield id++;
  }
}

const gen = idGenerator();

console.log(gen.next().value); // Output: 1
console.log(gen.next().value); // Output: 2
console.log(gen.next().value); // Output: 3

مرحبًا بك في القسم السادس من مغامرتنا ECMAScript! في هذا القسم ، سوف نستكشف العالم المثير لجافا سكريبت غير المتزامن. سنتعلم كيفية بناء الوعود ، واسترداد البيانات عن بُعد باستخدام الوعود ، واستخدام الجلب لإرجاع الوعود ، وإتقان بناء الجملة غير المتزامن / انتظار ، ودمج الجلب مع عدم التزامن / انتظار. ستساعدك هذه التقنيات القوية في إدارة المهام المعقدة غير المتزامنة بسهولة. هيا بنا نبدأ!

بناء الوعود

تعد الوعود طريقة فعالة للتعامل مع العمليات غير المتزامنة في JavaScript. يمثل الوعد قيمة قد تكون متاحة الآن أو في المستقبل أو لا تتوفر أبدًا. للوعود ثلاث حالات: معلقة أو محسومة أو مرفوضة. إليك مثال بسيط على الوعد:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 1000);
});

myPromise.then(value => {
  console.log(value); // Output: Promise resolved!
});

استرجاع البيانات عن بعد بوعود

لجلب البيانات عن بعد ، مثل البيانات من واجهة برمجة التطبيقات ، يمكنك استخدام الوعود. يعد XMLHttpRequest طريقة تقليدية للقيام بذلك ، لكننا سنشرح استخدام واجهة برمجة التطبيقات Fetch API الأكثر حداثة في القسم التالي.

توظيف الجلب للعودة بالوعود

تعد Fetch API طريقة حديثة وسهلة الاستخدام لجلب البيانات عن بُعد. تقوم بإرجاع وعد يتم حله بالاستجابة من المورد المطلوب. فيما يلي مثال على استخدام الجلب لاسترداد البيانات من واجهة برمجة تطبيقات JSON:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

إتقان عدم التزامن / انتظار بناء الجملة

Async / await هي ميزة قوية تم تقديمها في ES8 تعمل على تبسيط العمل بالوعود. يسمح لك بكتابة رمز غير متزامن يبدو ويتصرف مثل رمز متزامن. فيما يلي مثال على استخدام غير متزامن / انتظار لجلب البيانات من واجهة برمجة التطبيقات:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

الجمع بين الجلب وعدم المزامنة / الانتظار

يؤدي الجمع بين الجلب مع عدم التزامن / انتظار إلى تسهيل إدارة المهام المعقدة غير المتزامنة. يمكنك سلسلة طلبات جلب متعددة ومعالجة الأخطاء بأمان وجعل شفرتك أكثر قابلية للقراءة. فيما يلي مثال على الجمع بين الجلب مع عدم التزامن / انتظار لاسترداد البيانات من عدة نقاط نهاية لواجهة برمجة التطبيقات:

async function fetchMultipleData() {
  try {
    const [response1, response2] = await Promise.all([
      fetch('https://jsonplaceholder.typicode.com/posts/1'),
      fetch('https://jsonplaceholder.typicode.com/comments/1'),
    ]);

    const data1 = await response1.json();
    const data2 = await response2.json();

    console.log('Post:', data1);
    console.log('Comment:', data2);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchMultipleData();

تغليف

تهانينا! لقد وصلنا إلى نهاية رحلتنا لاستكشاف العالم الرائع لـ ECMAScript 6+ (ES6 +). نأمل أن تكون قد استمتعت بالمغامرة واكتسبت رؤى قيمة حول الميزات والتقنيات التي تقدمها JavaScript الحديثة.

خلال هذا الاستكشاف ، قمنا بتغطية مجموعة واسعة من الموضوعات ، بما في ذلك:

  • جوهر ECMAScript
  • متغيرات ECMAScript وهياكل البيانات المتقدمة
  • المصفوفات وطرق المصفوفات
  • كائنات ECMAScript
  • وظائف ECMAScript
  • التنقل في JavaScript غير متزامن

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

الآن أشجعك على الاستمرار في التجربة ، والبقاء فضوليًا ، ومواصلة التعرف على الميزات الجديدة وأفضل الممارسات مع تطور اللغة.

تذكر أن الممارسة تجعلها مثالية. استمر في العمل على المشاريع ، والمشاركة في تحديات البرمجة ، والمساهمة في مشاريع مفتوحة المصدر لصقل مهاراتك وتعميق فهمك لـ ECMAScript و JavaScript.

شكرًا لانضمامك إلينا في هذه المغامرة ، ونتمنى لك كل التوفيق في مساعيك المستقبلية في JavaScript! لا تنسى الانضمام إلى قائمتنا البريدية.

https://ahmedradwan.dev

تواصل معنا إذا كنت ترغب في الانضمام إلي وكتابة مقالات مع المهووسين 🙂


© 2024 · الطالب الذي يذاكر كثيرا المستوى التقنية

فئات

وسائل التواصل الاجتماعي

ابق على اتصال على وسائل التواصل الاجتماعي