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

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

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

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

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

کلیک کنید

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

 ) یا «عملگر برابری دقیق» ( ===

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

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1 == array2); //false
console.log(array1 === array2); //false

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

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

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

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

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

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

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

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

کلیک کنید

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

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

متد JSON.stringify()

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

به سادگی عناصر آرایه را به رشته‌ای جدا شده با کاما پیوند می‌دهد. با تبدیل آرایه‌ها به رشته، می‌توان آن‌ها را با استفاده از عملگرهای برابری ( ==

 یا ===

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

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

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

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

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

کلیک کنید

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

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true

با اعمال JSON.stringify()

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

) آن‌ها را مقایسه کرد.

 

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

const compareArrays = (a, b) => {
  return JSON.stringify(a) === JSON.stringify(b);
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

با استفاده از تابع comareArrays()

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

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

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

 است. این متد هر نوع داده‌ای از جمله آرایه‌ها را به نوعی نمایش رشته‌ای تبدیل می‌کند.

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

کلیک کنید

در اینجا مثالی از استفاده از .toString()‎

برای مقایسه دو آرایه آورده شده است.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1.toString() === array2.toString()); //true

با اعمال .toString()‎

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

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

const compareArrays = (a, b) => {
  return a.toString() === b.toString();
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

با استفاده از تابع comareArrays()

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

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

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

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

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

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

کلیک کنید

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

 را بازمی‌گرداند. مثال زیر این مفهوم را بیان می‌کند:

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

با این حال، هنگام استفاده از متدهای JSON.stringify()

یا .toString()‎

، مقایسه به اشتباه true

 را بازمی‌گرداند:

let array1 = [11, null, 33];
let array2 = [11, undefined, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
console.log(array1.toString() === array2.toString()); //true

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

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

متد every()

 به عنوان یکی از متدهای آرایه در جاوا اسکریپت زمانی مفید است که کاربر بخواهد برای هر عنصر آرایه نوعی تابع را اجرا کند. این تابع که به عنوان تابع callback

 نیز شناخته می‌شود، می‌تواند به پارامترهایی مانند عنصر فعلی، اندیس و غیره دسترسی داشته باشد.

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

کلیک کنید

سینتکس متد every()

به صورت زیر است:

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

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

const compareArrays = (a, b) =>
  a.length === b.length &&
  a.every((element, index) => element === b[index]);

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

در مثال فوق، تابع compareArrays()

 دو آرایه a

 و b

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

را برمی‌گرداند که نشان می‌دهد طول آرایه‌ها برابر نیستند.

در مرحله بعد، از متد every()

برای پیمایش هر عنصر از اولین آرایه ( a

) استفاده می‌شود. برای هر عنصر با استفاده از اندیس آن را با عنصر مربوطه در آرایه دوم ( b

) مقایسه می‌کند. اگر هر یک از عناصر نابرابر تشخیص داده شوند، متد every()

پیمایش را متوقف می‌کند و false

 را برمی‌گرداند.

اگر متد every()

بدون یافتن هیچ عنصر نامساوی تکمیل شود و طول آرایه‌ها برابر باشند، تابع compareArrays()

مقدار true

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

const compareArrays = (a, b) =>
  a.length === b.length && a.every((element, index) => element === b[index]);

let array1 = [11, null, 33];
let array2 = [21, 22, 23];
let array3 = [11, undefined, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false

در مثال فوق، تابع compareArrays()

به درستی تفاوت‌های بین آرایه‌های حاوی مقادیر تهی و تعریف‌نشده را شناسایی می‌کند و برای هر ۲ مقایسه، مقدار false

را بازمی‌گرداند.

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

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

است. این روش می‌تواند درک شهودی‌تری را به خصوص برای مبتدیان ارائه دهد.

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

کلیک کنید

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

 آورده شده است.

const compareArrays = (a, b) => {
  if (a.length !== b.length) return false;
  else {
    // Comparing each element of your array
    for (var i = 0; i 

در مثال فوق، تابع compareArrays()

دو آرایه a

و b

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

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

هر عنصر آرایه را پیمایش می‌کند، عناصر را در هر دو آرایه با اندیس یکسان مقایسه می‌کند و اگر هر یک از عناصر نابرابر تشخیص داده شود، تابع مقدار false

را برمی‌گرداند.

اگر حلقه for

بدون یافتن عناصر نابرابر کامل شود و طول آرایه‌ها برابر باشد، تابع compareArrays()

مقدار TRUE

 برمی‌گرداند که نشان می‌دهد آرایه‌ها برابر هستند. با مقایسه هر عنصر با استفاده از حلقه for

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

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

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

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

کلیک کنید

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

سخن پایانی

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

 یا .toString()

 انجام داد. با مقایسه نمایش رشته‌های آرایه‌ها، می‌توان برابری آن‌ها را تعیین کرد.

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

کلیک کنید

روش دوم این است که آرایه‌ها را پیمایش و مقادیر آن‌ها را عنصر به عنصر مقایسه کنیم. این را می‌توان با استفاده از روش‌های پیمایش آرایه مانند استفاده از متد every

 یا ساختارهای حلقه سنتی مانند حلقه for

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