مقایسه دو آرایه در جاوا اسکریپت – از صفر تا صد + مثال و کد

۶۹۳ بازدید
آخرین به‌روزرسانی: ۲۴ خرداد ۱۴۰۲
زمان مطالعه: ۸ دقیقه
مقایسه دو آرایه در جاوا اسکریپت – از صفر تا صد + مثال و کد

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

997696

مقایسه دو آرایه در جاوا اسکریپت چگونه انجام می شود؟

مقایسه دو یا چند آرایه در زبان برنامه نویسی جاوا اسکریپت با استفاده از روش‌ها و متدهای مختلفی صورت می‌گیرد. در کل ۲ رویکرد متفاوت برای آن وجود دارد، رویکرد اول تبدیل آرایه به «رشته» (استرینگ) و سپس مقایسه مقادیر حاصل از این تبدیل است. همچنین رویکردی دیگر، استفاده از متدهای پیمایش آرایه در جاوا اسکریپ و مقایسه عناصر متناظر در دو آرایه است که در ادامه این مطلب به صورت کامل پوشش داده خواهند شد.

هنگام کار با جاوا اسکریپت، مقایسه دو آرایه برای تعیین مساوی بودن یا نبودن آن‌ها می‌تواند کمی مشکل باشد. اگرچه امکان دارد کاربر فرض کند که استفاده از «عملگر تساوی» (== ) یا «عملگر برابری دقیق» (=== ) برای انجام این کار کافی است؛ اما متأسفانه چنین عملگرهایی برای سناریوی مقایسه دو آرایه در جاوا اسکریپت مناسب نیستند. برای درک بهتر این موضوع مثالی در ادامه ارائه شده است.

1let array1 = [11, 22, 33];
2let array2 = [11, 22, 33];
3
4console.log(array1 == array2); //false
5console.log(array1 === array2); //false

با کمال تعجب، هر ۲ مقایسه نادرست هستند. دلیل این امر این است که آرایه‌های جاوا اسکریپت به عنوان «شی» (Object) طبقه‌بندی می‌شوند. اشیا در جاوا اسکریپت بر اساس مقادیرشان مقایسه نمی‌شوند، بلکه بر اساس مراجع متغیرها مقایسه خواهند شد.

1let arrayType = typeof(array1);
2console.log(arrayType); //"Object"

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

1console.log(array1[0] == array1[0]); //true
2console.log(array1[1] === array1[1]); //true

در ادامه این مطلب، روش‌های مختلفی را برای مقایسه دو آرایه در جاوا اسکریپت بررسی خواهیم کرد.

آموزش مقایسه دو آرایه در جاوا اسکریپت

مقایسه دو آرایه در جاوا اسکریپت با تبدیل آن ها به رشته

وقتی صحبت از مقایسه دو آرایه در جاوا اسکریپت می‌شود، روشی ساده و مؤثر، تبدیل آرایه‌ها به رشته است. ۲ متد متداول برای دستیابی به این هدف وجود دارد. می‌توان از متد «‎«JSON.stringify  برای تبدیل آرایه به متن «جیسون» (JSON) استفاده کرد یا می‌توان از متد «‎«toString  برای به دست آوردن نمایش رشته‌ای از آرایه برای این هدف بهره برد.

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

1let array = [11, 22, 33];
2console.log(JSON.stringify(array)); // "[11,22,33]"
3console.log(array.toString()); // "11,22,33"

متد JSON.stringify()آرایه را به رشته‌ای با فرمت JSON تبدیل کرده و عناصر را در براکت‌های مربعی «[ ]» محصور می‌کند. از سوی دیگر، متد toString()به سادگی عناصر آرایه را به رشته‌ای جدا شده با کاما پیوند می‌دهد. با تبدیل آرایه‌ها به رشته، می‌توان آن‌ها را با استفاده از عملگرهای برابری (== یا === ) مقایسه کرد. این عمل اجازه می‌دهد تا راهی ساده و مختصر برای تعیین اینکه آیا دو آرایه برابر هستند یا خیر، ارائه شود.

