۱۰ متد مفید جاوااسکریپت در رابطه با آرایه‌ها

10 دی

سلام دوستان. امیدوارم حالتون خوب باشه. در موقع کار کردن با جاوااسکریپت یکی از مواردی که زیاد استفاده می‌شه آرایه‌ها هستند و برای کار کردن با آرایه‌ها باید بتونید اون‌ها رو به شکل دلخواهتون دست‌کاری کنید. در این‌جا مقاله‌ای رو باهم مرور می‌کنیم که ۱۰ متد مفید و مهم رو برای کار کردن با آرایه‌ها بررسی و با مثال بیان کرده. البته ممکن هست که بعضی جاها رو با توضیح بیش‌تر یا به شکل متفاوتی بیان کنم. لینک اصلی مقاله رو هم براتون آخر مقاله می‌ذارم.

۱. متد forEach

اگر به زبان‌های برنامه‌نویسی دیگر و حتی به خود جاوااسکریپت آشنا باشید حتما از حلقه‌های for برای مرور و انجام عملیات روی اجزای آرایه زیاد استفاده کرده‌اید. متد forEach کار مشابهی رو برای ما انجام می‌ده:

  const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(function(item, index) {
    console.log(index); // output: 0 1 2 3 4 5
    console.log(item);  // output: 1 2 3 4 5 6
  });

همان‌طور که مشاهده می‌کنید متد forEach یک تابع با ورودی‌های item و index می‌گیره که اولی هرکدام از اعضای آرایه و دومی مکان قرارگیری یا ایندکس آن عضو است. توجه کنید که index از صفر شروع می‌شود.

۲. متد includes

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

 const arr = [1, 2, 3, 4, 5, 6];

 arr.includes(2); // output: true
 arr.includes(7); // output: false

همان‌طور که مشاهده می‌کنید عدد ۲ در آرایه موجود است. بنابراین این متد مقدار true را برمی‌گرداند. اما چون عدد ۷ در آرایه موجود نیست مقدار برگردانده شده توسط این متد false است.

۳. متد filter

این متد یک آرایه‌ی جدید می‌سازد و اعضای این آرایه آن‌هایی هستند که شرط filter در آن‌ها برقرار است. مثال زیر را ببینید:

  const arr = [1, 2, 3, 4, 5, 6];

  // item(s) greater than 3
  const filtered = arr.filter(function(num){ return num > ‌۳; });
  
  console.log(filtered); // output: [4, 5, 6]
  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

همان‌طور که در مثال بالا ملاحظه می‌کنید متد filter به عنوان ورودی، یک تابع را با ورودی num (که هر کدام از اعضا را وارد تابع می‌کند) گرفته و تنها در صورتی که آن تابع برای عضو آرایه مقدار true برگرداند آن عضو آرایه در آرایه‌ی جدید حضور خواهد داشت. همان‌طور که می‌بینید آرایه filtered دارای اعضای ۴، ۵ و ۶ است که همگی از ۳ بزرگ‌ترند. همچنین آرایه‌ی اول یعنی arr تغییری نخواهد کرد.

۴. متد map

متد map به ازای هریک از اعضای آرایه یک تابع را اجرا کرده و مقداری که آن تابع برمی‌گرداند را در آرایه جدیدی می‌ریزد. به شکل زیر:

  const arr = [1, 2, 3, 4, 5, 6];

  // double every element
  const doubled = arr.map(function(num) { return num * 2; });
  console.log(doubled); // output [2, 4, 6, 8, 10, 12]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

همان‌طور که مشاهده می‌کنید تابعی که درون map قرار دارد هریک از اعضای آرایه‌ی arr را دوبرابر کرده و در آرایه‌ی doubled می‌ریزد. نتیجه‌ یعنی doubled آرایه‌ای است که اعضای آن دوبرابر شده‌ی اعضای arr هستند و همان‌طور که می‌بینید خود arr نیز تغییری نداشته است.

۵. متد reduce

کاری که متد reduce انجام می‌دهد این است که با گرفتن یک “جمع کننده” (accumulator) و هریک از اعضای آرایه، اعضای آرایه را به “یک مقدار” مشخص تقلیل می‌دهد. برای روشن شدن موضوع به مثال زیر دقت کنید:

const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce(function(total, value){ return (total + value); }, 0);
console.log(sum); // 21

