۹ تابع جاوااسکریپت که توی هر پروژه ای لازمه

سلام? آقای مبتدی هستم و الان شما در حال خوندن یکی دیگه از مقاله های منتشر شده داخل سایت آقای مبتدی هستین?(چشم بسته غیب گفتم!)

خب بریم سراغ مطلب امروز. امروز قراره باهم دیگه ی چندتایی تابع کاربردی توی جاوااسکریپت رو بررسی کنیم و و تهش به این نتیجه بررسیم که کدومشون رو به پروژمون اضافه کنیم و کدوم یکی رو ن. پس با من همراه باشید تا کلی تابع باحال و ساده که میتونن خیلی از کارهامون رو راحت تر کنن رو بررسی کنیم.??

۱. تابع بهم ریخته – Shuffle Array

خب به عنوان شروع میخوام از تابع های به هم ریخته استفاده کنم. خیلی وقت ها میشه توی جاوااسکریپت که ما مثلا لیست محصولات مرتبط، لیست پست های مرتبط یا کلا ی لیستی رو از دیتابیس دریافت میکنیم یا اگر توی ری اکت باشه مثلا داخل استیت خودمون داریم و میخوام که قبل از نمایشش اون محتوای داخلش رو هم بزنیم یا شایدم هم میخواین ی مسابقه ای برگزار کنید و لیست کاربراتون توی آرایس و میخواین بهمش بزنید بعد نمایشش بدین. خب خیلی راحته، کافیه اون رو بر اساس ی عدد رندوم مرتبش کنید. مثل کد زیر:

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);// Testing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr));

چطور بود واسه شروع؟ تستش کنید اگر جواب داد توی کامنت ها برامون بنویس?

۲. کپی توی کلیپ بورد – Copy to Clipboard

اوه اوه، یعنی من خودم به شخصه ۹۰% پروژه هایی که زدم اینو مورد رو داشتم که توی بخش اشتراک گذاری ی دکمه هست که با کلیک روش لینک رو داخل کلیپ بورد کاربر ذخیره کنم.کدشو میذارم ی بار برا همیشه به پروژت اضافش کن تا دیگه از شرش راحت بشی??

const copyToClipboard = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

// Testing
copyToClipboard("Hello MrJunior!");

خدایی فکرشو میکردی ی خط باشه?.استفاده کن، لذت ببر.

فقط ی نکته ریز: این ویژگی رو من توی سایت caniuse که بررسی کردم تقریبا ۹۳ درصد کاربران جهان میتونن ازش استفاده کنن ولی شما بازم ی بررسی بکنید که از مرورگر هایی که مدنظرتون هست پشتیبانی بکنه.

۳. آرایه یکتا – Unique Elements

خب بریم دوباره سراغ آرایه ها که ما هرچی سختی میکشیم یا سر ایناس یا آبجکت ها. خب شاید خیلی وقت ها شده که توی آرایتون از ی مقداری چندتا دارین و اصولا مقادیر تکراری داخل آرایه هست که نمیخواین تکراری داخلش باشه و میخواین که هرچی تکراری داخل هست رو حذف کنید. خب باید بگم جای درستی اومدین. ی نگاه به کد زیر بنداز:

const getUnique = (arr) => [...new Set(arr)];

// Testing
const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));

همین، توی یک خط و تمام?? (نتیجه این کد رو برامون کامنت کن)

۴. تشخیص حالت تاریک – Detect Dark Mode

خب ی زمانی بود که فقط IDE ها و کد ادیتور ها دارک مود داشت الان دیگه فقط فک کنم ورد و اکسل و اینا نداشته باشه? (شایدم داره من نمیدونم). خلاصه که الان دیگه خیلی محبوب شده و شما مسلما یک تابع لازم داری که تشخیص بدی الان توی دارک مودی یا لایت مد (حالت تاریک یا روشن).خب کاری نداره بیا برات کد اونم میذارم:

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;

// Testing
console.log(isDarkMode());

تا آقای مبتدی هست دیگه خیالت از دارک مود هم راحت.تا اینجا راضی یا ن؟?

۵.اسکرول به بالا – Scroll To Top

دیگه این یکی رو بعید میدونم سایتی باشه که اینو نداشته باشه خدایی و فکر هم نکنم لازم به توضیح باشه ولی چون اینجا آقای مبتدیه و ما همه مبتدیم ی توضیح ریز میدم.

دیدین توی سایت ها میایم آخر صفحه ی دکمه هست رفتن به بالا که روش کلیک میکنیم میره به اون اول صفحه؟ این کدش:

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" });

حالا شاید یکی هم کدی بخواد که بیاد آخر صفحه که اونم کاری نداره فقط کافیه مقدار block رو end بذارین

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" });

۶. معتبر بودن تاریخ – Check if Date is Valid

خب بعضی وقتا ما میایم و تاریخ رو از کاربر میگیریم و شاید کاربر بیاد و اون رو اشتباه وارد کنه حالا چه از قصد یا از روی بی اطلاعی. خلاصه ما باید آخرش چک کنیم که درست وارد شده یا ن.کد تابعش:

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true

۷. حذف همه کوکی ها – Clear All Cookies

شاید شما بخواین ی قابلیت رو به کاربراتون بدین که با ی کلیک ساده، هرچی از سایت شما کوکی براشون ست شده رو حذف کنن. خب اصلا ناراحتی نداره که، من اینجام تا همین کد هارو در اختیار شما بذارم.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

تعجب کردی که اینم یک خطه؟

۸. دریافت پارامتر های آدرس – Get Query Params from URL

شاید بعضی اوقات لازم باشه که ما یک مقداری رو به صورت get داخل آدرس صفحه ذخیره کنیم که شایع ترینش بخش جستجو هست و یا خیلی جاهای دیگه.

خب ست کردن مقدار در آدرس کاری نداره، بلکه دریافتش یکم دردسر داره که با این ی تیکه کد کوچیک دیگه اونم دردسر نداره. فرض کنید آدرس ما goole.com?search=easy&page=3 باشه اونوقت:

const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};

getParameters(window.location)
// Result: { search : "easy", page : 3 }

۹. دریافت متن انتخاب شده توسط کاربر – Get Selected Text

شده که بخواین متنی رو که کاربر توی مروگرش انتخاب کرده رو ی پردازشی روش انجام بدین؟ خب اینک اصلا کاری نداره:

const getSelectedText = () => window.getSelection().toString();

getSelectedText();

کلام آخر?

توی این لیست سعی کردم که ۹ تا از تابع هایی که حس کردم توی خیلی از پروژه ها تکرار میشن رو براتون بذارم تا کارتون راحت تر بشه و از کد نویسی لذت ببرید. این مطلب رو ذخیره کن تا دفعه بعدی نخوای توی اینترنت بگردی براشون و اگر برات مفید بود برای دوستات هم بفرس و اگه فک میکنی توام تابعی داری که توی این لیست جاش خالیه توی کامنت ها برامون بذار تا ماهم ازش استفاده کنیم?

منبع:medium