JavaScript استفاده از توابع آرایه ها در
توابع زیادی به منظور کار با آرایه ها وجود دارد. در ادامه با انواع توابع مربوط به آرایه ها آشنا میشویم.
toString تابع
- این تابع آرایه را به رشته تبدیل میکند و عناصر را در قالب رشته برمیگرداند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; document.getElementById(“demo”).innerHTML = fruits.toString(); //Banana,Orange,Apple,Mango </script> </body> </html>
join تابع
- این تابع مانند تابع toString آرایه را به رشته تبدیل میکند اما این امکان وجود دارد که جدا کننده عناصر رشته را مشخص کنیم. مثلا در مثال زیر بجای ویرگول (،) از دش (-) برای جدا کردن عناصر استفاده کردیم.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; document.getElementById(“demo”).innerHTML = fruits.join(” – “); //Strawberry – Avocado – Apple – Watermelon </script> </body> </html>
pop تابع
- آخرین عنصر موجود در آرایه را برمیدارد. در مثال پیش رو بعد از استفاده از تابع pop مجدد آرایه چاپ شده است همانطور که مشاهده میکنید آخرین عنصر یعنی Watermelon از عناصر آرایه حذف شده است.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; fruits.pop(); document.getElementById(“demo”).innerHTML = fruits; //Strawberry,Avocado,Apple </script> </body> </html>
push تابع
- این تابع عنصری را که به عنوان ورودی دریافت میکند داخل آرایه به عنوان آخرین عنصر اضافه میکند.
- دقت کنید که میتوانید چندین عنصر را همزمان به عنوان ورودی به تابع push بدهید تا همگی یکجا در آرایه اضافه شوند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; fruits.push(“Banana”,“Kiwi”); document.getElementById(“demo”).innerHTML = fruits; //Strawberry,Avocado,Apple,Watermelon,Banana,Kiwi </script> </body> </html>
shift تابع
- این تابع اولین عنصر آرایه را حذف کرده و عناصر جلوتر را به یک خانه قبل تر شیفت میدهد.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; fruits.shift(); document.getElementById(“demo”).innerHTML = fruits; //Avocado,Apple,Watermelon </script> </body> </html>
unshift تابع
- این تابع وظیفه دارد عنصر یا عناصر ورودی دریافتی را در ابتدای آرایه وارد کرده و عناصر موجود در آرایه را به سمت خانه های عقب تر شیفت دهد.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; fruits.unshift(“Banana”,“Kiwi”); document.getElementById(“demo”).innerHTML = fruits; //Strawberry,Avocado,Apple,Watermelon,Banana,Kiwi </script> </body> </html>
length تابع
- این تابع طول آرایه یعنی تعداد عناصر موجود در آرایه را چاپ میکند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; document.getElementById(“demo”).innerHTML = fruits.length; //4 </script> </body> </html>
delete تابع
- عنصری را که جایگاه آن در ورودی وارد شده باشد را حذف میکند.
- اما مشکلی که این تابع دارد این است که جای آن عنصر خالی باقی میماند و اگر عنصر مربوط به آن خانه خالی فراخوانی شود مقدار undefined بازگردانده خواهد شد.
- بنابرای توصیه میشود از دستور pop یا shift استفاده کنید.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <script> const fruits = [“Strawberry”, “Avocado”, “Apple”, “Watermelon”]; delete fruits[0]; document.getElementById(“demo1”).innerHTML = fruits[0]; //undefined document.getElementById(“demo2”).innerHTML = fruits; //,Avocado,Apple,Watermelon </script> </body> </html>
Merging تابع
- این تابع وظیفه دارد چند مجموعه آرایه را با یکدیگر ادغام کند.
- دقت کنید که آرایه های اولیه تغییر نمیکنند و این تابع یک آرایه جدید را تولید میکند.
- نحوه استفاده از این تابع به اینصورت است:
const NewArray = FirstArray.contact(SecondArray, ThirdArray,…)
- این تابع قادر است یک عنصر تنها را نیز با عناصر یک مجموعه ادقام کند.
const NewArray = myArray.concat(“element”);
مثال:
<html> <body> <p id=“demo”></p> <script> const first = [“Strawberry”, “Avocado”]; const second = [“Apple”, “Watermelon”,“Banana”,“Kiwi”]; const fruits = first.concat(second); document.getElementById(“demo”).innerHTML = fruits; //Strawberry,Avocado,Apple,Watermelon,Banana,Kiwi </script> </body> </html>
splice تابع
- این تابع عنصر ورودی را در جایگاه مشخص شده قرار میدهد و هر تعداد عنصر که برایش تعریف شده باشد را حذف میکند.
Array.splice(position, number of items to be deleted, “item1”, “item2”,…)
- در مثال پیش رو تابع باید از جایگاه دوم شروع به جایگذاری مقادیر جدید یعنی Avocado و Kiwi کند و از همان جایگاه دوم یک مقدار از عناصر قبلی یعنی Apple را حذف کند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Banana”, “Apple”, “Watermelon”]; fruits.splice(2, 1, “Avocado”, “Kiwi”); document.getElementById(“demo”).innerHTML = fruits; //Strawberry,Banana,Avocado,Kiwi,Watermelon </script> </body> </html>
- میتوان از این تابع برای حذف برخی عناصر نیز استفاده کرد به این صورت که هیچ عنصر جدیدی برای اضافه کردن قرار ندهیم ولی مقدار حذف را مشخص کنیم:
fruits.splice(0, 1);
slice تابع
- این تابع بخشی از آرایه را در یک آرایه دیگر کپی میکند، درواقع آرایه اول تغییر نمیکند فقط بخش مشخصی از آن در یک آرایه دیگر هم ذخیره میشود.
- برای جدا کردن بخشی از آرایه اول میتوانید عنصر اول را مشخص کنید تا از آن عنصر تا عنصر آخر کپی شوند همچنین میتوانید یک بازه مشخص کنید و عناصر موجود در آن بازه کپی شوند.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <script> const fruits = [“Strawberry”, “Banana”, “Apple”, “Watermelon”,“Avocado”,“Mango”,“Blueberry”]; const fruits2 = fruits.slice(1); const fruits3 = fruits.slice(2,5);
document.getElementById(“demo1”).innerHTML = fruits2; //Banana,Apple,Watermelon,Avocado,Mango,Blueberry
document.getElementById(“demo2”).innerHTML = fruits3; //Apple,Watermelon,Avocado </script> </body> </html>
toString تابع
- نوع آرایه را به رشته تغییر میدهد.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <script> const fruits = [“Banana”, “Orange”, “Apple”, “Mango”]; document.getElementById(“demo1”).innerHTML = fruits.toString(); //Banana,Orange,Apple,Mango
document.getElementById(“demo2”).innerHTML = typeof fruits.toString(); //string </script> </body> </html>
sort تابع
- این تابع عناصر آرایه را براساس حرف اولشان به صورت صعودی مرتب میکند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Banana”, “Apple”, “Watermelon”]; fruits.sort(); document.getElementById(“demo”).innerHTML = fruits; //Apple,Banana,Strawberry,Watermelon </script> </body> </html>
reverse تابع
- این تابع چیدمان عناصر آرایه را به صورت برعکس انجام میدهد یعنی اولین عنصر در آرایه اصلی به عنوان آخرین عنصر در آرایه جدید قرار میگیرد و به همین ترتیب بقیه عناصر جایگذاری میشوند.
<html> <body> <p id=“demo”></p> <script> const fruits = [“Strawberry”, “Banana”, “Apple”, “Watermelon”]; fruits.reverse(); document.getElementById(“demo”).innerHTML = fruits; </script> </body> </html>