آموزش جاوا اسکریپت – آرایه ها در جاوا اسکریپت ۲

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

در بخش اول آرایه ها در جاوا اسکریپت با نحوه کار با آرایه ها, دریافت طول آرایه, اجرای حلقه روی آن و غیره آشنا شدیم. در این بخش قصد داریم بقیه مباحث باقی کار با اعداد را بررسی کنیم.

افزودن یا حذف المان ها در هر موقعیت

متد splice() متد خیلی همه کاره ای است که اجازه افزودن یا حذف المان ها از هر ایندکسی را می دهند

سینتکس کلی آن بصورت زیر است:

arr.splice(startIndex, deleteCount, elem1, ..., elemN)

1	arr.splice(startIndex, deleteCount, elem1, ..., elemN)

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

پارامتر اول ایندکس جایی که باید شروع کند است و مقدار این پارامتر اجباری است
پارامتر دوم شماره المانی که قصد دارید حذف کنید (اگر نمی خواهید حذف کنید ۰ قرار بدید) و مقدار این پارامتر اختیاری است
پارامتر سوم مجموعه ای از المان های جایگزین است که این هم اختیاری است.

نحوه کار کردن این متد را در مثال زیر ببینید:

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Remove the first element
 
document.write(colors); // Prints: Green,Blue
document.write(removed); // Prints: Red (one item array)
document.write(removed.length); // Prints: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
document.write(removed.length); // Prints: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
document.write(removed.length); // Prints: 1

var colors = ["Red", "Green", "Blue"];

var removed = colors.splice(0,1); // Remove the first element

document.write(colors); // Prints: Green,Blue

document.write(removed); // Prints: Red (one item array)

document.write(removed.length); // Prints: 1

removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one

document.write(colors); // Prints: Green,Pink,Yellow,Blue

document.write(removed); // Empty array

document.write(removed.length); // Prints: 0

removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one

document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue

document.write(removed); // Prints: Pink (one item array)

document.write(removed.length); // Prints: 1

متد splice() آرایه ای از المان های حذف شده را برگشت می دهد یا اگر المان حذف نشده باشد, همانند مثال بالا آرایه خالی برگشت می دهدو

اگر آرگومان دوم ست نشود, همه المان ها از اول تا اخر آرایه حذف می شوند.

برخلاف متدهای concat() و slice() , متد splice() آرایه را تغییر می دهد.

ساخت یک رشته از آرایه

جاهایی است که نیاز داریم از چسابندن المان های آرایه به هم دیگر یم رشته ایجاد کنیم. برای اینکار از متد join() استفاده می کنیم.

این متد یک پارامتر اختیاری را به عنوان جدا کننده دریافت می کند که بین هر المان قرار می گیرد. اگر این پارامتر را ست نکند بصورت پیش فرض جداکننده کاما (,) در نظر گرفته می شود.

var colors = ["Red", "Green", "Blue"];
 
document.write(colors.join()); // Prints: Red,Green,Blue
document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue

var colors = ["Red", "Green", "Blue"];

document.write(colors.join()); // Prints: Red,Green,Blue

document.write(colors.join("")); // Prints: RedGreenBlue

document.write(colors.join("-")); // Prints: Red-Green-Blue

document.write(colors.join(", ")); // Prints: Red, Green, Blue

شما می توانید آرایه را بصورت رشته جدا شده با کاما توسط متد toString() تبدیل کنید. این متد یک پارامتر جداکننده را مثل join() دریافت نمی کند.

استخراج بخشی از آرایه

اگر می خواهید بخشی از یک آرایه را جدا کنید اما آرایه اصلی را نیز بدون تغییر رها کنید می توانید از متد slice() بهره ببرید.

این متد ۲ پارامتر دریافت می کند: ایندکس شروع (که از آنجا عملیات استخراج یا همان کپی انجام شود) و یک ایندکس پایان اختیاری (که قبل از آن عملیات استخراج به پایان می رسد.)

سینتکس آن بصورت arr.slice(startIndex, endIndex) است.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Prints: Banana,Mango

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

var subarr = fruits.slice(1, 3);

document.write(subarr); // Prints: Banana,Mango

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

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

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.slice(2)); // Prints: Mango,Orange,Papaya
document.write(fruits.slice(-2)); // Prints: Orange,Papaya
document.write(fruits.slice(2, -1)); // Prints: Mango,Orange

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits.slice(2)); // Prints: Mango,Orange,Papaya

document.write(fruits.slice(-2)); // Prints: Orange,Papaya

