سه شنبه ۰۱ تیر ۱۴۰۰

Tuesday, June 22, 2021 GMT +4:30

» متدهای کار با آرایه در جاوا اسکریپت (JavaScript)

javascript-array

اکنون که با آرایه ها و نحوه تعریف و کاربرد آنها آشنا شدیم نوبت رسیده که گام را کمی فراتر گذاشته و متدهای کار با آرایه را بشناسیم، متدها (Methods) توابع از پیش تعریف شده ای هستند که به صورت ذاتی در مفسر جاوا اسکریپت وجود دارند و می توانیم به کمک آنها آبجکت آرایه (Array Object) و عناصر زیرمجموعه آن را بررسی، ویرایش، استخراج یا تبدیل کنیم، در کدنویسی برنامه ها استفاده از این دستورات ذاتی به خصوص در زمینه کار با آرایه ها متداول و اغلب اجتناب ناپذیر است و به همین دلیل در بیشتر زبان های برنامه نویسی تعداد زیادی متد از پیش تعریف شده درونی (Built-in) برای این کار وجود دارد، در ادامه در حد مقدور پرکاربردترین متدهای کار با آرایه در جاوا اسکریپت را بررسی می کنیم.

متد Array.of


متد Array.of برای ایجاد آرایه از مقادیر تنظیم شده به عنوان آرگیومنت کاربرد دارد، کارکرد این متد هم مشابه دستور new Array است و یک آبجکت آرایه (Array Object) ایجاد می کند با این تفاوت که اگر پارامتر تنظیم شده به عنوان آرگیومنت صرفا یک عدد باشد، Array.of آرایه ای با ایندکس 0 ایجاد و آن عدد را به عنوان مقدار لحاظ می کند اما دستور new Array به تعداد عدد تعیین شده ایندکس و برای مقدار جایگاه خالی (Empty Slot) در نظر می گیرد، مثال:
<script>
console.log(Array.of(3));
console.log(new Array(3));
console.log(Array.of(1, 2, 3));
console.log(new Array(1, 2, 3));
</script>
نتیجه اجرای نمونه کد بالا به شکل زیر در خروجی Console مرورگر نمایش داده می شود:
[3]
[,,] یا [<3 empty slots>]
[1, 2, 3]
[1, 2, 3]
برای دسترسی به قسمت Console مرورگرها می توانیم دکمه F12 را فشرده یا از قسمت Developer به این امکان دسترسی پیدا کنیم.

متد Array.from


