انواع متد های آرایه در JS

هر نوع داده (data type) دارای متدها و ویژگی های مخصوص به خود است. در این بخش متدهای آرایه را بررسی می کنیم.

array.length طول آرایه - ویژگی - property array.toString() تبدیل آرایه به رشته array.join() تبدیل آرایه به رشته array.at() دسترسی به کارکتر های آرایه array.pop() حذف اولین خانه آرایه array.push() افزودن به انتها آرایه array.shift() حذف آخرین خانه آرایه array.unshift() افزودن به ابتدا آرایه array.splice() افزودن و حذف مقادیر آرایه array.toSpliced() افزودن و حذف مقادیر در آرایه جدید array.slice() برش آرایه delete array[] حذف مقدار داخل خانه آرایه array.concat() چسباندن چند آرایه array.copyWithin() کپی مقادیر آرایه array.flat() هم سطح کردن مقادیر آرایه Array.from() تبدیل رشته، اشیاء و ... به آرایه

طول آرایه length در JS

ویژگی length، تعداد خانه های یک آرایه را بر می گرداند.

const persons = ["Ehsan", "Amir", "Reza"];
persons.length;

متد toString() آرایه در JS

متد toString()، آرایه را به رشته تبدیل می کند.

دو نمونه کد زیر نتیجه یکسانی دارند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.toString();
const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons;

نکته: در JS در صورت چاپ آرایه، به صورت خودکار متد toString اجرا و سپس چاپ می شود. بنابراین می توان در چاپ از متد toString استفاده نکرد.

متد join() در JS

متد join()، مانند toString آرایه را به رشته تبدیل می کند.

نکته: در متد join()، برخلاف toString، می توان جداکننده (seprator) را انتخاب کرد.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"]; 
persons.join(" * ");

متد at() آرایه در JS

متد at()، مانند براکت [ ] خانه های آرایه را فراخوانی می کند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.at(2); //  Reza

نکته: در متد at، برخلاف براکت [ ]، می توان از ایندکس منفی هم استفاده کرد.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.at(-2); //  Reza

متد pop() در JS

متد pop()، آخرین خانه آرایه را حذف می‌کند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"]; 
persons.pop();
document.getElementById("demo").innerHTML = persons;

نکته: برگشتی متد pop()، خانه پاک شده است.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"]; 
document.getElementById("demo").innerHTML = persons.pop();

متد push() در JS

متد push()، یک خانه جدید به انتها آرایه اضافه می کند.

const persons = ["Ehsan", "Amir", "Reza"];
persons.push("Mobin");
document.getElementById("demo").innerHTML = persons;

نکته: برگشتی متد ()push، طول آرایه جدید است.

const persons = ["Ehsan", "Amir", "Reza"];
document.getElementById("demo").innerHTML = persons.push("Mobin");

متد shift() در JS

متد shift()، اولین خانه آرایه را حذف می‌کند. و سایر خانه ها را به یک ایندکس پایین تر انتقال می دهد.

const persons = ["Ehsan", "Amir", "Reza" ,"Mobin"];
persons.shift();
document.getElementById("demo").innerHTML = persons;

نکته: برگشتی متد shift()، خانه پاک شده است.

const persons = ["Ehsan", "Amir", "Reza" ,"Mobin"];
document.getElementById("demo").innerHTML = persons.shift();

متد unshift() در JS

متد unshift()، یک خانه جدید به ابتدا آرایه اضافه می کند.

const persons = ["Ehsan", "Amir", "Reza"];
persons.unshift("Mobin");
document.getElementById("demo").innerHTML = persons;

نکته: برگشتی متد ()unshift، طول آرایه جدید است.

const persons = ["Ehsan", "Amir", "Reza"];
document.getElementById("demo").innerHTML = persons.unshift("Mobin");

متد splice() در JS

متد splice()، برای حذف یا افزودن المان های آرایه استفاده می شود.

متد splice، دو پارامتر اجباری دریافت می کند:

  • پارامتر اول، ایندکس محل حذف یا افزودن را دریافت می کند. (اجباری)
  • پارامتر دوم، تعداد المان هایی که باید حذف شوند را دریافت می کند. (اجباری)
  • پارامتر سوم به بعد، المان هایی که باید به آرایه اضافه شود را دریافت می کند. (اختیاری)
const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.splice(0, 1);

نکته: متد splice، می تواند بی نهایت پارامتر دریافت و به آرایه اضافه کند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.splice(2, 0, "Ahmad", "Parsa");

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

const persons = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad"];
persons.splice(2, 2, "Parsa", "Asma");

متد toSpliced() در JS

متد toSpliced()، مانند splice عمل می کند.

نکته: متد splice آرایه اصلی را تغییر می دهد.

نکته: متد toSpliced آرایه اصلی را تغییر نمی دهد. و نتیجه را در آرایه جدید بر می گرداند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.toSpliced(0, 1);

متد slice() در JS

متد slice()، یک بخش آرایه را برش و آرایه جدید می سازد.

متد slice، دو پارامتر دریافت می کند:

  • پارامتر اول، ایندکس شروع برش را دریافت می کند. (اجباری)
  • پارامتر دوم، ایندکس پایان برش را دریافت می کند. (اختیاری)

نکته: در متد slice اگر پارامتر دوم وارد نشود تا انتها آرایه برش داده می شود.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.slice(1);

نکته: متد ()slice روی آرایه اصلی تغییری ایجاد نمی کند

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.slice(3);
const persons = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad"];
persons.slice(1, 3);

عملگر delete در JS

عمگر delete می تواند یک المان آرایه را حذف کند.

const persons = ["Ehsan", "Amir", "Reza"];
delete persons[0];

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

متد concat() آرایه در JS

متد concat()، چند آرایه را به هم می چسباند و یک آرایه جدید می سازد.

const text1 = ["JS Tutorial"];
const text2 = ["PNL"];
const text3 = ["dev"];

text1.concat(text2, text3);

نکته:  متد ()concat آرایه را تغییر نمی دهد. بلکه یک آرایه جدید برمی گرداند. 

نکته:  متد ()concat می تواند به تعداد نامحدود آرایه دریافت کند.

نکته: متد ()concat، می تواند رشته دریافت کند.

const arr = ["JS Tutorial"];
arr.concat("PNLdev"); 

متد copyWithin() در JS

متد copyWithin()، المان های آرایه را در ایندکس دیگر همان آرایه رونوشت (کپی) می گیرد.

متد copyWithin، سه پارامتر دریافت می کند:

  • پارامتر اول ایندکس بازنشانی است. (اجباری)
  • پارامتر دوم ایندکس شروع رونوشت است. (اجباری)
  • پارامتر سوم ایندکس پایان رونوشت است. (اختیاری)
const persons = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad", "Parsa"];
persons.copyWithin(3, 1, 2);
const persons = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad"];
persons.copyWithin(2, 0);

متد flat() در JS

متد flat()، یک آرایه تو در تو (چند بعدی) را به آرایه بدون عمق (یک بعدی) تبدیل می کند.

const arr = [[1, 2], [3, 4], [5, 6]];
arr.flat();

متد Array.from() در JS

متد ()Array.from می تواند داده های دارای ویژگی تکرار شوندگی (مانند رشته ها، map ،set و NodeList) را به آرایه تبدیل کند.

Array.from("ABCDEFG");

نکته: دلیل استفاده از Array.from() بخاطر استفاده از متدهای آرایه است.

خلاصه درس

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

  • ویژگی array.length
  • متد array.toString()
  • متد array.join()
  • متد array.at()
  • متد array.pop()
  • متد array.push()
  • متد array.shift()
  • متد array.unshift()
  • متد array.splice()
  • متد array.toSpliced()
  • متد array.slice()
  • عملگر delete array[]
  • متد array.concat()
  • متد array.copyWithin()
  • متد array.flat()
  • متد Array.from()

توسعه دهندگان
احسان اسلامی