استفاده از JSON.stringify برای مقایسه دو آرایه در JavaScript

یکی از متدهای مقایسه آرایه‌ها در جاوا اسکریپت شامل استفاده از JSON.stringify()است که به کاربر امکان می‌دهد هر آرایه به نوعی رشته جیسون تبدیل کند. سپس این متد می‌تواند رشته‌های جیسون حاصل را مقایسه کرده تا مشخص کند که آیا آرایه‌ها برابر هستند یا خیر.

در اینجا مثالی با استفاده از این متد آورده شده است:

1let array1 = [11, 22, 33];
2let array2 = [11, 22, 33];
3
4console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true

با اعمال JSON.stringify()به هر دو آرایه، آن‌ها به رشته‌های جیسون تبدیل می‌شوند که سپس می‌توان مستقیماً با استفاده از «عملگر برابری دقیق» (===) آن‌ها را مقایسه کرد.

 مقایسه آرایه در جاوا اسکریپت

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

1const compareArrays = (a, b) => {
2  return JSON.stringify(a) === JSON.stringify(b);
3};
4
5let array1 = [11, 22, 33];
6let array2 = [21, 22, 23];
7let array3 = [11, 22, 33];
8
9console.log(compareArrays(array1, array2)); //false
10console.log(compareArrays(array1, array3)); //true

با استفاده از تابع comareArrays() ، می‌توان به راحتی هر دو آرایه را با ارسال آن‌ها به عنوان آرگومان مقایسه کرد و فرآیند تعیین برابری آن‌ها را ساده‌تر انجام داد.

استفاده از toString برای مقایسه دو آرایه در JavaScript

روش دیگر برای مقایسه دو آرایه در جاوا اسکریپت استفاده از متد .toString()‎ است. این متد هر نوع داده‌ای از جمله آرایه‌ها را به نوعی نمایش رشته‌ای تبدیل می‌کند.

در اینجا مثالی از استفاده از.toString()‎برای مقایسه دو آرایه آورده شده است.

1let array1 = [11, 22, 33];
2let array2 = [11, 22, 33];
3
4console.log(array1.toString() === array2.toString()); //true

با اعمال .toString()‎به هر دو آرایه، آن‌ها به رشته تبدیل خواهند شد. سپس، می‌توان مستقیماً این نمایش‌های رشته‌ای را با استفاده از «عملگر برابری دقیق» (===) مقایسه کرد. برای اینکه فرآیند مقایسه قابل‌ استفاده مجدد باشد، می‌توان تابعی ایجاد کرد که در دو آرایه قرار می‌گیرد و نوعی مقدار بولی بازمی‌گرداند که برابری آن‌ها را نشان می‌دهد.

1const compareArrays = (a, b) => {
2  return a.toString() === b.toString();
3};
4
5let array1 = [11, 22, 33];
6let array2 = [21, 22, 23];
7let array3 = [11, 22, 33];
8
9console.log(compareArrays(array1, array2)); //false
10console.log(compareArrays(array1, array3)); //true

با استفاده از تابع comareArrays()، می‌توان به راحتی هر دو آرایه را با ارسال آن‌ها به عنوان آرگومان مقایسه کرد. این تابع آرایه‌ها را به نمایش رشته‌هایشان تبدیل می‌کند و سپس آن‌ها را با هم مقایسه خواهد کرد. در کل این متد روشی مناسب برای تعیین برابری یا نبودن آرایه‌ها ارائه می‌کند.

نحوه مقایسه آرایه در javascript

تفاوت متد ToString با متد JSON.stringify برای مقایسه آرایه‌ها در جاوا اسکریپت چیست؟

باید به این نکته توجه داشت که استفاده از «ToString» در مقایسه با «JSON.stringify» محدودیت‌هایی دارد. «ToString» آرایه را به نوعی رشته جدا شده با کاما تبدیل می‌کند، در حالی که «JSON.stringify» نوعی نمایش رشته‌ای تولید خواهد کرد که ساختار آرایه را حفظ می‌کند. بنابراین، به طور کلی توصیه می‌شود هنگام مقایسه آرایه‌ها از «JSON.stringify» استفاده شود.

