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

آرایه در جاوا اسکریپت نوعی شی است که امکان ذخیره‌سازی مجموعه‌ای از عناصر مرتب شده در زیرمجموعه‌ی یک متغیر را فراهم می‌آورد. آرایه‌ها قابلیت ذخیره‌سازی انواع مختلفی از داده‌ها را دارند. مثلاً می‌توان داده‌هایی از جنس عدد، رشته، بولی و غیره را درون آن نگهداری کرد. هم‌چنین اندازه‌ی آرایه‌ها قابل تغییر خواهد بود. در این مطلب به معرفی متدهای آرایه در جاوا اسکریپت پرداخته‌ایم. این متدها برای کار با آرایه‌ها کاربرد دارند. در این‌جا سعی کرده‌ایم تا با ذکر مثال‌هایی، تمام روند و فرآیند کار با Javascript array methods را نشان دهیم.

متد در جاوا اسکریپت چیست؟

متدهای جاوا اسکریپت که با نام توابع نیز شناخته می‌شوند، ابزارهایی هستند که به شما امکان انجام کارهای مختلف را در وب سایت و زبان جاوا اسکریپت خواهند داد. در حقیقت، شما برای انجام هر کاری در برنامه نویسی، به متدها نیاز خواهید داشت.

مرجع کامل و تخصصی آموزش جاوا اسکریپت + اعطای گواهینامه دوره

کلیک کنید

متدهای آرایه در javaScript به شما امکان می‌دهند تا عملیات مختلف اعم از افزودن عنصر جدید به آرایه، حذف عنصر از آرایه، ویرایش و اصلاح عنصر آرایه و دسترسی به آن را روی آرایه‌های مختلف انجام دهید. استفاده از متدها سبب می‌شود تا با صرفه‌جویی در زمان، راحت‌تر و کارآمدتر عملیات مورد نظر خود را انجام دهید. چراکه از قبل، این متدها در جاوا اسکریپت قرار داده شده‌اند و شما نیازی به کدنویسی مجدد نخواهید داشت.

هر متد در جاوا اسکریپت شامل دو قسمت است. یک بخش، مربوط به تعریف متد و تنظیم آن است که با کلمه‌ی کلیدی function تعیین خواهد شد. بخش دوم مربوط به فراخوانی تابع است که کدهای نوشته شده در بدنه‌ی function را به اجرا درمی‌آورد.

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

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

• متدهای manipulation

این متدها برای دستکاری عناصر آرایه به‌کار می‌روند. متدهایی مانند shift، pop، push، slice و غیره از این جمله هستند.

• متدهای searching and sorting

این متدها برای عملیات جست‌وجو و مرتب‌سازی به‌کار برده می‌شوند. متدهای sort، indexof و find از این جمله هستند.

• متدهای conversion

این متدها برای تبدیل استفاده می‌شوند. Join، tostring، concat و غیره از این دسته متدها به‌شمار می‌آیند.

• متدهای Iteration

این متدها برای تکرار کاربرد دارند. Map، foreach و filter از مشهورترین متدهای Iteration هستند.

• متدهای Utility

متدهای Utility برای روش‌های کاربردی استفاده خواهند شد. متد isArray از این جمله متدها است.

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

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

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

• JavaScript Array length
• JavaScript Array toString() Method‎
• JavaScript Array join() Method
• JavaScript Array delete Method
• JavaScript Array concat() Method
• JavaScript Array flat() Method
• Javascript Array.push() Method
• Javascript Array.unshift() Method
• JavaScript Array.pop() Method
• JavaScript Array.shift() Method
• JavaScript Array.splice() Method
• JavaScript Array.slice() Method
• JavaScript Array some() Method
• JavaScript Array reduce() Method
• JavaScript Array map() Method

معرفی متد Array length

هدف این متد، محاسبه‌ی طول آرایه‌ی داده شده است. بنابراین می‌توان انتظار داشت که این متد، یک آرایه را به‌عنوان ورودی دریافت کرده، و بعد از محاسبه‌ی طول آن، نتیجه را در قالب یک عدد نشان خواهد داد.

سینتکس دستوری:

Array.length

مثال:

در این‌جا می‌خواهیم تا با استفاده از متد JavaScript Array length ، طول آرایه‌ی داده شده را به‌دست آوریم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Accessing the Array Length
console.log(courses.length);

