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

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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  برای به دست آوردن نمایش رشته‌ای از آرایه برای این هدف بهره برد.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

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() است که به کاربر امکان می‌دهد هر آرایه به نوعی رشته جیسون تبدیل کند. سپس این متد می‌تواند رشته‌های جیسون حاصل را مقایسه کرده تا مشخص کند که آیا آرایه‌ها برابر هستند یا خیر.

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس

کلیک کنید

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

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()‎  است. این متد هر نوع داده‌ای از جمله آرایه‌ها را به نوعی نمایش رشته‌ای تبدیل می‌کند.

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

کلیک کنید

در اینجا مثالی از استفاده از .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() ، می‌توان به راحتی هر دو آرایه را با ارسال آن‌ها به عنوان آرگومان مقایسه کرد. این تابع آرایه‌ها را به نمایش رشته‌هایشان تبدیل می‌کند و سپس آن‌ها را با هم مقایسه خواهد کرد. در کل این متد روشی مناسب برای تعیین برابری یا نبودن آرایه‌ها ارائه می‌کند.

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

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

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

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

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

کلیک کنید

به عنوان مثال، هنگامی که آرایه‌ای حاوی مقادیر «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  نیز شناخته می‌شود، می‌تواند به پارامترهایی مانند عنصر فعلی، اندیس و غیره دسترسی داشته باشد.

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

سینتکس متد 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 است. این روش می‌تواند درک شهودی‌تری را به خصوص برای مبتدیان ارائه دهد.

فیلم آموزش آلپاین در جاوا اسکریپت – فریم ورک Alpine در JavaScript در فرادرس

کلیک کنید

در ادامه مثالی از پیاده‌سازی مقایسه آرایه‌ها در جاوا اسکریپت با استفاده از حلقه 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 ، می‌توان برابری آرایه‌ها را به دقت تعیین کرد. این رویکرد زمانی مفید است که کاربر بخواهد کنترل بیشتری بر فرآیند مقایسه داشته باشد و استفاده از ساختارهای حلقه سنتی را ترجیح دهد.

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

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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