آموزش متدهای آرایه Array Methods در ES6

آموزش کار با متدهای آرایه Array Methods در ES6:

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

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

آموزش کار با متد ()Array.from در ES6:

کارکرد اصلی متد ()Array.from، قادر ساختن برنامه جاوا اسکریپت به ساخت آرایه جدید از روی اشیای شبیه آرایه است. این متد مقادیر (values) و مقادیر قابل تکرار (iterable values) مثل مجموعه ها (set) و نقشه ها (map) را به آرایه تبدیل می کند. ساختار دستوری استفاده از متد ()Array.from به صورت زیر است:

Array.from(object, mapFunction, thisValue)  
            

انواع پارامترهای این متد در ساختار دستوری آن عبارتند از :

• شی object: مقدار این پارامتر همیشه اجباری است. این پارامتر شی ایی (object) که می خواهید به آرایه تبدیل کند را مشخص می کند.
• تابع mapFunction: این پارامتر اختیاری است. این پارامتر یک تابع map function را تعیین می کند تا بر روی هر عضو آرایه اجرا شود.
• thisValue: این پارامتر هم اختیاری است. مقداری است که در هنگام اجرای تابع mapFunction برای پارامتر this به کار می رود.

مثال: در کد مثال عملی زیر، با استفاده از متد ()Array.from کلمه ‘javaTpoint’ را به کاراکترهای سازنده آن تبدیل کرده و به صورت یک آرایه در آورده ایم:

let name = Array.from('javaTpoint')  
  
console.log(name) 
            

خروجی :

[
  'j', 'a', 'v', 'a',
  'T', 'p', 'o', 'i',
  'n', 't'
]
            

آموزش کار با تابع ()Array.of در ES6:

در ES5، هنگامی که یک مقدار عددی تکی را به تابع سازنده آرایه ارسال می کردید (مثلا num[5])، یک آرایه با تعداد اعضای برابر آن عدد ایجاد می کرد. متد ()Array.of روش جدیدی برای ایجاد آرایه است که این رفتار ES5 را تغییر داده است.
در صورت استفاده از این متد، چنانچه بخواهید یک آرایه را فقط با یک مقدار عددی در تابع سازنده آن ایجاد کنید، ES6 یک آرایه با یک عضو و مقدار آن عدد به جای یک آرایه با تعداد اعضایی برابر آن، ایجاد می کند.
مثال: در کد مثال عملی زیر یک آرایه جدید به نام name و با قرار دادن عدد 42 در تابع سازنده آرایه ایجاد کرده ایم. به دلیل استفاده از متد ()Array.of، به جای اینکه برنامه یک آرایه با 42 عضو ایجاد کند، یک آرایه با تک عضو و مقدار 42 خواهیم ساخت:

let name = Array.of(42)  
  
console.log(name)  
console.log(name.length)  
            

خروجی :

[ 42 ]
1
            

آموزش کار با متد ()Array.prototype.copyWithin:

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

ساختار دستوری استفاده از این متد به شرح زیر است:

array.copyWithin(target, start, end)  
            

در ساختار فوق، انواع پارامترها به شرح زیر هستند:

• target: استفاده از این پارامتر اجباری بوده و اندیس (index) عضوی که می خواهیم عملیات کپی کردن از آن شروع شود را تعیین می کند.
• start: استفاده از این پارامتر اختیاری است. این پارامتر اندیس (index) عضوی که عملیات رونویسی اطلاعات بر روی آنها از آنها شروع می شود را تعیین می کند. مقدار پیش فرض صفر است. اگر مقدارش منفی باشد، نقطه شروع از انتهای آرایه شمرده می شود.
• end: استفاده از این پارامتر نیز اختیاری است. این پارامتر اندیس (index) عضوی که عملیات رونویسی باید در آن نقطه تمام شود را تعیین می کند.
  مقدار پیش فرض آن، طول آرایه است.

مثال: در کد مثال عملی زیر، حالت مختلف استفاده از متد ()Array.prototype.copyWithin را نشان داده ایم:

const num = [1,2,3,4,5,6,7,8,9,10];  
const num1 = [1,2,3,4,5,6,7,8,9,10];  
const num2 = [1,2,3,4,5,6,7,8,9,10];  
console.log(num.copyWithin(1,3,5));  
console.log(num1.copyWithin(1,3)); //omitting the parameter end  
console.log(num2.copyWithin(1)); //omitting the parameters start and end 
            

خروجی :

[
  1, 4, 5, 4,  5,
  6, 7, 8, 9, 10
]
[
  1, 4,  5, 6,  7,
  8, 9, 10, 9, 10
]
[
  1, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]
            

آموزش کار با متد ()Array.prototype.Find:

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

array.find(callback(currentValue, index, arr),thisValue)  
            

انواع پارامترهای موجود در ساختار فوق عبارتند از:

• callback: این تابع شرط پیدا کردن مقدار هدف را تعیین کرده و بر روی اعضای آرایه اجرا می شود.
• current Value: این پارامتر اجباری بوده و مقدار عنصر جاری را تعیین می کند.
• index: استفاده از این پارامتر اختیاری است. این پارامتر اندیس پارامتر جاری را مشخص می کند.
• arr: این پارامتر نیز اختیاری بوده و نام آرایه ای که قرار است متد ()find رویش اجرا شود را تعیین می کند.
• thisValue: این پارامتر نیز اختیاری بوده و مقداری است که برای عبارت this در هنگام فراخوانی تابع callback به کار می رود.

مثال: در کد مثال عملی زیر یک آرایه به نام arr تعریف کرده و سپس توسط متد ()Array.prototype.find گفته ایم اولین عنصری که مقدارش از 20 بیشتر است را برگرداند:

