متدهای آرایه در javascript - قسمت ۱۱

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

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

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

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

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

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

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

متد ()toString

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

var fruit = [ &quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.toString();
// output:   Bannana,Apple,Portugal

متد ()join

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

var fruit = [ &quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.join(&quot * &quot);
// output:   Bannana * Apple * Portugal

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

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

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

متد ()pop

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.pop();    // remove last item of list
//output:  [&quotBannana&quot , &quotApple&quot]

متد ()push

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.push(&quotKiwi&quot);    // add to end of the list
//output:   [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot , &quotKiwi&quot]

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

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

متد ()shift

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.shift(); 
//output: [&quotApple&quot , &quotPortugal&quot]

متد ()unshift

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.unshift(&quotKiwi&quot);
//output: [&quotKiwi&quot , &quotBannana&quot , &quotApple&quot , &quotPortugal&quot]

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

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];

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

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit[1] = &quotKiwi" 
// output:   [&quotBannana&quot , &quotKiwi&quot , &quotPortugal&quot]

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

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

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

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

متد Splice برای اضافه کردن آیتم های بیشتر در آرایه کاربرد دارد.

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.splice(1, 0, &quotLemon&quot, &quotKiwi&quot);

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

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

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

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

// output:   [&quotBannana&quot , &quotLemon&quot, &quotKiwi&quot , &quotApple&quot , &quotPortugal&quot];

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

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

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

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
fruit.splice(1, 2);
// output: [&quotBannana&quot]

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

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

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

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

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

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

متد ()concat

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
var food = [&quotPizza&quot , &quotCake&quot];
var new = fruit.concat(food); 
// output: [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot , &quotPizza&quot , &quotCake&quot]

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
var food = [&quotPizza&quot , &quotCake&quot];
var drink = [&quotcoca&quot];
var new = fruit.concat(food, drink); 
// output: [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot , &quotPizza&quot , &quotCake&quot , &quotcoca&quot]

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

var fruit = [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot];
var new = fruit.concat([&quotMongo&quot , &quotLemon&quot]);
// output: [&quotBannana&quot , &quotApple&quot , &quotPortugal&quot , &quotMongo&quot , &quotLemon&quot]

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

منبع

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