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

Array یکی از متداول‌ترین ساختار داده‌ها در جاوااسکریپت است. این یک شی است که می‌تواند مجموعه‌ای از مقادیر از همان نوع را ذخیره کند. به عنوان مثال، نظرات یک پست وبلاگ یا تصاویر اسلایدر را می‌توان در یک آرایه ذخیره کرد.

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

جدول محتوا

1. insert، push، unshift
2. remove، pop، shift
3. remove، replace، insert، splice
4. slice
5. merge، concat
6. search، includes، find، findIndex، indexOf
7. reverse

Insert - push, unshift

push: وقتی می‌خواهید یک یا چند مورد را به انتهای یک آرایه اضافه کنید، این روش قابل استفاده است. آرایه اصلی با افزودن آیتم جدید تبدیل می‌شود. خود این روش طول جدید آرایه را برمی‌گرداند.

let tea = ['breakfast','lemon','green'];
let count = tea.push('peach');
console.log(tea);
//['breakfast','lemon','green','peach']
console.log(count);
// 4

tea.push('black','strawberry','cranberry');
console.log(tea);
//['breakfast','lemon','green','peach','black','strawberry','cranberry']

unshift: این روش یک یا چند مورد را به ابتدای آرایه اضافه می‌کند. مانند "push"، آرایه در جای خود تغییر خواهد کرد و خود تابع طول جدید آرایه را برمی‌گرداند.

let letters = ['a', 'b', 'c', 'd', 'e'];
let count = letters.unshift('x', 'y', 'z');
console.log(letters);
//['x', 'y', 'z', 'a', 'b', 'c', 'd', 'e'];
console.log(count);
// 8

Remove - pop, shift

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

let letters = ['a', 'b', 'c', 'd', 'e'];
let poppedItem = letters.pop();
console.log(letters);
//['a', 'b', 'c', 'd']
console.log(poppedItem);
//'e'

shift: این عنصر اول را از یک آرایه حذف می‌کند. باز هم، آرایه در جای خود تغییر خواهد کرد و تابع عنصر حذف شده را برمی‌گرداند.

let letters = ['a', 'b', 'c', 'd', 'e'];
let shiftedItem = letters.shift();
console.log(letters);
//['b','c', 'd', 'e']
console.log(shiftedItem);
//'a'

splice: این روش با حذف یا جایگزینی عناصر موجود و یا اضافه کردن عناصر جدید، محتوای یک آرایه را تغییر می‌دهد و آرایه اصلی تغییر خواهد کرد.

سینتکس آن به صورت زیر خواهد بود:

let modifiedArray = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

مثال 1: در فهرست 0، دو مورد "salad" و "steak" را حذف کنید

let food = ['salad', 'steak', 'pudding', 'carrot cake'];
food.splice(0,2);
console.log(food); 
//["pudding", "carrot cake"]

مثال 2: در فهرست 1، موارد صفر را حذف کرده و "snake" و "rabbit" را وارد کنید

let animals = ["koala", "fish", "tortoise", "whale"]
animals.splice(1,0,"snake","rabbit");
console.log(animals); 
//["koala", "snake", "rabbit", "fish", "tortoise", "whale"]

مثال 3: در فهرست 0، دو مورد "earl grey" و "lemon" را حذف کرده و آنها را با "breakfast" و "peach" جایگزین کنید

let tea = ["earl grey", "lemon", "green"];
tea.splice(0, 2, "breakfast", "peach");
console.log(tea); 
//["breakfast", "peach", "green"]

Slice - slice

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

let food = ['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup'];
let copy = food.slice();
console.log(copy);
//['steak', 'pasta', 'cake', 'pudding', 'salad', 'soup']
let dessert = food.slice(2, 4);
console.log(dessert);
//['cake', 'pudding']
let starter = food.slice(-2); 
console.log(starter);
//['salad', 'soup']
let sweets = food.slice(-4, -2);
console.log(sweets);
//['cake', 'pudding']

