از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش به هم پیوستن رشته ها در یک آرایه در JavaScriptData اشکال مختلفی دارد – و لیست ها بسیار رایج هستند. الحاق رشته ها یک کار رایج است و راه های مختلفی برای انجام آن وجود دارد. به همین ترتیب، الحاق رشته ها در یک آرایه بر اساس آن وظیفه، برای هر رشته در آن آرایه است. با این حال، یکی دیگر از موارد بسیار …
سرفصلهای مطلب
داده ها اشکال مختلفی دارند – و لیست ها بسیار رایج هستند. الحاق رشته ها یک کار رایج است و راه های مختلفی برای انجام آن وجود دارد.
به همین ترتیب، الحاق رشته ها در یک آرایه بر اساس آن وظیفه، برای هر رشته در آن آرایه است. با این حال، روش بسیار مفید دیگری وجود دارد که می توانیم استفاده کنیم – روش join()
روشی که این را خودکار می کند process بدون درد و بدون دردسر
در این راهنما، نگاهی به روش اضافه کردن تمام رشتهها در یک آرایه خواهیم داشت و سپس عملکرد همه روشها را محک میزنیم.
Array.prototype.join()
ساده ترین راه برای الحاق همه عناصر در یک آرایه به یک آرایه است join()
روش از Array
کلاس تمام عناصر را با جداکننده اختیاری داده شده به یک رشته متصل می کند.
اگر جداکننده را حذف کنید – روی کاما تنظیم می شود (,
):
let platonicSolids = ('Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron');
let joinedWithDefaultDelimiter = platonicSolids.join();
let joinedWithDelimiter = platonicSolids.join('');
let joinedWithUnderscore = platonicSolids.join('_');
console.log(joinedWithDefaultDelimiter);
console.log(joinedWithDelimiter);
console.log(joinedWithUnderscore);
این نتیجه در:
Tetrahedron,Cube,Octahedron,Dodecahedron,Icosahedron
TetrahedronCubeOctahedronDodecahedronIcosahedron
Tetrahedron_Cube_Octahedron_Dodecahedron_Icosahedron
این یک است عالی روش ایجاد ورودی از اشیا برای فایل های CSV – بیایید یک شی ساده با چند فیلد و join()
آن را به یک رشته با فرمت CSV تبدیل کنید:
const book = {genre:"Popular Science", name:"Our Mathematical Universe", author:"Max Tegmark"};
let csvString = Object.keys(book).map(field => book(field)).join();
console.log(csvString);
به این ترتیب، ما به راحتی میتوانیم یک شی جاوا اسکریپت را به یک رشته با فرمت CSV تبدیل کنیم و مقادیر فیلد آن را به هم متصل کنیم:
Popular Science,Our Mathematical Universe,Max Tegmark
String.concat()
این concat()
عملکرد ساده است – دو رشته را به هم متصل می کند. با توجه به آرایهای از ورودیها، میتوانیم به سادگی آن را حلقه بزنیم و concat()
هر ورودی را در یک رشته خالی برگردانید و آن را برگردانید:
let platonicSolids = ('Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron');
let result = '';
for (let i = 0; i < platonicSolids.length; i++) {
result = result.concat(platonicSolids(i));
}
console.log(result);
به یاد داشته باشید که رشته ها تغییر ناپذیر هستند و ما باید نتیجه را نسبت دهیم concat()
بازگشت به یک متغیر مرجع
این نتیجه در:
TetrahedronCubeOctahedronDodecahedronIcosahedron
شما می توانید هر جداکننده را در اینجا نیز اضافه کنید، به سادگی با الحاق آن در حلقه با بررسی آخرین عنصر:
let platonicSolids = ('Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron');
let result = '';
for (let i = 0; i < platonicSolids.length; i++) {
result = result.concat(platonicSolids(i));
if (i < platonicSolids.length - 1) {
result = result.concat(",");
}
}
console.log(result);
این نتیجه در:
Tetrahedron,Cube,Octahedron,Dodecahedron,Icosahedron
اپراتور +
طبیعتا اگر بتوانید concat()
رشته ها را به هم متصل کنید، همچنین می توانید آنها را از طریق ضمیمه کنید +
اپراتور:
let platonicSolids = ('Tetrahedron', 'Cube', 'Octahedron', 'Dodecahedron', 'Icosahedron');
let result = '';
for (let i = 0; i < platonicSolids.length; i++) {
result = result + platonicSolids(i);
}
console.log(result);
یا حتی بهتر از آن – می توانید از کوتاه نویسی استفاده کنید +=
اپراتور در عوض:
result += platonicSolids(i);
این نیز منجر به:
TetrahedronCubeOctahedronDodecahedronIcosahedron
معیار عملکرد
بنابراین، کدام رویکرد بهترین است از نظر عملکرد? این join()
مطمئناً این روش سادهترین روش برای استفاده است و تمیزترین روش به نظر میرسد، اما آیا برای مجموعه بزرگی از عناصر کارآمدترین روش است؟
بیایید این روش ها را آزمایش کرده و آنها را محک بزنیم.
ابتدا اجازه دهید یک تابع ایجاد کنیم که تولید کند رشته های تصادفی برای ما:
function generateStrings(num) {
let array = ();
for (let i = 0; i < num; i++) {
array.push((Math.random() + 1).toString(36).substring(2);
}
return array;
}
}
تابع یک عدد تصادفی تولید می کند و آن را به رشته ای با ریشه تبدیل می کند 36
و عدد باقیمانده در ابتدای رشته را با substring()
. در حالی که این روش برای تولید رشته محدودیتهایی دارد – برای حداکثر 50000 عنصر به اندازه کافی خوب کار میکند و تا آن نقطه نسبتاً تصادفی خواهند بود.
توجه داشته باشید: به خاطر داشته باشید که این روش از نظر رمزنگاری برای اعداد تصادفی ایمن نیست و فقط برای اهداف تصویری استفاده میشود، برای دور زدن بهینهسازی ذاتی ذخیرهسازی که در حین تکرار بسیاری از نمونههای یک رشته با آن مواجه میشویم، تا مطمئن شویم که معیار دقیق است.
بیایید آن را آزمایش کنیم:
let stringArray = generateStrings(5);
console.log(stringArray)
این نتیجه در:
( 'e8e3mbqczk', '2wqjp9hko', 'szazekngkv', 'xsxl2bvh3w', 'd4vadxk9ny' )
عالی! بیایید 25000 رشته تولید کنیم و با متدهای خود به آنها بپیوندیم:
let stringArray = generateStrings(25000);
console.time('Concatenating with Operator');
let join1 = plusOperator(stringArray);
console.timeEnd('Concatenating with Operator');
console.time('Concatenating with concat()');
let join2 = concat(stringArray);
console.timeEnd('Concatenating with concat()');
console.time('Concatenating with join()');
let join3 = stringArray.join('');
console.timeEnd('Concatenating with join()');
function generateStrings(num) {
let array = ();
for (let i = 0; i < num; i++) {
array.push((Math.random() + 1).toString(36).substring(2));
}
return array;
}
function plusOperator(array) {
let result = '';
for (let i = 0; i < array.length; i++) {
result += array(i);
}
return result;
}
function concat(array) {
let result = '';
for (let i = 0; i < array.length; i++) {
result = result.concat(array(i));
}
return result;
}
پس از تولید و پیوستن آنها – اینها نتایج هستند:
Concatenating with Operator: 3.417ms
Concatenating with concat(): 2.879ms
Concatenating with join(): 8.930ms
اگر با بزرگ تعداد داده ها، join()
این روش تا حد زیادی به دلیل استفاده از پیاده سازی های سفارشی بهتر است ذاتی منطق جداکننده حتی اگر نمی خواهید واقعاً یک جداکننده اضافه کنید، در واقع یک کاراکتر خالی اضافه می کنید که زمان بیشتری می برد روی آرایه های بزرگ
اگر بخواهیم جداکننده ها را در متدهای سفارشی خود دوباره اضافه کنیم:
function plusOperator(array) {
let result = '';
for (let i = 0; i < array.length; i++) {
result += array(i);
if (i < array.length - 1) {
result += ',';
}
}
return result;
}
function concat(array) {
let result = '';
for (let i = 0; i < array.length; i++) {
result = result.concat(array(i));
if (i < array.length - 1) {
result = result.concat(',');
}
}
return result;
}
نتایج ما بسیار متفاوت خواهد بود:
Concatenating with Operator: 3.914ms
Concatenating with concat(): 23.988ms
Concatenating with join(): 3.452ms
عملکرد اپراتور کمی کندتر از join()
روش، و concat()
روش می شود واقعا در مقایسه با هر دوی این رویکردها کند است.
همچنین شایان ذکر است که بیانیه رسمی از MDN، با توجه به مزایای عملکرد الحاق رشته ها با concat()
روش یا عملگرها عبارتند از:
اکیداً توصیه می شود که از عملگرهای انتساب (+، +=) به جای متد ()concat استفاده شود.
با این حال، این به هیچ وجه لازم نیست، و شما به راحتی می توانید آن را دریافت کنید concat()
برای عملکرد بهتر از +
اپراتور:
console.time('Concatenating with Operator');
concatWithOperator();
console.timeEnd('Concatenating with Operator');
console.time('Concatenating with Function');
concatWithFunction();
console.timeEnd('Concatenating with Function');
function concatWithOperator() {
let result = "";
for (let i = 0; i < 10000; i++) {
result += i;
}
}
function concatWithFunction() {
let result = "";
for (let i = 0; i < 10000; i++) {
result = result.concat(i);
}
}
این نتیجه در:
Concatenating with Operator: 1.921ms
Concatenating with Function: 0.855ms
مرورگر شما، نسخه آن، و همچنین بهینهسازیای که استفاده میکند ممکن است از ماشینی به ماشین دیگر متفاوت باشد، و ویژگیهایی مانند آنها واقعا بر عملکرد تاثیر میگذارند.
کد خود را تست و تایید کنید بهجای اینکه توصیهها را به صورت واقعی دریافت کنید. همه ماشینها و محیطها یکسان نیستند و چه چیزی عالی عمل میکند روی یکی، ممکن است عالی کار نکند روی یکی دیگر.
نتیجه
در این راهنما، نگاهی دقیق به رویکردهای مختلف برای پیوستن لیست رشته ها به یک رشته، با و بدون جداکننده داشته ایم.
ما نگاهی به موارد مشترک انداخته ایم join()
روش، و همچنین دو روش خودمان را برای بهبود عملکرد در مواقعی که به جداکنندهها نیاز نیست، اجرا کردیم.
در نهایت، ما آنها را برای مقایسه عملکردشان محک زده ایم.
منتشر شده در 1403-01-14 09:23:03