سرور مجازی NVMe

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

JavaScript (JS)برنامه نویسی

توسط مهران در بهمن ۱, ۱۴۰۲

دریافت نام از آدرس ایمیل با جاوا اسکریپت

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

معرفی

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

مشخصات ES2015 معرفی شد تکلیف تخریب ساختار، راهی سریعتر برای بازیابی عناصر آرایه یا ویژگیهای شی در متغیرها.

در این مقاله، از تخصیص تخریب ساختار برای دریافت مقادیر از آرایه ها و اشیاء به متغیرها استفاده می کنیم. سپس مقداری استفاده پیشرفته از تخصیص تخریب ساختار را مشاهده خواهیم کرد که به ما امکان می دهد مقادیر پیش فرض را برای متغیرها تنظیم کنیم، ورودی های اختصاص نیافته را ضبط کنیم و swap متغیرها در یک خط

تخریب آرایه

وقتی می‌خواهیم آیتم‌هایی را از یک آرایه بگیریم و در متغیرهای جداگانه استفاده کنیم، معمولاً کدی را مانند این می‌نویسیم:

let myArray = (1, 2, 3);
let first = myArray(0);
let second = myArray(1);
let third = myArray(2);

از زمان به‌روزرسانی اصلی ES2015 به جاوا اسکریپت، اکنون می‌توانیم همان کار را مانند این انجام دهیم:

let myArray = (1, 2, 3);
let (first, second, third) = myArray;

مثال دوم و کوتاه‌تر از نحو ساختارشکن جاوا اسکریپت استفاده کرد روی myArray. وقتی یک آرایه را تخریب می کنیم، مقادیر عناصر آن را در متغیرها کپی می کنیم. نحو ساختارزدایی آرایه درست مانند نحو انتساب متغیرهای معمولی است (let x = y;). تفاوت این است که سمت چپ از یک یا چند متغیر تشکیل شده است در یک آرایه.

کد بالا سه متغیر جدید ایجاد کرد: first، second، و third. همچنین مقادیری را به آن متغیرها اختصاص داد: first برابر با 1 است، second برابر 2 است و third برابر با 3 است.

با این نحو، جاوا اسکریپت آن را می بیند first و 1 دارای اندیس یکسانی در آرایه های مربوطه خود هستند، 0. به متغیرها مقادیر مربوط به ترتیب آنها اختصاص داده می شود. تا زمانی که مکان بین سمت چپ و راست منطبق باشد، انتساب تخریب بر این اساس انجام خواهد شد.

نحو تخریب کننده نیز با اشیاء کار می کند، بیایید ببینیم چگونه.

تخریب شی

قبل از اینکه سینتکس ساختارشکن در دسترس باشد، اگر بخواهیم خصوصیات یک شی را در متغیرهای مختلف ذخیره کنیم، کدی را مانند این می‌نویسیم:

const foobar = {
    foo: "hello",
    bar: "world"
};

const foo = foobar.foo;
const bar = foobar.bar;

با سینتکس تخریب‌کننده، اکنون می‌توانیم به سرعت همین کار را با خطوط کد کمتری انجام دهیم:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo, bar } = foobar;

در حالی که آیتم های آرایه از طریق موقعیت خود تخریب می شوند، ویژگی های شی با نام کلید آنها تخریب می شوند. در مثال بالا پس از اعلان شیء foobar سپس دو متغیر ایجاد می کنیم: foo و bar. به هر متغیر مقدار خاصیت شی با همان نام اختصاص داده می شود. از این رو foo “سلام” است و bar “جهان” است.

توجه داشته باشید: اعم از اینکه متغیری را با آن اعلام کنید، تخصیص ساختارشکنی کار می کند var، let، یا const.

اگر ترجیح می دهید هنگام تخریب یک شی، نام متغیر دیگری بدهید، می توانیم یک اصلاح جزئی در کد خود ایجاد کنیم:

const foobar = {
    foo: "hello",
    bar: "world"
};

const { foo: baz, bar } = foobar;
console.log(baz, bar); // hello world

با کولون می‌توانیم یک ویژگی شی را مطابقت دهیم و به متغیر ایجاد شده یک نام جدید بدهیم. کد بالا متغیری ایجاد نمی کند foo. اگر سعی کنید استفاده کنید foo شما یک را دریافت خواهید کرد ReferenceError، نشان می دهد که تعریف نشده است.

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

مقادیر پیش فرض در متغیرهای تخریب شده

چه اتفاقی می‌افتد اگر بخواهیم متغیرهای بیشتری از تعداد عناصر آرایه یا ویژگی‌های شی را تخریب کنیم؟ بیایید با یک مثال سریع ببینیم:

let (alpha1, alpha2, alpha3) = ('a', 'b');

console.log(alpha1, alpha2, alpha3);

خروجی ما این خواهد بود:

a b undefined

متغیرهای تخصیص نیافته روی تنظیم می شوند undefined. اگر بخواهیم از وجود متغیرهای تخریب شده خود جلوگیری کنیم undefined، ما می توانیم به آنها یک مقدار پیش فرض. بیایید از مثال قبلی و پیش فرض استفاده مجدد کنیم alpha3 به “c”:

let (alpha1, alpha2, alpha3 = 'c') = ('a', 'b');

console.log(alpha1, alpha2, alpha3);

اگر این را اجرا کنیم node یا مرورگر، خروجی زیر را در قسمت مشاهده خواهیم کرد console:

a b c

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

بیایید تأیید کنیم که این مورد با مثال زیر است که یک مقدار پیش فرض را تعیین می کند روی یک شی:

const { prime1 = 1, prime2 } = { prime1: 2, prime2: 3 };

console.log(prime1, prime2);

در مثال بالا، ما به طور پیش فرض prime1 به 1. باید روی 2 بازنویسی شود زیرا a وجود دارد prime1 ویژگی روی شی در سمت راست تکلیف. اجرای این باعث می شود:

2 3

عالی! ما تأیید کرده‌ایم که مقادیر پیش‌فرض در صورت وجود تطابق بازنویسی می‌شوند. این نیز خوب است زیرا اولین عدد اول در واقع 2 است و نه 1.

مقادیر پیش‌فرض زمانی مفید هستند که مقادیر بسیار کمی در آرایه یا شیء داشته باشیم. بیایید ببینیم چگونه با مواردی که مقادیر بسیار بیشتری وجود دارد که نیازی به متغیر بودن ندارند، رسیدگی کنیم.

ثبت ورودی های اختصاص نیافته در یک تکلیف تخریب شده

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

بیایید اولین عنصر یک آرایه را در یک متغیر جدید قرار دهیم، اما عناصر دیگر را در یک آرایه جدید نگه داریم:

const (favoriteSnack, ...fruits) = ('chocolate', 'apple', 'banana', 'mango');

در کد بالا تنظیم کردیم favoriteSnack به “شکلات”. چون ما از ... اپراتور، fruits برابر با بقیه آیتم های آرایه است که می باشد ('apple', 'banana', 'mango').

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

همانطور که ممکن است حدس زده باشید، ما می توانیم عنصر rest را در اشیا نیز استفاده کنیم:

const { id, ...person } = {
    name: 'Tracy',
    age: 24,
    id: 1020212,
};

را استخراج می کنیم id خاصیت شی روی سمت راست تخصیص تخریب ساختار به متغیر خودش. سپس خواص باقیمانده شی را در a قرار می دهیم person متغیر. در این مورد، id برابر خواهد بود 1020212 و person برابر خواهد بود { name: 'Tracy', age: 24 }.

اکنون که روش نگهداری همه داده‌ها را دیدیم، بیایید ببینیم وقتی می‌خواهیم داده‌ها را حذف کنیم، تخصیص تخریب ساختار چقدر انعطاف‌پذیر است.

مقادیر انتخابی در یک تکلیف تخریب کننده

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

const (name) = ('Katrin', 'Judy', 'Eva');
const { nyc: city } = { nyc: 'New York City', ldn: 'London' };

اختصاص دادیم name به “کاترین” از آرایه و city به “نیویورک سیتی” از شی. با اشیاء، از آنجایی که با نام کلید مطابقت داریم، انتخاب ویژگی های خاصی که می خواهیم در متغیرها بی اهمیت است. در مثال بالا، چگونه می‌توانیم «کاترین» و «اوا» را بدون نیاز به گرفتن «جودی» بگیریم؟

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

const (name1, , name2) = ('Katrin', 'Judy', 'Eva');

به شکاف در انتساب متغیر بین توجه کنید name1 و name2.

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

تخریب ارزش های تودرتو

ما می‌توانیم متغیرهای تخریب‌کننده را برای مطابقت با ورودی‌های تودرتوی یک آرایه و شی، لانه کنیم و به ما کنترل دقیقی بر آنچه انتخاب می‌کنیم، می‌دهیم. داشتن آرایه ای از آرایه ها را در نظر بگیرید. بیایید اولین عنصر هر آرایه داخلی را در متغیر خودش کپی کنیم:

let ((part1), (part2), (part3), (part4)) = (('fee', 'mee'), ('fi', 'li'), ('fo', 'ko'), ('fum', 'plum'));

console.log(part1, part2, part3, part4);