مقایسه آرایه ها در جاوا اسکریپت به وسیله پیمایش مقادیر آن ها

هنگام مقایسه آرایه‌ها در جاوا اسکریپت، روش‌های قبلی ذکر شده ممکن است نتایج دقیقی را در سناریوهای خاص ارائه نکنند.

به عنوان مثال، هنگامی که آرایه‌ای حاوی مقادیر «Null» و دیگری دارای مقادیر «تعریف نشده» (Undefined) است، مقایسه برابری دقیق نتیجه صحیح false را بازمی‌گرداند. مثال زیر این مفهوم را بیان می‌کند:

1console.log(null === undefined); //false

با این حال، هنگام استفاده از متدهای JSON.stringify()یا .toString()‎، مقایسه به اشتباه true را بازمی‌گرداند:

1let array1 = [11, null, 33];
2let array2 = [11, undefined, 33];
3
4console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
5console.log(array1.toString() === array2.toString()); //true

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

مقایسه دو آرایه در جاوا اسکریپت با متد Every

متد every() به عنوان یکی از متدهای آرایه در جاوا اسکریپت زمانی مفید است که کاربر بخواهد برای هر عنصر آرایه نوعی تابع را اجرا کند. این تابع که به عنوان تابع callback نیز شناخته می‌شود، می‌تواند به پارامترهایی مانند عنصر فعلی، اندیس و غیره دسترسی داشته باشد.

سینتکس متد every()به صورت زیر است:

1array.every((currentValue, index, arr)=> { ... })

برای مقایسه دو آرایه با استفاده از این متد، ابتدا بررسی می‌شود که آیا طول آرایه‌ها برابر است یا خیر و سپس به وسیله پیمایش آرایه، هر عنصر با عنصر مربوطه در آرایه دوم با استفاده از اندیس‌های آن‌ها مقایسه خواهند شد. مثال زیر برای درک بهتر این مفهوم ارائه شده است.

1const compareArrays = (a, b) =>
2  a.length === b.length &&
3  a.every((element, index) => element === b[index]);
4
5let array1 = [11, 22, 33];
6let array2 = [21, 22, 23];
7let array3 = [11, 22, 33];
8
9console.log(compareArrays(array1, array2)); //false
10console.log(compareArrays(array1, array3)); //true

در مثال فوق، تابع compareArrays() دو آرایه a و b را به عنوان آرگومان می‌گیرد. ابتدا بررسی می‌کند که آیا طول آرایه‌ها برابر هستند یا خیر و اگر آن‌ها برابر نباشند، بلافاصله مقدار falseرا برمی‌گرداند که نشان می‌دهد طول آرایه‌ها برابر نیستند.

شیوه مقایسه آرایه در جاوا اسکریپت

در مرحله بعد، از متد every()برای پیمایش هر عنصر از اولین آرایه (a) استفاده می‌شود. برای هر عنصر با استفاده از اندیس آن را با عنصر مربوطه در آرایه دوم (b) مقایسه می‌کند. اگر هر یک از عناصر نابرابر تشخیص داده شوند، متد every()پیمایش را متوقف می‌کند و false را برمی‌گرداند.

اگر متد every()بدون یافتن هیچ عنصر نامساوی تکمیل شود و طول آرایه‌ها برابر باشند، تابع compareArrays()مقدار true را برمی‌گرداند که نشان می‌دهد آرایه‌ها برابر هستند. علاوه بر این، هنگامی که مقادیر تهی یا تعریف نشده به عنوان عناصر در آرایه‌ها وجود دارند، این متد می‌تواند تفاوت‌های آن‌ها را به دقت تشخیص دهد که مثال زیر برای بیان این مفهوم آورده شده است.

