سرور مجازی NVMe

Spread Operator در جاوا اسکریپت در این آموزش، یکی از ویژگی های قدرتمند مشخصات ES6 جاوا اسکریپت را بررسی خواهیم کرد – Operator Spread. اگرچه نحو ساده است، اما گاهی اوقات اگر به درستی آن را درک نکنید، پیاده سازی گیج کننده است. در این آموزش، سه نقطه از جاوا اسکریپت را که کار شگفت انگیزی انجام می دهد را رفع می کنیم.

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

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

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

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

معرفی

در این آموزش، یکی از ویژگی‌های قدرتمند مشخصات ES6 جاوا اسکریپت – Operator Spread – را بررسی خواهیم کرد. اگرچه نحو ساده است، اما گاهی اوقات اگر به درستی آن را درک نکنید، پیاده سازی گیج کننده است. در این آموزش، این سه نقطه را ابهام زدایی می کنیم ... جاوا اسکریپت که کارهای شگفت انگیزی را با تکرارپذیر انجام می دهد.

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

کاربردهای متفاوتی از عملگر spread و هر هدف استفاده برای حل یک بیانیه مشکل متفاوت وجود دارد.

در حال گسترش آرایه ها

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

برای مثال:

let greet = ('Hello', 'World');
console.log(greet); // Without spread operator
console.log(...greet); // Using spread operator

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

('Hello', 'World')
Hello World

حتما متوجه شده اید که در حالت دوم (با عملگر spread)، محتویات greet لیست گسترش یافته و از آرایه خارج شد.

گاهی اوقات، ممکن است نیاز به تبدیل a را احساس کنیم String به لیستی از شخصیت ها ما می توانیم از عملگر spread برای این مورد استفاده کنیم:

let greetings = "hello";
let chars = (...greetings);
console.log(chars);

اگر این کد را اجرا کنیم، با استقبال مواجه خواهیم شد:

( 'h', 'e', 'l', 'l', 'o' )

این مثال‌ها ممکن است شما را در مورد سودمندی این اپراتور متقاعد نکند. در این نام، اجازه دهید برخی از مشکلات دنیای واقعی را در نظر بگیریم که با عملگرهای spread قابل حل هستند.

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

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

let blog1Subscribers = ('(email protected)', '(email protected)');
let blog2Subscribers = ('(email protected)', '(email protected)', '(email protected)');
let subscribers = (...blog1Subscribers, ...blog2Subscribers);
console.log(subscribers);

اگر کد بالا را اجرا کنیم، یک لیست واحد از تکرارپذیرها دریافت خواهیم کرد. این به عنوان هر دو امکان پذیر شد ...blog1Subscribers و ...blog2Subscribers پخش شدند و () به عنوان “گیرنده” عمل کرد، که به طور موثر اقلام پخش شده را در یک لیست واحد از اقلام ترکیب کرد.

توجه داشته باشید: اپراتور spread به گیرنده نیاز دارد تا مقدار گسترش یافته را در آن قرار دهد. اگر گیرنده را حذف کنید، خطا می دهد.

همچنین می توانیم از عملگر spread در داخل استفاده کنیم Array.push() روشی برای فشار دادن محتویات یک آرایه به آرایه دیگر:

let arr1 = ('John', 'Sofia', 'Bob');
let arr2 = ('Julia', 'Sean', 'Anthony');
arr1.push(...arr2);
console.log(arr1);

اگر این کد را اجرا کنیم، خروجی زیر را خواهیم دید:

( 'John', 'Sofia', 'Bob', 'Julia', 'Sean', 'Anthony' )

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

در جاوا اسکریپت هر موجودیت غیر ابتدایی یک است Object، به این معنی که آرایه ها نیز شی هستند. ممکن است بدانید که اشیا به عنوان یک نوع مرجع کپی می شوند:

let arr1 = ('John', 'Sofia', 'Bob');
let arr2 = arr1;
console.log(arr2);
arr1.push('Sally'); // Change arr1
console.log(arr2);

( 'John', 'Sofia', 'Bob' )
( 'John', 'Sofia', 'Bob', 'Sally' )

همانطور که انتظار می رفت، مقادیر آیتم ها در آرایه کپی نشدند، فقط ارجاع به آنها بود. ما می توانیم این مشکل را به راحتی با عملگر spread حل کنیم:

let arr1 = ('John', 'Sofia', 'Bob');
let arr2 = (...arr1);
console.log(arr2);
arr1.push('Sally'); // Change arr1
console.log(arr2);

با اجرای این کد موارد زیر تولید می شود:

( 'John', 'Sofia', 'Bob' )
( 'John', 'Sofia', 'Bob' )

همانطور که می بینیم، arr2 مانند قبل از یک مرجع عبور نکرد، بلکه با آن پر شده بود ارزش های از arr1 به عنوان یک شی کاملا جدید بنابراین حتی زمانی که arr1 تغییرات، arr2 به همان شکل باقی می ماند.

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

let arr1 = ('John', 'Sofia', 'Bob');
let arr2 = (...arr1, 'Anthony', 'Sean');
console.log(arr2);

('John', 'Sofia', 'Bob', 'Anthony', 'Sean')

توجه داشته باشید: عملگر spread با همه تکرارپذیرها از جمله Object ها کار می کند.

قبلاً این یک خط کد اضافی برای افزودن موارد جدید به آرایه جدید نیاز داشت.

