چگونه کد JavaScript خود را ساده، و خواندن آن را آسان نگه داریم؟

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : جاوا اسکریپت

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

چگونه کد JavaScript خود را ساده، و خواندن آن را آسان نگه داریم؟

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

پیچیده - حذف کردن موارد تکراری با استفاده از forEach

اول، ما یک آرایه خالی ساخته، و سپس از متد forEach() استفاده می‌کنیم تا یک تابع فراهم شده را یک بار برای هر عنصر موجود در آرایه اجرا کنیم. در نهایت ما بررسی می‌کنیم که مقدار مورد نظر در آرایه جدید موجود نباشد؛ و اگر نبود، آن را اضافه می‌کنیم.

function removeDuplicates(arr) { 
   const uniqueVals = [];  
   arr.forEach((value,index) => {    
       if(uniqueVals.indexOf(value) === -1) {
           uniqueVals.push(value);
       } 
   });
  return uniqueVals;
}

ساده - حذف کردن موارد تکراری با استفاده از filter

متد filter یک آرایه جدید را به همراه تمام عناصر می‌سازد، که از آزمایش فراهم شده توسط یک تابع گذشته‌اند. اساسا، ما بر روی آرایه تکرار می‌کنیم و برای هر عنصر، بررسی می‌کنیم که آیا اولین موقعیت این عنصر در آرایه برابر با موقعیت فعلی است یا نه. البته، این دو موقعیت برای عناصر تکراری متفاوت هستند.

function removeDuplicates(arr) {
  return arr.filter((item, pos) => arr.indexOf(item) === pos)
}

ساده - حذف کردن موارد تکراری با استفاده از Set

ES6 آبجکت Set را فراهم می‌کند، که همه چیز را بسیار آسان‌تر می‌نماید. Set فقط مقادیر منحصر به فرد را ممکن می‌سازد؛ پس وقتی که شما یک آرایه را به آن منتقل می‌کنید، تمام مقادیر تکراری را حذف می‌کند.

گرچه، اگر به یک آرایه با عناصر منحصر به فرد نیاز داریم، چرا از ابتدا از Set استفاده نکنیم؟

function removeDuplicates(arr) {
   return [...new Set(arr)];
}

بیایید ادامه دهیم و مشکل دوم را حل کنیم. این مشکل نیاز دارد تا ما یک تابع بنویسیم که یک آرایه متشکل از integerهای غیر منفی متمایز را می‌گیرد، آن‌ها را به طور متوالی قرار می‌دهد و شمارش اعداد ناموجود را بر می‌گرداند.

برای const arr = [4, 2, 6, 8]، خروجی باید countMissingNumbers(arr) = 3 باشد.

همانطور که می‌توانید ببینید، ۳، ۵ و ۷ موجود نمی‌باشند.

پیچیده - رفع کردن با استفاده از sort و حلقه for

برای دریافت کوچک‌ترین و بزرگ‌ترین اعداد، ما باید آن‌ها را به یک ترتیب صعودی بچینیم و برای این هدف، ما از متد sort استفاده می‌کنیم. سپس ما از کوچک‌ترین عدد تا بزرگ‌ترین عدد به صورت حلقه‌ای حرکت می‌کنیم. هر بار، ما بررسی می‌کنیم که آیا یک عدد متوالی در آرایه وجود دارد یا نه، و اگر وجود نداشته باشد شمارش را افزایش می‌دهیم.

function countMissingNumbers(arr) {
    arr.sort((a,b) => a-b);   
    let count = 0;   
    const min = arr[0];   
    const max = arr[arr.length-1];
    for (i = min; i<max; i++) {
      if (arr.indexOf(i) === -1) {
          count++;        
      }     
    }       
    return count;
}

ساده - رفع کردن با استفاده از Math.max و Math.min

این راه حل یک توضیح ساده دارد: تابع Math.max() بزرگ‌ترین عدد در آرایه را بر می‌گرداند و Math.min هم کوچک‌ترین عدد در آرایه را بر می‌گرداند.

اول، ما می‌بینیم که اگر همه اعداد حاضر باشند، چند عدد در آرایه وجود خواهند داشت. برای این مشکل، ما از فرمول maxNumber - minNumber + 1 استفاده می‌کنیم، و تفاوت بین نتیجه این محاسبه و طول آرایه، تعداد اعداد ناموجود را به ما می‌دهد.

function countMissingNumbers(arr) {
      return Math.max(...arr) - Math.min(...arr) + 1 - arr.length;
}

آخرین مشکلی که من می‌خواهم به عنوان یک مثال بیاورم، بررسی این است که آیا یک رشته، یک palindrome است یا نه.

* یک palindrome یک رشته است که از چپ به راست و راست به چپ، یکی می‌باشد.

پیچیده - بررسی کردن با استفاده از حلقه for

در این گزینه، ما بر روی رشته مورد نظر با شروع از اولین کاراکتر، تا نصف اول آن به صورت حلقه‌ای حرکت می‌کنیم. ورودی‌ آخرین کاراکتر در یک رشته، string.lengh-1 بوده، دومین کاراکتر آخر string.length-2 است و... پس در اینجا ما بررسی می‌کنیم که آیا کاراکتر موجود در ورودی مشخص شده از اول برابر با ورودی مشخص شده در آخر یکی است، یا نه. اگر این دو یکی نباشند، ما false را بر می‌گردانیم.

function checkPalindrome(inputString) {
   let length = inputString.length
   for (let i =0; i<length / 2; i++) {
        if (inputString[i] !== inputString[length - 1 -i]) {
             return false       
        }
   }
  return true
}

ساده - بررسی کردن با استفاده از reverse و join

به نظر من این راه حل ساده به هیچ توضیحی نیاز ندارد؛ زیرا خودش خودش را توضیح می‌دهد. ما به سادگی با استفاده از عملگر spread یک آرایه را از یک رشته می‌سازیم، سپس آرایه مذکور را معکوس می‌کنیم و بعد هم آن را باز هم با استفاده از متد join به یک آرایه تبدیل کرده و با رشته اصلی مقایسه می‌کنیم.

function checkPalindrome(string) {
   return string === [...string].reverse().join('');
}

همه چیز را ساده نگه دارید

وقتی که راه‌های ساده‌تری وجود دارند، چرا از راه‌های پیچیده استفاده کنیم؟ امیدوارم این مقاله برای شما جالب بوده باشد.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید