11) آموزش متدهای آرایه در جاوااسکریپت (Arrays Methods)

آموزش رایگان جاوااسکریپت

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

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

دوره مرتبط و تکمیلی: آموزش کامل آرایه ها در جاوااسکریپت

دوره کامل آموزش Arrays در جاوااسکریپت به همراه کلی مثال کاربردی برای یادگیری عمیق مبجث آرایه ها در جاوااسکریپت

متد تبدیل آرایه به رشته

گاهی اوقات لازمه که اعضا و آیتم های یک آرایه رو تبدیل به رشته کنیم و کار خاصی روش انجام بدیم. مثلا بخوایم نمایش بدیم. برای اینکار دوتا متد داریم. متد ()toString و متد ()join

متد ()toString

متد ()toString در جاوااسکریپت آرایه رو به رشته تبدیل میکنه. به این صورت که همه آیتم های یک آرایه رو داخل یک رشته میریزه و با یه کاما (ویرگول خارجیا) جدا میکنه.

var fruit = [ "Banana" , "Apple" , "Portugal"];
fruit.toString();
// output:   Banana, Apple, Portugal

متد ()join

متد join کاملا مشابه متد ()toString عمل میکنه، با این تفاوت که میشه جدا کننده بین آیتم های آرایه رو مشخص کرد. جداکننده رو داخل پرانتز و بین دوتا دبل کوتیشن مینویسیم.

var fruit = [ "Banana" , "Apple" , "Portugal"];
fruit.join(" * ");
// output:   Banana * Apple * Portugal

چند متد حذف و درج یک عنصر در آرایه

وقتی با آرایه ها کار می کنید، اضافه کردن یا حذف یک آیتم از آخر آرایه کار راحتیه و از دو متد ()pop و ()push در جاوااسکریپت استفاده میکنیم. متد pop برای حذف عنصر (آیتم) از آخر آرایه و متد push برای اضافه کردن به آخر آرایه کاربرد داره.

حذف و درج در آخر آرایه

متد ()pop

متد pop آخرین آیتم آرایه رو حذف میکنه.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.pop();    // remove last item of list
//output:  ["Banana" , "Apple"] 

متد ()push

متد push، مقداری که داخل پرانتزش قرار داره رو به آخر لیست یا همون آرایه اضافه میکنه.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.push("Kiwi");    // add to end of the list
//output:   ["Banana" , "Apple" , "Portugal" , "Kiwi"]

حذف و درج در اول آرایه

اضافه کردن یا حذف یک آیتم از ابتدا آرایه کار راحتیه و از دو متد ()shift و ()unshift در جاوااسکریپت استفاده میکنیم. متد shift برای حذف عنصر (آیتم) از اول آرایه و متد unshift برای اضافه کردن به اول آرایه کاربرد داره.

متد ()shift

متد shift مشابه متد pop عمل میکنه با این تفاوت که متد shift از اول آرایه حذف میکنه.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.shift(); 
//output: ["Apple" , "Portugal"]

متد ()unshift

متد unshift مشابه متد push عمل میکنه با این تفاوت که متد unshift به اول آرایه اضافه میکنه.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.unshift("Kiwi");
//output: ["Kiwi" , "Banana" , "Apple" , "Portugal"]

تغییر یکی از آیتم های آرایه

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

var fruit = ["Banana" , "Apple" , "Portugal"];

برای مثال میخوایم مقدار آیتم دوم رو عوض کنیم یعنی Apple. که شماره ایندکس آیتم دوم برابر با [1] است.

نکته: برای پیدا کردن شماره ایندکس کافیه از شماره آیتم یه واحد کم کنید. چون شماره ایندکس از [0] شروع میشه.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit[1] = "Kiwi"; 
// output:   ["Banana" , "Kiwi" , "Portugal"]

به همین راحتی، به همین خوشمزگی.

یک متد برای اضافه کردن یا حذف چند عنصر از آرایه

اکثر اوقات لازمه که از وسط آرایه چند عنصر حذف یا اضافه بشن، پس متدهای بالا کاربردی ندارن؛ در نتیجه سراغ متد پرکاربرد ()splice میریم.

متد ()splice برای اضافه کردن عنصر

متد ()splice برای اضافه کردن آیتم های بیشتر در آرایه کاربرد داره.

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.splice(1, 0, "Lemon", "Kiwi");

اولین پارامتر (1) مشخص میکنه که از کدام شماره ایندکس باید اضافه کردن آرایه شروع بشه.

دومین پارامتر (0) مشخص میکنه که چه تعداد آیتم حذف بشن تا آیتم های جدید جایگزین بشن. اگر مثل مثال 0 باشه، هیچ آیتمی حذف نمیشه و فقط آیتم های جدید اضافه میشه.

بقیه پارامترها ( “Lemon”, “Kiwi” ) همون آیتم های جدیدی هستش که باید به آرایه اضافه بشه.  

خروجی مثال بالا اینجوری میشه:

// output:   ["Banana" , "Lemon", "Kiwi" , "Apple" , "Portugal"];

در واقع باید از آخر تحلیل کرد؛
( “Lemon”, “Kiwi” ): دو مقدار Kiwi , Lemon
(0):  بدون اینکه آیتمی حذف بشه
(1): از شماره ایندکس 1 شروع کن به جایگذاری ، در واقع از ایندکس 1 و خود 1 رو 2 تا خونه ببر جلو تا آیتم های جدید اضافه بشن.

امیدوارم واضح گفته باشم.

متد ()splice برای حذف کردن عنصر

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

var fruit = ["Banana" , "Apple" , "Portugal"];
fruit.splice(1, 2);
// output: ["Banana"]

تحلیل کد بالا:

بقیه پارامترها خالی: پس قرار نیست آیتم جدید اضافه بشه.

(2): 2 تا آیتم باید حذف بشه.

(1): از شماره ایندکس 1 شروع کن به حذف کردن.

متد ترکیب دو آرایه باهم

گاهی اوقات لازمه تا 2 تا آرایه رو به هم بچسبونیم و تو یه آرایه جدید قرار بدیم یا چند تا Argument جدید به آخر آرایه اضافه کنیم. برای این کار از متد concat استفاده میکنیم.

متد ()concat

متد concat بعد از اسم اولین آرایه قرار میگیره و آرایه های دیگه یا Argument های دیگه داخل پرانتزش قرار میگیرن.

var fruit = ["Banana" , "Apple" , "Portugal"];
var food = ["Pizza" , "Cake"];
var new = fruit.concat(food); 
// output: ["Banana" , "Apple" , "Portugal" , "Pizza" , "Cake"]

حتی میتونید 3 تا آرایه رو با هم ترکیب کنید:

var fruit = ["Banana" , "Apple" , "Portugal"];
var food = ["Pizza" , "Cake"];
var drink = ["coca"];
var new = fruit.concat(food, drink); 
// output: ["Banana" , "Apple" , "Portugal" , "Pizza" , "Cake" , "coca"]

حتما لازم نیست تا 2 یا چند آرایه رو ترکیب کنید. میتونید به انتهای آرایه Argument اضافه کرد.

var fruit = ["Banana" , "Apple" , "Portugal"];
var new = fruit.concat(["Mongo" , "Lemon"]);
// output: ["Banana" , "Apple" , "Portugal" , "Mongo" , "Lemon"]

خب اگه آرایه ها و متدهای آرایه در جاوااسکریپت رو خوب یاد گرفتید؛ جلسه بعد به موضوع “مرتب سازی آرایه ها” میپردازیم.