۲۲
آبان

جلسه ۲۰ : توابع کار با آرایه در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتوا آموزش تصویری

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

این توابع، کار با آرایه ها و استفاده از آن ها را ساده تر می کند.

فهرست

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

برای تبدیل آرایه به رشته در جاوا اسکریپت از متد ()toString استفاده خواهیم کرد:

مثال : استفاده از متد tostring

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString();

خودتان امتحان کنید »

نتیجه مثال بالا:

مثال :

 Banana,Orange,Apple,Mango

1	Banana,Orange,Apple,Mango

تابع ()join نیز مانند تابع بالا عمل می کند با این تفاوت که می توانید جدا کننده را مشخص کنید:

مثال : متد join

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.join(" * ");

خودتان امتحان کنید »

نتیجه مثال بالا:

مثال :

 Banana * Orange * Apple * Mango

1	Banana * Orange * Apple * Mango

تابع ()pop

این تابع آخرین عنصر آرایه را حذف می کند:

مثال : متد pop

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); // Removes the last element ("Mango") from fruits

خودتان امتحان کنید »

این تابع مقدار عنصری را که حذف شده است را بر می گرداند.

متد ()pop مقداری را که “ظاهر شد” باز می گرداند:

مثال : بازگرداندن مقدار ظاهر شده

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // the value of x is "Mango"

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // the value of x is "Mango"

خودتان امتحان کنید »

تابع ()push

این تابع یک عنصر را به انتهای آرایه اضافه می کند:

مثال : افزودن عنصری به انتهای آرایه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits

خودتان امتحان کنید »

این تابع طول آرایه جدید را بر می گرداند.

مثال : طول جدید آرایه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //  the value of x is 5

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // the value of x is 5

خودتان امتحان کنید »

شیفت عناصر آرایه در جاوا اسکریپت

تابع ()shift مانند تابع pop عمل می کند با این تفاوت که به جای عنصر آخر، اولین عنصر را حذف می کند و تمام عناصر را به یک واحد اندیس کمتر شیفت می دهد:

مثال : شیفت کردن عناصر آرایه

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift(); // Removes the first element "Banana" from fruits

خودتان امتحان کنید »

این تابع نیز مقدار عنصر حذف شده را بر می گرداند.

مثال : مقدار عنصر حذف شده

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();    // the value of x is "Banana"

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.shift(); // the value of x is "Banana"

خودتان امتحان کنید »

تابع ()unshift یک عنصر را به ابتدای آرایه اضافه می کند و تمام عناصر را به یک واحد اندیس بیشتر شیفت می دهد:

مثال : افزودن عنصر به ابتدای آرایه و شیفت سایر عناصر

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits

خودتان امتحان کنید »

این تابع نیز طول آرایه جدید را بر می گرداند.

مثال : بازگرداندن طول آرایه ی جدید

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Returns 5

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); // Returns 5

خودتان امتحان کنید »

تغییر عناصر

عناصر آرایه ها با استفاده از شماره ی index آن ها قابل دسترسی اند.

نکته : index های آرایه از ۰ شروع می شود(یعنی شماره اندیس دومین عنصر آرایه ۱ ، سومی ۲ و … می باشد).

مثال : دسترسی به عناصر آرایه با index

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[0] = "Kiwi"; // Changes the first element of fruits to "Kiwi"

خودتان امتحان کنید »

با استفاده از خصوصیت length نیز می توانید عناصر یک آرایه را اضافه کنید :

مثال : استفاده از خصوصیت length

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruits

خودتان امتحان کنید »

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

برای حذف عناصر آرایه در جاوا اسکریپت از عملگر delete استفاده می کنیم:

مثال : حذف عناصر آرایه

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Changes the first element in fruits to undefined

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0]; // Changes the first element in fruits to undefined

خودتان امتحان کنید »

نکته : استفاده از دستور delete برای حذف عناصر آرایه ممکن است حفره های ناشناس در آرایه ایجاد کنند، بجای این دستور از ()pop یا ()shift استفاده کنید.

یکپارچه سازی آرایه

با استفاده از متد ()splice نیز می توانید آیتم های جدیدی را به آرایه اضافه کنید:

مثال : افزودن عناصر جدید به آرایه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");

خودتان امتحان کنید »

پارامتر اول (۲) موقعیتی را که عناصر جدید باید اضافه شود ((spliced in)) تعریف می کند.

پارامتر دوم (۰) چند عنصر را حذف می کند.

بقیه پارامترها (“Lemon” , “Kiwi”) عناصر جدید را اضافه می کنند.

متد ()splice با اقلام حذف شده آرایه را باز می گرداند:

مثال : بازگرداندن آرایه با عناصر حذف شده

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 2, "Lemon", "Kiwi");

خودتان امتحان کنید »

استفاده از ()splice برای حذف عناصر موجود از آرایه

