فيما يلي الطرق والوظائف المضمنة الجديدة في JavaScript

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

أساليب الكائنات الجديدة

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

تعيين الكائن ()

طريقة Object.assign () لها وظائف متعددة. يمكنه نسخ كائن أو استنساخه من كائن آخر أو ربط كائنين أو أكثر.

  • انسخ القيم من كائن آخر:
  • استنساخ كائن إلى كائن جديد
  • يمكنك أيضًا دمج الخصائص المكررة مع Object.assign () بتعيين قوسين فارغين كوسيط أول:

مدخلات الكائن ()

تقوم طريقة Object.entries () بإرجاع مفاتيح وقيم الكائن كمصفوفة.

Object.getOwnPropertyDescriptors ()

Object.getOwnPropertyDescriptors يسمح لنا بالحصول على واصف الخصائص للكائن.

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

أساليب المصفوفة الجديدة

قدمت إصدارات JavaScript الجديدة طرقًا جديدة للصفائف. فيما يلي طرق المصفوفة الجديدة:

Array.includes ()

Array.includes () يسمح لنا بالتحقق مما إذا كانت الخاصية موجودة في مصفوفة. يمكنك أن ترى الفرق بين الكود القديم والصيغة الجديدة (ES6). الطريقة الجديدة قصيرة وسهلة القراءة.

Array.find ()

يساعدنا Array.find () في إيجاد عنصر في المصفوفة. يأخذ وظيفة رد الاتصال كوسيطة. توفر وظيفة رد الاتصال المزيد من الخيارات للعثور على البيانات المعقدة واستخراجها.

إذا كانت الخاصية التي نبحث عنها موجودة ، فإنها تُرجع القيمة التي تم العثور عليها. خلاف ذلك ، فإنه يعود غير محدد.

Array.findIndex ()

تُرجع Array.findIndex () فهرس العنصر الذي تم العثور عليه بدلاً من القيمة.

Array.values ​​()

ترجع هذه الطريقة الجديدة مكرر الصفيف للقيم حتى نتمكن من تشغيل حلقة for لاستخراج كل قيمة من قيمة المصفوفة.

Array.entries ()

ترجع Array.entries () كلاً من المفتاح والقيمة وبتنسيق Array.

Array.from ()

تم تقديم Array.from () في إصدار ES6. يمكنه القيام بأشياء متعددة عن طريق تشغيل وظيفة map () على البيانات. يمكنه تحويل سلسلة إلى مصفوفة أو حتى إنشاء صفيف جديد من البيانات.

Array.keys ()

كما يوحي الاسم ، ترجع هذه الطريقة مفاتيح المصفوفة.

طرق String الجديدة

قدمت إصدارات JavaScript الجديدة طرق String جديدة. فيما يلي طرق String الجديدة:

String.repeat ()

تسمح لك طريقة String.repeat () بتكرار سلسلة نصية.

السلسلة تتضمن ()

String.includes () يعمل مثل Array.includes (). تقوم بإرجاع قيمة منطقية إذا كانت القيمة المدخلة موجودة.

طرق الأرقام الجديدة

قدمت إصدارات JavaScript الجديدة طرقًا جديدة للأرقام. فيما يلي طرق الأرقام الجديدة:

Number.isNaN ()

تم إصدار هذه الطريقة في تحديث ES6. يتحقق من قيمة الرقم التي تم تمريرها ويعيد صحيحًا إذا كانت القيمة NaN. خلاف ذلك ، فإنها ترجع خطأ. هذه الطريقة مستوحاة من الوظيفة الكلاسيكية هي NAN () في JavaScript.

Number.isInteger ()

مثل الطريقة السابقة ، يتحقق Number.isInteger () لمعرفة ما إذا كانت القيمة التي تم تمريرها عددًا صحيحًا أم لا. سيعود صحيحًا إذا كانت القيمة عددًا صحيحًا وخطأ إذا لم يكن كذلك.

Number.isSafeInteger ()

قد ترغب دائمًا في التحقق من صحة إدخال المستخدمين للتأكد من أنه رقم. Number.isSafeInteger () يتحقق مما إذا كان الرقم رقمًا آمنًا.

تعلم المزيد هنا

Number.isFinite ()

Number.isFinite () يتحقق مما إذا كانت القيمة التي تم تمريرها هي رقم محدد أم لا.

دعم المتصفح

يتم دعم أساليب الأرقام الجديدة تقريبًا بواسطة المستعرض الرئيسي باستثناء Opera Mini و IE-11. يظهر الدعم في الصورة أدناه:

كائنات محددة جديدة

تأتي JavaScript بوظائف محددة جديدة تسمح لنا بكتابة تعليمات برمجية أكثر كفاءة. فيما يلي طرق الكائن المحددة الجديدة:

وكيل ()

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

  • التحقق من صحة بيانات المستخدم
  • تصحيح البيانات
  • البحث عن الممتلكات
  • مهمة
  • تعداد
  • استدعاء الوظيفة

تحقق من الاستخدامات الأخرى للوكيل وطرقه هنا.

لفهم الوكيل ، سنكتب مثالين.

مثال 1:

في هذا المثال ، نتحقق من صحة البيانات أثناء الحصول عليها من المستخدم. سنحاول تحديد سلوك خطأ غير محدد.

كما ترى في المثال أعلاه إرجاع userInfo.favCar undefined. ماذا لو أردنا معالجة رسالة الخطأ هذه؟ إذا أردنا إنشاء سلوك مخصص للخطأ ، على سبيل المثال ، عرض رسالة أخرى بدلاً من غير محدد ، فيمكننا استخدام الوكيل في هذه الحالة.

لقد حددنا وكيلًا جديدًا وقدمنا ​​له حجتين - الكائن والمعالج. يقوم المعالج بتشغيل بعض كود التحقق والتحقق من وجود الخاصية في الكائن. تقوم بإرجاع الخاصية إذا كانت موجودة. خلاف ذلك ، فإنه يقوم بإرجاع الرسالة التي حددناها وهذا يسمى البحث عن الخاصية.

المثال الثاني:

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

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

دعم المتصفح

يعمل الوكيل بشكل جيد لجميع المتصفحات الرئيسية كما ترى أدناه:

تعيين () كائن

الكائن Set هو ميزة جديدة في JavaScript. يسمح لنا بتخزين قيم فريدة. لديها مجموعة من الطرق التي يمكنك اللعب بها. يتيح لك الأسلوب Object.add إضافة خاصية جديدة إلى الكائن. Object.delete يزيل خاصية من الكائن. يقوم Object.clear بمسح جميع الخصائص من الكائن. يوضح المثال أدناه أساليب الكائن.

تعرف على المزيد حول Set () object هنا.

تغليف

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

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

يمكنك أن تجدني على Twitter و Instagram

المقالات السابقة:

  • JavaScript ES6 - اكتب أقل ، وأنجز المزيد
  • تعلم Bootstrap 4 في 30 دقيقة من خلال إنشاء موقع ويب Landing
  • Angular 6 وميزاته الجديدة ، سيتم شرحها جميعًا في ثلاث دقائق
  • كيفية استخدام التوجيه في Vue.js لإنشاء تجربة مستخدم أفضل
  • فيما يلي أكثر الطرق شيوعًا لتقديم طلب HTTP في JavaScript
  • تعرف على كيفية إنشاء أول تطبيق Angular لك في 20 دقيقة