وبلاگ

6 قطعه کد جاوا اسکریپت برای حل مشکلات رایج


Sara Jabbari Sara Jabbari

مانند بسیاری از زبان‌های برنامه نویسی، جاوا اسکریپت دارای نقص‌ها و علائم مربوط به آن است. توابع داخلی یا سینتکسی که فکر می‌کنید باید وجود داشته باشد، وجود ندارد. خروجی گرفتن از ابتدایی‌ترین ورودی‌ها می‌تواند شما را به مرز جنون بکشاند. حتی موارد اساسی مانند حلقه‌ها متفاوت از آنچه انتظار می‌رود رفتار می‌کنند. (true + true چه می‌شود؟)

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

توجه: بسیاری از این مثال‌ها از ES6 استفاده می‌کنند و جاوا اسکریپت ساده وانیلی نیستند. بسته به اینکه با چه نوع فریمورکی کار می‌کنید ممکن است بتوانید یا نتوانید از سینتکس ES6 استفاده کنید.

1. پیدا کردن یک شی خاص در یک مجموعه از اشیاء

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

let customers = [
  { id: 0, name: 'paul' },
  { id: 1, name: 'jeff' },
  { id: 2, name: 'mary' }
];

let customer = customers.find(cust => cust.name === 'jeff');

console.log(customer);

--> { id: 1, name: 'jeff' }

2. حلقه زدن روی کلیدها و مقادیر یک شی

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

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

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

let myObject = { one: 1, two: 2, three: 3 };

Object.keys(myObject).forEach((key, value) => {
  //...do something

  console.log(key, value);
});

3. فیلتر کردن آرایه‌ای از اشیاء بر اساس یک شرط

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

let data = [
  "files/dir1/file",
  "files/dir1/file2",
  "files/dir2/file",
  "files/dir2/file2"
];

let filteredData = data.filter(path => path.includes('dir2'));

console.log(filteredData);

--> [ 'files/dir2/file', 'files/dir2/file2' ]

فیلتر کردن برای یک دایرکتوری خاص در آرایه بالا از مسیرها آسان است. با مشخص کردن اینکه رشته مسیر باید شامل رشته "dir2" باشد، هر مسیری را فیلتر می‌کنید که حاوی "dir2" در آن‌ها نباشد. به یاد داشته باشید که هر تابعی که برای فیلتر استفاده می‌کنید باید برای مواردی که در نتیجه از آن استفاده می‌شود، true باشد.

4. تخصیص متغیر مخرب

اختصاص متغیرها از یک آرایه یک به یک وقت گیر و غیرمنطقی است. برای تحقق سریعتر و آسان‌تر فقط از تخصیص مخرب استفاده کنید:

let profile = ['bob', 34, 'carpenter'];

let [name, age, job] = profile;

console.log(name);

--> 'bob'

 

5. کلید را به یک شی با همان نام اختصاص دهید.

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

let name = 'bob';
let age = 34;
let job = 'carpenter';

// instead of this
let myObject1 = { name: name, age: age, job: job };

// do this
let myObject2 = { name, age, job };

console.log(myObject2);

--> { name: 'bob', age: 34, job: 'carpenter' }

6. استفاده از عملگر spread

عملگر spread به شما اجازه می‌دهد تا کاملاً یک آرایه را "گسترش" دهید. این می‌تواند برای تبدیل آرایه به یک لیست از آرگومان ها و یا حتی ترکیب دو آرایه با هم مورد استفاده قرار گیرد. همچنین می‌توانید از آن برای تشکیل لیستی از آرگومان‌ها برای یک تابع استفاده کنید. مثال زیر را ببینید:

let data = [1,2,3,4,5];

console.log(...data);

--> 1 2 3 4 5

let data2 = [6,7,8,9,10];

let combined = [...data, ...data2];

console.log(...combined);

--> 1 2 3 4 5 6 7 8 9 10

console.log(Math.max(...combined));

--> 10

در مثال اول ما نشان می‌دهیم که چگونه عملگر spread در یک آرایه کار می‌کند و هر مورد را به یک عنصر مجزا تبدیل می‌کند. مثال دوم، محتوای دو آرایه را با ایجاد یک آرایه موقت جدید حاوی هر دو محتوا ترکیب می‌کند. مثال آخر نشان می‌دهد که چگونه عملگر spread می‌تواند یک آرایه را به لیستی از آرگومان یک تابع تبدیل کند. Math.max بالاترین تعداد را در لیستی از آرگومان‌ها به آن می‌دهد. یکی از این آرگومان ها 10 است که بالاترین آن‌ها است.



Sara Jabbari
Sara Jabbari

مطالب مرتبط

معرفی فیچرهای رایج اکما اسکریپت 6 (ES6)

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

دیدگاه‌ها