revision:
The toSorted() method of Array instances is the copying version of the sort() method. It returns a new array with the elements sorted in ascending order.
// Functionless
toSorted()
// Arrow function
toSorted((a, b) => { /* … */ })
// Compare function
toSorted(compareFn)
// Inline compare function
toSorted(function compareFn(a, b) { /* … */ })
Parameters:
compareFn : optional. Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.
a : the first element for comparison.
b : the second element for comparison.
<div>
<p id="sorted-1"></p>
<p id="sorted-2"></p>
<p id="sorted-3"></p>
<p id="sorted-4"></p>
<p id="sorted-5"></p>
<p id="sorted-6"></p>
</div>
<script>
const months = [" Mar", " Jan", " Feb", " Dec"];
document.getElementById("sorted-1").innerHTML = "months : " + months;
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
document.getElementById("sorted-2").innerHTML = "sorted months : " + sortedMonths;
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']
document.getElementById("sorted-3").innerHTML = "months : " + months;
const values = [1, 10, 21, 2]
document.getElementById("sorted-4").innerHTML = "values : " + values;
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
document.getElementById("sorted-5").innerHTML = "sorted values : " + sortedValues;
console.log(values); // [1, 10, 21, 2]
document.getElementById("sorted-6").innerHTML = "values : " + values;
</script>
<div>
<p id="sorted-7"></p>
<p id="sorted-8"></p>
<p id="sorted-9"></p>
</div>
<script>
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
];
document.getElementById("sorted-7").innerHTML = "array : " + "<br>" + JSON.stringify(items);
const byValues= items.sort((a, b) => a.value - b.value);
document.getElementById("sorted-8").innerHTML = "sorted by value : " + "<br>" + JSON.stringify(byValues);
const byName = items.sort((a, b) => {
const nameA = a.name.toUpperCase();
const nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
document.getElementById("sorted-9").innerHTML = "sorted by name : " + "<br>" + JSON.stringify(byName);
</script>
<div>
<p id="sorted-10"></p>
<p id="sorted-11"></p>
<p id="sorted-12"></p>
</div>
<script>
const numbers = [3, 4, 1, 5, 2];
console.log(numbers); // Output: [3, 4, 1, 5, 2]
document.getElementById("sorted-10").innerHTML = "array : " + numbers;
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4, 5]
document.getElementById("sorted-11").innerHTML = "sorted array : " + sortedNumbers;
</script>