بررسی فیچر های جدید جاوااسکریپت (ES14) 2023

غوطه‌ور شوید به دنیای پویای تحول جاوااسکریپت!

اکما اسکریپت ۱۴ موجی از ویژگی‌های هیجان‌انگیز را در سال ۲۰۲۳ به نمایش گذاشته تا تجربه‌ی بهتری از برنامه نویسی جاوا اسکریپت به شما ارائه دهند.

اکما اسکریپت ۱۴ که در ماه ژوئن ۲۰۲۳ منتشر شده، قصد دارد روش‌های جدیدی برای جستجو و تغییر آرایه‌ها اضافه کند، به نمادها اجازه دهد که به عنوان کلیدهای WeakMap استفاده شوند، و پشتیبانی از دستورات hashbang را استاندارد سازی کند.

بیاید با هم ویژگی‌های جدید معرفی شده در جاوااسکریپت را بررسی کنیم! 🚀✨

۱. متد  findLast

این متد در پروتوتایپ تمامی آرایه‌ها قابل دسترسی است (به عنوان مثال Array.prototype.findLast) و به طور مشابه به متد find عمل می‌کند که برای یافتن یک عضو در آرایه استفاده می‌شود. با این تفاوت که جستجو را از انتهای آرایه شروع می‌کند:

const array1 = [5, 12, 50, 100, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);//Output: 100

۲. متد findLastIndex

این متد نیز مانند متد findIndex عمل می‌کند که برای یافتن شماره ایندکس یک آیتم خاص در یک آرایه استفاده می‌شود؛ با این تفاوت که عملیات جستجو را از انتهای آرایه شروع می‌کند:

const array1 = [5, 12, 50, 100, 44];
const found = array1.findLastIndex((element) => element > 45);
console.log(found);//Output: 3

۳. متد toSorted

این متد نیز مشابه متد sort است که قبلاً موجود بوده است. این دو متد برای مرتب‌سازی اعضای یک آرایه استفاده می‌شوند، با این تفاوت که متد toSorted آرایه اصلی را تغییر نمی‌دهد و خروجی آن یک آرایه جدید از اعضای مرتب‌شده است:

const letters = [&quotD&quot, &quotA&quot, &quotE&quot, &quotC&quot, &quotB&quot]
const numbers = [4, 2, 5, 1, 3]

// toSorted
const sortedLetters = letters.toSorted();
console.log(letters) // Output: [&quotD&quot, &quotA&quot, &quotE&quot, &quotC&quot, &quotB&quot]
console.log(sortedLetters) // Output: [&quotA&quot, &quotB&quot, &quotC&quot, &quotD&quot, &quotE&quot]

const sortedNumbers = numbers.toSorted((a, b) => a - b)
console.log(sortedNumbers) // Output: [1, 2, 3, 4, 5]

// common mistake using numbers
const nums2 = [0, 15, 5, 10, 20]
const sortedNums2 = nums2.toSorted()
console.log(sortedNums2) // Output: [0, 10, 15, 20, 5]

۴. متد toReversed

این متد نیز مشابه متد reverse عمل می‌کند که برای معکوس کردن اعضای یک آرایه استفاده می‌شود، با این تفاوت که متد toReversed آرایهٔ اصلی را تغییر نمی‌دهد، بلکه خروجی آن یک آرایه جدید از اعضای معکوس شده است:

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

// toReversed
const newArray = originalArray.toReversed();

console.log(originalArray); // Output: [1, 2, 3, 4, 5] the array is unmodified
console.log(newArray); // Output:[5, 4, 3, 2, 1]

۵. متد toSpliced

این متد نیز همانند متد splice عمل می‌کند و برای اعمال تغییرات در یک آرایه (حذف، اضافه و یا جایگزینی) استفاده می‌شود. با این تفاوت که متد splice، آرایه اصلی را تغییر می‌دهد، در حالی که با استفاده از متد toSpliced می‌توانیم بدون ایجاد تغییر در آرایه اصلی و یا نیاز به کپی‌برداری از آن، عملیات مورد نظر را انجام دهیم:

const numbers = [1, 2, 6, 6, 7]

// toSpliced method
// starting at index 2, delete 1 element, then add the values  3, 4, and 5
const result = numbers.toSpliced(2, 1, 3, 4, 5) 
console.log(numbers) // Output: [1, 2, 6, 6, 7]
console.log(result) // Output: [1, 2, 3, 4, 5, 6, 7]

۶. متد with

این متد به ما اجازه می‌دهد که یک عضو از آرایه را با یک مقدار دیگر جایگزین کنیم، بدون اینکه آرایه اصلی را تغییر دهیم. این متد دو ورودی می‌گیرد: ورودی اول که شماره ایندکس مورد نظر برای جایگزینی است، و ورودی دوم که مقدار جدید مورد نظر است:

