آرایه ها در جاوا اسکریپت(javascript)

در این مطلب قصد داریم به طور مفصل به رایج ترین Array operations هایی که شما باید در جاوا اسکریپت یاد داشته باشید، بپردازیم.این operations ها در برنامه نویسی جاوا اسکریپت اهمیت بسیار زیادی دارند به خصوص اگر شما به تازگی شروع به یادگیری جاوا اسکریپت کردید.

اضافه کردن Elements

ما 3 method برای اضافه کردن element به آرایه در جاوا اسکریپت داریم که استفاده از هر کدوم بستگی به جایی دارد که میخواهیم element ها اضافه شود.

Array.prototype.push

ما میتونیم با استفاده از متد push یک یا تعداد بیشتری element به آخر آرایه اضافه کنیم.

const numbers = [3, 4];
numbers.push(5, 6); 
// numbers: [3, 4, 5, 6]

const numbers = [3, 4];

numbers.push(5, 6);

// numbers: [3, 4, 5, 6]

Array.prototype.unshift

ما میتونیم با استفاده از متد unshift یک یا تعداد بیشتری element به ابتدای آرایه اضافه کنیم.

const numbers = [3, 4];
numbers.unshift(1, 2);   
// numbers: [1, 2, 3, 4]

const numbers = [3, 4];

numbers.unshift(1, 2);

// numbers: [1, 2, 3, 4]

Array.prototype.splice

ما میتونیم با استفاده از متد splice یک یا تعداد بیشتری element در جایی از وسط آرایه که میخواهیم،اضافه کنیم.

const numbers = [1, 2, 3, 4, 5, 6];
numbers.splice(2, 0, 'a', 'b');  
// numbers: [1, 2, "a", "b", 3, 4, 5, 6]

const numbers = [1, 2, 3, 4, 5, 6];

numbers.splice(2, , 'a', 'b');

// numbers: [1, 2, "a", "b", 3, 4, 5, 6]

متد splice پارامترهای زیر را میگیرد:

index جایی که ما میخواهیم element جدید به آرایه اضافه شود.
تعداد element هایی که میخواهیم بعد از index پاس داده شده حذف شود.
یک یا چند element ایی که میخواهیم بعد از index پاس داده شده به آرایه اضافه شود

حذف کردن Elements

ما 3 method برای حذف کردن element به آرایه در جاوا اسکریپت داریم که استفاده از هر کدوم بستگی به جایی دارد که میخواهیم element ها حذف شود.

Array.prototype.pop

ما میتونیم با استفاده از متد pop آخرین element موجود در آرایه رو حذف کنیم و این متد برای ما value مربوط به element ها رو return میکنه.

const numbers = [1, 2, 3, 4];
var last = numbers.pop();
// last: 4
// numbers: [1, 2, 3]

const numbers = [1, 2, 3, 4];

var last = numbers.pop();

// last: 4

// numbers: [1, 2, 3]

Array.prototype.shift

ما میتونیم با استفاده از متد pop اولین element موجود در آرایه رو حذف کنیم و این متد برای ما value مربوط به element ها رو return میکنه.

const numbers = [1, 2, 3, 4];
var first = numbers.shift();
// first: 1
// numbers: [2, 3, 4]

const numbers = [1, 2, 3, 4];

var first = numbers.shift();

// first: 1

// numbers: [2, 3, 4]

Array.prototype.splice

ما میتونیم با استفاده از متد splice یک یا تعداد بیشتری element در جایی از وسط آرایه که میخواهیم،حذف کنیم.

const numbers = [1, 2, 3, 4];
var splice = numbers.splice(1, 2);
// splice: [1, 4]

const numbers = [1, 2, 3, 4];

var splice = numbers.splice(1, 2);

// splice: [1, 4]

متد splice پارامترهای زیر را برای حذف یک یا چند element از آرایه را میگیرد:

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

Array operations های پیشرفته(Higher Order Function)

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

جاوا اسکریپت یک سری higher-order functions به همراه خودش برای آرایه ها داره که ممکنه شما بارها ازش استفاده کرده باشید بدون اینکه متوجه بشید با یک higher-order functions دارید کار می کنید.بیایید به برخی از آن ها نگاه کنیم تا نحوه کار آن ها رو بفهمیم.

یک تابع که یک function رو میگیره و یا یک function رو return میکنه higher-order function نامیده میشه.

Array.prototype.sort

مرنب سازی آرایه ها یکی از کارهایی است که ما در زمان برنامه نویسی زیاد انجامش میدیم.متد ()sort آیتم های آرایه را به صورت in place مرتب سازی میکند و آرایه مرتب رو برای ما return میکنه.syntax متد ()sortبه شکل زیر است:

arr.sort([compareFunction])

1	arr.sort([compareFunction])

در اینجا compareFunction به ترتیب مرتب سازی اشاره داره.این یک پارامتر اختیاری است.اگر ترتیب مرتب سازی مشخص نشده باشه، آیتم های آرایه تبدیل به string میشن و بر اساس character’s Unicode مرتب میشن.

compare function میتونه به شکل زیر باشه:

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

function compare(a, b) {

if (a is less than b by some ordering criterion) {

return -1;

}

if (a is greater than b by the ordering criterion) {

return 1;

}

// a must be equal to b

return ;

}

در صورت مرتب کردن آرایه ای از اعداد compare() function خیلی ساده تر می شود.

کامپایلری برای تبدیل کد های GO به javascript

function compareNumbers(a, b) {
  return a - b;
}

function compareNumbers(a, b) {

return a - b;

}

