علی موسویان
علی موسویان
خواندن ۵ دقیقه·۲ سال پیش

20 متد برای کار با آرایه ها در Javascript

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



1- map()

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

const arr = [1, 2, 3, 4, 5] const mapped = arr.map(item => item + 10) console.log(mapped) // [11, 12, 13, 14, 15]

2- filter()

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

const arr = [1, 2, 3, 4, 5] const filtered = arr.filter(item => item % 2 === 0) console.log(filtered) // [2, 4]

3- sort()

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

const arr = [1, 2, 3, 4, 5] const descend = arr.sort((a, b) => a > b ? -1 : 1) console.log(descend) // [5, 4 ,3 ,2 , 1]

4- forEach()

این متد فانکشن کال بک ای که بهش داده میشه رو روی تک تک آیتم های یه آرایه اعمال میکنه.

const arr = [1, 2, 3, 4, 5] arr.forEach(item=>{ console.log(item) }) // 1 // 2 // 3 // 4 // 5

5- concat()

این متد دو یا چند آرایه رو باهم ادغام میکنه و یه آرایه جدید بهمون برمیگردونه، بدون اینکه اثر جانبی رو آرایه های اصلیمون گذاشته باشه و باعث تغییرشون بشه.

const arr = [1, 2, 3] const arr2 = [4 , 5, 6] console.log(arr.concat(arr2)) // [1, 2, 3, 4, 5, 6] console.log(arr) // [1, 2, 3] console.log(arr2) // [4, 5, 6]

6- every()

این متد تمامی آیتم های درون آرایه رو با شرطی که بهش پاس داده شده بررسی میکنه و نسبت به بررسی همه ـشون به ما true یا false برمیگردونه، نکته‌ی مهم اینه که حتی اگر یه آیتم نتونه از شرط ما رد بشه، نتیجه ای که برگردونده میشه false خواهد بود.

const arr = [1, 2, 3, 4, 5] const lessThanSix = arr.every(item=> item< 6) console.log(lessThanSix) // true const lessThanFive = arr.every(item=> item< 5) console.log(lessThanFive) // false

7- some()

این متد تمامی آیتم های درون آرائه رو با شرطی که بهش پاس داده شده بررسی میکنه و اگه حداقل یکی از آیتما بتونه شرط رو رد کنه، نتیجه true برمیگردونه و درغیر اینصورت false.

const arr = [1, 2, 3, 4, 5] const lessThanNum= arr.some(item=> item < 5) console.log(lessThanNum) // true const greaterThanNum = arr.some(item=> item> 5) console.log(greaterThanNum ) // false

8- includes()

این متد بررسی میکنه ببینه چیزی که بهش پاس داده شده تو آرایه موجود هست یا نه و نسبت به اون true یا false برمیگردونه.

const arr = [1, 2, 3, 4, 5] const includesFive = arr.includes(5) console.log(includesFive) // true const includesSix = arr.includes(6) console.log(includesSix) // false

9- join()

این متد با وصل کردن تمامی آیتم های تو آرایه و جدا کردنشون با چیزی که به عنوان آرگومان بهش پاس دادیم یه string بهمون برمیگردونه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] const joinedString = arr.join(``) console.log(joinedString) // abc const joinedStringWithDash = arr.join(`-`) console.log(joinedStringWithDash) // a-b-c

10- reduce()

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

const arr = [1, 2 ,3 ,4 ,5] const reduced = arr.reduce((total, current) => total + current); console.log(reduced) // 15

11- find()

همونطور که از اسمش مشخصه، این متد کال بک فانکشنی رو که بهش پاس داده شده رو روی تک تک آیتم های آرایه بررسی میکنه تا اینکه یکی از آیتم ها بتونه شرط رو رد کنه و به محض اینکه اون شرط رد میشه همون آیتم برگردونده میشه، به عنوان مثال ممکنه شما تو آرایه چندین آیتم داشته باشید که میتونه شرط رو رد کنه، ولی این متد فقط اولین آیتمی که شرط رو رد کرده باشه رو برمیگردونه.
برای داشتن تمامی آیتم ها که اون شرط رو رد میکنن میتونید از متد filter استفاده کنید.

const arr = [1, 2, 3, 4, 5] const greaterThanTwo = arr.find(item=> item>2) console.log(greaterThanTwo) //3

12- findIndex()

این متد درست مثل متد find رفتار میکنه با این تفاوت که index اون آیتم رو تو آرایه بهمون برمیگردونه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] const foundIndex = arr.findIndex(item=> item=== &quotc&quot) console.log(foundIndex) // 2

13- indexOf()

این متد index آیتمی که بهش پاس داده شده رو بهمون برمیگردونه یا در صورتی که نتونه چیزی پیدا کنه 1- رو بهمون برمیگردونه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] const foundIndex = arr.indexOf(&quotc&quot) console.log(foundIndex) // 2 const noIndex = arr.indexOf(&quotd&quot) console.log(noIndex ) // -1

14- fill()

این متد آرایه مارو با چیزی که بهش پاس داده میشه پر میکنه و آرایه تغییر داده شده رو برمیگردونه.

const arr = new Array(3) console.log(arr) // [undefined, undefined, undefined] console.log(arr.fill(10)) // [10, 10, 10]

15- slice()

تو این متد ما میتونیم با مشخص کردن ابتدا و انتهایی که میخوایم از آرایه برداریم، یه آرایه جدید برای خودمون برگردونیم.

const arr = [1, 2, 3, 4, 5, 6] const sliced = arr.slice(2, 4) console.log(sliced) // [3, 4] console.log(arr) // [1, 2, 3, 4, 5, 6]

16- reverse()

این متد همونطوری که از اسمش مشخصه یه آرایه رو از آخر به اول بازنویسی میکنه، که یعنی آیتمی که آخرین ایندکس رو داره میاد میشه ایندکس 0 و آیتمی که ایندکس 0 رو داشته میشه آخرین ایندکس.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] arr.reverse() console.log(arr) // [&quotc&quot, &quotb&quot, &quota&quot]

17- push()

این متد یک یا چند آیتم رو به آخر یه آرایه اضافه میکنه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] arr.push(&quotd&quot) console.log(arr) // [&quota&quot, &quotb&quot, &quotc&quot, &quotd&quot]

18- pop()

این متد آخرین آیتم رو از آخر آرایه حذف میکنه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] arr.pop() console.log(arr) // [&quota&quot, &quotb&quot]

19- shift()

این متد اولین آیتم رو از ابتدای آرایه حذف میکنه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] arr.shift() console.log(arr) // [&quotb&quot, &quotc&quot]

20- unshift()

این متد یک یا چند آیتم رو به اول آرایه اضافه میکنه و تعداد آیتمای موجود تو آرایه رو بهمون برمیگردونه.

const arr = [&quota&quot, &quotb&quot, &quotc&quot] console.log(arr.unshift(&quotz&quot)) // 4 console.log(arr) // [&quotz&quot, &quota&quot, &quotb&quot, &quotc&quot]


jsjavascriptarrayجاوااسکریپتآرایه
Front-End Developer - JavaScript, React, Vue
شاید از این پست‌ها خوشتان بیاید