const result = numbers.with(2, 3)
console.log(numbers) // Output: [1, 2, 9999, 3]
console.log(result) // Output: [1, 2, 3, 4]

۷. متد groupBy

با استفاده از متد groupBy، می‌توانیم اعضای یک آرایه را بر اساس یک ویژگی مشترک بین آن‌ها گروه‌بندی کنیم. نکته‌ای که درباره‌ی groupBy وجود دارد این است که بر خلاف متدهای بالا، این متد به صورت استاتیک در دسترس است و مستقیماً از شیء Object Global قابل دسترسی است:

const inventory = [
  { name: &quotasparagus&quot, type: &quotvegetables&quot, quantity: 5 },
  { name: &quotbananas&quot, type: &quotfruit&quot, quantity: 0 },
  { name: &quotgoat&quot, type: &quotmeat&quot, quantity: 23 },
  { name: &quotcherries&quot, type: &quotfruit&quot, quantity: 5 },
  { name: &quotfish&quot, type: &quotmeat&quot, quantity: 22 },
];

function myCallback({ quantity }) {
  return quantity > 5 ? &quotok&quot : &quotrestock&quot
}

const result2 = Object.groupBy(inventory, myCallback);

نتیجه‌ی result2 یک آبجکت است که شامل کلید های دسته بندی است و موارد مربوط به هر دسته بندی به صورت آرایه در داخل آن قرار دارند:

{
    &quotrestock&quot: [
        {
            &quotname&quot: &quotasparagus&quot,
            &quottype&quot: &quotvegetables&quot,
            &quotquantity&quot: 5
        },
        {
            &quotname&quot: &quotbananas&quot,
            &quottype&quot: &quotfruit&quot,
            &quotquantity&quot: 0
        },
        {
            &quotname&quot: &quotcherries&quot,
            &quottype&quot: &quotfruit&quot,
            &quotquantity&quot: 5
        }
    ],
    &quotok&quot: [
        {
            &quotname&quot: &quotgoat&quot,
            &quottype&quot: &quotmeat&quot,
            &quotquantity&quot: 23
        },
        {
            &quotname&quot: &quotfish&quot,
            &quottype&quot: &quotmeat&quot,
            &quotquantity&quot: 22
        }
    ]
}

۸. پشتیبانی از کامنت های #!Hashbang (یا همان Shebang)

کامنت های Hashbang با #! شروع می‌شوند و تنها در ابتدای یک اسکریپت یا ماژول قابل استفاده هستند. هیچ فضای سفیدی قبل از #! مجاز نیست! استانداردسازی hashbang در اسکریپت‌های قابل اجرا اکنون امکان اجرای فایل‌های جاوااسکریپت را مستقیماً از کامند لاین فراهم می‌کند. اکنون می‌توانید کد جاوااسکریپت را با دستور ./نام_فایل.js اجرا کنید به جای چیزی شبیه به node نام_فایل.js.

ابتدا مطمئن شوید که مجوز اجرای فایل را دارید با اجرای دستور: ls -l filename.js.

برای افزودن مجوزهای اجرا، دستور زیر را اجرا کنید: chmod +x fileName.js:

#!/usr/bin/env node

console.log(&quotJavascript is so cool!&quot)
// Output: Javascript is so cool!

برای اجرای کد بالا فقط کافیست کامند زیر را اجرا کنیم:

./fileName.js

که در خروجی لاگ زیر را خواهیم داشت:

Javascript is so cool!

۹. بهبود آبجکت‌های WeakMap و WeakSet

در گذشته، کلیدهای مجموعه‌های ساخته شده با WeakMap و WeakSet بایستی از نوع شیء (Object) می بودند. اما از ورژن ES14 به بعد، می‌توانیم از نمادها (Symbol) نیز به عنوان کلید برای این مجموعه‌ها استفاده کنیم:

const weakMapIds = new WeakMap()
const key = Symbol(&quotuserId&quot)

weakMapIds.set(key, &quot123abc&quot)

console.log(weakMapIds.get(key))// Output: 123abc

امیدوارم از اطلاعاتی که مورد بررسی قرار دادیم استفاده کرده باشید.

با توجه به تازگی این فیچر ها، لطفاً در استفاده از پشتیبانی مرورگرها و Polyfill ها دقت کنید. روز خوشی داشته باشید! 🖐️

منبع: https://medium.com/nerd-for-tech/exploring-10-new-features-unveiled-in-ecmascript-2023-es14-b8abe7e26f9a