document.write(fruits.slice(2, -1)); // Prints: Mango,Orange

ترکیب دو یک چند آرایه

متد concat() می توانید دو یا چند آرایه را باهم ترکیب یا ادغام کندو این متدها آرایه فعلی را تغییر نمی دهند, به جای آن یک آرایه جدید را برگشت می دهد:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// Creating new array by combining pets and wilds arrays
var animals = pets.concat(wilds); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra

var pets = ["Cat", "Dog", "Parrot"];

var wilds = ["Tiger", "Wolf", "Zebra"];

// Creating new array by combining pets and wilds arrays

var animals = pets.concat(wilds);

document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra

متد concat() چندین آرایه را نیز دریافت کنید, بنابراین هر چقدر آرایه که خواستید می توانید باهمدیگر ترکیب کنید:

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
 
// Creating new array by combining pets, wilds and bugs arrays
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

var pets = ["Cat", "Dog", "Parrot"];

var wilds = ["Tiger", "Wolf", "Zebra"];

var bugs = ["Ant", "Bee"];

// Creating new array by combining pets, wilds and bugs arrays

var animals = pets.concat(wilds, bugs);

document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

جستجو در آرایه ها

اگر قصد جستجو مقدار خاصی در آرایه هستید, به راحتی می توانید از indexOf() و lastIndexOf() استفاده کنید. اگر مقدار یافت شد, هر دو این متدها, ایندکس المان را برگشت می دهند.

اگر یافت نشد -۱ برگشت داده می شود.

متد indexOf() اولین مقدار یافت شده را برگشت می دهد, درحالی که lastIndexOf() آخرین مورد یافت شده را برگشت می دهد.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.indexOf("Apple")); // Prints: 0
document.write(fruits.indexOf("Banana")); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits.indexOf("Apple")); // Prints: 0

document.write(fruits.indexOf("Banana")); // Prints: 1

document.write(fruits.indexOf("Pineapple")); // Prints: -1

هر دو متدها یک مقدار عددی صحیح را بصورت پارامتر برای ایندکس شروع آرایه دریافت می کنند.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Searching forwards, starting at from- index
document.write(arr.indexOf(1, 2)); // Prints: 3
 
// Searching backwards, starting at from index
document.write(arr.lastIndexOf(1, 2)); // Prints: 0

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

// Searching forwards, starting at from- index

document.write(arr.indexOf(1, 2)); // Prints: 3

// Searching backwards, starting at from index

document.write(arr.lastIndexOf(1, 2)); // Prints: 0

همچنین می توانید از متد includes() برای جستجوی المان خاصی در آرایه استفاده کنید. این متد همان پارامترهای مشابه indexOf() و lastIndexOf() را دریافت می کند, اما به جای true یا false شماره ایندکس را برگشت می دهد:

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Prints: true
document.write(arr.includes(6)); // Prints: false
document.write(arr.includes(1, 2)); // Prints: true
document.write(arr.includes(3, 4)); // Prints: false

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

document.write(arr.includes(1)); // Prints: true

document.write(arr.includes(6)); // Prints: false

document.write(arr.includes(1, 2)); // Prints: true

document.write(arr.includes(3, 4)); // Prints: false

اگر قصد جستجو بر اساس شرط را دارید می توانید از متد find() که در ES6 معرفی شده است استفاده کنید.

این متد مقدار اولین المان یافت شده از آرایه را برگشت می دهد و اگر پیدا نشد هم undefined برگشت داده می شود.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

var result = arr.find(function(element) {

return element > 4;

});

document.write(result); // Prints: 5

یک متد مشابه به find() نیز findIndex() است که به جای مقدار, ایندکس المان را برگشت می دهد.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Prints: 8

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

var result = arr.findIndex(function(element) {

return element > 6;

});

document.write(result); // Prints: 8

متد find() فقط اولین المان یافت شده را برگشت میدهد, به هر حال اگر می خواهید تمام المان های یافت شده را دریافت کنید از متد filter() استفاده کنید.

متد filter() یک آرایه جدید با همه المان های یافت شده ایجاد می کند.

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5,7
document.write(result.length); // Prints: 2

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];

var result = arr.filter(function(element) {

return element > 4;

});

document.write(result); // Prints: 5,7

document.write(result.length); // Prints: 2

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

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – آرایه ها در جاوا اسکریپت ۲

افزودن یا حذف المان ها در هر موقعیت

ساخت یک رشته از آرایه

استخراج بخشی از آرایه

ترکیب دو یک چند آرایه

جستجو در آرایه ها

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

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

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه