کار با متدها در آرایه های جاوا اسکریپت

سیده آمین ارمان

کاربر نگاه دانلود
کاربر نگاه دانلود
عضویت
2016/05/10
ارسالی ها
1,730
امتیاز واکنش
20,744
امتیاز
795
محل سکونت
البرز
متدهای مرتبط با آرایه ها در زبان جاوا اسکریپت که گاهی اوقات «Array Functions» نیز نامیده می شوند، می توانند راه هایی آسان برای کار با آرایه ها و تغییر اطلاعات درون آن ها برای ما فراهم کنند. در این آموزش، لیستی از متدهای آرایه ها در جاوا اسکریپت، به همراه توضیح آن ها را آورده ایم.

به کار گیری متدها
سینتکس یا دستورات مورد نیاز برای استفاده از متدها، با توجه به هر متد و کاربرد آن متفاوت است. با وجود این، برای دسترسی به کاربرد هر یک از متدهای مرتبط با آرایه ها، باید از همان روش dot notation که در بخش پراپرتی ها استفاده می کردیم، بهره بگیریم. در جدول زیر، برخی از رایج ترین متدهای آرایه ها در زبان جاوا اسکریپت را به همراه توضیح شان آورده ایم:

متد خروجی
()concat آرایه ای جدید که حاصل ترکیب آرایه ی اولیه با یک آرایه دیگر یا مقادیر آن است.
()every خروجی true در صورتی که تمامی المنت های درون آرایه، شرط در نظر گرفته شده را داشته باشند.
()filter آرایه ای جدید شامل تمام المنت هایی که شرط در نظر گرفته شده را داشته باشند.
()forEach فانکشنی را برای تمام المنت های درون آرایه، یک بار اجرا می کند.
()indexOf ایندکس اولین موقعیتی که مقدار مد نظر پیدا شود را بر می گرداند؛ در صورت عدم وجود، مقدار 1- را باز می گرداند.
()lastIndexOf ایندکس آخرین موقعیتی که مقدار مد نظر پیدا شود را بر می گرداند؛ در صورت عدم وجود، مقدار 1- را باز می گرداند.
()join تمام المنت های یک آرایه را به شکل یک استرینگ، به هم می چسباند.
()map آرایه ای جدید، حاصل از اعمال یک فانکشن بر روی تمامی اعضای یک آرایه.
()pop آخرین المنت درون آرایه را حذف می کند و آن المنت را نمایش می دهد.
()push افزودن آیتم های جدید به انتهای یک آرایه و نمایش طول جدید آرایه.
()reduce با اعمال یک فانکشن بر روی آرایه، آن را به یک مقدار واحد تبدیل می کند (از چپ به راست).
()reduceRight دو عضو از آرایه را با اعمال یک فانکشن بر روی آن ها به صورت همزمان، به یک عضو تبدیل می کند (از راست به چپ).
()reverse ترتیب اعضا در آرایه را برعکس می کند.
()shift اولین المنت درون آرایه را حذف کرده و نمایش می دهد که باعث تغییر در طول آرایه می شود.
()slice بخشی از آرایه را انتخاب کرده و به عنوان یک آرایه ی جدید نمایش می دهد.
()some خروجی true در صورتی که یک یا چند مورد از المنت های درون آرایه، شرط در نظر گرفته شده را داشته باشند.
()sort اعضای آرایه را به ترتیب بیان شده، مرتب می کند و آرایه ی جدید را نمایش می دهد (به صورت پیش فرض، اعضا بر اساس حروف الفبا و صعودی مرتب می شوند).
()splice حذف یا اضافه ی المنت ها به آرایه و نمایش اعضای حذف شده.
()toString تبدیل تمامی اعضای آرایه به یک استرینگ.
()unshift مقادیری را به ابتدای آرایه اضافه می کند سپس طول آرایه ی جدید را نمایش می دهد.
اکنون برای آن که با این متدها بیشتر آشنا شویم، در ادامه برخی از آن ها که نیاز به توضیح اضافی دارند را با ذکر مثال بررسی می کنیم.

()concat
همان طور که گفته شد، از این متد برای به هم چسباندن دو آرایه استفاده می شود. کد زیر را در نظر بگیرید:

var fruits = ["Banana", "Orange", "Apple"];
var drinks = ["Milk", "Water", "Juice"];
fruits.concat(drinks); //returns ["Banana", "Orange", "Apple", "Milk", "Water", "Juice"]
در اینجا، پس از ایجاد آرایه های fruits و drinks به ترتیب به معنی «میوه ها» و «نوشیدنی ها»، با استفاده از متد ()concat و روش فراخوانی dot notation، آرایه ی اول را به آرایه دوم چسباندیم (واژه ی contact به معنی «به هم چسباندن» و یا «الصاق کردن» است.) توجه داشته باشید که مقادیر آرایه ی دوم، در انتهای آرایه ی اول اضافه شده اند. اگر در این روش، متد ()concat را بر روی آرایه ی دوم اعمال می کردیم، عکس این عمل اتفاق می افتاد؛ یعنی مقادیر آرایه ی دوم در ابتدا قرار گرفته و مقادیر آرایه ی اول در انتهای آن ها اضافه می شدند.

()every
این متد، شرطی که ما برای آن تعیین می کنیم را بر روی تک تک اعضای آرایه بررسی می کند و اگر همه ی اعضای آرایه، شرط در نظر گرفته شده را داشته باشند، خروجی true را نمایش می دهد. در این متد، حتی اگر یکی از اعضا، شرط ذکر شده را رعایت نکرده باشد، خروجی false خواهد بود:

var ages = [32, 33, 38, 14];
function checkAdult(age) {
return age >= 18;
}
ages.every(checkAdult); //returns false
در این مثال، فرض کنیم که آرایه ی ages حاوی سن ۴ انسان است که همگی آن ها به جز ۱ نفر، بالای ۱۸ سال هستند. حال می خواهیم شرط داشتن سن قانونی یا بالای ۱۸ سال را بر روی اعضای این آرایه بررسی کنیم. فانکشن checkAdult بررسی می کند که آیا عدد مورد بررسی، بیشتر یا مساوی ۱۸ است یا خیر. اکنون با استفاده از متد ()every می توان این فانکشن (بررسی سن قانونی) را بر روی تک تک اعضای آرایه بررسی کرد. از آنجایی که یکی از این افراد دارای ۱۴ سال سن است و شرط برای وی برقرار نیست، پس خروجی متد ()every در اینجا false خواهد بود.

()filter
این آرایه تا حدودی مشابه متد ()every عمل می کند. در متد ()filter، شرطی که ما برای آن تعیین می کنیم، بر روی تک تک اعضای آرایه بررسی می شود و در نهایت، تمامی اعضایی که شرط گفته شده را داشتند، در یک آرایه ی جداگانه قرار می گیرند. تفاوت این متد با متد قبلی آن است که ()filter به ما خواهد گفت که از میان اعضای آرایه، کدام یک شرط مورد نظر ما را دارند و آن ها را برای ما گلچین می کند. بگذارید این متد را بر روی مثال قبلی اعمال کنیم:

var ages = [32, 33, 38, 14];
function checkAdult(age) {
return age >= 18;
}
ages.filter(checkAdult); //returns [32, 33, 38]
همان طور که مشاهده می کنید، تنها ۳ عضو از آرایه ی ages شرط گفته شده (بالای ۱۸ سال) را داشتند و پس از اعمال متد ()filter بر روی آرایه، این ۳ عضو در آرایه ای جداگانه به عنوان خروجی نمایش داده می شوند.

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

var company = ["microsoft", "google", "apple", "google"];
company.indexOf("google"); //returns 1
آرایه ی بالا شامل ۴ المنت است که البته المنت "google" در آن دو بار تکرار شده است؛ یک بار در ایندکس شماره ی ۱ و باری دیگر در ایندکس شماره ی ۳ (به خاطر داشته باشید که در آرایه های جاوا اسکریپت، شمارش ایندکس از ۰ شروع می شود.)