متد Array.from با و بدون تابع بازگشتی (Callback) آرگیومنت دریافتی را تجزیه و به آرایه تبدیل می کند، در صورتی که آرگیومنت دوم این متد به صورت تابع بازگشتی تنظیم شود هر عضو آرایه به ترتیب از فرآیند تابع عبور داده خواهند شد، مقادیر آرگیومنت اول متد Array.from می تواند یک آبجکت طبق پروتکل Iteration باشد (به فرض رشته متنی باشد) یا اینکه یک شبه آرایه (پارامترهای داخل کاراکتر قلاب []) را برای پارامتر اول به همراه تابع بازگشتی در نظر بگیریم، مثال:
<script>
console.log(Array.from('JavaScript'));
console.log(Array.from([1, 2, 3], x => x * x));
</script>
نتیجه اجرای نمونه کد بالا به شکل زیر در خروجی Console مرورگر نمایش داده می شود:
["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
[1, 4, 9]
در تابع بازگشتی نمونه دوم هر مقدار از آرایه در خودش ضرب شده است.

متد Array.isArray


متد Array.isArray مقادیر تنظیم شده به عنوان آرگیومنت را بررسی و در صورتی که مقدار از نوع آرایه (Array Object) باشد true و در غیر اینصورت false را به عنوان نتیجه بررسی برمی گرداند، مثال:
<script>
var str_1 = 'Hello!';
var array_1 = [1, 2, 3];
console.log(Array.isArray(str_1));
console.log(Array.isArray(array_1));
</script>
نتیجه اجرای نمونه کد بالا به شکل زیر در خروجی Console مرورگر نمایش داده می شود:
false
true
متغیر str_1 از نوع String است و در نتیجه متد Array.isArray مقادیر false را برمی گرداند.

متد includes


متد includes وجود یک مقدار را بین عناصر (مقادیر) آرایه بررسی و در صورت وجود نتیجه را true و در غیر اینصورت false برمی گرداند، مثال:
<script>
var array_1 = [11, 32, 77];
alert(array_1.includes(44));
alert(array_1.includes(32));
</script>
خروجی این کد به صورت زیر نمایش داده خواهد شد:
false
true
عدد 44 در عناصر آرایه array_1 وجود ندارد (false) اما عدد 32 به عنوان مقادیر ایندکس 1 در آرایه وجود دارد (true).

متد length


متد length برای بدست آوردن تعداد عناصر آرایه کاربرد دارد، به طور مثال:
<script>
var array_1 = [1, 5, 2];
alert('Length of array_1 is: ' + array_1.length);
</script>
خروجی این کد به صورت زیر نمایش داده خواهد شد:
Length of array_1 is: 3
عدد 3 یعنی طول آرایه 3 عنصر است.

متد concat


متد concat برای ترکیب دو آرایه و ایجاد آرایه جدید به کار می رود، به طور مثال:
<script>
var array_1 = [1, 5, 2];
var array_2 = [4, 9, 3];
var array_3 = array_1.concat(array_2);
for(var i = 0; i < array_3.length; i++){
    alert('Index ' + i + ' Value is: ' + array_3[i]);
}
</script>
با اجرای این نمونه کد در خروجی مقادیر زیر به صورت پیام هشدار نمایش داده می شود:
Index 0 Value is: 1
Index 1 Value is: 5
Index 2 Value is: 2
Index 3 Value is: 4
Index 4 Value is: 9
Index 5 Value is: 3
همان طور که مشخص است در حلقه for به تعداد اعضای آرایه array_3 که ترکیب آرایه های array_1 و array_2 به کمک متد concat است، دستور alert خروجی متفاوتی خواهد داشت.

متد toString


متد toString برای الحاق تمام عناصر آرایه در رشته متنی کاربرد دارد، به طور مثال:
<script>
var array_1 = ['Java', 'Script'];
alert(array_1.toString());
</script>
خروجی این نمونه کد به صورت زیر خواهد بود:
Java,Script
متد toString به صورت خودکار از کاراکتر کاما (,) برای اتصال عناصر آرایه و تبدیل به رشته متنی استفاده می کند، در صورتی که به این کاراکتر نیاز نباشد یا بخواهیم کاراکتر دیگری را جایگزین کنیم می توانیم از متد join به جای toString استفاده کنیم.

متد join


کاربرد متد join الحاق تمام عناصر آرایه در رشته متنی با و بدون کاراکتر جداکننده (Separator) است، به طور مثال:
<script>
var array_1 = ['Java', 'Script'];
var array_2 = ['is', 'easy', 'to', 'learn'];
alert(array_1.join('') + ' ' + array_2.join(' ') + '!');
</script>
خروجی این نمونه کد به شکل زیر خواهد بود:
JavaScript is easy to learn!
در صورتی که برای متد join آرگیومنتی درنظر نگیریم به صورت خودکار از کاراکتر کاما (,) برای اتصال عناصر آرایه و تبدیل به رشته متنی استفاده می کند.

متد toLocaleString


متد toLocaleString عناصر آرایه را بر اساس استاندارد ECMAScript که برای کارکرد یکسان جاوا اسکریپت در مرورگرهای مختلف تدوین شده به مقادیر رشته متنی با فرمت محلی (به فرض فرمت نمایش تاریخ و زمان در کشوری خاص) تبدیل می کند، به طور مثال:
<script>
var array_1 = [1, 'a', new Date('11 Apr 2021 16:17:10 UTC')];
var locale_string = array_1.toLocaleString('en', { timeZone: 'UTC' });
console.log(locale_string);
</script>
نتیجه اجرای نمونه کد بالا به شکل زیر در خروجی Console مرورگر نمایش داده می شود:
1,a,4/11/2021, 4:17:10 PM
در صورتی که به جای en مقدار fa قرار دهیم احتمالا تاریخ شمسی و اعداد فارسی خواهند شد.

متد pop


کاربرد متد pop حذف آخرین عنصر از آرایه و برگردان عنصر حذف شده به عنوان نتیجه است، به طور مثال:
<script>
var array_1 = [66, 102, 323, 480];
alert('Last Value is: ' + array_1.pop());
array_1.forEach(function(element, index, array){
    alert('Index ' + index + ' Value is: ' + element);
})
</script>
خروجی این نمونه کد چند پیام است که به صورت زیر و به ترتیب نمایش داده می شوند:
Last Value is: 480
Index 0 Value is: 66
Index 1 Value is: 102
Index 2 Value is: 323
با اجرای متد pop بر روی آرایه array_1 در قسمت دستور alert اول، عنصر آخر با مقادیر 480 حذف شده و در حلقه forEach چاپ نخواهد شد، در حلقه forEach به کمک تابع بازگشتی (Callback) می توانیم به ترتیب در هر دور حلقه به عناصر آرایه دسترسی داشته باشیم.

متد push


متد push برای افزودن یک یا چند عنصر به انتهای آرایه و برگردان تعداد عناصر آن به کار می رود، به طور مثال:
<script>
var array_1 = ['ir', 'com', 'net'];
var count = array_1.push('org', 'info');
alert(count);
</script>
خروجی نمونه کد بالا عدد 5 خواهد بود که تعداد عناصر آرایه array_1 پس از اعمال متد push است.

متد reverse


با متد reverse چینش عناصر آرایه به صورت معکوس تغییر می کند، به طور مثال:
<script>
var array_1 = ['ir', 'com', 'net', 'org', 'info'];
array_1.reverse();
alert(array_1);
</script>
خروجی این نمونه کد به صورت زیر خواهد بود:
info,org,net,com,ir
دقت کنیم این سبک متدها همان آرایه را به صورت درجا (In-place) تغییر می دهند و آرایه جدیدی نمی سازند.

متد shift


متد shift جهت حذف اولین عنصر از آرایه و برگردان آن به عنوان نتیجه کاربرد دارد، به طور مثال:
<script>
var array_1 = ['ir', 'com', 'net', 'org', 'info'];
var first_value = array_1.shift();
alert('First Value is: ' + first_value + ' & array_1 Length is: ' + array_1.length);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
First Value is: ir & array_1 Length is: 4
با اعمال متد shift عضو اول از آرایه اصلی کم می شود و طول جدید 4 خواهد بود.

متد unshift


متد unshift جهت اضافه کردن یک یا چند مقدار به ابتدای آرایه و برگردان طول آرایه جدید کاربرد دارد، مثال:
<script>
var array_1 = [2, 3, 4, 5];
alert(array_1.unshift(0, 1));
alert(array_1);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
6
0,1,2,3,4,5
متد unshift به صورت درجا (In-place) بر روی آرایه موثر است.

متد slice


از متد slice برای جداسازی بخشی از عناصر آرایه و تشکیل آرایه جدید بدون تغییر آرایه اصلی استفاده می شود، این متد می تواند یک پارامتر الزامی (نقطه شروع برش) و یک پارامتر اختیاری (نقطه انتهای برش) داشته باشد (عضو آخر شامل آرایه جدید نمی شود)، به طور مثال:
<script>
var array_1 = ['Farvardin', 'Ordibehesht', 'Khordad', 'Tir', 'Mordad'];
var array_2 = array_1.slice(2);
alert(array_2);
var array_3 = array_1.slice(1, 3);
alert(array_3);
</script>
خروجی مثال بالا به شکل زیر خواهد بود:
Khordad,Tir,Mordad
Ordibehesht,Khordad
متد slice تغییری در آرایه اصلی ایجاد نمی کند.

متد splice


متد splice با تغییر عناصر آرایه به سه صورت حذف، جایگزینی و اضافه با در نظر گرفتن ابتدا، تعداد و مقادیر آرایه جدیدی ایجاد می کند، Syntax متد splice به شکل زیر است:
splice(start, deleteCount, item1, item2)
به جز پارامتر start سایر موارد اختیاری هستند، start نقطه شروع اعمال تغییرات در آرایه را مشخص می کند و اگر مقدار در نظر گرفته شده بیش از طول آرایه باشد تغییرات از انتها اعمال می شوند، در این شرایط هیچ عضوی از آرایه حذف یا جایگزین نمی شود و به تعداد آیتم های در نظر گرفته شده به انتهای آرایه اضافه می شود، در صورت در نظر گرفتن مقادیر منفی برای start نقطه شروع مساوی با حاصل تفریق طول آرایه از مثبت شده مقادیر منفی است، به فرض اگر طول آرایه 4 و مقدار start عدد 1- باشد نقطه شروع تغییرات 1-4 یعنی 3 خواهد بود.
پارامتر deleteCount تعداد اعضایی که باید از ابتدای نقطه start حذف یا جایگزین شوند را مشخص می کند، اگر این پارامتر تنظیم نشود یا مقادیر آن برابر یا بیشتر از حاصل تفریق طول آرایه از نقطه شروع باشد تمام عناصر آرایه از نقطه شروع تا پایان حذف می شوند، اگر deleteCount را 0 یا منفی در نظر بگیریم هیچ عضوی حذف نمی شود البته در این حالت حداقل باید یک item در نظر گرفته باشیم.
پارامتر item اعضای جدیدی است که جایگزین یا اضافه می شوند، چند مثال از کاربرد متد splice:
<script>
var array_1 = [43, 70, 19];
array_1.splice(1, 0, 44);
alert(array_1);
array_1.splice(2, -1, 85);
alert(array_1);
array_1.splice(0, 2);
alert(array_1);
array_1.splice(0, 1, 50);
alert(array_1);
</script>
در صورت اجرای نمونه کد بالا نتیجه به صورت چند پیام alert با خروجی زیر خواهد بود:
43,44,70,19
43,44,85,70,19
85,70,19
50,70,19
متد splice آرایه جدید ایجاد و تغییری در آرایه اصلی نمی دهد.

متد sort


کاربرد متد sort چینش صعودی (Ascending، چینش پیش فرض) یا نزولی (Descending) اعضای آرایه با یا بدون استفاده از تابع بازگشتی (Callback) بر اساس حروف الفبا یا بزرگتر کوچکی اعداد است، در صورتی که برای متد sort تابع بازگشتی در نظر گرفته نشود ابتدا اعداد بر مبنای استاندارد یونیکد UTF-16 تبدیل به رشته متنی شده و سپس چینش با بررسی نخستین کاراکتر انجام می شود به این صورت به فرض عدد 12 چون با 1 شروع شده مقدم بر عدد 9 خواهد بود!، چند مثال از نحوه کار متد sort:
<script>
var array_1 = [5, 3, 12, 9];
alert(array_1.sort());
alert(array_1.sort(function(a, b){return a - b;}));
alert(array_1.sort(function(a, b){return b - a;}));
var array_2 = ['B', 'C', 'A', 'D'];
alert(array_2.sort());
alert(array_2.sort(function(a, b){return a - b;}));
alert(array_2.sort(function(a, b){return b - a;}));
</script>
خروجی نمونه کد بالا به صورت چند پیام با مقادیر زیر خواهد بود:
12,3,5,9
3,5,9,12
12,9,5,3
A,B,C,D
D,C,B,A
A,B,C,D
دقت کنیم که استفاده از sort به صورت درجا (In-place) بر روی آرایه موثر است و چینش اعضای آن را تغییر می دهد.

متد copyWithin


متد copyWithin برای کپی قسمتی از عناصر آرایه، انتقال و جایگزینی با قسمتی دیگر بدون تغییر طول آرایه کاربرد دارد، این متد می تواند سه پارامتر با Syntax زیر داشته باشد:
copyWithin(target, start, end)
پارامتر target الزامی است و نقطه جایگزینی را مشخص می کند، اگر target مقدار منفی باشد جایگزینی از آخر اعمال می شود، اگر پارامتر target برابر یا بزرگتر از طول آریه باشد هیچ عنصری کپی و جایگزین نخواهد شد، start نقطه شروع کپی است و اگر مقدار منفی باشد از انتها لحاظ می شود، اگر start در نظر گرفته نشود کپی از ابتدا شروع خواهد شد، end انتهای کپی را مشخص می کند (آخرین عنصر شامل نمی شود) و اگر مقدار منفی باشد یا پارامتر end تنظیم نشود کپی تا انتهای آرایه ادامه پیدا می کند (در این حالت شامل آخرین عنصر می شود)، چند مثال از کاربرد متد copyWithin:
<script>
var array_1 = [1, 2, 3, 4, 5, 6, 7];
alert(array_1.copyWithin(2));
array_1 = [1, 2, 3, 4, 5, 6, 7];
alert(array_1.copyWithin(-2));
array_1 = [1, 2, 3, 4, 5, 6, 7];
alert(array_1.copyWithin(1, 2));
array_1 = [1, 2, 3, 4, 5, 6, 7];
alert(array_1.copyWithin(2, 3, 5));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
1,2,1,2,3,4,5
1,2,3,4,5,1,2
1,3,4,5,6,7,7
1,2,4,5,5,6,7
متد copyWithin به صورت درجا (In-place) بر روی آرایه موثر است.

متد keys


متد keys آبجکتی از ایندکس ها یا کلیدهای آرایه ایجاد می کند که می توانیم با next و value یا در حلقه for به عناصر آن دسترسی پیدا کنیم (طبق پروتکل های Iteration)، مثال:
<script>
var array_1 = ['JS', 'CSS', 'HTML'];
var iterator_1 = array_1.keys();
alert(iterator_1.next().value);
alert(iterator_1.next().value);
alert(iterator_1.next().value);
for(var key of array_1.keys()){
    alert('Index ' + key + ' Value is: ' + key);
}
</script>
گفتیم تفاوت ایندکس و کلید صرفا در این است که در حالت ایندکس شماره گذاری از 0 و به صورت خودکار انجام می شود، خروجی نمونه کد بالا به صورت زیر خواهد بود:
0
1
2
Index 0 Value is: 0
Index 1 Value is: 1
Index 2 Value is: 2
پروتکل های Iteration قواعدی در زبان های برنامه نویسی جهت تعیین چگونگی مدیریت توالی و تکرار و تجزیه مقادیر در دستوراتی نظیر حلقه for هستند.

متد values


متد values آبجکتی از مقادیر آرایه ایجاد می کند که می توانیم با next و value یا در حلقه for به عناصر آن دسترسی پیدا کنیم (طبق پروتکل های Iteration)، مثال:
<script>
var array_1 = ['JS', 'CSS', 'HTML'];
var iterator_1 = array_1.values();
alert(iterator_1.next().value);
alert(iterator_1.next().value);
alert(iterator_1.next().value);
for(var value of array_1.values()){
    alert('Index ' + array_1.indexOf(value) + ' Value is: ' + value);
}
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
JS
CSS
HTML
Index 0 Value is: JS
Index 1 Value is: CSS
Index 2 Value is: HTML
در خصوص متد indexOf در ادامه همین آموزش توضیح خواهیم داد.

متد entries


متد entries آبجکتی از هر جفت ایندکس یا کلید و مقدار آرایه ایجاد می کند که می توانیم با next و value یا در حلقه for به عناصر آن دسترسی پیدا کنیم (طبق پروتکل های Iteration)، مثال:
<script>
var array_1 = ['JS', 'CSS', 'HTML'];
var iterator_1 = array_1.entries();
alert(iterator_1.next().value);
alert(iterator_1.next().value);
alert(iterator_1.next().value);
for(var[index, element] of array_1.entries()){
    alert('Index ' + index + ' Value is: ' + element);
}
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
0,JS
1,CSS
2,HTML
Index 0 Value is: JS
Index 1 Value is: CSS
Index 2 Value is: HTML
بر مبنای پروتکل های Iteration و در اصطلاح برنامه نویسی به آرایه ها (Array Objects) مقادیر Iterable گفته می شود، در متد Array.from دیدیم که رشته متنی (String) نیز یک مقدار Iterable است.

متد every


از متد every جهت بررسی یک فرآیند مشترک برای هر عضو آرایه به کمک تابع بازگشتی (Callback) استفاده می شود، نتیجه نهایی این متد یکی از مقادیر true یا false خواهد بود، چند مثال از کاربرد متد every:
<script>
var array_1 = [88, 12, 54];
var isUnder100 = (currentValue) => currentValue < 100;
if(array_1.every(isUnder100)){
    alert('Yes, All < 100!');
}else{
    alert('No, Some > 100!');
}
function isUnderEqual50(element, index, array) {
    return element <= 50;
}
if(array_1.every(isUnderEqual50)){
    alert('Yes, All < 50!');
}else{
    alert('No, Some > 50!');
}
</script>
خروجی نمونه کدهای بالا به صورت زیر خواهد بود:
Yes, All < 100!
No, Some > 50!
استفاده از علامت <= یک شیوه تعریف تابع در جاوا اسکریپت است که به آن Arrow function (تابع پیکان) گفته می شود.

متد fill


متد fill مقادیر عناصر تعیین شده در آرایه را با مقدار ثابتی جایگزین می کند، نقطه شروع به صورت پیش فرض ایندکس 0 (اولین عنصر) و نقطه پایان آخرین عنصر (به طول آرایه) است و در صورت عدم تعیین این پارامترها جایگزینی شامل اولین تا آخرین عنصر می شود و در صورتی که آخرین عنصر تعیین شود شامل آن نمی شود، Syntax متد fill به شکل زیر است که دو پارامتر start و end اختیاری هستند:
fill(value, start, end)
اگر پارامتر start مقدار منفی باشد نقطه شروع برابر با حاصل جمع طول آرایه + مقدار start خواهد بود، اگر هم پارامتر end مقدار منفی باشد نقطه پایان برابر با حاصل جمع طول آرایه + مقدار end خواهد بود، چند مثال از کاربرد متد fill:
<script>
var array_1 = [2, 4, 8, 16];
array_1.fill(0, 2);
alert(array_1);
array_1 = [2, 4, 8, 16];
array_1.fill(0, 0, 4);
alert(array_1);
array_1 = ['ir', 'com', 'net', 'org'];
array_1.fill('ir', 1);
alert(array_1);
array_1 = ['ir', 'com', 'net', 'org'];
array_1.fill('ir', 1, 3);
alert(array_1);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
2,4,0,0
0,0,0,0
ir,ir,ir,ir
ir,ir,ir,org
اعمال تغییرات متد fill به صورت درجا (In-place) است و آرایه را در ادامه کدها تغییر می دهد.

متد some


متد some با یک تابع بازگشتی (Callback) عناصر آرایه را مورد به مورد بررسی و در صورتی که حداقل یک مورد از آنها بر اساس بررسی تابع بازگشتی نتیجه true داشته باشد، نتیجه نهایی را به شکل true یا در غیر اینصورت (هیچ کدام از عناصر آرایه واجد شرایط بررسی تابع بازگشتی نباشند) نتیجه نهایی را false برمی گرداند، مثالی از کاربرد متد some:
<script>
function checkNumber(element, index, array){
    return element === 4;
}
var array_1 = [1, 4, 3, 5];
alert(array_1.some(checkNumber));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
true
مقادیر 4 در آرایه وجود دارد و لذا حداقل یک بررسی در تابع بازگشتی true است.

متد find


متد find با یک تابع بازگشتی (Callback) مورد به مورد عناصر آرایه را بررسی و مقادیر اولین عنصری که نتیجه پردازش آن در تابع true باشد را برمی گرداند، در صورتی که هیچ کدام از عناصر آرایه نتوانند در بررسی تابع بازگشتی نتیجه true داشته باشند متد find آبجکت undefined (تعریف نشده) را به عنوان خروجی نهایی برمی گرداند، مثال:
<script>
function checkNumber(element, index, array){
    return element === 4;
}
var array_1 = [0, 2, 3, 5];
alert(array_1.find(checkNumber));
var array_1 = [0, 2, 4, 5];
alert(array_1.find(checkNumber));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
undefined
4
در بررسی اول چون هیچ مقداری برابر 4 نیست undefined برگردانده می شود اما در بررسی دوم مقادیر 4 با توجه به بررسی تابع بازگشتی توسط متد find و وجود این مقدار در ایندکس سوم آرایه برگردانده می شود.

 متد findIndex


متد findIndex با یک تابع بازگشتی (Callback) مورد به مورد عناصر آرایه را بررسی و در هر نقطه که تابع نتیجه true برگرداند شماره ایندکس یا کلید را خروجی می دهد، به طور مثال:
<script>
var array_1 = [50, 45, 106, 70];
var isLargeNumber = (element) => element > 100;
alert(array_1.findIndex(isLargeNumber));
function checkOddNumber(element, index, array){
    return element % 2;
}
alert(array_1.findIndex(checkOddNumber));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
2
1
در نمونه کد اول عدد 106 ایندکس 2 آرایه (شمارش از 0) بزرگتر از 100 است، در نمونه کد دوم ایندکس 1 یعنی عدد 45 فرد (Odd فرد و Even زوج) است.

متد indexOf


متد indexOf اولین موقعیت یک مقدار را در عناصر آرایه بررسی و شماره ایندکس مربوطه را به عنوان نتیجه برمی گرداند، اگر مقدار مورد نظر در آرایه پیدا نشود متد indexOf نتیجه را 1- برمی گرداند، در صورتی که پارامتر دوم برای متد indexOf در نظر گرفته نشود بررسی از ابتدای آرایه اعمال می شود اما اگر پارامتر دوم را برای این متد در نظر بگیریم شروع بررسی از نقطه تعیین شده خواهد بود، مثال:
<script>
var array_1 = [1, 2, 3, 1, 5, 2];
alert(array_1.indexOf(2));
alert(array_1.indexOf(2, 3));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
1
5
در حالت اول آرگیومنت دوم تنظیم نشده و بررسی اولین موقعیت مقدار 2 در آرایه array_1 ایندکس 1 خواهد بود، در حالت دوم بررسی از ایندکس سوم شروع شده (عدد 1 دوم) و موقعیت ایندکس 5 برای مقدار 2 برگردانده می شود.

متد lastIndexOf


متد lastIndexOf آخرین موقعیت یک مقدار را در عناصر آرایه بررسی و شماره ایندکس مربوطه را به عنوان نتیجه برمی گرداند، اگر مقدار مورد نظر در آرایه پیدا نشود متد lastIndexOf نتیجه را 1- برمی گرداند، در صورتی که پارامتر دوم برای متد lastIndexOf در نظر گرفته نشود بررسی از ابتدای آرایه اعمال می شود اما اگر پارامتر دوم را برای این متد در نظر بگیریم شروع بررسی از نقطه تعیین شده به صورت انتها به ابتدا (Backwards) خواهد بود، مثال:
<script>
var array_1 = [1, 2, 3, 1, 5, 2];
alert(array_1.lastIndexOf(2));
alert(array_1.lastIndexOf(2, 2));
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
5
1
در حالت اول آرگیومنت دوم تنظیم نشده و بررسی آخرین موقعیت مقدار 2 در آرایه array_1 ایندکس 5 خواهد بود، در حالت دوم بررسی به صورت انتها به ابتدا (Backwards) از ایندکس سوم شروع شده (عدد 1 دوم) و موقعیت کلید 1 برای مقدار 2 برگردانده می شود.

 متد flat


متد flat آرایه های چند بعدی را تا سطح تعیین شده به آرایه ای با بعد کمتر تبدیل می کند، اگر هیچ سطحی به عنوان آرگیومنت در نظر گرفته نشود کاهش سطح تا تک بعدی شدن عناصر آرایه ادامه پیدا می کند، مثال:
<script>
var array_1 = [111, 222, [1, 2]];
console.log(array_1.flat());
var array_1 = [111, 222, [[1, 2]]];
console.log(array_1.flat(1));
</script>
خروجی نمونه کدهای بالا در Console مرورگر به صورت زیر خواهد بود:
[111, 222, 1, 2]
[111, 222, [1, 2]]
برای دسترسی به قسمت Console مرورگرها می توانیم دکمه F12 را فشرده یا از قسمت Developer به این امکان دسترسی پیدا کنیم.

متد map


متد map با یک تابع بازگشتی (Callback) مورد به مورد پردازش تعیین شده را بر روی عناصر آرایه اجرا و در نهایت خروجی را به شکل آرایه جدید برمی گرداند، مثال:
<script>
var array_1 = [1, 2, 3, 4];
function addToNumber(element, index, array){
    return element + 5;
}
alert(array_1.map(addToNumber));
alert(array_1);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
6,7,8,9
1,2,3,4
هر عضو آرایه در تابع بازگشتی با عدد 5 جمع و نتیجه به صورت آرایه جدید خروجی داده می شود (متد map بر روی آرایه اصلی تاثیری ندارد).

 متد flatMap


متد flatMap با یک تابع بازگشتی (Callback) پردازش های مد نظر را بر روی مورد به مورد عناصر آرایه انجام داده و در صورت در نظر گرفتن الگوی قلاب [] عناصر آرایه  را به آرایه ای با بعد بیشتر تبدیل و در نهایت به شکل آرایه جدید برمی گرداند، مثال:
<script>
var array_1 = [1, 2, 3];
function addToNumber(currentValue, index, array){
        return [[currentValue], currentValue + 5];
}
console.log(array_1.flatMap(addToNumber));
</script>
خروجی نمونه کد بالا به شکل آرایه ای با ساختار زیر خواهد بود:
[[1], 6, [2], 7, [3], 8]
برای دسترسی به قسمت Console مرورگرها می توانیم دکمه F12 را فشرده یا از قسمت Developer به این امکان دسترسی پیدا کنیم.

 متد filter


 متد filter با یک تابع بازگشتی (Callback) مورد به مورد عناصر آرایه را بررسی کرده و در نهایت آرایه ای جدید از عناصری می سازد که نتیجه بررسی آنها در تابع بازگشتی true برگردانده شود، به طور مثال:
<script>
var array_1 = [1, 2, 3, 4];
function checkOddNumber(element, index, array){
    return element % 2;
}
alert(array_1.filter(checkOddNumber));
</script>
نتیجه نمونه کد بالا به شکل زیر در خروجی نمایش داده می شود:
1,3
با توجه به تابع بازگشتی checkOddNumber مقادیری از آرایه array_1 که فرد هستند به صورت یک آرایه جدید با متد filter استخراج می شوند.

متد reduce


متد reduce مورد به مورد عناصر آرایه را از تابعی بازگشتی (Callback) با قابلیت reduce عبور داده و در نهایت نتیجه کلی عملیات تابع را برمی گرداند، reduce تابعی است که در آن وضعیت قبلی اجرای تابع برای دور جاری نگهداری شده و در دسترس است، هر تابع reduce در جاوا اسکریپت می تواند چهار آرگیومنت به شرح زیر داشته باشد:
- Accumulator: مقادیر به دست آمده از اجراهای قبلی تابع (در صورتی که اولین فراخوانی باشد مقادیر ایندکس 0).
- Current Value: مقادیری که در حال حاضر پردازش می شود (در صورتی که اولین فراخوانی باشد مقادیر ایندکس 1).
- Current Index: شماره ایندکسی که در حال حاضر پردازش می شود (در صورتی که اولین فراخوانی باشد شماره ایندکس 1).
- Source Array: آرایه ای که در حال پردازش عناصر آن هستیم.
دو پارامتر Accumulator و Current Value برای اجرای متد reduce الزامی هستند، مثالی از کاربرد این متد:
<script>
var array_1 = [0, 1, 2, 3, 4];
function addToNumbers(accumulator, current_value){
    return accumulator + current_value;
}
alert(array_1.reduce(addToNumbers));
var array_1 = [0, 1, 2, 3, 4];
function subFromNumbers(accumulator, current_value){
    return accumulator - current_value;
}
alert(array_1.reduce(subFromNumbers));
</script>
نتیجه اجرای نمونه کدهای بالا اعداد زیر خواهند بود:
10
-10
در حالت اول در دور 1 مقادیر accumulator 0 و current_value 1 است، نتیجه 1 خواهد بود، در دور 2 مقادیر accumulator 1 و current_value 2 است، نتیجه 3 خواهد بود، در دور 3 مقادیر accumulator 3 و current_value 3 است، نتیجه 6 خواهد بود، در دور 4 مقادیر accumulator 6 و current_value 4 است، نتیجه نهایی 10 خواهد بود، برای حالت دوم همین روند به صورت منها اتفاق می افتد و نتیجه نهایی عدد منفی 10 خواهد بود.
نکته: اختلاف accumulator و current_value در صورتی است که برای accumulator هیچ مقدار پیش فرضی تعیین نشده باشد، در غیر اینصورت هر دو از ایندکس 0 شروع می شوند، به فرض:
<script>
var array_1 = [0, 1, 2, 3, 4];
alert(array_1.reduce(function(accumulator, current_value){
    return accumulator + current_value;
}, 5));
</script>
تفسیر قسمت return این کد به زبان ساده:
5+0, 5+1, 2+6, 3+8, 4+11
که نتیجه در این حالت در آخرین دور 15 خواهد بود.

متد reduceRight


متد reduceRight مقادیر Accumulator و Current Value یک آرایه را از سمت راست به چپ از فیلتر تابع بازگشتی (Callback) عبور داده و در نهایت نتیجه کلی عملیات تابع را برمی گرداند، مثالی از کاربرد متد reduceRight:
<script>
var array_1 = [1, 2, 3, 4];
var array_2 = [];
var result;
function makeNewArray(accumulator, current_value, current_index, array_1){
    result = accumulator + current_value;
    array_2[current_index] = result;
    return result;
}
array_1.reduceRight(makeNewArray);
alert(array_2);
</script>
نتیجه اجرای نمونه کد بالا به صورت زیر خواهد بود:
[10,9,7]
با درک متد reduce تفسیر این نمونه کد که مبتنی بر متد reduceRight است ساده می شود:
ابتدا در دور اول با توجه به انتخاب عناصر آرایه از سمت راست accumulator 4، current_value 3 و 2 current_index است، در نتیجه ایندکس 2 آرایه array_2 مقدار 7 خواهد بود، در دور دوم accumulator 7، current_value 2 و 1 current_index است، در نتیجه ایندکس 1 آرایه array_2 مقدار 9 خواهد بود، در دور سوم accumulator 9، current_value 1 و 0 current_index است، در نتیجه ایندکس 0 آرایه array_2 مقدار 10 خواهد بود.
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
» رویدادها (Events) در جاوا اسکریپت (JavaScript)
commentنظرات (اولین یادداشت را برای این مطلب ارسال کنید)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 5
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form علیرضا
در:
مفید و کاربردی مرسی
۱۴۰۰/۰۳/۳۱

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

form پرتو
در:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...
۱۴۰۰/۰۳/۲۴

form بهنیا
در:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟
۱۴۰۰/۰۳/۲۴

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

form رها
در:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...
۱۴۰۰/۰۳/۲۴

form محمد
در:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...
۱۴۰۰/۰۳/۲۳

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

form پرتو
در:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...
۱۴۰۰/۰۳/۲۰

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

form الی
در:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...
۱۴۰۰/۰۳/۱۸

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

form حامدترابی
در:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم
۱۴۰۰/۰۳/۱۶

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

form mahdi
در:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...
۱۴۰۰/۰۳/۱۲

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

form mahdi
در:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...
۱۴۰۰/۰۳/۱۰

form پرتو
در:
وای من نمی تونم توی زمینه طراحی قالب های دیگ فعالیت کنم چون خیلی سختن فک نکنم بتونم اگر جایی می شناسید که قالب های...
۱۴۰۰/۰۳/۰۹

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

form پرتو
در:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...
۱۴۰۰/۰۳/۰۴

form mahdi
در:
سلام نه استاد عزیز نیازی نیست چون خودمم فکر میکنم لوگو رو باید از قبل مثلا با فتوشاپ آماده داشت و فقط میخواستم این امکانم...
۱۴۰۰/۰۳/۰۳

form پرتو
در:
سلام خواستم تشکر کنم از کدی که قبلا بهم داده بودید درست شد قالبم واقعا ممنونم ازتون یه چیز دیگه می خاستم بگم اینکه یه...
۱۴۰۰/۰۳/۰۳

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.