به طور مشابه می توانیم اشیاء را با استفاده از عملگر spread کپی کنیم:

let o1 = { a: 1, b: 2 };
let o2 = { c: 3, d: 4, ...o1 };
console.log(o2);

{ c: 3, d: 4, a: 1, b: 2 }

همانطور که می بینیم ما با موفقیت شی را کپی کردیم o1 به o2.

این ویژگی موارد استفاده در دنیای واقعی زیادی دارد. به عنوان مثال، فرض کنید اطلاعات ثبت نام کاربر را در یک شی ذخیره کرده ایم. ما می توانیم یک کپی کم عمق از آن شی بسازیم و اطلاعات بیشتری را به شی کپی شده اضافه کنیم:

let user = { name: 'John', email: '(email protected)' };
let _user = { ...user, ...getSession(user) };
console.log(_user);

{ name: 'John', email: '(email protected)', 'token': 'abc123', 'expiresAt': 1565630480671 }

ما نیز ممکن است نیاز داشته باشیم ادغام اطلاعات صورتحساب و حمل و نقل در یک:

const billing = { billingContact: '0987654321', billingAddress: 'street no 123, xyz city' };
const shipping = { shippingContact: '123456789', shippingAddress: 'street no 999, abc city' };
const custInfo = { ...billing, ...shipping };
console.log(custInfo);

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

{
  billingContact: '0987654321',
  billingAddress: 'street no 123, xyz city',
  shippingContact: '123456789',
  shippingAddress: 'street no 999, abc city'
}

در اینجا می توان یک سوال را مطرح کرد. چه می شود اگر هر دو شی دارای برخی از ویژگی های یکسان باشند.

در صورت برخورد خواص، خاصیت آخرین شی برنده می شود. اجازه دهید این را در یک مثال ببینیم:

const o1 = { a: 1, b: 2 };
const o2 = { b: 3, c: 4, ...o1};
console.log(o2);

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

{ b: 2, c: 4, a: 1 }

همانطور که می توانیم ویژگی های شی دوم را مشاهده کنیم o2 برنده می شود. با این حال، اگر عملگر spread را ابتدا قرار دهیم:

const o1 = { a: 1, b: 2 };
const o2 = { ...o1, b: 3, c: 4};
console.log(o2);

{ a: 1, b: 3, c: 4 }

ما می توانیم ببینیم که ملک از o1 برنده است، که از آن زمان منطقی است o2 آخرین شی است

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

const userProvided = {
    name: 'Bil Smith',
    email: '(email protected)',
};
const defaultValues = {
    name: 'Unknown',
    address: 'Alien',
    phone: null,
    email: null
};
const userInfo = { ...defaultValues, ...userProvided };

جایگزینی برای فراخوانی توابع با application()

فرض کنید یک تابع آرگومان می گیرد – لیستی از امتیازات 5 دانش آموز برتر یک کلاس. ما همچنین فهرستی داریم که از منبع خارجی آمده است. مطمئناً، ما می‌توانیم از عبور دادن آیتم‌های فردی اجتناب کنیم و در عوض با استفاده از کلمه، کل فهرست را پاس کنیم apply() روش:

myFun(m1, m2, m3, m4, m5) {
    // Do something
}

let marks = (10, 23, 83, -1, 92);
myFun.apply(undefined, arr);

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

myFun(m1, m2, m3, m4, m5) {
    // Do something
}

let marks = (10, 23, 83, -1, 92);
myFun(...marks);

استفاده با توابع ریاضی

جاوا اسکریپت دارای یک است Math شی که شامل چندین روش برای کار با مجموعه ای از داده ها است، یعنی لیستی از داده ها.

فرض کنید می خواهیم حداکثر مقدار را از سه شماره اول یک لیست بدست آوریم:

let mylist = (10, 23, 83, -1, 92, -33, 76, 29, 76, 100, 644, -633);
Math.max(mylist(0), mylist(1), mylist(2));

اگر بخواهیم حداکثر تمام اعداد یک لیست را بدست آوریم چه؟ اگر لیست دارای n تعداد آیتم باشد چه؟ حتما ما نمی خواهیم mylist(0), mylist(1)... mylist(1000).

اپراتور spread یک راه حل تمیزتر ارائه می دهد:

let mylist = (10, 23, 83, -1, 92, -33, 76, 29, 76, 100, 644, -633);
Math.max(...mylist);

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

let user = {name:'John', age:28, email:'(email protected)'};
let items = (...user);

TypeError: user is not iterable

پارامتر Spread Operator vs Rest

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

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

function doSum(...items) {
    let sum = 0;
    for (let item of items){
        sum += item;
    }
    return sum;
}

doSum(1);
doSum(1,2);
doSum(1, 2, 3, 4);

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

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

همچنین می‌توانیم برای برخی از عناصر متغیرهای متمایز ارائه کنیم و پارامتر بقیه را جمع‌آوری کنیم. تنها شرط این است که پارامتر استراحت همیشه آخرین پارامتر تابع باشد:

function doSum(times, ...items) {
    let sum = 0;
    for (let item of items){
        sum += item*times;
    }
    return sum;
}

doSum(1, 1);
doSum(2, 1, 2);
doSum(3, 1, 2, 3);

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

1
6
18

نتیجه

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

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

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

منتشر شده در 1403-01-24 21:20:03

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