از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
کلون آرایه ها در جاوا اسکریپت در یکی از مقالات قبلی من به روش کپی کردن اشیاء در جاوا اسکریپت پرداختم. کپی کردن یک شی یک تلاش بسیار پیچیده است، با توجه به اینکه شما همچنین باید بتوانید هر نوع داده دیگری را که می تواند در شیء وجود داشته باشد کپی کنید. اما چه می شود اگر فقط کپی می کنید …
سرفصلهای مطلب
در یکی از مقالات قبلی خود به روش کپی کردن اشیا در جاوا اسکریپت پرداختم. کپی کردن یک شی یک تلاش بسیار پیچیده است، با توجه به اینکه شما همچنین باید بتوانید هر نوع داده دیگری را که می تواند در شیء وجود داشته باشد کپی کنید. اما اگر باشی چی؟ فقط کپی کردن یک آرایه؟ مانند مقاله قبلی، روش های زیادی برای انجام این کار وجود دارد که در این مقاله به چند مورد از آنها می پردازم.
اما ابتدا یک نکته روی سرعت. در حالی که این ممکن است برای همه برنامه ها مهم نباشد، باید در نظر بگیرید که آیا کپی کردن آرایه های بزرگ یک عملیات رایج در کد شما است یا اینکه سرعت واقعاً مهم است. برای برخی از روش های زیر، سرعت آن را نسبت به روش های دیگر، که از نتایج حاصل می شود، یادداشت می کنم این معیار.
کپی کردن آرایه های ساده
برای این بخش اول، بیایید فرض کنیم آرایه ای که می خواهید کپی کنید فقط دارای انواع داده های اولیه (و تغییرناپذیر) است. یعنی آرایه فقط شامل اعداد، بولی، رشته ها و غیره است. به این ترتیب می توانیم بیشتر تمرکز کنیم روی انتقال داده ها از یک آرایه به آرایه دیگر، بر خلاف روش برخورد ما با کپی کردن محتویات واقعی آرایه، که در بخش “کپی های عمیق” در زیر پوشش خواهم داد.
روش های شگفت انگیزی برای کپی کردن یک آرایه وجود دارد که برخی از آنها عبارتند از:
push- گسترش
sliceArray.from_.clone
اپراتور گسترش و slice روش سریعترین روش برای کپی کردن یک آرایه کم عمق است، اما به خاطر داشته باشید که این بستگی دارد روی زمان اجرا اساسی، به طوری که ممکن است به طور کلی درست نباشد.
فشار دادن
این احتمالا واضح ترین راه حل است که روی آرایه اصلی حلقه می زند و از آرایه جدید استفاده می کند push() روش اضافه کردن عناصر از یک آرایه به آرایه دیگر:
let oldArr = (3, 1, 5, 2, 9);
let newArr = ();
for (let i=0; i < oldArr.length; i++) {
newArr.push(oldArr(i));
}
ما به سادگی روی آرایه حلقه می زنیم تا کپی شود و هر عنصر را به آرایه جدید فشار می دهیم.
گسترش
این روش از اپراتور گسترشکه در ES6 تعریف شده بود و در اکثر مرورگرهای به روز موجود است.
این کار مانند زیر است:
let oldArr = (3, 1, 5, 2, 9);
let newArr = (...oldArr);
اگر می‌خواهم از یک راه‌حل بومی و بدون کتابخانه شخص ثالث استفاده کنم، معمولاً این راه‌حلی است که به دلیل نحو تمیز و ساده آن ترجیح می‌دهم.
یک نکته مهم این است که این کپی کردن فقط در سطح بالا کار می کند (مانند بسیاری از این روش ها)، بنابراین اگر نیاز به کپی عمیق از چیزی دارید، نباید از آن استفاده کنید.
تکه
این slice() روش معمولاً برای برگرداندن بخشی از یک آرایه که توسط beginning و end مولفه های. با این حال، اگر هیچ پارامتری ارسال نشود، یک کپی از کل آرایه برگردانده می شود:
let oldArr = (3, 1, 5, 2, 9);
let newArr = oldArr.slice();
در بسیاری از زمان‌های اجرا جاوا اسکریپت، این سریعترین راه برای کپی کردن یک آرایه است.
آرایه.از
این Array.from روش ایجاد یک کپی کم عمق از هر کدام است قابل تکرار به آن پاس می دهید، و همچنین تابع نقشه برداری اختیاری را به عنوان پارامتر دوم می گیرد. بنابراین می توان از آن برای ایجاد یک آرایه از رشته ها، مجموعه ها، نقشه ها و البته آرایه های دیگر استفاده کرد:
let oldArr = (3, 1, 5, 2, 9);
let newArr = Array.from(oldArr);
کلون لوداش
مال لوداش شبیه() و cloneDeep() اگر این مقاله را بخوانید ممکن است روش ها برای شما آشنا باشند روی کپی کردن اشیا متدها دقیقاً همان کاری را انجام می دهند که شما انتظار دارید – هر شی (یا آرایه، ابتدایی و غیره) که به آن ارسال شود کپی و برگردانده می شود.
_.cloneDeep (که در ادامه توضیح داده شده است) از این جهت متفاوت است که شبیه سازی را در سطح بالا متوقف نمی کند، بلکه به صورت بازگشتی تمام اشیایی را که در هر سطحی با آنها روبرو می شود کپی می کند.
با توجه به این، می توانیم از آن برای کپی آرایه ها نیز استفاده کنیم:
let oldArr = (3, 1, 5, 2, 9);
let newArr = _.clone(oldArr);
_.clone در مقایسه با روش های دیگر بسیار خوب عمل می کند، بنابراین اگر در حال حاضر از این کتابخانه در برنامه خود استفاده می کنید، این یک راه حل ساده است.
کپی های عمیق
نکته مهمی که باید به آن اشاره کرد این است که همه روش‌هایی که در بالا توضیح داده شد فقط کپی‌های کم عمقی از آرایه‌های شما را انجام می‌دهند. بنابراین اگر آرایه ای از اشیا دارید، برای مثال، آرایه واقعی کپی می شود، اما اشیاء زیربنایی با ارجاع به آرایه جدید ارسال می شوند.
برای نشان دادن این مشکل، اجازه دهید به یک مثال نگاه کنیم:
let oldArr = ({foo: 'bar'}, {baz: 'qux'});
let newArr = (...oldArr);
console.log(newArr === oldArr);
console.log(newArr(0) === oldArr(0));
false
true
در اینجا می توانید ببینید که در حالی که آرایه واقعی جدید است، اشیاء درون آن نیستند. برای برخی از برنامه ها این می تواند یک مشکل بزرگ باشد. اگر این برای شما صدق می کند، در اینجا چند روش دیگر برای امتحان وجود دارد.
Lodash Clone Deep
مال لوداش _.cloneDeep روش دقیقاً همان کار را انجام می دهد _.clone()، با این تفاوت که به صورت بازگشتی همه چیز را در آرایه (یا شی) که شما آن را ارسال می کنید شبیه سازی می کند. با استفاده از همان مثال بالا، می توانیم متوجه شویم که با استفاده از _.cloneDeep() هر دو یک آرایه جدید در اختیار ما قرار می دهد و عناصر آرایه کپی شده:
const _ = require('lodash');
let oldArr = ({foo: 'bar'}, {baz: 'qux'});
let newArr = _.cloneDeep(oldArr);
console.log(newArr === oldArr);
console.log(newArr(0) === oldArr(0));
false
false
روش های JSON
جاوا اسکریپت برخی از روش‌های JSON مفید را ارائه می‌کند که اکثر انواع داده‌های JS را به یک رشته و سپس یک رشته JSON معتبر به یک شی JS تبدیل می‌کند. روش های مربوطه به شرح زیر استفاده می شود:
let oldArr = ({foo: 'bar'}, {baz: 'qux'});
let arrStr = JSON.stringify(oldArr);
console.log(arrStr);
let newArr = JSON.parse(arrStr);
console.log(newArr);
console.log(newArr === oldArr);
console.log(newArr(0) === oldArr(0));
'({"foo":"bar"},{"baz":"qux"})'
( { foo: 'bar' }, { baz: 'qux' } )
false
false
این روش عالی کار می کند و به هیچ کتابخانه شخص ثالثی نیاز ندارد. با این حال، دو مسئله اصلی وجود دارد:
- داده ها باید از طریق JSON قابل سریال سازی و غیر سریال سازی باشند
- استفاده از متدهای JSON در این روش بسیار کندتر از راه حل های دیگر است
بنابراین اگر داده‌هایی دارید که نمی‌توان آنها را به JSON سریال کرد یا اگر سرعت برای برنامه شما مهم است، ممکن است این راه‌حل خوبی برای شما نباشد.
نتیجه
در این مقاله چندین روش را توضیح دادم که می توانید آرایه ها را در جاوا اسکریپت کپی کنید، هم با استفاده از کد بومی و هم از یک کتابخانه شخص ثالث مفید در Lodash. ما همچنین به موضوع آرایه های شبیه سازی عمیق و راه حل هایی برای حل آن نگاه کردیم.
آیا روش متفاوتی وجود دارد که برای شما بهترین کار را داشته باشد؟ نظر خود را در نظرات با ما در میان بگذارید.
منتشر شده در 1403-01-25 14:16:06