با تنظیم پارامتر ، شما می توانید از ()splice برای حذف عناصر بدون ایجاد حفره در آرایه استفاده کنید:

مثال : حذف اولین عنصر آرایه

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // Removes the first element of fruits

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); // Removes the first element of fruits

خودتان امتحان کنید »

اولین پارامتر (۰) موقعیتی را که عناصر جدید باید اضافه شود ((spliced in)) تعریف می کند.

پارامتر دوم (۱) چند عنصر را حذف می کند.

بقیه پارامترها حذف می شوند. عناصر جدید اضافه نخواهند شد.

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

برای جمع آرایه ها در جاوا اسکریپت از تابع ()concat استفاده می کنیم:

مثال : جمع آرایه با concat

 var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);     // Concatenates (joins) myGirls and myBoys

var myGirls = ["Cecilie", "Lone"];

var myBoys = ["Emil", "Tobias", "Linus"];

var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoys

خودتان امتحان کنید »

خروجی کد بالا به شکل زیر خواهد بود:

مثال :

Cecilie,Lone,Emil,Tobias,Linus

1	Cecilie,Lone,Emil,Tobias,Linus

این تابع توابع موجود را تغییر نمی دهد و یک آرایه جدید بر می گرداند.

این تابع می تواند چندین پارامتر بپذیرد.

مثال : ادغام سه آرایه با concat

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);

var arr1 = ["Cecilie", "Lone"];

var arr2 = ["Emil", "Tobias", "Linus"];

var arr3 = ["Robin", "Morgan"];

var myChildren = arr1.concat(arr2, arr3);

خودتان امتحان کنید »

متد () concat همچنین می تواند مقادیر را به عنوان پارامتر بپذیرد :

مثال : پذیریش مقادیر به عنوان آرگومان

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

1 2	var arr1 = ["Cecilie", "Lone"]; var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

خودتان امتحان کنید »

تابع ()slice

این تابع یک آرایه جدید از زیر مجموعه آرایه موجود بر می گرداند:

مثال : برگرداندن آرایه ی جدید

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

1 2	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1);

خودتان امتحان کنید »

نتیجه به شکل زیر خواهد بود:

مثال :

Orange,Lemon,Apple,Mango

1	Orange,Lemon,Apple,Mango

نکته : متد ()slice یک آرایه جدید ایجاد می کند. این عناصر را از آرایه منبع حذف نمی کند.

این مثال یک قسمت از آرایه را از عنصر آرایه ۳ (“Apple”) برمی دارد:

مثال : برداشتن اندیس سوم آرایه

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

1 2	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(3);

خودتان امتحان کنید »

متد ()slice می تواند عملیات را روی دو آرگومان مانند (slice(1, 3 انجام دهد.

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

مثال : اعمال دو آرگومان متد slice

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

1 2	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1, 3);

خودتان امتحان کنید »

اگر پارامتر انتها حذف شده باشد، مانند مثالهای اول، متد ()slice از بقیه آرایه جدا می کند.

مثال : جدا کردن از انتهای آرایه

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

1 2	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(2);

خودتان امتحان کنید »

()toString خودکار

جاوا اسکریپت به طور خودکار یک آرایه را به یک رشته جدا شده با کاما تبدیل می کند زمانی که یک مقدار ابتدایی انتظار می رود.

این همیشه زمانی است که شما سعی می کنید خروجی یک آرایه را ایجاد کنید.

این دو نمونه نتیجه ی مشابهی خواهند داشت.

مثال : مثال تبدیل به رشته آرایه - 1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString();

خودتان امتحان کنید »

مثال : مثال تبدیل به آرایه ی رشته - 2

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

1 2	var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits;

خودتان امتحان کنید »

نکته : تمام آبجکت های آرایه یک ()toString دارند.

پیدا کردن حداقل و حداکثر مقادیر در آرایه ها

هیچ توابع درونی برای پیدا کردن بالاترین یا کمترین مقدار در یک آرایه جاوا اسکریپت وجود ندارد.

البته در بخش بعدی به شما خواهیم آموخت که چگونه این مشکل را حل کنید.

جلسه توابع کار با آرایه در جاوا اسکریپت JavaScript به پایان رسید.
در جلسه بعد به مرتب سازی آرایه ها در جاوا اسکریپت خواهیم پرداخت.با ما همراه باشید

QR: جلسه ۲۰ : توابع کار با آرایه در جاوا اسکریپت

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : توابع کار با آرایه در جاوا اسکریپت

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

تابع ()pop

تابع ()push

شیفت عناصر آرایه در جاوا اسکریپت

تغییر عناصر

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

یکپارچه سازی آرایه

استفاده از ()splice برای حذف عناصر موجود از آرایه

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

تابع ()slice

()toString خودکار

پیدا کردن حداقل و حداکثر مقادیر در آرایه ها

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