var arr=[5,22,19,25,34];    
var result=arr.find(x=>x>20);    
console.log(result);  
            

خروجی :

22
            

آموزش کار با متد ()Array.prototype.findIndex:

این متد اندیس (index) اولین عضو آرایه که با شرط تعیین شده برایش مطابقت دارد را بر می گرداند. اگر هیچ کدام از اعضای آرایه مطابق با شرط متد نباشند، خروجی آن 1- خواهد بود.
ساختار دستوری استفاده از متد ()Array.prototype.findIndex به صورت زیر است:

array.findIndex(callback(value,index,arr),thisArg)     
            

مثال: در کد مثال عملی زیر یک آرایه به نام arr را تعریف و مقداردهی کرده ایم. سپس توسط متد ()findIndex، اندیس (Index) اولین عنصری که مقدارش بیشتر از 20 باشد را برگردانده ایم:

var arr=[5,22,19,25,34];    
var result=arr.findIndex(x=>x>20);    
console.log(result)  
            

خروجی :

1
            

آموزش کار با متد ()Array.prototype.enteries :

این متد، یک شی قابل تکرار آرایه ای (array iterator object) را بر می گرداند که از طریق آن می توانید (با استفاده از ساختارهایی مثل حلقه) درون کلیدها (key) و مقادیر (values) اعضای آرایه اصلی حرکت نمایید.
تابع ()entries درواقع یک آرایه دو بعدی یا آرایه ای از آرایه بر می گرداند که در آن هر عضو به صورت [index, value] است.
ساختار دستوری استفاده از تابع ()entries به صورت زیر است:

array.entries()  
            

مثال: در مثال عملی زیر یک آرایه به نام colors تعریف کرده ایم و سپس توسط متد ()entries اعضای آن را به صورت یک آرایه دو بعدی کلید/مقدار درآورده و توسط یک حلقه for در خروجی نشان داده ایم:

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.entries();  
  
for (i of show) {  
  console.log(i);  
}  
            

خروجی :

[ 0, 'Red' ]
[ 1, 'Yellow' ]
[ 2, 'Blue' ]
[ 3, 'Black' ]
            

مثال عملی 2: در کد مثال فوق، به جای استفاده از حلقه for…of می توانیم از عملگر Spread یا همان 3 نقطه برای ارسال آرایه به دستور ()console.log استفاده کرده که همان خروجی را خواهد داشت:

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.entries();  
console.log(...show);  
            

خروجی :

[ 0, 'Red' ] [ 1, 'Yellow' ] [ 2, 'Blue' ] [ 3, 'Black' ]
            

آموزش کار با متد ()Array.prototype.keys:

این متد عملکردی مشابه متد ()Array.entries دارد. همانطور که از نامش پیداست، این متد یک شی آرایه ای قابل تکرار (array iterator object) را بر می گرداند که آرایه ای از کلیدها (keys) عناصر آرایه مورد استفاده است.
ساختار دستوری استفاده از متد ()Array.prototype.keys به صورت زیر است:

array.keys() 
            

مثال: در کد مثال عملی زیر، یک آرایه به نام colors تعریف کرده و سپس توسط متد ()keys، کلیدهای اعضای آن را در خروجی نمایش داده ایم:

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.keys();  
console.log(...show);  
            

خروجی :

0 1 2 3
            

آموزش کار با متد ()Array.prototype.values:

این متد همانند متدهای ()Array.keys و ()Array.entries است ، با این تفاوت که آرایه ای از مقادیر (Values) آرایه هدف را بر می گرداند. ساختار دستوری استفاده از متد ()Array.Values به صورت زیر است:

array.values()  
            

مثال: در کد مثال عملی زیر نیز آرایه colors را به متد ()values ارسال کرده ایم تا مقادیر اعضای آن را در خروجی نشان دهیم:

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.values();  
console.log(...show);  
            

خروجی :

Red Yellow Blue Black
            

آموزش کار با متد ()Array.prototype.fill:

این متد آرایه مورد نظر را با یک مقدار ثابت (Static Value) پر می کند. از مقدار مورد نظر می توانید برای پر کردن بخشی یا تمام آرایه استفاده کنید. این مقدار باعث تغییر آرایه اولیه خواهد شد.
می توانید نقطه شروع و پایان پر شدن اعضای آرایه با مقدار هدف را تعیین کنید، اگر نقاط خاصی مشخص نشود، کل آرایه با مقدار جدید پر می شود. ساختار دستوری استفاده از متد ()fill به صورت زیر است:

array.fill(value, start, end)  
            

در ساختار فوق، پارامترهای مورد استفاده عبارتند از:

• value: این پارامتر اجباری بوده و مقداری که می خواهید آرایه با آن پر شود را تعیین می کند.
• start: این پارامتر اندیس (Index) محل ی از آرایه که عملیات پر کردن مقادیر از آن شروع می شود را تعیین می کند. استفاده از این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است.
• end: این پارامتر نیز اندیس (Index) محل توقف عملیات پر شدن آرایه را تعیین می کند. استفاده از آن اختیاری بوده و مقدار پیش فرض ش کل طول آرایه است.

مثال: در کد مثال عملی زیر، یک آرایه به نام colors تعریف کرده ایم و سپس توسط متد ()fill به آن گفتیم از اندیس 2 تا 4 را با مقدار “Green” پر کند:

var colours = ["Red", "Yellow", "Blue", "Black"];  
var show = colours.fill("Green",2,4);  
console.log(...show);  
            

خروجی :

Red Yellow Green Green
            

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

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