حال فرض کنید که می خواهیم نام کمپانی google را در این آرایه جستجو کنیم و در صورت وجود، مکان آن در آرایه را نیز بفهمیم. برای این کار، متد ()indexOf را فراخوانی کرده و سپس عبارت "google" را به عنوان مقدار مورد نظر برای جستجو، وارد می کنیم. سپس این متد، اعضای آرایه را به ترتیب بررسی می کند و به محض برخورد به اولین نتیجه، شماره ی ایندکس آن را نمایش می دهد. در اینجا، با آن که مقدار google در ۲ خانه ی ایندکس متفاوت تکرار شده، اما متد ()indexOf تنها به اولین مکان آن اهمیت می دهد و به همین دلیل خروجی آن، ایندکس شماره ی ۱ است.

به خاطر داشته باشید
اگر در این مثال، به جای مقدار google، عبارت Google با G بزرگ را جستجو می کردیم، متد ما هیچ مورد متناظری را پیدا نمی کرد و مقدار 1- را نمایش می داد. همان طور که قبلاً گفته شد، زبان جاوا اسکریپت به بزرگی و کوچکی حروف حساس است، پس در نوشتن صحیح عبارات باید دقت کنیم.
()lastIndexOf
این متد دقیقاً همانند متد ()indexOf عمل می کند، تنها با این تفاوت که به جای ایندکس اولین موقعیت یافت شده از عبارت جستجو، آخرین ایندکس یافت شده نمایش داده می شود:

var company = ["microsoft", "google", "apple", "google"];
company.lastIndexOf("google"); //returns 3
جستجوی عبارت "google" در این آرایه، دو موقعیت را به دست می دهد؛ یکی ایندکس شماره ی 1 و دیگری ایندکس شماره ی 3. بر خلاف متد قبلی، این متد آخرین موقعیت یافت شده یعنی ایندکس 3 را به عنوان خروجی نمایش می دهد.

()join
این متد، تمامی اعضای یک آرایه را به استرینگ تبدیل کرده و سپس آن ها را پشت سر هم، در قالب یک استرینگ بزرگتر، چاپ می کند:

var myArray = ["Banana", 2, "Orange"];
myArray.join(); //returns "Banana,2,Orange"
آرایه ی myArray دارای ۳ عضو متفاوت، شامل عدد و متن است. با اعمال متد ()join بر روی این آرایه، ابتدا تمامی اعضاء به استرینگ تبدیل شده و سپس به یکدیگر چسبانده می شوند و به شکل یک استرینگ بزرگ، نمایش داده می شوند. توجه کنید که این متد برای جداسازی اعضاء در استرینگ نهایی، به طور پیش فرض از ویرگول یا کاما استفاده می کند اما می توان برای اهداف خاص، در داخل پرانتز از جداکننده ی دلخواه استفاده کرد. برای این کار، باید جداکننده ی دلخواه را در داخل دابل کوتیشن و به صورت زیر قرار داد:

myArray.join("*");
در چنین شرایطی، خروجی به صورت زیر خواهد بود:

myArray.join("*"); //returns "Banana*2*Orange"
()pop
برای درک بهتر این متد، بهتر است نگاهی به مثال زیر بیاندازیم:

var fruits = ["Banana", "Orange", "Apple"];
fruits.pop(); //returns "Apple"
console.log(fruits); //returns ["Banana", "Orange"]
آخرین عضو آرایه ی fruits، استرینگی است تحت عنوان "Apple" که با اعمال متد ()pop بر روی این آرایه، استرینگ Apple از آرایه حذف می شود و بلافاصله نمایش داده می شود. سپس اگر از جاوا اسکریپت بخواهیم که آرایه ی fruits را به ما نشان بدهد، خواهیم دید که عضو آخر به کلی حذف شده است.

()push
این متد، مقادیر جدیدی را به انتهای آرایه می افزاید و سپس طول جدید آرایه یا به عبارت دیگر length آن را نمایش می دهد:

var fruits = ["Banana", "Orange"];
fruits.push("Apple", 7); //returns 4
console.log(fruits); //returns ["Banana", "Orange", "Apple", 7]
در داخل پرانتزهای متد ()push می بایست مقادیری که می خواهیم به آرایه اضافه کنیم را تایپ کنیم. در این مثال، ما دو مقدار "Apple" و 7 را به آرایه اضافه کردیم که یکی از آن ها استرینگ و دیگری عدد است. برای جداسازی مقادیر در زمان افزودن نیز از ویرگول یا کاما در میان آن ها استفاده می کنیم. همان طور که می بینید، به محض اضافه کردن مقادیر، خروجی ۴ نمایش داده می شود که در حقیقت طول جدید آرایه (یا تعداد اعضای آن) است. اگر لیست اعضای آرایه را نیز فراخوانی کنیم، خواهیم دید که همه ی مقادیر درخواستی، به درستی اضافه شده اند.

