درک فهرست جاوا اسکریپت (آرایه) با مثال توضیح داده شده است

✋ به روز رسانی: این پست در اصل در وبلاگ من decodingweb.dev منتشر شده است، جایی که می توانید آخرین نسخه را برای یک تجربه کاربری 💯 بخوانید. ~رضا

درک لیست یک تکنیک برنامه نویسی برای ایجاد یک لیست جدید بر اساس لیست موجود است. این راهنمای سریع سه رویکرد برای درک لیست جاوا اسکریپت (معروف به درک آرایه) را بررسی می کند.

برنامه نویسان به دو دلیل از درک لیست یا آرایه استفاده می کنند:

1. برای ایجاد زیرمجموعه ای از یک لیست گسترده (بر اساس مجموعه ای از شرایط)
2. برای تبدیل آیتم های لیست به مقادیر جدید و ذخیره آنها به عنوان یک لیست جدید.

درک لیست معمولاً به عنوان ساختار زبان در بسیاری از زبان های برنامه نویسی مانند Python یا Perl در دسترس است. با این حال، جاوا اسکریپت روش خاص خود را برای درک آرایه دارد.

به عنوان مثال، اگر لیستی از آدرس‌های ایمیل دارید و باید حساب‌های جیمیل را فیلتر کنید، در پایتون این کار را به صورت زیر انجام می‌دهید:

emails = [
    # ...
]

gmail_accounts = [email for email in emails if email.endswith('gmail.com')]

با این حال، در جاوا اسکریپت، هیچ لیستی (در این مورد، یک آرایه) ساختار درک وجود ندارد، اما راه هایی برای انجام این کار وجود دارد، به لطف Array.prototype.map()، Array.prototype.filter()و عملگر گسترش (...).

بیایید ببینیم چگونه.

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

بر اساس موارد استفاده شما، چندین رویکرد برای درک فهرست در جاوا اسکریپت وجود دارد:

1. با استفاده از Array.prototype.map()
2. استفاده از Array.prototype.filter()
3. استفاده از عبارت for…of

1. استفاده از Array.prototype.map()

اگر می خواهید هر آیتم را در یک آرایه تبدیل کنید و آن را به عنوان یک آرایه جدید برگردانید، Array.prototype.map() روش چیزی است که شما نیاز دارید

بیایید چند نمونه را ببینیم.

مثال شماره 1: تصور کنید ما لیستی از مقادیر اعشاری داریم (مثلاً قیمت ها) اما فقط قسمت عدد صحیح را می خواهیم (بدون قسمت کسری).

const prices = [12.5, 45.34, 12.5, 9.5]
const pricesAsInt = prices.map(price => Math.trunc(price))

console.log(pricesAsInt)
// output: (4) [12, 45, 12, 9]

در مثال بالا، ما را نامیدیم map() متد با یک تابع فلش، که یک عدد صحیح (با استفاده از Math.trunc())

مثال شماره 2: گاهی اوقات شما یک آرایه از اشیاء دارید و می خواهید لیستی از آنها ایجاد کنید x از هر شی متغیر زیر را در نظر بگیرید:

const persons = [
  { id: 238, name: Alice },
  { id: 874, name: Bob },
  { id: 421, name: Charlie }
]

تصور کنید می خواهید آرایه ای از نام ها را از ساختار داده بالا تولید کنید. در اینجا نحوه انجام این کار با map() روش:

const names = persons.map(p => p.name)

console.log(names)
// output: (3) ['Alice', 'Bob', 'Charlie']

در مثال بالا تابع فلش کوتاه را پاس می کنیم p => p.name به map() روش. متغیر p به یک شی در هر تکرار اشاره دارد.

مثال شماره 3: با در نظرگرفتن persons آرایه، تصور کنید باید یک ورودی جدید اضافه کنید (active: true) به هر شی.

در اینجا یک راه برای انجام آن وجود دارد:

const activePersons = persons.map(p => {
    p.active = true
    return p
})

اگر می خواهید یک بیانیه تک خطی زیبا داشته باشید:

const activePersons = persons.map(p => ({ ...p, active: true }))

از آنجایی که ما از یک تابع فلش بدون پرانتز استفاده می کنیم، مقدار بازگشتی را در یک جفت پرانتز قرار دادیم. در غیر این صورت، توسط تجزیه کننده با مرز تابع اشتباه گرفته می شود. ما از عملگر spread (...p) برای بسته بندی ورودی های موجود در کنار active: true به عنوان شیء جدید

به عنوان یک قاعده کلی، از map() هر زمان که بخواهید آیتم های لیست را بدون فیلتر کردن آنها تبدیل کنید.

2. استفاده از Array.prototype.filter()

اگر می خواهید زیر مجموعه ای از لیست اصلی ایجاد کنید. آنجاست که Array.prototype.filter() روش به کار می آید

بیایید چند نمونه را ببینیم.

مثال شماره 1: تصور کنید فهرستی از ایمیل‌ها دارید اما می‌خواهید فقط حساب‌های Gmail را فیلتر کنید:

const emailAddresses = [
// ...
]

const gmailAccounts = emailAddress.filter(i => i.endsWidth('gmail.com'))

روش فیلتر یک تابع فراخوانی را می پذیرد که در برابر هر آیتم در آرایه اجرا می شود. اگر تابع callback برگردد true، آیتم در آرایه زیر مجموعه جدید گنجانده می شود.

در مثال بالا، اگر مورد فعلی با gmail.com، پاسخ تماس برمی گردد true، و مورد در نتیجه نهایی قرار می گیرد.

مثال شماره 2: می توانید استفاده کنید filter() روش در ارتباط با map().

به عنوان مثال، پس از فیلتر کردن حساب های جیمیل، اگر می خواهید آنها را به عنوان اشیاء در یک آرایه ذخیره کنید، می توانید این کار را به صورت زیر انجام دهید:

const gmailAccounts = emailAddress.filter(i => i.endsWidth('gmail.com'))
    .map(i => ({ email: i }))

به همین سادگی.

3. استفاده از عبارت for…of

این for...of عبارت به شما اجازه می دهد تا روی یک سری از مقادیر از یک شی قابل تکرار (مانند Array، String، TypedArray، Map، Set، NodeList و غیره) تکرار کنید.

اگر می خواهید مثال حساب های جیمیل را با for...of بیانیه، شما می توانید آن را به این صورت انجام دهید:

const emailAddresses = []
const gmailAccounts = []

for (email of emails) {
    if (!email.endsWith('gmail.com')) {
        return
    }

    gmailAccounts.push(email)
}

در مثال بالا، روی آیتم‌ها تکرار می‌کنیم و از هر آدرس ایمیلی که به آن ختم نمی‌شود می‌گذریم gmail.com. در غیر این صورت، ما آن را به سمت gmailAccounts آرایه.

شما همچنین می توانید استفاده کنید Array.prototype.forEach() روشی برای ایجاد یک لیست جدید به همان روش for...of بیانیه.

خوب، فکر می کنم این کار را می کند! امیدوارم این راهنمای سریع برای شما مفید بوده باشد.

با تشکر برای خواندن.