خروجی:

4

ملاحظه می‌شود که در خروجی (Console log) عدد ۴ نشان داده خواهد شد.

معرفی متد  Array toString

متدهای استرینگ در جاوا اسکریپت، از پرکاربردترین و مهم‌ترین متدها هستند. متد toString()‎ مقدار داده شده را به نوع داده‌ی رشته (String) تبدیل خواهد کرد. سینتکس دستوری:

arr.toString()

مثال:

در این‌جا قصد داریم تا آرایه‌ی ارائه شده را به فرمت رشته تبدیل کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Converting array ot String
let str = courses.toString();

console.log(str);

خروجی:

HTML,CSS,JavaScript,React

ملاحظه می‌شود که خروجی در فرمت یک رشته قابل دریافت است.

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

معرفی متد  Array join

یکی دیگر از متدهای آرایه در جاوا اسکریپت متد join است. این متد برای پیوند دادن دو آرایه به عنوان یک رشته به کار می‌رود. در حقیقت با استفاده از این متد، شما می‌توانید هر پارامتری را به آرایه پیوند دهید. سینتکس دستوری:

array.join(separator)

مثال:

در مثال زیر، قصد داریم تا با استفاده از نماد «|»، خانه‌های آرایه‌ی مورد نظر را به هم پیوند دهیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Joining the array elements
console.log(courses.join('|'));

خروجی:

HTML|CSS|JavaScript|React

ملاحظه می‌شود که خروجی این قطعه کد در قالب یک رشته که تمام خانه‌های آرایه را به‌هم پیوند داده است، دریافت می‌شود.

معرفی متد Array delete

متد delete برای حذف هر شی یا آرایه به‌کار برده می‌شود. سینتکس دستوری:

delete object
// or
delete object.property
// or
delete object['property']

مثال:

در این‌جا قصد داریم تا با استفاده از متد JavaScript Array delete، ویژگی شی داده شده را حذف کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

let emp = { 
    firstName: "Raj", 
    lastName: "Kumar", 
    salary: 40000 
} 

console.log(delete emp.salary); 
console.log(emp);

خروجی:

true
{ firstName: 'Raj', lastName: 'Kumar' }

مشاهده می‌شود که در آرایه‌ی خروجی، اندیس سوم که مربوط به salary بوده، حذف شده است.

متد Array concat از متدهای آرایه در جاوا اسکریپت

