نحوه تخریب آرایه ها و اشیاء در جاوا اسکریپت

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

جاوا اسکریپت مدرن دارای ویژگی های جدید بسیاری است که نوشتن کد را به شیوه ای ساده و ساختار یافته آسان می کند. یکی از ویژگی‌های مدرن مفید موجود در ES6+، تخریب آرایه و شیء است.

چارچوب های جاوا اسکریپت مانند React.js و Angular استفاده از این تکنیک را تشویق می کنند. بنابراین ضروری است که بفهمیم تخریب ساختار چیست و چگونه از آن هنگام نوشتن کد استفاده کنیم.

تخریب شی و آرایه در جاوا اسکریپت چیست؟

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

همچنین هنگام پردازش مقادیر برگشتی از یک تابع یا عبارت پیچیده مفید است. این مفهوم یکی از بهترین روش هایی است که باید هنگام نوشتن کد React رعایت کنید.

نحوه تخریب آرایه ها

در اینجا یک کد نمونه برای دریافت حس تخریب ساختار آرایه آمده است:

const arr = [1, 2];
const [a, b] = arr;
console.log(a) // prints 1 on the console
console.log(b) // prints 2 on the console

این کد از ساختارزدایی برای تخصیص مقادیر arr-1 و 2- به ترتیب به متغیرهای a و b استفاده می کند. این مفهوم اساسی در پس تخریب است. شما یک آرایه یا شی در سمت راست دارید، و آیتم‌ها را باز می‌کنید و آنها را به متغیرهای جداگانه در سمت چپ اختصاص می‌دهید.

در زیر هود، جاوا اسکریپت مقادیر را از arr کپی می کند و آنها را به متغیرهای سمت چپ مانند زیر اختصاص می دهد:

const arr = [1,2];
const a = arr[0];
const b = arr[1];

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

کد نمونه زیر را بررسی کنید:

const [day, month, date, year, time, timezone] = Date().split(' ')

// Calling Date() returns the current date in the format:
// Mon Feb 20 2023 13:07:29 GMT+0000
console.log(day) // prints Mon
console.log(month) // prints Feb
console.log(date) // prints 20

در این نمونه کد، با فراخوانی Date() یک رشته جدید با تاریخ فعلی ایجاد می کنیم. در مرحله بعد، ما از split()، یک متد رشته جاوا اسکریپت، برای جداسازی آیتم های رشته با استفاده از فاصله به عنوان جداکننده استفاده می کنیم. split(‘ ‘) یک آرایه را برمی گرداند و ما از ساختارزدایی برای تخصیص مقادیر به متغیرهای جداگانه استفاده می کنیم.

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

const arr = [1, 2, 3, 4];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints 2
// values 3 and 4 are not assigned to any variable; they are ignored

در این مورد، اگر می خواهید موارد باقیمانده را در یک متغیر ذخیره کنید، از یک پارامتر استراحت مانند زیر استفاده کنید:

const arr = [1, 2, 3, 4];
const [a, b, ...rest] = arr;
console.log(rest) // prints [3,4]

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

const arr = [1, 2, 3, 4];
const [a, , c] = arr;
console.log(c) // prints 3

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

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

const arr = [1];
const [a, b] = arr;
console.log(a) // prints 1
console.log(b) // prints undefined

برای جلوگیری از تعریف نشده بودن متغیرها، اگر از طول آرایه مطمئن نیستید، می توانید مقادیر پیش فرض را به صورت زیر تنظیم کنید (تخصیص مقادیر پیش فرض الزامی نیست):

const arr = [1];
const [a = '10', b = 'not provided'] = arr;
console.log(a) // prints 1
console.log(b) // prints "not provided"

این تخریب، مقدار 1 را به متغیر a اختصاص می‌دهد و مقدار پیش‌فرض آن را بازنویسی می‌کند. متغیر b پیش فرض خود را حفظ می کند زیرا مقداری ارائه نشده است.

چگونه اشیاء را تخریب کنیم

تخریب اشیاء با آرایه ها تفاوت چندانی ندارد. تنها تفاوت این است که آرایه ها تکرارپذیر هستند و اشیاء قابل تکرار نیستند و در نتیجه روش انجام کارها کمی متفاوت است.

هنگام کار با اشیا، متغیرهای سمت چپ عملگر انتساب نیز مانند اشیاء مقداردهی اولیه می شوند:

const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 1

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

const person = {name: 'Alvin', age: 10, height: 1};
const {name: firstName, age: years, height: currentHeight} = person;
console.log(firstName) // prints 'Alvin'
console.log(currentHeight) // prints 1

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

برای انجام این کار، می‌توانید به طور مشابه مقادیر پیش‌فرض را در صورتی که نام ویژگی که می‌خواهید به یک متغیر اختصاص دهید در دسترس نباشد، تعیین کنید:

const person = {name: 'Alvin', age: 10, height: 1};
const {name, age, height, location='Worldwide'} = person;
console.log(name) // prints 'Alvin'
console.log(location) // prints 'Worldwide'

ترتیب متغیرها در سمت چپ برای یک شی مهم نیست زیرا اشیا مقادیر را در جفت های کلید-مقدار ذخیره می کنند. به این ترتیب، کد زیر همان نتایج را به همراه خواهد داشت:

const person = {name: 'Alvin', age: 10, height: 1};
const {age, height, name} = person;
console.log(name) // prints 'Alvin'
console.log(height) // prints 1

در نهایت، مشابه آرایه‌ها، می‌توانید از پارامتر rest برای تخریب چندین مقدار در یک متغیر مانند زیر استفاده کنید:

const person = {name: 'Alvin', age: 10, height: 1};
const {name, ...rest} = person;
console.log(name) // prints 'Alvin'
console.log(rest) // prints { age: 10, height: 1 }

فقط توجه داشته باشید که پارامتر استراحت همیشه باید آخرین بار باشد. در غیر این صورت جاوا اسکریپت یک استثنا ایجاد می کند.

کیفیت کد خود را با تخریب جاوا اسکریپت بهبود بخشید

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

منبع مقاله