همان‌طور که در مثال بالا ملاحظه می‌کنید، reduce دو مقدار می‌گیرد: اول یک تابع که تک‌تک مقادیر را (value) می‌گیرد و مقداربرگشتی از آن تابع به “جمع‌کننده” (total) اضافه می‌شود. هر مقداری که این تابع برگرداند داخل جمع‌کننده ذخیره می‌شود تا در هنگام اجرای تابع برای عضو بعدی آرایه بتوان از آن استفاده کرد. دوم مقدار اولیه‌ی جمع کننده که این‌جا صفر است. بنابر توضیحات گفته شده چیزی که از کد بالا انتظار داریم مجموع اعداد آرایه است که در ثابت sum قرار می‌گیرد. اگر بخواهیم با استفاده از for مشابه کد بالا را بنویسیم به شکل زیر در می‌آید:

const arr = [1, 2, 3, 4, 5, 6];
let sum = 0;
for(let i = 0; i< arr.length; i++){
    sum += arr[i];
}
console.log(sum); //21

همان‌طور که می‌بینید کد اول نسبت به این کد کوتاه‌تر و دارای خوانایی بیش‌تری است. بخصوص اگر بخواهید عملیات مفصل‌تری را بر روی اعضای آرایه انجام دهید.

۶. متد some

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

const arr = [1, 2, 3, 4, 5, 6];

// at least one element is greater than 4?
const largeNum = arr.some(function (num) { return num > ۴; });
console.log(largeNum); // output: true

// at least one element is less than or equal to 0?
const smallNum = arr.some(function (num) { num <= 0; });
console.log(smallNum); // output: false

در مثال بالا، بار اول چک کرده‌ایم آیا آرایه عددی بزرگ‌تر از ۴ دارد یا نه (خط ۴). که مشخصا جواب true خواهد بود که این مقدار داخل largeNum ریخته می‌شود. بار دوم در خط ۸ چک کرده‌ایم آیا آرایه عددی کم‌تر از صفر دارد یا نه و این‌بار جواب منفی یا false است که این مقدار داخل smallNum ریخته می‌شود.

۷. متد every

متد every دقیقا مشابه متد some پیاده‌سازی می‌شود. با این تفاوت که شرط باید روی همه‌ی اعضای آرایه صادق باشد. مثال:

const arr = [1, 2, 3, 4, 5, 6];

// all elements are greater than 4
const greaterFour = arr.every(function (num) { return num > ۴; });
console.log(greaterFour); // output: false

// all elements are less than 10
const lessTen = arr.every(function (num) { return num < 10; });
console.log(lessTen); // output: true

در خط ۴ بررسی می‌کنیم آیا همه‌ی اعضای آرایه از ۴ بزرگ‌تر هستند؟ که البته جواب false است. در خط ۸ بررسی می‌کنیم آیا همه‌ی اعضای آرایه از ۱۰ کم‌تر هستند؟ بله و جوابtrue است.

۸. متد sort

با این متد می‌توان اعضای یک آرایه را به شکل صعودی یا نزولی مرتب کرد. برای مشخص شدن نحوه‌ی کار به مثال زیر توجه کنید:

const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

// sort in descending order
descOrder = arr.sort(function (a, b) { return a > b ? -1 : 1; });
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sort in ascending order
ascOrder = alpha.sort(function (a, b) { return a > b ? 1 : -1; });
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

یک تابع با دو ورودی وارد sort می‌شود. ورودی‌ها با یک‌دیگر مقایسه می‌شوند. بسته به مقایسه‌ی دو عضو، اگر مقداری کوچک‌تر از صفر برگردانده شود، مقدار a در ایندکس کم‌تری نسبت به مقدار b قرار می‌گیرد و اگر مقداری بزرگ‌تر از صفر برگردانده شود، b در ایندکس کم‌تری نسبت به a قرار می‌گیرد. در صورتی که صفر برگردانده شود، ترتیب a و b تغییر داده نمی‌شود. برای مثال در خط ۵، گفته شده که اگر a از b بزرگ‌تر باشد در ایندکس کم‌تری قرار بگیرد (برگرداندن مقدار منفی) و این به معنی مرتب‌سازی نزولی است. در خط ۹ نیز حروف با هم مقایسه شده و گفته شده اگر ترتیب الفبایی a بزرگ‌تر از b باشد، b در ایندکس کم‌تری نسبت به a قرار بگیرد (برگرداندن مقدار مثبت) که به معنی مرتب‌سازی صعودی است.