متد concat برای به هم پیوستن دو یا چند آرایه )یا به عبارتی جمع دو آرایه در جاوا اسکریپت( کاربرد دارد. این متد ورودی‌های خود را به‌عنوان دو یا چند آرایه دریافت کرده و بعد از ادغام کردن، نتیجه را در یک آرایه‌ی واحد نشان خواهد داد.

دوره جامع آموزش جاوا اسکریپت به صورت کاربردی

کلیک کنید

سینتکس دستوری:

let newArray = arr.concat()  // or
let newArray = arr1.concat(arr2) // or
let newArray = arr1.concat(arr2, arr3, ...) // or
let newArray = arr1.concat(value0, value1)

مثال:

در این‌جا قصد داریم تا سه آرایه‌ی مختلف را با استفاده از متد concat باهم ادغام کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declare three arrays
let arr1 = [11, 12, 13];
let arr2 = [14, 15, 16];
let arr3 = [17, 18, 19];

let newArr = arr1.concat(arr2, arr3);
console.log(newArr);

خروجی مثال فوق به صورت زیر است:

[
  11, 12, 13, 14, 15,
  16, 17, 18, 19
]

مشاهده می‌شود که خروجی یک آرایه متشکل از سه آرایه‌ی ارائه شده خواهد بود.

پیشنهاد مطالعه: Event در جاوا اسکریپت – راهنمای جامع

معرفی متد Array flat

متد flat برای مسطح کردن آرایه‌ها کاربرد دارد. به این معنا که تمام آرایه‌های ارائه شده به عنوان ورودی این متد با هم ادغام شده و تودرتو بودن آن‌ها کاهش پیدا می‌کند. از این متد در آرایه دو بعدی در جاوا اسکریپت استفاده می‌شود. سینتکس دستوری:

arr.flat([depth])

مثال:

در مثال زیر قصد داریم تا آرایه‌ی ارائه شده را به‌طور مسطح تبدیل کنیم. برای این کار از متد flat بهره می‌گیریم.

// Creating multilevel array
const arr = [['1', '2'], ['3', '4', '5',['6'], '7']];

// Flat the multilevel array
const flatArr= arr.flat(Infinity);
console.log(flatArr);

خروجی:

[
  '1', '2', '3',
  '4', '5', '6',
  '7'
]

ملاحظه می‌شود که آرایه از فرمت تودرتو بودن، خارج شده است.

معرفی متد Array.push در جاوا اسکریپت

از متد push برای افزودن یک عنصر به انتهای آرایه‌ی ورودی استفاده می‌شود. Arrays در جاوا اسکریپت به عنوان اشیاء غیرقابل تغییر شناخته خواهند شد. بنابراین شما به راحتی با استفاده از متدهای مختلف می‌توانید عناصری را به‌انتهای آن افزوده و یا حذف کنید. این کار به شما کمک می‌کند تا آرایه را به‌صورت پویا تغییر دهید.

سینتکس دستوری:

Array.push(item1, item2 …)

مثال:

در این‌جا می‌خواهیم تا با استفاده از متد Push در جاوا اسکریپت، عناصر جدیدی را به انتهای آرایه‌ی موجود اضافه کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declaring and initializing arrays
let numArr = [10, 20, 30, 40, 50];

// Adding elements at the end of an array
numArr.push(60);
numArr.push(70, 80, 90);
console.log(numArr);


let strArr = ["piyush", "gourav", "smruti", "ritu"];
strArr.push("sumit", "amit");

console.log(strArr);

خروجی:

[
  10, 20, 30, 40, 50,
  60, 70, 80, 90
]
[ 'piyush', 'gourav', 'smruti', 'ritu', 'sumit', 'amit' ]

مشاهده می‌شود که دو عنصر sumit و amit به انتهای آرایه اضافه شده‌اند.

متد Array.unshift از متدهای آرایه در جاوا اسکریپت

متد unshift عملکردی مشابه با متد push دارد. با این تفاوت که عناصر به بخش جلویی یک آرایه افزوده خواهند شد. سینتکس دستوری:

Array.unshift(item1, item2 …)

مثال:

در این‌جا قصد داریم تا با استفاده از متد unshift، عناصر جدید را به ابتدای آرایه اضافه کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declaring and initializing arrays
let numArr = [20, 30, 40];

// Adding element at the beginning
// of an array
numArr.unshift(10, 20);
console.log(numArr);


// Declaring and initializing arrays
let strArr = ["amit", "sumit"];

// Adding element at the beginning
// of an array
strArr.unshift("sunil", "anil");
console.log(strArr);

خروجی:

[ 10, 20, 20, 30, 40 ]
[ 'sunil', 'anil', 'amit', 'sumit' ]

مشاهده می‌کنید که عناصر sunil و anil به‌ابتدای آرایه‌ی مذکور اضافه شده‌اند.

معرفی متد Array.pop

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

Array.pop()

مثال:

در این مثال می‌خواهیم تا با استفاده از متد pop یک عنصر را از انتهای آرایه حذف کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing elements from end 
// of an array
numArr.pop();

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Removing elements from end 
// of an array
strArr.pop();

console.log(strArr);

خروجی:

[ 20, 30, 40 ]
[ 'amit', 'sumit' ]

می‌بینید که در خروجی این کد، عنصر انتهای هر آرایه (یعنی ۵۰ در آرایه‌ی اول و anil در آرایه‌ی دوم) حذف شده است.

معرفی متد Array.shift در جاوا اسکریپت

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

Array.shift()

مثال:

در این مثال می‌خواهیم تا عمل حذف را از عناصر ابتدای یک آرایه انجام دهیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing elements from the 
// beginning of an array
numArr.shift();

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Removing elements from the 
// beginning of an array
strArr.shift();

console.log(strArr);

خروجی مثال فوق به صورت زیر است:

[ 30, 40, 50 ]
[ 'sumit', 'anil' ]

می‌بینید که در خروجی این کد، عنصر ابتدای هر آرایه (یعنی ۲۰ در آرایه‌ی اول و amit در آرایه‌ی دوم) حذف شده است.

پیشنهاد مطالعه: Async و Await در جاوا اسکریپت؛ مفهوم + کاربرد

معرفی متد Array.splice

متد splice برای درج و حذف عناصر در میان یک آرایه در جاوا اسکریپت استفاده خواهد شد. سینتکس دستوری:

Array.splice (start, deleteCount, item 1, item 2….)

مثال:

در این‌جا قصد داریم تا هم‌زمان یک‌سری عناصر جدید را در آرایه‌ی ورودی درج و برخی عناصر را از آن حذف کنیم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing an adding element at a 
// particular location in an array

// Delete 3 elements starting from index 1
numArr.splice(1, 3);

// Insert 80, 90, 100 at starting index 1
numArr.splice(1, 0, 3, 4, 5);

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Delete two elements starting from index 1
// and add three elements.
strArr.splice(1, 2, "Geeks", "Geeks1", "Geeks2");

console.log(strArr);

خروجی:

[ 20, 3, 4, 5 ]
[ 'amit', 'Geeks', 'Geeks1', 'Geeks2' ]

در مثال ذکر شده، مشاهده می‌کنید که عناصری از آرایه‌های اولیه حذف شده و عناصر جدیدی به آن اضافی شده است.

معرفی متد Array.slice

از دیگر متدهای آرایه در جاوا اسکریپت متد Slice است. متد slice یک آرایه‌ی جدید را از روی آرایه‌ی ورودی فعلی می‌سازد. بخشی از این آرایه‌ی ورودی، در آرایه‌ی خروجی این متد وجود دارد. شما می‌توانید تعیین کنید که اندیس ابتدایی و انتهایی این آرایه، از کدام بخش از ورودی انتخاب شود.

دوره آموزش جامع HTML و  CSS

کلیک کنید

سینتکس دستوری:

Array.slice (startIndex , endIndex);

مثال:

مثال زیر، به‌طور جامع کار با متد slice را نشان می‌دهد. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Original Array
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Case 1: Extract the first 3 elements of the array
const case1 = arr.slice(0, 3);
console.log("First 3 Array Elements: ", case1);

// Case 2: Extract the last 3 array elements
const case2 = arr.slice(-3);
console.log("Last 3 Array Elements: ", case2);

// Case 3: Extract elements from middle of array
const case3 = arr.slice(3, 7);
console.log("Case 3: Extract elements from middle: ", case3);

// Case 4: Start index is greater than end index
const case4 = arr.slice(5, 2);
console.log("Case 4: Start index is greater than end index: ", case4);

// Case 5: Negative start index
const case5 = arr.slice(-4, 9);
console.log("Case 5: Negative start index: ", case5);

// Case 6: Negative end index
const case6 = arr.slice(3, -2);
console.log("Case 6: Negative end index: ", case6);

// Case 7: Only start index is provided
const case7 = arr.slice(5);
console.log("Case 7: Only start index is provided: ", case7);

// Case 8: Start index and end index are out of range
const case8 = arr.slice(15, 20);
console.log("Case 8: Start and end index out of range: ", case8);

// Case 9: Start and end index are negative
// and out of range
const case9 = arr.slice(-15, -10);
console.log("Case 9: Start and end index are negative"
    + " and out of range: ", case9);

خروجی:

First 3 Array Elements:  [ 1, 2, 3 ]
Last 3 Array Elements:  [ 8, 9, 10 ]
Case 3: Extract elements from middle:  [ 4, 5, 6, 7 ]
Case 4: Start index is greater than end index:  []
Case 5: Negative start index:  [ 7, 8, 9 ]
Case 6: Negative end index:  [ 4, 5, 6, 7, 8 ]
Case 7: Only start index is provided:  [ 6, 7, 8, 9, 10 ]
Case 8: Start and end index out of range:  []
Case 9: Start and end index are negative and out of range:  []

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

معرفی متد Array some از متدهای آرایه در javascript

متد some در جاوا اسکریپت بررسی می‌کند که آیا حداقل یکی از عناصر آرایه‌ی ورودی، شرایط بررسی شده توسط تابع آرگومان را برآورده خواهد کرد یا نه. سینتکس دستوری

array.some(callback(element, index, array), thisArg);

مثال:

در این‌جا نمونه‌ای از عملکرد و کار با متد some را نشان داده‌ایم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

function isGreaterThan5(element, index, array) {
    return element > 5;
}


// Driver code
// Original array
let array = [2, 5, 8, 1, 4];

// Checking for condition in array
let value = array.some(isGreaterThan5);

console.log(value);

خروجی:

true

مشاهده می‌کنید که به‌دلیل برقرار بودن شرط ارائه شده در کدهای این آرایه، متد نتیجه‌ی true را برمی‌گرداند.

معرفی متد Array reduce

متد reduce برای کاهش آرایه به یک مقدار کاربرد دارد. خروجی این متد یک accumulator یا انباشته است. این متد به شما امکان انجام عملیات تجمعی را روی عناصر یک آرایه ارائه می‌دهد. در نتیجه در هر پیمایش، شما عناصر داده را با هم جمع می‌کنید.

سینتکس دستوری:

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

مثال:

در این‌جا یک نمونه برای کار با متد reduce آورده‌ایم. کد جاوا اسکریپت این مثال به شرح زیر خواهد بود:

// Original array
let arr = [88, 50, 25, 10];

// Perform reduce method
let sub = arr.reduce(geeks);

function geeks(total, num) {
    return total - num;
}

console.log(sub);

مشاهده می‌شود که نتیجه‌ی بازگشتی این متد برابر با حاصل جمع تمام عناصر آرایه‌ی ورودی خواهد بود.

3

معرفی متد Array map

متد map در جاوا اسکریپت نوعی تابع خاص را روی هر عنصر آرایه‌ی والد فراخوانی می‌کند. در واقع رفتار این متد بسیار مشابه با حلقه‌های تکرار در برنامه نویسی خواهد بود. در ادامه بیش‌تر با شرح فرآیند این متد آشنا خواهید شد. سینتکس دستوری:

array.map(callback(currentValue, index, array), thisArg);

مثال:

در این‌جا، یک مثال برای کار با متد map آورده‌ایم. کد جاوا اسکریپت برای این مثال به شرح زیر خواهد بود:

// Original array
let arr = [4, 9, 16, 25];

// Performing map method
let sub = arr.map(geeks);

function geeks() {
    return arr.map(Math.sqrt);
}

console.log(sub);

خروجی:

[ [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ] ]

همان‌طور که مشاهده می‌کنید، در این کدها از تابع map برای تکرار یک فانکشن خاص استفاده شده است. map مانند یک حلقه تکرار بارها کد مورد نظر را اجرا خواهد کرد.

جمع‌بندی

در این مطلب، به معرفی مهم‌ترین متدهای آرایه در جاوا اسکریپت پرداختیم. متدهای دیگری مانند متد find در جاوا اسکریپت و نیز متدهایی برای مرتب سازی آرایه‌ها نیز وجود دارند که در دیگر منابع آموزش جاوا اسکریپت، به‌طور مفصل شرح داده شده‌اند. به‌عنوان مثال متد sort یکی دیگر از متدهای پرکاربرد آرایه در جاوااسکریپت است که برای مرتب‌سازی عناصر به‌صورت صعودی یا نزولی کاربرد دارد که به آن اشاره‌ای در این محتوا نشد.

دوره آموزش کامل انگولار 2

کلیک کنید

در این مطلب سعی کردیم تا با معرفی سینتکس دستوری هر متد و هم‌چنین ارائه‌ی مثال‌های عملی در این‌باره، فهم عملکرد هر متد را ساده‌تر نشان دهیم. شما می‌توانید تمام مثال‌های ارائه شده را به‌طور عملی خودتان تایپ کرده و تمرین کنید.

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

اگر می‌خواهید همه چیز را در رابطه با جاوا اسکریپت یاد بگیرید، نیاز دارید تا از یک منبع آموزشی حرفه‌ای و قوی استفاده کنید. برای این منظور دوره‌های آموزشی مکتب خونه، گزینه‌ی ایده‌آلی خواهد بود. این دوره‌های آموزشی از صفر تا صد آموزش جاوا اسکریپت و آموزش برنامه نویسی را پوشش‌دهی کرده و شما را برای ورود به دنیای حرفه‌ای برنامه نویسی با جاوا اسکریپت آماده می‌کند. در آموزش‌های مکتب خونه، پروژه‌های عملی و تمرین‌های فراوانی گنجانده شده است که برای تسلط بر مفاهیم آموزشی، اهمیت دارد.