با اجرای این کد خروجی زیر نمایش داده می شود:

fee fi fo fum

به سادگی با پیچیدن هر متغیر در سمت چپ با ()، جاوا اسکریپت می داند که ما مقدار را در یک آرایه می خواهیم و نه خود آرایه را.

هنگامی که ما اشیاء تودرتو را تخریب می کنیم، باید کلید شیء تودرتو را مطابقت دهیم تا آن را بازیابی کنیم. به عنوان مثال، بیایید سعی کنیم برخی از جزئیات یک زندانی را در جاوا اسکریپت ثبت کنیم:

const {
    name,
    crimes: {
        yearsToServe
    }
} = {
    name: 'John Doe',
    crimes: {
        charged: ('grand theft auto', 'stealing candy from a baby'),
        yearsToServe: 25
    }
};

console.log(yearsToServe);

برای بدست آوردن yearsToServe ویژگی، ابتدا باید تودرتو را مطابقت دهیم crimes هدف – شی. در این حالت سمت راست دارای a yearsToServe دارایی از crimes شیء روی 25 تنظیم می شود. بنابراین، ما yearsToServe به متغیر مقدار 25 اختصاص داده می شود.

توجه داشته باشید که ما a ایجاد نکردیم crimes شی در مثال بالا. ما دو متغیر ایجاد کردیم: name و yearsToServe. حتی اگر ما باید با ساختار تودرتو مطابقت داشته باشیم، جاوا اسکریپت اشیاء میانی ایجاد نمی کند.

شما تاکنون در پوشش بسیاری از قابلیت‌های نحو تخریب‌شده عالی عمل کرده‌اید. بیایید به چند کاربرد عملی آن نگاهی بیندازیم!

از موارد برای تخریب آرایه ها و اشیا استفاده کنید

علاوه بر مزایای خطوط کد، کاربردهای زیادی برای تخریب آرایه ها و اشیاء وجود دارد. در اینجا چند مورد رایج وجود دارد که تخریب ساختار خوانایی کد ما را بهبود می بخشد:

برای حلقه ها

توسعه دهندگان از تخصیص تخریب ساختاری برای بیرون کشیدن سریع مقادیر مورد علاقه از یک آیتم در a استفاده می کنند for حلقه مثلا اگر خواستی print تمام کلیدها و مقادیر یک شیء، می توانید موارد زیر را بنویسید:

const greetings = { en: 'hi', es: 'hola', fr: 'bonjour' };

for (const (key, value) of Object.entries(greetings)) {
    console.log(`${key}: ${value}`);
}

ابتدا یک را ایجاد می کنیم greetings متغیری که روش گفتن “سلام” را در زبان های مختلف ذخیره می کند. سپس مقادیر شی را با استفاده از حلقه حلقه می کنیم Object.entries() روشی که یک آرایه تودرتو ایجاد می کند. هر ویژگی شی با آرایه دو بعدی نشان داده می شود که اولین مورد کلید و مورد دوم مقدار آن است. در این مورد، Object.entries() آرایه زیر را ایجاد می کند (('en', 'hi'), ('es', 'hola'), ('fr', 'bonjour')).

در ما for حلقه، ما آرایه های فردی را در آن تخریب می کنیم key و value متغیرها سپس آنها را به سیستم وارد می کنیم console. با اجرای این برنامه خروجی زیر به دست می آید:

en: hi
es: hola
fr: bonjour

تعویض متغیرها

ما می توانیم از نحو ساختارشکن استفاده کنیم swap متغیرهای بدون متغیر موقت فرض کنید سر کار هستید و استراحت می کنید. شما چای می خواستید، در حالی که همکارتان قهوه می خواست. متأسفانه نوشیدنی ها با هم قاطی شدند. اگر این در جاوا اسکریپت بود، به راحتی می توانید swap نوشیدنی ها با استفاده از نحو تخریب کننده:

let myCup = 'coffee';
let coworkerCup = 'tea';
(myCup, coworkerCup) = (coworkerCup, myCup);

اکنون myCup “چای” دارد و coworkerCup “قهوه” دارد. توجه داشته باشید که چگونه ما نداشتیم let، const، یا var هنگام استفاده از تخصیص تخریب ساختار از آنجایی که ما متغیرهای جدیدی را اعلام نمی کنیم، باید آن کلمات کلیدی را حذف کنیم.

نتیجه

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

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

ما چند مکان خوب برای استفاده از تخصیص تخریب فراهم کردیم. کجا از آنها استفاده خواهید کرد؟

(برچسب‌ها برای ترجمه)# جاوا اسکریپت

منتشر شده در 1403-01-21 19:34:06

امتیاز شما به این مطلب