()reduce
برای درک بهتر این متد، می بایست ابتدا مثال زیر را بررسی کنیم:

var numbers = [10, 23, 55, 2];
function getSum(total, num) {
return total + num;
}
numbers.reduce(getSum); //returns 90
console.log(numbers); //returns [10, 23, 55, 2];
برای استفاده از این متد بر روی یک آرایه، نیاز به یک فانکشن داریم که بتواند بر روی آرایه ی ما کاربرد داشته باشد. در مثال بالا، آرایه ی numbers تماماً از اعداد تشکیل شده و فانکشن getSum نیز با جمع اعداد با یکدیگر، مجموع کلی چند عدد را محاسبه می کند. پس نیازمندی های لازم برای استفاده از متد ()reduce را در اختیار داریم.

وظیفه ی این متد آن است که با اعمال فانکشن داده شده بر روی تک تک اعضای آرایه، آن را به یک مقدار واحد تبدیل کند. در اینجا، فانکشن getSum به کمک متد ()reduce می تواند ۲ عدد از یک مجموعه را به ترتیب بخواند، آن ها را با یکدیگر جمع کند و در متغیر total ذخیره کند. سپس به سراغ عدد بعدی می رود، آن را با مقدار فعلی total جمع می کند و نتیجه ی جدید را مجدداً در total ذخیره می کند. این کار تا زمانی که دیگر عدد جدیدی برای جمع کردن وجود نداشته باشد، ادامه پیدا می کند. در نهایت، تنها یک عدد باقی می ماند که آن هم مجموع تمام اعداد داده شده به این فانکشن است؛ یعنی دقیقاً همان کاری که می خواهیم متد ()reduce انجام دهد.

پس از اتمام کار، متد ()reduce مقدار نهایی را به عنوان خروجی نمایش می دهد که در این مثال، عدد ۹۰ است. با این حال اگر لیست اعضای آرایه را فراخوانی کنیم، متوجه خواهیم شد که متد ()reduce تغییری در آرایه ی اصلی ایجاد نمی کند و اعضای آن بدون تغییر باقی مانده اند.

تفاوت این متد با متد ()reduceRight در آن است که متد ()reduce، کار خود را از سمت چپ و ایندکس ۰ آغاز می کند اما متد ()reduceRight، کار خود را از انتها به ابتدا شروع می کند.

()reverse
ترتیب اعضای یک آرایه را بر عکس می کند و خروجی را نمایش می دهد:

var fruits = ["Banana", "Orange", "Apple"];
fruits.reverse(); //returns ["Apple", "Orange", "Banana"]
()shift
اولین عضو یک آرایه را حذف می کند و همان عضو را به عنوان خروجی نمایش می دهد:

var fruits = ["Banana", "Orange", "Apple"];
fruits.shift(); //returns "Banana"
console.log(fruits); //returns ["Orange", "Apple"]
()slice
این متد قسمتی از آرایه را انتخاب کرده و سپس آن را به عنوان یک آرایه ی جدید، در خروجی نمایش می دهد. متد ()slice نیازمند ۲ ورودی است؛ اولین ورودی، آدرس شروع یا مبداً است و دومین ورودی، آدرس پایان یا مقصد است:

var colors = ["Blue", "Green", "Purple", "White"];
colors.slice(1, 3); //returns ["Green", "Purple"]
console.log(colors); //returns ["Blue", "Green", "Purple", "White"]
آرایه ی colors دارای ۴ عضو متفاوت است. همان طور که گفتیم، متد ()slice به ۲ ورودی نیازمند است که هر دوی آن ها، آدرس یا شماره ی ایندکس اعضای آرایه ی مد نظر هستند. اولین ورودی عدد ۱ است که مکان عضو Green را مشخص می کند. دومین ورودی عدد ۳ است که مکان عضو White را نشان می دهد.

