در جاوا اسکریپت مدرن، عملگرهای spread و rest به ابزارهای ضروری برای ساده سازی دستکاری آرایه و پارامترهای عملکرد تبدیل شده اند. این عملگرها راه حل های ظریفی را برای کارهایی مانند گسترش آرایه، مدیریت آرگومان های تابع ارائه می دهند.

بیایید عمیق تر به درک نحوه کار آنها بپردازیم تا بتوانید از قدرت آنها استفاده کنید.

می توانید تمام کد منبع را از اینجا دریافت کنید.

فهرست مطالب

اپراتور Spread

قبل از اپراتور Spread

پس از اپراتور Spread

موارد استفاده اپراتور Spread

اپراتور بقیه

قبل از اپراتور بقیه

بعد از اپراتور بقیه

موارد استفاده اپراتور استراحت

نتیجه

اپراتور Spread

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

آرایه زیر را در نظر بگیرید:

 const arr = [1, 2, 3]; console.log("Original array:", arr); // [1, 2, 3]

قبل از اپراتور Spread

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

 const newArr = [5, 6, arr[0], arr[1], arr[2]]; console.log("New array (before spread operator):", newArr); // [5, 6, 1, 2, 3]

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

پس از اپراتور Spread

اپراتور گسترش را وارد کنید و یک جایگزین مختصر و شهودی ارائه دهید:

 const newArr = [5, 6, ...arr]; console.log("New array (after spread operator):", newArr); // [5, 6, 1, 2, 3]

در این مثال، ما به طور یکپارچه محتویات arr را با استفاده از عملگر spread در newArr ادغام می کنیم. هیچ نمایه سازی یا حلقه زنی دستی مورد نیاز نیست، که باعث می شود کد خواناتر و قابل نگهداری تر باشد.

موارد استفاده اپراتور Spread

ترکیب آرایه ها

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

 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log("Combined array:", combined); // [1, 2, 3, 4, 5, 6]

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

انتقال آرگومان ها به توابع

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

 function sum(a, b, c) { return a + b + c; } const nums = [1, 2, 3]; const result = sum(...nums); console.log("Result of sum:", result); // 6

این تکنیک انعطاف‌پذیری عملکرد را افزایش می‌دهد و افزونگی را کاهش می‌دهد، به‌ویژه زمانی که با ورودی‌های پویا سروکار داریم.

کپی کردن آرایه ها

عملگر spread یک روش مختصر برای کپی کردن آرایه ها ارائه می دهد و اطمینان حاصل می کند که تغییرات در آرایه کپی شده روی اصلی تأثیر نمی گذارد. با پخش کردن عناصر آرایه اصلی در یک آرایه جدید، یک کپی مجزا ایجاد می کنیم.

 const original = [1, 2, 3]; const copy = [...original]; console.log("Copied array:", copy); // [1, 2, 3]

بر خلاف روش‌های سنتی مانند slice() یا concat() ، عملگر spread رویکرد شهودی و خواندنی‌تری را برای تکرار آرایه ارائه می‌کند.

اپراتور بقیه

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

قبل از اپراتور بقیه

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

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

 const arr = [1, 2, 3, 4, 5]; const first = arr[0]; // Extracting the first element const rest = arr.slice(1); // Collecting the rest of the elements console.log("First element:", first); // 1 console.log("Rest of the elements:", rest); // [2, 3, 4, 5]

در مثال بالا، first عنصر اولیه ( 1 ) را با دسترسی مستقیم به آن در اندیس 0 می گیرد، در حالی که rest با برش آرایه از شاخص 1 به بعد به دست می آید. این رویکرد دستی در مقایسه با استفاده از اپراتور استراحت مستعد خطا و کمتر بصری است.

بعد از اپراتور بقیه

با معرفی عملگر استراحت، استخراج عناصر خاص بصری و مختصرتر می شود.

 const [first, ...rest] = [1, 2, 3, 4, 5]; console.log("First element:", first); // 1 console.log("Rest of the elements:", rest); // [2, 3, 4, 5]

در این مثال، first عنصر اولیه ( 1 ) را می گیرد، در حالی که rest عناصر باقی مانده را در بر می گیرد ( [2, 3, 4, 5] ). عملگر بقیه ما را قادر می سازد تا ورودی های با طول متغیر را به راحتی مدیریت کنیم.

موارد استفاده اپراتور استراحت

مدیریت آرگومان های تابع طول متغیر

عملگر بقیه کار با آرگومان های با طول متغیر در توابع را ساده می کند. به توابع اجازه می‌دهد تا تعداد نامحدودی از آرگومان‌ها را بدون تعیین صریح هر کدام بپذیرند.

 function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log("Sum:", sum(1, 2, 3, 4, 5)); // Sum: 15 console.log("Sum:", sum(10, 20)); // Sum: 30

دستور ...numbers همه آرگومان های ارسال شده را در آرایه ای به نام numbers جمع آوری می کند و تعاریف تابع انعطاف پذیر را فعال می کند.

تخریب آرایه

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

 const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log("First element:", first); // First element: 1 console.log("Second element:", second); // Second element: 2 console.log("Rest of the elements:", rest); // Rest of the elements: [3, 4, 5]

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

نتیجه

خودشه! این عملگرها دستکاری آرایه و مدیریت عملکرد را ساده می کنند و کد شما را کارآمدتر و خواناتر می کنند.

خواه برای پروژه های شخصی باشد یا ارزیابی های فنی، ادغام اپراتورهای spread و rest مهارت های جاوا اسکریپت و توانایی های حل مسئله شما را افزایش می دهد.

اگر بازخوردی دارید، لطفاً در توییتر یا لینکدین با من تماس بگیرید

خبرکاو