Merge - concat

concat: از این روش برای ادغام دو یا چند آرایه استفاده می‌شود. آرایه‌های اصلی تغییر نخواهند کرد. این تابع یک آرایه جدید را برمی‌گرداند.

let tea = ['breakfast','earl grey','green'];
let juice = ['orange', 'pineapple', 'pear'];
let drinks = tea.concat(juice);

console.log(drinks);
//['breakfast','earl grey','green','orange','pineapple', 'pear']

console.log(tea);
//['breakfast','earl grey','green']

console.log(juice);
//['orange', 'pineapple', 'pear']

Search - includes, find, findIndex, indexOf

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

let tea = ['breakfast','earl grey','green'];

console.log(tea.includes('breakfast')); 
// true
console.log(tea.includes('strawberry'));
//false
console.log(tea.includes('earl grey', 1));
//true
console.log(tea.includes('earl grey', 2));
//false

find: اگر قصد جستجو دارید، می‌توانید از این متد استفاده کنید. این اولین موردی است که معیارهای تعیین شده توسط شما را جستجو می‌کند. اگر موردی یافت نشد، مقدار تعریف نشده بازگردانده می‌شود.

در مثال اول زیر، معیارها بیان می‌کند که عدد مورد نظر ما باید از 3 بزرگتر باشد. تابع جستجو 4 را برمی‌گرداند، زیرا 4 اولین عنصر در آرایه است که معیارها را برآورده می‌کند.

در مثال دوم زیر، معیارها بیان می‌کند که عدد درخواستی باید کوچک‌تر از 1 باشد. تابع جستجو به صورت تعریف نشده برمی‌گردد زیرا هیچ یک از عناصر موجود در آرایه این معیارها را برآورده نمی‌کنند.

let numbers = [ 1, 2, 3, 4, 5, 6];
let found = numbers.find(num => num > 3);
console.log(found);
// 4
found = numbers.find(num => num < 1);
console.log(found);
// undefined

findIndex: این متد تقریبا مشابه با find است. Find اولین مورد مطابق با معیارهای مشخص شده را برمی‌گرداند، در حالی که findIndex مقدار اولین مورد مطابقت شده را برمی‌گرداند. در صورت یافتن هیچ موردی، 1- را برمی‌گرداند.

در مثال اول زیر، معیارها بیان می‌کند که تعداد باید از 3 بیشتر شود. تابع جستجو 1 را برمی‌گرداند، زیرا 1 شاخص شماره 4 است، که شماره اول با معیارها مطابقت دارد.

در مثال دوم زیر، معیارها بیان می‌کند که درخواست به عدد کوچک‌تر از 2. تابع جستجو 1- را برمی‌گرداند، زیرا هیچ یک از اعداد موجود در آرایه از 2 کوچک‌تر نیست.

let numbers = [ 2, 4, 6, 7, 9, 10];
let foundIndex = numbers.findIndex(num => num > 3);
console.log(foundIndex);
// 1
foundIndex = numbers.findIndex(num => num < 2);
console.log(foundIndex);
// -1

indexOf: این متد تقریبا مشابه findIndex است، اما به جای اینکه تابعی از معیارهای جستجو را بگیرد، یک مقدار را می گیرد. آرگومان دوم، که نشانگر ایندکس برای شروع جستجو است، اختیاری است.

let juice = ['orange', 'pineapple', 'pear'];
let index = juice.indexOf('orange');
console.log(index);
// 0
index = juice.indexOf('orange', 1);
console.log(index);
// -1

Reverse - reverse

معکوس: این روش با تغییر آرایه اصلی یک آرایه را برعکس می‌کند.

let array = ["Y", "P", "P", "A", "H"];
let reversed = array.reverse();
console.log(reversed);
// ["H", "A", "P", "P", "Y"]

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

امیدواریم این مقاله برایتان مفید واقع شده باشد. نظرات خود را با ما در میان بگذارید.

منبع