مسیرها
/
JavaScript
JavaScript
/
تمرین‌ها
/
طلسم‌های ساختارشکنی‌شده‌ی الیز
طلسم‌های ساختارشکنی‌شده‌ی الیز

طلسم‌های ساختارشکنی‌شده‌ی الیز

تمرین یادگیری

مقدمه

ساختارشکنی آرایه

نحوه‌ی نگارش «ساختارشکنی» آرایه در JavaScript روشی کوتاه است برای بیرون کشیدن مقدارها از یک آرایه و نسبت دادن آن‌ها به متغیرهای جداگانه.

در این مثال، هر مقدار در آرایه‌ی numberOfMoons به سیاره‌ی متناظرش نسبت داده می‌شود:

const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;

neptune;
// => 14

به‌طور خلاصه:

  • این نحوه‌ی نگارش امکان می‌دهد عنصرهای موقعیت‌دار در یک آرایه را اسم‌گذاری کنیم و همچنین متغیرها را با انتساب دوباره جابه‌جا کنیم.
  • نحوه‌ی نگارش ساختارشکنی هم داخل پارامترهای تابع در دسترس است و هم روی هر مقدار قابل پیمایشی.
  • اگر موقعیتی را بی‌اسم بگذارید (با ننوشتن هیچ اسم متغیری)، آن موقعیت بی‌صدا نادیده گرفته می‌شود.

ساختارشکنی شیء

در JavaScript، نحوه‌ی نگارش ساختارشکنی دیگری هم هست که ویژگی‌ها را از یک شیء استخراج می‌کند و آن‌ها را به متغیرهای جداگانه نسبت می‌دهد.

در این مثال، نمادهای آب‌وهوا از شیء weather استخراج می‌شوند:

const weather = {
  sun: '☀️',
  sun_behind_small_cloud: '🌤️',
  sun_behind_cloud: '⛅',
  sun_behind_large_cloud: '🌥️',
  sun_behind_rain_cloud: '🌦️',
  cloud: '☁️',
  cloud_with_rain: '🌧️',
  cloud_with_snow: '🌨️',
  cloud_with_lightning: '🌩️',
  cloud_with_lightning_and_rain: '⛈️',
};

const { sun, cloud, cloud_with_lightning: thunder } = weather;

sun;
// => '☀️'

cloud;
// => '☁️'

thunder;
// => '🌩️'

به‌طور خلاصه:

  • این نحوه‌ی نگارش هم امکان استخراج ویژگی‌ها را می‌دهد و هم استخراج و تغییر اسم آن‌ها.
  • نحوه‌ی نگارش ساختارشکنی داخل پارامترهای تابع در دسترس است.

دستورالعمل‌ها

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

برای اینکه کارها ساده‌تر شود، او معمولاً فقط با کارت‌های شماره‌ی ۲ تا ۱۰ شروع می‌کند، هرچند بعضی از تردستی‌ها ممکن است کارت‌های (تصویری) بیشتری را هم درگیر کنند.

Note

راه‌های زیادی برای جابه‌جا کردن کارت‌ها وجود دارد، اما برای حفظ توهم جادو، حیاتی است که هیچ روش واحدی استفاده نشود؛ مثلاً Elyse از splice، slice، shift، unshift، push، at استفاده نمی‌کند. همچنین هرگز نباید از array[index] برای دسترسی به آرایه و از object[key] و object.key برای دسترسی به شیء استفاده کرد.

می‌خواهید به Elyse کمک کنید جادویش را ارتقا دهد؟

Advanced

هر تابع را می‌توان با استفاده از پارامترها و بدنه‌ی تابعی پیاده‌سازی کرد که تنها یک return expression دارد.

1. اولین کارت را بگیرید

Elyse اولین کارت دسته را بدون استفاده از array[index]، .at(index) یا .shift() احضار می‌کند. درست مثل جادو.

const deck = [5, 9, 7, 1, 8];

getFirstCard(deck);
// => 5

2. دومین کارت را بگیرید

Elyse با یک تردستی دومین کارت دسته را بدون استفاده از array[index] یا .shift() احضار می‌کند.

const deck = [3, 2, 10, 6, 7];

getSecondCard(deck);
// => 2

3. دو کارت را جابه‌جا کنید

Elyse کاری می‌کند که دو کارت دسته جایشان را با هم عوض کنند. او نیازی به فراخوانی حتی یک تابع ندارد.

const deck = [10, 7];

swapTwoCards(deck);
// => [7, 10]

4. سه کارت را بچرخانید

برای اینکه تردستی بیشتری انجام دهد، Elyse سه کارت برمی‌دارد و به‌سرعت کارت رویی را به پشت می‌فرستد؛ طوری که کارت میانی اولین کارت می‌شود و کارت پایینی قبلی کارت میانی. او نیازی به فراخوانی حتی یک تابع ندارد.

const deck = [2, 6, 10];

shiftThreeCardsAround(deck);
// => [6, 10, 2]

5. دسته‌ی نام‌گذاری‌شده را انتخاب کنید

Elyse دسته را به دو دسته تقسیم می‌کند. سپس از تماشاگر می‌خواهد یکی از این دو دسته را انتخاب کند که ما آن را chosen می‌نامیم. دسته‌ی disregarded دیگر اهمیتی ندارد و او آن را ناپدید می‌کند. او نیازی به فراخوانی حتی یک تابع ندارد.

const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];

pickNamedPile({ chosen, disregarded });
// => [5, 4]

5. دسته‌ی انتخاب‌شده را جابه‌جا کنید

متأسفانه تماشاگر مدام دسته‌ی «اشتباه» را انتخاب می‌کند، اما Elyse با یک جادوی سریع و هوشمندانه، نام دسته‌ی chosen را به disregarded و نام دسته‌ی disregarded را به chosen تغییر می‌دهد. او نیازی به فراخوانی حتی یک تابع ندارد.

const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];

swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
ویرایش از طریق GitHub این لینک در پنجره یا زبانه‌ی جدیدی باز می‌شود
JavaScript Exercism

آماده‌اید طلسم‌های ساختارشکنی‌شده‌ی الیز را شروع کنید؟

در Exercism ثبت‌نام کنید تا JavaScript را همراه با 37 مفهوم159 تمرین و مربی‌گری انسانی واقعی یاد بگیرید و در آن استاد شوید، همه‌ی این‌ها رایگان.