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

1. هل كنت بحاجة إلى العثور على عنصر في صفيف يبدأ من النهاية؟ يقدم ES2023 FindLast و FindLastIndex ، وهو ما يفعل ذلك تمامًا.

FindLast: تجد هذه الطريقة العنصر الأخير في صفيف يلبي شرطًا محددًا.

const number = [1 ، 2 ، 3 ، 4 ، 5] ؛ const lasteven = number.findlast (num => num ٪ 2 === 0) ؛ // 4 // ابحث عن المستخدم الأخير الذي يبلغ من العمر 18 عامًا في مجموعة كبيرة مستخدمي const = [/ * صفيف مع 10000 مستخدم */] ؛ users.findlast (user => user.age === 18) ؛

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

FindLastIndex: هذه الطريقة تُرجع فهرس هذا العنصر الأخير.

const lastevenindex = number.findlastIndex (num => num ٪ 2 === 0) ؛ // 3

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

2.

Hashbangs (#!) في ملفات JavaScript

إذا كنت تكتب أدوات سطر الأوامر في JavaScript ، فستقدر الدعم الجديد لـ Hashbangs. عن طريق إضافة #! في الجزء العلوي من ملفك ، يمكنك تحديد المترجم الفوري مباشرةً ، مما يجعل البرنامج النصي قابل للتنفيذ دون الحاجة إلى أمر خارجي.

#!/usr/bin/env node console.log ("مرحبا ، العالم!") ؛

#!/usr/bin/env node

console.log("Hello, world!");

3.

مسبقًا ، يمكن استخدام الكائنات فقط كمفاتيح في وضع الضعف ، ولكن ES2023 يغير ذلك من خلال السماح للرموز أيضًا.

const wm = new PearmMap () ؛ const sym = رمز ('مفتاح') ؛ wm.set (sym ، 'value') ؛ console.log (wm.get (sym)) ؛ // 'قيمة' // تخزين بيانات اللعبة الخفية التي لا يمكن للاعبين الوصول إليها بسهولة ، مثل رموز فتح Secret: const secretcode = رمز ('vc-cheat-code') ؛ const gamedata = new DepenMap () ؛ Gamedata.set (SecretCode ، 'Panzer-aspirine-bigbang-preciousprotection') ؛

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

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION'); 

مجموعة التجميع بواسطة الطريقة

أصبحت عناصر مجموعة التجميع أسهل بكثير مع طريقة المجموعة الجديدة.

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

const الحيوانات = [ {type: 'mammal' ، الاسم: 'Dog'} ، {type: 'bird' ، الاسم: 'sparrow'} ، {اكتب: 'الثدييات' ، الاسم: 'cat'} ، ] ؛ const مجمع = eleutists.group (({type}) => type) ؛ console.log (مجمعة) ؛ // { // الثدييات: [{type: 'mammal' ، name: 'dog'} ، {type: 'mammal' ، name: 'cat'}] // Bird: [{type: 'Bird' ، Name: 'Sparrow'}] //}
هذه الميزة مثالية للسيناريوهات حيث تحتاج إلى تصنيف البيانات بسرعة وكفاءة.

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

فرز المصفوفات حصلت للتو على أنظف مع tosorted. على عكس الفرز ، الذي يغير الصفيف الأصلي ، يعيد Tosorted صفيفًا جديدًا مصنّفًا ويُرجع مصفوفة عكسية جديدة ، تاركًا الأصلي لم يمسها.

const arr = [3 ، 1 ، 4 ، 1 ، 5] ؛ const sortedarr = arr.tosorted () ؛ console.log (sortedarr) ؛ // [1 ، 1 ، 3 ، 4 ، 5] console.log (arr) ؛ // [3 ، 1 ، 4 ، 1 ، 5] دع البيانات = [/ * البيانات المهمة التي لا ينبغي تعديلها */] ؛ دع ResperedData = data.toreversed () ؛ // عكسي بأمان

هذه الطريقة مناسبة للغاية عندما تحتاج إلى الحفاظ على الصفيف الأصلي أثناء العمل مع إصدار مصنف.

6.

array.prototype.with

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

توفر الطريقة مع طريقة بسيطة لإنشاء صفيف جديد عن طريق استبدال عنصر في فهرس معين.

const number = [10 ، 20 ، 30 ، 40] ؛ const newNumbers = number.with (2 ، 25) ؛ // [10 ، 20 ، 25 ، 40]

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

7.

promise.withresolvers

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

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

const {promise ، حل ، رفض} = promise.withresolvers () ؛ setTimeOut (() => حل ("تم") ، 1000) ؛ Promise.Then (console.log) ؛ // "منتهي"

إنها وسيلة رائعة وموجزة للتعامل مع العمليات غير المتزامنة ، خاصةً عندما تحتاج إلى التحكم في نتائج الوعد من خارج مُنشئه.

دعم المتصفح لـ ES2023

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

Firefox ، Chrome و Edge تدعم بعض الميزات Array.prototype.findlast () و Array.Prototype.FindLastIndex ()

لا يدعم Safari أيًا من هذه الميزات حتى الآن.

node.js
• Node.js الإصدار 19.0 وما فوق يمكن استخدامه:
• array.prototype.findlast ()
  array.prototype.findlastindex () من المتوقع إضافة المزيد من ميزات ES2023 في التحديثات المستقبلية.
  • Transpilers:
    لاستخدام ميزات ES2023 الجديدة الآن ، يمكن للمطورين تحويل رمز ES2023 إلى إصدار أقدم يفهمه المزيد من المتصفحات ، باستخدام أدوات تسمى Transpilers ، مثل Babel. وبهذه الطريقة ، يمكنك البدء في استخدام الأشياء الجديدة حتى لو لم تكن المستعرضات جاهزة لها حتى الآن.
  الآن ، لا يزال دعم ES2023 ينمو. بدأت المتصفحات الكبيرة مثل Firefox و Chrome في تضمين بعض ميزاتها. للحصول على تفاصيل حول ما هو مدعوم ، يمكنك التحقق من استخدامه. يساعد استخدام Transpilers في جعل هذه الميزات الجديدة قابلة للاستخدام اليوم ، بينما ننتظر متصفحات اللحاق بالركب خلال السنوات القادمة.

خاتمة

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

مراجع:

مقترحات TC39

مسودة ECMA-262

MDN