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

با سلام، در این قسمت از سری آموزشی برنامه نویسی جاوا اسکریپت به مبحث مرتب سازی (sort) در آرایه ها می پردازیم. بهتر است بدون مقدمه به سراغ متدها و روش های مربوط به این کار برویم.

متد ()sort

این متد، اعضای آرایه ها را بر اساس ترتیب الفبایی (الفبای انگلیسی) مرتب می کند:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();        // Sorts the elements of fruits

اعضای این آرایه پس از مرتب سازی به صورت "Apple,Banana,Mango,Orange" نمایش داده خواهند شد. دقت کنید که ایندکس ها جا به جا نمی شوند، بنابراین ایندکس تمام این اعضا عوض می شود. به چه صورت؟

در آرایه ی اصلی، عضو Banana دارای ایندکس شماره 0 بود اما الان دارای ایندکس شماره 1 است چرا که از عضو اول به عضو دوم تغییر مکان داده است.

متد ()reverse

این متد ترتیب اعضای یک آرایه را برعکس می کند:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order.</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
// Create and display an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  // First sort the array
  fruits.sort();
  // Then reverse it:
  fruits.reverse();
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

در کد بالا ابتدا با دستور ()sort اعضای آرایه را بر اساس الفبای انگلیسی مرتب می کنیم و سپس با دستور ()reverse ترتیب ایجاد شده را برعکس کرده ایم. آرایه ی خروجی از این کد به صورت "Orange,Mango,Banana,Apple" است.

نکته: اگر اعضای آرایه ی شما اعداد رشته ای باشند (مثلا "25")، استفاده از این دستور برای شما مشکل ایجاد می کند. چرا که از نظر جاوا اسکریپت "25" از "100" بزرگتر است! چرا؟ چون 2 از 1 بزرگتر است! این شیوه ی برخورد جاوا اسکریپت با رشته ها است بنابراین مراقب باشید که چنین اشتباهی نکنید.

برای حل این مشکل می توانید از راه حلی به نام compare function (به معنی تابع نمونه یا تابع مقایسه) استفاده کنید:

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

تابعی که به عنوان پارامتر به متد ()sort داده شده است یک قالب برای کار تعریف کرده و مشکل را حل می کند. مثالی از compare function:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">مرتب کردن بر اساس الفبا</button>
<button onclick="myFunction2()">مرتب کردن بر اساس اعداد</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

این کد را به عنوان نمونه به شما داده ام تا با آن بازی بازی کنید و کد ها را تغییر دهید تا به این مفهوم احاطه کامل پیدا کنید. از آن جایی که قرار است برای یادگیری آن را تغییر دهید و از طرفی به دلیل اینکه این کد دارای دو دکمه ی HTML است حتما باید خروجی آن را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

تابع compare function در مثال بالا به این صورت عمل میکنند: زمانی که متد sort میخواهد دو مقدار را مقایسه کند تا ببیند کدام ترتیب بالاتری دارد، آن ها را به compare function می فرستد. مثلا وقتی قرار است 40 و 100 را مقایسه کند آن ها را به compare function می دهد.

compare function نیز مقدار 100 - 40 را حساب می کند و به مقدار 60- می رسد (که یک مقدار منفی است) بنابراین متد sort عدد 40 را پایین تر از 100 قرار می دهد و بر این اساس است که می فهمد کوچکتر است.

در ادامه چند عدد از compare function های آماده را برای شما می آورم تا بیشتر با مفهوم شان آشنا شوید.

مرتب کردن آرایه به صورت تصادفی (random)

برای مرتب کردن به صورت تصادفی (یا به زبان ساده، بهم ریختن تابع) از compare function زیر استفاده کنید:

points.sort(function(a, b){return 0.5 - Math.random()});

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

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

پیدا کردن بزرگترین یا کوچکترین مقدار آرایه

ما برای این کار از ترفند زیر استفاده می کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

فهمیدید چه کار کردیم؟ ابتدا آرایه را مرتب کردیم (با استفاده از تابع مقایسه و بر اساس اعداد، نه الفبا) و حالا که می دانیم بر اساس مقدار مرتب شده است، مشخص است که بالاترین ایندکس همان بیشترین مقدار خواهد بود.

البته باید بدانید که مرتب کردن کامل یک تابع برای پیدا کردن بزرگترین مقدار کار درستی نیست و منابع زیادی را هدر می دهد. روش صحیح تر استفاده از ()Math.max است.

استفاده از ()Math.max برای پیدا کردن بیشترین مقدار آرایه

به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

دستور (Math.max.apply(null, [1, 2, 3] دقیقا با دستور (Math.max(1, 2, 3 یکی است و می توانید از هر دو استفاده کنید.

استفاده از ()Math.min برای پیدا کردن کمترین مقدار آرایه

این متد دقیقا برعکس ()Math.max عمل می کند و کمترین مقدار آرایه را پیدا میکند. در ضمن یادتان باشد زمانی که می گوییم کمترین مقدار آرایه یا بیشترین مقدار آرایه منظورمان همان کوچکترین و بزرگترین عضو آرایه است. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

دستور (Math.min.apply(null, [1, 2, 3] دقیقا با دستور (Math.min(1, 2, 3 یکی است و می توانید از هر دو استفاده کنید.

توابع خودتان را بنویسید!

یادتان باشد که شما همیشه می توانید توابع خودتان را نیز بنویسید! نیازی نیست حتما از این متدها و روش های معرفی شده استفاده کنید. یکی از توابعی که می توانید برای پیدا کردن بیشترین مقدار بنویسید، تابع زیر است:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  var len = arr.length;
  var max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
</script>

</body>
</html>

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

امیدوارم از این قسمت استفاده کرده باشید.