JavaScript Array Sort
JavaScript Tutorial » JavaScript Array Sort
JavaScript Array object has a built-in method sort() for sorting array elements by numbers, alphabetical order.
Array:
Example:
Audi,BMW,Ferrari,Ford,Volvo
Audi,BMW,Ferrari,Ford,Volvo
<script>
var cars = ["Audi", "Ferrari", "Ford", "Volvo", "BMW"];
var sorted = cars.sort();
document.write(cars + "<br>");
document.write(sorted);
</script>
output:var cars = ["Audi", "Ferrari", "Ford", "Volvo", "BMW"];
var sorted = cars.sort();
document.write(cars + "<br>");
document.write(sorted);
</script>
Audi,BMW,Ferrari,Ford,Volvo
Audi,BMW,Ferrari,Ford,Volvo
JavaScript Array Sort by Date - example
you have an array of objects like this, which contains a set of date objects and you need to sort those activities by the date property
Example:
var persons = [
{ name: "Harry", date: new Date('2019') },
{ name: "Ethan", date: new Date('2010') },
{ name: "Peter", date: new Date('2018') },
{ name: "Clark", date: new Date('2014') },
{ name: "Alice", date: new Date('2016') }
];
{ name: "Harry", date: new Date('2019') },
{ name: "Ethan", date: new Date('2010') },
{ name: "Peter", date: new Date('2018') },
{ name: "Clark", date: new Date('2014') },
{ name: "Alice", date: new Date('2016') }
];
The sort() method can also be used for sorting arrays Sort by Date using the compare function.
Example:
<script>
var persons = [
{ name: "Harry", date: new Date('2019') },
{ name: "Ethan", date: new Date('2010') },
{ name: "Peter", date: new Date('2018') },
{ name: "Clark", date: new Date('2014') },
{ name: "Alice", date: new Date('2016') }
];
persons.sort(function (a, b) {
return b.date - a.date;
});
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>
JavaScript Array Sort Numbers - example
sort() method may produce unexpected result when it is applied on the numeric arra
Example: syntax
As you can see, the result is different from what we've expected. or: Array can also be created using the Array(). To fix this sorting problem with numeric array, you can pass a compare function, like this:
<script>
var numbers = [15, 230, 11, 67, 49, 110];
numbers.sort(); // Sorts numbers array
document.write(numbers); // Outputs: 11,110,15,230,49,67
</script>
var numbers = [15, 230, 11, 67, 49, 110];
numbers.sort(); // Sorts numbers array
document.write(numbers); // Outputs: 11,110,15,230,49,67
</script>
As you can see, the result is different from what we've expected. or: Array can also be created using the Array(). To fix this sorting problem with numeric array, you can pass a compare function, like this:
<script>
var numbers = [15, 230, 11, 67, 49, 110];
// Sorting an array using compare function
numbers.sort(function(a, b) {
return a - b;
});
document.write(numbers); // output: 11,15,49,67,110,230
</script>
var numbers = [15, 230, 11, 67, 49, 110];
// Sorting an array using compare function
numbers.sort(function(a, b) {
return a - b;
});
document.write(numbers); // output: 11,15,49,67,110,230
</script>
JavaScript Array Sort by Property, example
an array of JavaScript objects like this:
Example:
<script>
var objs = [
{ first_name: 'Chrys', last_name: 'Batman' },
{ first_name: 'Joe', last_nme: 'Langford' },
{ first_name: 'Adona', last_name: 'Ford' }
];
</script>
var objs = [
{ first_name: 'Chrys', last_name: 'Batman' },
{ first_name: 'Joe', last_nme: 'Langford' },
{ first_name: 'Adona', last_name: 'Ford' }
];
</script>
How can you sort them by the value of last_name?
Example:
write your own comparison function as:
<script>
var objs = [
{ first_name: 'Chrys', last_name: 'Batman' },
{ first_name: 'Joe', last_nme: 'Langford' },
{ first_name: 'Adona', last_name: 'Ford' }
];
function compare( a, b ) {
if ( a.last_name < b.last_name ){
return -1;
}
if ( a.last_name > b.last_name ){
return 1;
}
return 0;
}
objs.sort( compare );
</script>
javascript array sort by date, numbers, by property, reverse, by value, string, objects, random, function, desc
JavaScript Array Sort - javascript tutorial
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.