حال متد ()slice اعضای میان مبداً و مقصد را انتخاب کرده و در قالب آرایه ای جدید، به عنوان خروجی نمایش می دهد. البته باید به این نکته دقت کرد که عضو مقصد (یعنی شماره ی ایندکس ۳ یا White) در اینجا انتخاب نمی شود و اعضای پیش از آن مد نظر خواهند بود. همچنین، اگر لیست اعضای colors را فراخوانی کنیم، خواهیم دید که متد ()slice تغییری در آرایه اصلی ایجاد نکرده است.

()some
این متد همانند متد ()every عمل می کند اما تفاوت آن ها در این است که در متد ()some اگر حتی یک عضو از اعضای آرایه دارای شرط گفته شده باشد، خروجی این متد true خواهد بود و نیازی نیست که حتماً تمامی اعضاء، شرط را رعایت کنند.

()splice
به کمک این متد می توان مقادیری را در هر قسمت از آرایه اضافه یا حذف کرد. این متد به ۳ ورودی جداگانه نیاز دارد؛ ورودی اول ایندکس شروع، ورودی دوم تعداد اعضاء برای حذف و ورودی سوم مقادیری که قرار است اضافه شوند:

var colors = ["Blue", "Green", "Purple", "White"];
colors.splice(2, 0, "Red", "Yellow"); //returns []
console.log(colors); //returns ["Blue", "Green", "Red", "Yellow", "Purple", "White"]
در این مثال، متد ()splice بر روی آرایه ی colors اعمال شده است. اولین ورودی این متد یعنی عدد ۲، می گوید که از شماره ی ایندکس ۲ آرایه (یعنی خانه ی متعلق به "Purple") می بایست کار را آغاز کرد. ورودی دوم یعنی عدد ۰ به متد می گوید که به تعداد ۰ عضو، از شماره ی ایندکس ۲ به بعد را حذف کن. پس هیچ عضوی حذف نمی شود. سپس ورودی های سوم و چهارم که Red و Yellow هستند، همگی به آرایه اضافه خواهند شد.

بدین ترتیب، متد ()splice شماره ی ایندکس ۲ را پیدا می کند و کار خود را از آن موقعیت آغاز می کند. از آنجایی که نیاز به حذف اعضا نیست (به عبارت دیگر، ورودی دوم ۰ است)، ۲ عضو جدید از همان ابتدای ایندکس شماره ۲ به آرایه اضافه می شوند.

از آنجایی که هیچ عضوی حذف نشده، پس در زمان فراخوانی متد، هیچ خروجی نیز نمایش داده نمی شود. اما در صورت فراخوانی لیست اعضا، متوجه می شویم که Red و Yellow از خانه ی ایندکس 2 به آرایه اضافه شده و Purple و White را به جلو رانده اند. حال این مثال را در نظر بگیرید:

var colors = ["Blue", "Green", "Purple", "White"];
colors.splice(1, 3); //returns ["Green", "Purple", "White"]
console.log(colors); //returns ["Blue"]
در این مورد، متد ()splice از ایندکس شماره ی ۱ آغاز شده و به تعداد ۳ عضو از آرایه را حذف می کند. در نتیجه، خانه ی ابتدایی یعنی Green انتخاب می شود و از همان نقطه به بعد، ۳ عضو حذف می گردند. پس از اتمام اجرای متد نیز اعضای حذف شده به عنوان خروجی نمایش داده می شوند که شامل Green، Purple و White می شود. همان طور که مشاهده می کنید، این متد می تواند آرایه ی اصلی را تغییر دهد و اکنون فقط یک عضو Blue در آرایه باقی مانده است.

()unshift
این متد مقادیر جدیدی را به ابتدای آرایه می افزاید، در صورتی که متد ()push مقادیر جدید را به انتهای آرایه اضافه می کند. البته این متد نیز مانند ()push، پس از افزودن مقادیر جدید، طول جدید آرایه را به عنوان خروجی نمایش می دهد.

var fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Lemon", "Kiwi"); //returns 5
console.log(fruits); //returns ["Lemon", "Kiwi", "Banana", "Orange", "Apple"]
 

برخی موضوعات مشابه

بالا