این قابلیتِ انتخابی بودن تابع ورودی در sort باعث می‌شود این متد انعطاف‌پذیری بالایی داشته باشد. مثلا اگر بخواهیم آرایه‌ای از آرایه‌ها (آرایه‌ی دو بعدی) را بر اساس یکی از اعضای آرایه‌های داخلی مرتب‌سازی کنیم می‌توانیم بنویسیم:

const arr = [[2, 'two'], [4, 'four'], [3, 'three'], [1, 'one']];

const newArr = arr.sort(function (a, b) { return a[0] - b[0]; });
console.log(newArr);

اگر a[0] بزرگ‌تر از b[0] باشد، مقدار بزرگ‌تر از صفر برگردانده شده و b در ایندکس کم‌تری نسبت به a قرار می‌گیرد که به معنی مرتب‌سازی صعودی نسبت به مقدار اول آرایه‌های داخلی است.

۹. متد Array.from

این متد یک مقدار شبه‌آرایه یا قابل گسترش (iterable) را گرفته و از آن یک آرایه‌ی واقعی می‌سازد. در مورد مقادیر قابل گسترش بعدها می‌نویسم و این‌جا لینک می‌کنم ولی توصیه می‌کنم اگر در مورد این نوع مقادیر اطلاعی ندارید گوگل کنید. مثال زیر را ببینید:

 const name = 'Maysam';
 const nameArray = Array.from(name);

 console.log(name); // output: Maysam
 console.log(nameArray); // output: ['M', 'a', 'y', 's', 'a', 'm']

همان‌طور که می‌دانید مقادیر رشته‌ای (String) جزو مقادیر گسترش‌پذیر محسوب می‌شوند و می‌توان آن را نسبت به کاراکترها گسترش و به آرایه‌ای از کاراکترها تبدیل کرد. چیزی که کد بالا به روشنی نمایش می‌دهد. این متد در مورد تبدیل عبارات شبه‌آرایه‌ای به آرایه واقعی نیز کاربرد دارد. مثال زیر را ببینید:

  // I assume that you have created unorder list of items in our html file.

  const lis = document.querySelectorAll('li');
  const lisArray = Array.from(document.querySelectorAll('li'));

  // is true array?
  console.log(Array.isArray(lis)); // output: false
  console.log(Array.isArray(lisArray));  // output: true

در مثال بالا فرض شده ما در فایل HTML خود چند تگ li داریم. در خط ۳ این کدها توسط querySelectorAll به شکل شبه‌آرایه‌ای داخل متغیر lis ریخته شده است. در خط ۴ این مقدار شبه‌ آرایه‌ای به آرایه واقعی تبدیل شده است. همان‌طور که می‌بینید در خط ۷ متد isArray برای متغیر lis مقدار false برمی‌گرداند و آن را آرایه نمیشناسد. اما در خط ۸ نوع lisArray را آرایه تشخیص می‌دهد.

نکته:

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

const name = 'Maysam';
const nameArray = [...name];

console.log(name); // output: Maysam
console.log(nameArray); // output: ['M', 'a', 'y', 's', 'a', 'm']
  // I assume that you have created unorder list of items in our html file.

  const lis = document.querySelectorAll('li');
  const lisArray = [...document.querySelectorAll('li')];

  // is true array?
  console.log(Array.isArray(lis)); // output: false
  console.log(Array.isArray(lisArray));  // output: true

۱۰. متد of

این متد همه مقادیری که به عنوان ورودی به آن داده می‌شود را داخل یک آرایه ریخته و آن را برمی‌گرداند. مثال:

const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

اقتباس شده از:
۱۰ JavaScript array methods you should know

10 دی دسته‌هاجاوااسکریپت برچسب‌هاجاوااسکریپت

this در جاوااسکریپت را بهتر بشناسیم

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

10 دی دسته‌هاجاوااسکریپت برچسب‌هاPromise و جاوااسکریپت

Promiseها در جاوااسکریپت - بخش چهارم (آخر)

در این بخش از مقاله که بخش پایانی سری مقالات Promise‌ها است پروژه‌ای که تعریف کرده بودیم را تکمیل می‌کنیم و نکات ارزشمندی پیرامون استفاده‌ی حرفه‌ای از Promiseها بیان می‌کنیم. با من همراه باشید.

10 دی دسته‌هافروش آنلاین و وردپرس برچسب‌هافروشگاه آنلاین و فروشگاه اینترنتی

فروشگاه اینترنتی خوب و موفق چه ویژگی هایی دارد؟

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

10 دی دسته‌هاجاوااسکریپت برچسب‌هاجاوااسکریپت

10 متد مفید جاوااسکریپت در رابطه با آرایه‌ها

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