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

افزودن عنصر به ابتدای آرایه با سه روش در جاوا اسکریپت

استفاده از عملگر اسپرید Spread در جی اس

در تعریف کلمه Spread به معنای یک فعل آمده است:

open out (something) so as to extend its surface area, width, or length.

یعنی: باز کردن (چیزی) به طوری که سطح، عرض یا طول آن افزایش یابد.

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

• عملگرد اسپرید یا spread operator با سه نقطه(…) مشخص می شود.
• ساختار Spread را زمانی استفاده میکنیم که تمام عناصر یک شی یا آرایه باید در یک آرایه یا شی جدید گنجانده شوند، یا باید یک به یک در لیست آرگومان های فراخوانی تابع اعمال شوند.
• ساختار اسپرید spread (...) اجازه می دهد تا یک iterable (قابل پیمایش یا تکرار شونده)، مانند یک آرایه array یا رشته string، در مکان هایی که بدون آرگومان arguments (ورودی) است (برای فراخوانی تابع) یا عناصر (برای آرایه) انتظار می رود، گسترش یابد یا پخش شود.

اگر توضیحات بالا را متوجه نشدید یا کمی سردرگم شدید به مثال زیر توجه کنید:

const array = [23, 45, 12, 67];

const newArray = [34, ...array];

alert(newArray); // [34, 23, 45, 12, 67]

در کد بالا در خط اول آرایه ای با چهار عنصر داریم. در خط سوم یک آرایه جدید تعریف کرده ایم. در ابتدای آرایه عدد 34 را به عنوان اولین عضو اضافه کرده ایم سپس آرایه قبلی را در آرایه جدید با عملگر اسپرید و نام آرایه وارد یا کپی کرده ایم. آرایه جدید ما دارای عناصر آرایه قبلی به علاوه یک عنصر جدید در ابتدای آرایه است. در خط پنجم با دستور alert اعضای آرایه را نمایش میدهیم.

اگر درباره اسپرید (گسترش یا پخش کردن) میخواهید مطالعه کنید، از این منابع استفاده کنید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

توجه: ساختار اسپرید تنها در سه جا میتواند به کار رود:

لیست ارگومانهای یک فانکشن یا تابع، عبارات آرایه، عبارتهای ابجکت

• Function arguments list (myFunction(a, ...iterableObj, b))
• Array literals ([1, ...iterableObj, '4', 'five', 6])
• Object literals ({ ...obj, key: 'value' })

اگرچه ساختار یکسان به نظر می رسد، اما آنها کمی متفاوت هستند.

ابجکتهای قابل پیمایش iterable objects، مانند آرایه ، می توانند در پارامترهای آرایه و تابع پخش Spread شوند. بسیاری از آرایه ها قابل پیمایش iterable نیستند، شامل همه آبجکتهای ساده ای (plain objects) که فاقد متد Symbol.iterator هستند.

به کد زیر توجه کنید، قابل پیمایش Iterable نیست:

const obj = { key1: &quotvalue1&quot };
const array = [...obj]; // TypeError: obj is not iterable

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

استفاده از متد Concat برای افزودن عنصر به اول آرایه

متد concat() برای ادغام دو یا چند آرایه استفاده می شود. این روش آرایه های موجود را تغییر نمی دهد، اما در عوض یک آرایه جدید برمی گرداند.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array [&quota&quot, &quotb&quot, &quotc&quot, &quotd&quot, &quote&quot,

همانطور که در بالا میبیند، آرایه 1 پیش از ارایه 2 یعنی در ابتدای آرایه جدید 3 قرار گرفته است.

استفاده از متد Unshift برای افزودن عنصر به ابتدای آرایه

متد unshift() عناصر مشخص شده را به ابتدای یک آرایه اضافه می کند و طول جدید آرایه را برمی گرداند.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

در خط اول تعریف آرایه 1 را داریم. در خط سوم از متد unshift استفاده میکنیم تا دو مقدار 4 و 5 را به ابتدای ارایه بیافزاییم. همانطور که در تعریف گفتیم، پس از استفاده از متد unshift، طول آرایه پس از افزوده شدن عناصر برگردانده میشود. در نتیجه آنچه در کنسول میبینیم: 5 است که به معنی طول آرایه است.

برای مشاهده عناصر آرایه، از دستور نمایش آرایه 1 در خط ششم استفاده میکنیم. اکنون میتوانید ببینید که دو مقدار 4 و 5 به ابتدای این آرایه افزوده شده است.

تفاوت عملگر Spread(...) و متد concat با متد unshfit چیست؟

در دو روش اول برای افزودن عنصر به ابتدای آرایه (عملگر Spread و متد concat) یک آرایه جدید ساخته میشود. اما در روش سوم یعنی استفاده از متد unshift، آرایه جدیدی ساخته نمیشود.

کدام متد در افزودن عنصر به ابتدای آرایه سریع تر است؟

استفاده از متد concat نسبت به متد unshift سرعت بیشتری دارد.

خلاصه:

در این پست با سه روش استفاده از عملگر spread(...) یا سه نقطه و متدهای concat و unshift برای افزودن عناصر به ابتدای آرایه آشنا شدیم.

لطفا غلطهای املایی خصوصا درباره دستورات جاوا اسکریپت و نوشتن نام متدها را در نظرات اعلام فرمایید باتشکر