1const compareArrays = (a, b) =>
2  a.length === b.length && a.every((element, index) => element === b[index]);
3
4let array1 = [11, null, 33];
5let array2 = [21, 22, 23];
6let array3 = [11, undefined, 33];
7
8console.log(compareArrays(array1, array2)); //false
9console.log(compareArrays(array1, array3)); //false

در مثال فوق، تابع compareArrays()به درستی تفاوت‌های بین آرایه‌های حاوی مقادیر تهی و تعریف‌نشده را شناسایی می‌کند و برای هر ۲ مقایسه، مقدار falseرا بازمی‌گرداند.

مقایسه دو آرایه در JavaScript با حلقه For

روش دیگر برای مقایسه دو آرایه در جاوا اسکریپت، استفاده از حلقه For، همراه با سایر روش‌های پیمایش آرایه مانند ForEach در جاوا اسکریپت یا Map در جاوا اسکریپت در ترکیب با دستورات ifاست. این روش می‌تواند درک شهودی‌تری را به خصوص برای مبتدیان ارائه دهد.

در ادامه مثالی از پیاده‌سازی مقایسه آرایه‌ها در جاوا اسکریپت با استفاده از حلقه for آورده شده است.

1const compareArrays = (a, b) => {
2  if (a.length !== b.length) return false;
3  else {
4    // Comparing each element of your array
5    for (var i = 0; i < a.length; i++) {
6      if (a[i] !== b[i]) {
7        return false;
8      }
9    }
10    return true;
11  }
12};
13
14let array1 = [21, null, 33];
15let array2 = [21, 22, 23];
16let array3 = [21, undefined, 33];
17let array4 = [21, 22, 23];
18
19console.log(compareArrays(array1, array2)); //false
20console.log(compareArrays(array1, array3)); //false
21console.log(compareArrays(array2, array4)); //true

در مثال فوق، تابع compareArrays()دو آرایه aو bرا به عنوان آرگومان می‌گیرد. ابتدا بررسی می‌کند که آیا طول آرایه‌ها برابر هستند یا خیر و اگر برابر نباشند، بلافاصله falseرا برمی‌گرداند که نشان می‌دهد آرایه‌ها برابر نیستند. اگر طول‌ها برابر باشند، تابع با استفاده از حلقه forهر عنصر آرایه را پیمایش می‌کند، عناصر را در هر دو آرایه با اندیس یکسان مقایسه می‌کند و اگر هر یک از عناصر نابرابر تشخیص داده شود، تابع مقدار falseرا برمی‌گرداند.

اگر حلقه forبدون یافتن عناصر نابرابر کامل شود و طول آرایه‌ها برابر باشد، تابع compareArrays()مقدار TRUE برمی‌گرداند که نشان می‌دهد آرایه‌ها برابر هستند. با مقایسه هر عنصر با استفاده از حلقه for، می‌توان برابری آرایه‌ها را به دقت تعیین کرد. این رویکرد زمانی مفید است که کاربر بخواهد کنترل بیشتری بر فرآیند مقایسه داشته باشد و استفاده از ساختارهای حلقه سنتی را ترجیح دهد.

کدام رویکرد مقایسه آرایه بهتر است؟

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

باید به این نکته هم توجه داشت که می‌توان سناریوهایی را نیز برای مقایسه آرایه‌ها در جاوا اسکریپت در نظر گرفت که در آن‌ها مقادیر تهی یا تعریف نشده در آرایه‌ها وجود دارد، زیرا این مقادیر می‌توانند بر نتایج مقایسه تأثیر بگذارند.

سخن پایانی

در این مطلب از مجله فرادرس، ۲ رویکرد اصلی را برای مقایسه دو آرایه در جاوا اسکریپت پوشش دادیم. روش اول شامل تبدیل آرایه‌ها به رشته قبل از مقایسه است. این کار را می‌توان با استفاده از متدهایی مانند JSON.stringify() یا .toString() انجام داد. با مقایسه نمایش رشته‌های آرایه‌ها، می‌توان برابری آن‌ها را تعیین کرد.

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

بر اساس رای ۵ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
FreeCodeCamp
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *