انواع متد های آرایه در 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 person = ["Ehsan", "Amir", "Reza"];
person.length;

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

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

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

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

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

متد join() در JS

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

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

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

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

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

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

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

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

متد pop() در JS

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

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

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

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

متد push() در JS

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

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

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

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

متد shift() در JS

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

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

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

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

متد unshift() در JS

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

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

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

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

متد splice() در JS

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

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

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

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

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

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

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

متد toSpliced() در JS

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

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

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

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

متد slice() در JS

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

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

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

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

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

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

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

عملگر delete در JS

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

const person = ["Ehsan", "Amir", "Reza"];
delete person[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 person = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad", "Parsa"];
person.copyWithin(3, 1, 2);
const person = ["Ehsan", "Amir", "Reza", "Mobin", "Ahmad"];
person.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()

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