JavaScript Sorting Arrays:-
Sorting an Array:-
Sorting is a common task when working with arrays. It would be used, for instance, if you want to display the city or county names in alphabetical order.
The JavaScript Array object has a built-in method sort() for sorting array elements in alphabetical order. The following example demonstrates how it works:
<!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>
Output:-
Apple,Banana,Mango,Orange,Papaya
Apple,Banana,Mango,Orange,Papaya
Reversing an Array:-
You can use the reverse() method to reverse the order of the elements of an array.
This method reverses an array in such a way that the first array element becomes the last, and the last array element becomes the first. Here’s an example:
<!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>
Output:-
five,four,three,two,one
five,four,three,two,one
Sorting Numeric Arrays:-
The sort() method may produce unexpected result when it is applied on the numeric arrays (i.e. arrays containing numeric values). For example’
<!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>
Output:-
10,100,20,5,50,75
Finding the Maximum and Minimum Value in an Array:-
You can use the apply() method in combination with the Math.max() and Math.min() to find the maximum and minimum value inside an array, like this:
Example
<!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>
Output:-
15
-7
Sorting an Array of Objects:-
The sort() method can also be used for sorting object arrays using the compare function.
The following example will show you how to sort an array of objects by property values:
Example
<!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>
Output:-
name: Alice
age: 16
name: Clark
age: 42
name: Ethan
age: 30
name: Harry
age: 14
name: Peter
age: 21