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

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

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

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

ابجکت آرایه جاوا اسکریپت دارای متد ()sort میباشد که برای مرتب‌سازی عناصر آرایه به ترتیب حروف الفبا است. مثال زیر نحوه عملکرد آن را نشان می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sort an Array Alphabetically</title>
</head>
<body>
    <script>
    var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
    var sorted = fruits.sort();
    
    document.write(fruits + "<br>"); // Outputs: Apple,Banana,Mango,Orange,Papaya
    document.write(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Sort an Array Alphabetically</title>

</head>

<body>

var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];

var sorted = fruits.sort();

document.write(fruits + "<br>"); // Outputs: Apple,Banana,Mango,Orange,Papaya

document.write(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya

</script>

</body>

</html>

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

می توانید از متد ()reverse برای معکوس کردن ترتیب عناصر یک آرایه استفاده کنید.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Reverse the Order of an Array</title>
</head>
<body>
    <script>
    var counts = ["one", "two", "three", "four", "five"];
    var reversed = counts.reverse(); 
    
    document.write(counts + "<br>"); // Outputs: five,four,three,two,one
    document.write(reversed); // Output: five,four,three,two,one
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Reverse the Order of an Array</title>

</head>

<body>

var counts = ["one", "two", "three", "four", "five"];

var reversed = counts.reverse();

document.write(counts + "<br>"); // Outputs: five,four,three,two,one

document.write(reversed); // Output: five,four,three,two,one

</script>

</body>

</html>

توجه: روش ()sort و ()reverse آرایه اصلی را اصلاح می کند،به عبارت دیگر ارایه اصلی همان مقادیر سورت یا معکوس شده را به خود میگیرد همانطور که در مثال های بالا مشاهده می کنید.

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

متد()sort زمانی که روی آرایه های عددی اعمال می شود (مثلاً آرایه هایی حاوی مقادیر عددی) ممکن است نتیجه غیرمنتظره ای ایجاد کند. برای مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sort a Numeric Array</title>
</head>
<body>
    <script>
    var numbers = [5, 20, 10, 75, 50, 100];
    numbers.sort(); // Sorts numbers array
    document.write(numbers); // Outputs: 10,100,20,5,50,75
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Sort a Numeric Array</title>

</head>

<body>

var numbers = [5, 20, 10, 75, 50, 100];

numbers.sort(); // Sorts numbers array

document.write(numbers); // Outputs: 10,100,20,5,50,75

</script>

</body>

</html>

همانطور که می بینید، نتیجه با آنچه ما انتظار داشتیم متفاوت است. از آن جایی که متد ()sort عناصر آرایه عددی را با تبدیل آنها به رشته مرتب می کند. این اتفاق میافتد. (یعنی 20 تبدیل به “20” ، 100 تبدیل به “100” و …میشود) و از اولین کاراکتر رشته “20” (یعنی “2”) بعد از اولین کاراکتر رشته “100” (یعنی “1”) می آید، به همین دلیل است که مقدار 20 بعد از 100 مرتب می شود.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sort a Numeric Array Correctly Using Compare Function</title>
</head>
<body>
    <script>
    var numbers = [5, 20, 10, 75, 50, 100];

    // Sorting an array using compare function
    numbers.sort(function(a, b) {
        return a - b;
    });
    document.write(numbers); // Prints: 5,10,20,50,75,100
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Sort a Numeric Array Correctly Using Compare Function</title>

</head>

<body>

var numbers = [5, 20, 10, 75, 50, 100];

// Sorting an array using compare function

numbers.sort(function(a, b) {

return a - b;

});

document.write(numbers); // Prints: 5,10,20,50,75,100

</script>

</body>

</html>

همانطور که می بینید، این بار ما به نتیجه صحیح رسیده ایم. بیایید ببینیم چگونه کار می کند.

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

از این رو، از آنجایی که 15-= 20-5 که کمتر از 0 است، بنابراین 5 اول می شود، به طور مشابه 10 =10-20 که بزرگتر از 0 است، بنابراین 10 قبل از 20 می آید، همچنین 55-= 75-20 که کمتر از 0 است. بنابراین 20 قبل از 75 می آید، به طور مشابه 50 قبل از 75 می آید و ….

پیدا کردن مینیمم و ماکزیمم در یک ارایه

می‌توانید از متد ()apply در ترکیب با ()Math.max و ()Math.min برای یافتن حداکثر و حداقل مقدار داخل یک آرایه استفاده کنید،به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Find the Maximum and Minimum Value in an Array</title>
</head>
<body>
    <script>
    var numbers = [3, -7, 10, 8, 15, 2];

    // Defining function to find maximum value
    function findMax(array){
        return Math.max.apply(null, array);
    }
    
    // Defining function to find minimum value
    function findMin(array){
        return Math.min.apply(null, array);
    }
    
    document.write(findMax(numbers) + "<br>"); // Outputs: 15
    document.write(findMin(numbers)); // Outputs: -7
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Find the Maximum and Minimum Value in an Array</title>

</head>

<body>

var numbers = [3, -7, 10, 8, 15, 2];

// Defining function to find maximum value

function findMax(array){

return Math.max.apply(null, array);

}

// Defining function to find minimum value

function findMin(array){

return Math.min.apply(null, array);

}

document.write(findMax(numbers) + "<br>"); // Outputs: 15

document.write(findMin(numbers)); // Outputs: -7

</script>

</body>

</html>

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

بنابراین،عبارتMath.max.apply(null,numbers)در مثال بالا معادل Math.max(3, -7, 10, 8, 15, 2) میباشد.

مرتب سازی آرایه ای از اشیاء

متد()sort همچنین می تواند برای مرتب سازی آرایه های ابجکتیبه کمک تابع مقایسه استفاده شود.

مثال زیر به شما نشان می دهد که چگونه یک آرایه از اشیاء را بر اساس مقادیر پراپرتی ها مرتب کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Sort an Array of Objects</title>
</head>
<body>
    <script>
    var persons = [
        { name: "Harry", age: 14 },
        { name: "Ethan", age: 30 },
        { name: "Peter", age: 21 },
        { name: "Clark", age: 42 },
        { name: "Alice", age: 16 }
    ];
    
    // Sort by age
    persons.sort(function (a, b) {
        return a.age - b.age;
    });
    
    console.log(persons);
    
    // Sort by name
    persons.sort(function(a, b) {
        var x = a.name.toLowerCase(); // ignore upper and lowercase
        var y = b.name.toLowerCase(); // ignore upper and lowercase
        if(x < y) {
            return -1;
        }
        if(x > y) {
            return 1;
        }
        // names must be equal
        return 0;
    });
    
    // Loop through all the elements in the array 
    for(var i in persons)  {  
        // Loop through all the properties in the object  
        for(var prop in persons[i]) {  
            document.write(prop + ": " + persons[i][prop] + "<br>"); 
        }
        document.write("<hr>");
    }
    </script>
</body>
</html>
//خروجی
name: Alice
age: 16
name: Clark
age: 42
name: Ethan
age: 30
name: Harry
age: 14
name: Peter
age: 21

<!DOCTYPE html>

<head>

<title>JavaScript Sort an Array of Objects</title>

</head>

<body>

var persons = [

{ name: "Harry", age: 14 },

{ name: "Ethan", age: 30 },

{ name: "Peter", age: 21 },

{ name: "Clark", age: 42 },

{ name: "Alice", age: 16 }

];

// Sort by age

persons.sort(function (a, b) {

return a.age - b.age;

});

console.log(persons);

// Sort by name

persons.sort(function(a, b) {

var x = a.name.toLowerCase(); // ignore upper and lowercase

var y = b.name.toLowerCase(); // ignore upper and lowercase

if(x < y) {

return -1;

}

if(x > y) {

return 1;

}

// names must be equal

return 0;

});

// Loop through all the elements in the array

for(var i in persons) {

// Loop through all the properties in the object

for(var prop in persons[i]) {

document.write(prop + ": " + persons[i][prop] + "<br>");

}

document.write("<hr>");

}

</script>

</body>

</html>

//خروجی

age: 16

age: 42

age: 30

age: 14

age: 21

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

سایر مقالات

تبدیل نوع داده(Type Conversions)در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]

اشتراک‌گذاری

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

رویدادها (Event) در جاوا اسکریپت نوشته بعد

علی فرجی

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