در این مثال element های آرایه به صورت صعودی مرتب می شوند.ما از arrow function برای ساده تر شدن کد استفاده می کنیم.

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

// [1, 2, 3, 4, 5]

let numbers = [4, 2, 5, 1, 3];

numbers.sort((a, b) => a - b);

console.log(numbers);

// [1, 2, 3, 4, 5]

Array.prototype.map

متد () map یک آرابه جدید رو از طریق فراخوانی تابع بر روی هر یک از آیتم های آرایه ایجاد می کند.() map یک callback function رو برای هر کدوم از آیتم های آرایه برای یک هدف خاص فراخوانی میکنه و بر اساس اون یک آرایه جدید رو ایجاد میکنه.

callback 3 تا arguments رو قبول میکنه:

value of the element
index of the element
array object

شما ممکنه که قبلا از map() function استفاده کرده باشید.این یک higher-order function است زیرا callback function رو به عنوان ورودی دریافت میکنه.

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]

var numbers = [1, 4, 9];

var doubles = numbers.map(function(num) {

return num * 2;

});

// doubles is now [2, 8, 18]

// numbers is still [1, 4, 9]

در مثال بالا ما یک آرایه ای از اعداد رو داریم که با استفاده از ()map یک آرایه جدید ایجاد می شود.()map یک تابع رو به عنوان argument میگیره. argument num درون تابع به طور خودکار بر روی هر آیتم آرایه اصلی اختصاص پیدا میکنه.

Array.prototype.filter

متد ()filter یک مثال دیگه از higher-order function هایی است که در جاوا اسکریپت وجود داره.این method یک آرایه جدید با تمام آیتم هایی که تست موردنظر callback function رو پاس کردن، ایجاد میکنه. callback function به متد ()filter آرگومان های زیر رو میپذیره:

value of the element
index of the element
array object

آیتم های آرایه ای که تست callback رو پشت سر نمیگذرونند، به راحتی skip میشن و در آرایه جدید قرار نمیگرند.به مثال زیر توجه کنید تا کار ()filter رو در عمل ببینید.

function isAboveMyRange(value) {
  return value >= 25;
}
var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);
// filtered is [130, 44]

function isAboveMyRange(value) {

return value >= 25;

}

var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);

// filtered is [130, 44]

value هایی که تست رو پاس نکرده باشند در آرایه فیلتر شده قرار نمیگیرند.filter() function تابع isAboveMyRange رو به عنوان پارامتر ورودی دریافت میکنه.

Array.prototype.reduce

متد ()reduce یک مثال دیگه از higher-order function هایی است که در جاوا اسکریپت وجود داره.این method بر روی هر کدوم از آیتم های آرایه callback function رو اجرا میکنه و نتیجه رو در یک مقدار قرار میده.()reduce دو تا پارامتر ورودی میگیره:

The reducer callback function (making this method a higher-order function)
Optional initial value

arr.reduce(callback[, initialValue])

1	arr.reduce(callback[, initialValue])

reducer function یا همون callback چهار پارامتر میگیره:

accumulator
currentValue
currentIndex
sourceArray

اگر initialValue که به صورت اختیاری است،پاس داده شده باشه،accumulator برابر initialValue خواهد بود و currentValue برابر با اولین آیتم آرایه خواهد بود.اگر initialValue مشخص نشده باشه،accumulator برابر با اولین آیتم آرایه و currentValue برابر با دومین آیتم آرایه خواهد بود.به مثال زیر توجه کنید تا موضوع رو بهتر درک کنید

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

var sum = [, 1, 2, 3].reduce(function (accumulator, currentValue) {

return accumulator + currentValue;

}, );

// sum is 6

در این مثال ما initialValue رو برابر با صفر قرار دادیم و به ()reduce پاس دادیم، بنابراین accumulator برابر با مقدار صفر در ابتدا خواهد بود.هر دفعه ای که reduce() function هر کدام از مقادیر آرایه رو فراخوانی می کند، accumulator نتیجه عملیات قبلی که از تابع return شده رو نگه داری میکنه و currentValue برابر با مقدار آیتم جاری آرایه است.در نهایت نتیجه در متغیر sum ذخیره می شود.

Conclusion

در این مقاله ما در مورد متدهای پرکاربر آرایه ها در جاوا اسکریپت مطالبی رو یاد گرفتیم و در مورد اون بحث کردیم.اگر به دنبال این هستید که در جاوا اسکریپت حرفه ای بشید، پیشنهاد میکنم دور های آموزش جاوا اسکریپت و ES6 که به صورت رایگان در سایت موجود هستند رو تماشا کنید.

همچنین اگر این مقاله براتون مفید بود،اون رو با بقیه دوستان و همکارانتون به اشتراک بزارید.

منبع : بلاگ مشفق همدانی

آرایه ها در جاوا اسکریپت(javascript)

اضافه کردن Elements

Array.prototype.push

Array.prototype.unshift

Array.prototype.splice

حذف کردن Elements

Array.prototype.pop

Array.prototype.shift

Array.prototype.splice

Array operations های پیشرفته(Higher Order Function)

Array.prototype.sort

Array.prototype.map

Array.prototype.filter

Array.prototype.reduce

Conclusion

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

اضافه کردن Elements

Array.prototype.push

Array.prototype.unshift

Array.prototype.splice

حذف کردن Elements

Array.prototype.pop

Array.prototype.shift

Array.prototype.splice

Array operations های پیشرفته(Higher Order Function)

Array.prototype.sort

Array.prototype.map

Array.prototype.filter

Array.prototype.reduce

Conclusion

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

دیدگاهتان را بنویسید لغو پاسخ