Javascript map сортировка по ключу

How to sort a map by value in JavaScript? [SOLVED]

People can easily comprehend data when there is a pattern or order to it, and one of the easiest ones is the ascending, descending, or alphabetical order of data. It’s easier to monitor or use a series of numbers (e.g statistics) when they ascend or descend (1 to 10 or 10 to 1), or a series of words when they are alphabetical (a to Z or Z to a).

To achieve this necessary state, the sort operation is important, and within JavaScript (JS), there are methods that help us to achieve this sort operation. However, it can be a little complex when you have a key-value pair relationship (such as objects, maps, etc.) between values and need to sort by the value side.

In this article, we will understand how to sort a map by its value in JS in ascending or descending order when it comes to number and string values.

What are Maps?

The key-value pair structure

There are different data structures that programming languages like JS support, and are helpful when we design algorithms for our applications. Some data structures make use of key-value relationships between different data types. Primitive data types such as String, Number, Boolean, and Symbol are often used as either the key or value in these types of data structures giving them a lot of extensive features. One of such data structures is the popular object .

Objects

Objects allow us to group data values together to create relationships using the key-value relationship. Often, objects keys are called properties and have what’s called a property-value relationship. Objects, themselves, can hold other objects making for an interesting data structure.

Let’s create a simple object with the obj binding.

The properties we assign to the obj object are not the only properties it holds and can often become an issue especially when we only need the properties we assign to it.

console.log("toString" in obj) 

All the properties we assigned are simply enumerable, and the other properties are non-enumerable. The non-enumerable properties are obtained from the Object.prototype which is used to create the object itself. The output above occurs because there is a toString method that is inherited from Object.prototype .

To have none of the properties from the Object.prototype , we can make use of the data structure called Map .

Maps

Maps are data structures that have key-value relationships or associations where the keys and values can be of any data type (unlike objects where the key has to be a Symbol or String). With Maps, only the key and values we assign are present within it.

let map = new Map(); map.set("1-1", "foo"); map.set("0-1", "bar"); map.set("2-1", "baff"); console.log(map) 

Map(3) < '1-1' =>'foo', '0-1' => 'bar', '2-1' => 'baff' >

The new Map() creates the empty Map, and the set() function insert new key-value relationship. We can check the same toString value within the map binding we created.

How to sort maps by key

To sort a map, we need a sort function. Though the map data structure doesn’t have its own, objects (arrays or generally iterable) have a sort function we can make use of. Let’s experiment with a simple object

let arr = [2, 3, 0, 9, 5, 2] console.log(arr.sort()); 

Now, we need a way to convert a Map to an iterable that we can sort, and there is a method for that, entries() . The method returns an iterable of key, value pairs for every entry in the map.

let fruit = new Map(); fruit.set("orange", 12); fruit.set("apple", 30); fruit.set("banana", 20); fruit.set("tangerine", 13); console.log(fruit.entries()) 

Now, we have an iterator object within contains arrays of the key and value at position 0 and 1 respectively for each array.

With this iterator object, we create a new array using the spread operator, . resulting in an array of arrays — [. fruit.entries()] . On this array, we can apply the sort() method. The sort() method uses the first value of the inner array to sort the array of arrays.

console.log([. fruit.entries()].sort()); 

[ [ 'apple', 30 ], [ 'banana', 20 ], [ 'orange', 12 ], [ 'tangerine', 13 ] ]

Using this sorted array, we can create a new Map using the new Map() expression

let sortedFruit = new Map([. fruit.entries()].sort()); console.log(sortedFruit); 

Map(4) < 'apple' =>30, 'banana' => 20, 'orange' => 12, 'tangerine' => 13 >

Different methods to sort maps by value

Now, let’s get to the crux of the matter. In the previous section, we sorted the map using just the key value which is the first value (position 0 ) within the array of the Map Entries . Here, we will map sort by value in JS using two methods depending on the data type of the values we have.

All the previous logic and code apply but with some addition to the sort() expression. Previously, we didn’t pass any argument to the sort function. To sort the value part of the key-value pair, we will need to pass an anonymous function. Depending on the data type of the value, we can use different functions

Method 1: Sort By String Values

For String values, we can use the localeCompare , which determines whether two strings are equivalent in the current or specified locale. If the reference string is lexicographically greater than the compare string, localCompare returns a positive number , and if the opposite, it returns a negative number . However, if both strings are equivalent, it returns 0 .

console.log("b".localeCompare("a")); console.log("a".localeCompare("Z")); 

So, with this function, we can use the anonymous function to compare the values.

Remember, when we use the map.entries() method, we get an iterator object with arrays representing each Map entry. There are two values within each array (e.g [ ‘apple’, 30 ] ) with the first value representing the key , and the second value representing the value . Therefore, the value will have a positional value of 1 within the array.

Let’s create a Map with string values .

let map = new Map(); map.set("1-1", "foo"); map.set("0-1", "bar"); map.set("2-1", "baff"); map.set("3-1", "bafx"); console.log(map); 

Map(4) < '1-1' =>'foo', '0-1' => 'bar', '2-1' => 'baff', '3-1' => 'bafx' >

Now, let’s sort using the logic we have described

let sortedMapValues = new Map( [. map.entries()].sort((a, b) => String(a[1]).localeCompare(b[1])) ); console.log(sortedMapValues); 

Map(4) < '2-1' =>'baff', '3-1' => 'bafx', '0-1' => 'bar', '1-1' => 'foo' >

Everything is sorted alphabetically from a — z . To start from z — a , we can switch the reference string and compared string .

let sortedMapValues = new Map( [. map.entries()].sort((a, b) => String(b[1]).localeCompare(a[1])) ); console.log(sortedMapValues); 

Map(4) < '1-1' =>'foo', '0-1' => 'bar', '3-1' => 'bafx', '2-1' => 'baff' >

Method 2: Sort By Numeric Values

To sort numeric values, the simple process of subtraction helps with sorting the number where we compare the first value to the previous value, and the result of the subtraction determines its position.

Let’s use the same fruit Map.

let fruit = new Map(); fruit.set("orange", 12); fruit.set("apple", 30); fruit.set("banana", 20); fruit.set("tangerine", 13); console.log(fruit); 

Map(4) < 'orange' =>12, 'apple' => 30, 'banana' => 20, 'tangerine' => 13 >

For ascending order, we will subtract the second value from the first value

let sortedFruit = new Map([. fruit.entries()].sort((a, b) => a[1] - b[1])); console.log(sortedFruit); 

Map(4) < 'orange' =>12, 'tangerine' => 13, 'banana' => 20, 'apple' => 30 >

For descending order, we will subtract the first value from the second value

let sortedFruit = new Map([. fruit.entries()].sort((a, b) => b[1] - a[1])); console.log(sortedFruit); 

Map(4) < 'apple' =>30, 'banana' => 20, 'tangerine' => 13, 'orange' => 12 >

Summary

To map sort by value requires us to make use of two methods, sort() and entries() , regardless of the data type values. For string values, the use of the localeCompare method helps us to sort lexicographically, and the compareFn anonymous function allows sorting numbers.

Map sort by values in JS requires iterator object and an understanding of how they operate, and how the sort() function works intricately. The further readings are good starting points.

Further Reading

Didn’t find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Источник

JavaScript Sorted Map – How to Sort a Map by Keys or Values

With JavaScript, we can easily sort a map by keys or get a sorted map by values using the JavaScript sort() function.

sorted_map_by_keys = new Map([. map_to_sort].sort((a, b) => String(a[0]).localeCompare(b[0]))) sorted_map_by_num_values = new Map([. map_to_sort].sort((a, b) => a[1] - b[1])) sorted_map_by_str_values = new Map([. map_to_sort].sort((a, b) => String(a[1]).localeCompare(b[1])))

In JavaScript, the map object is useful for holding key-value pairs. By default, the map object orders the key-value pairs by the order of insertion.

Since the default order for a JavaScript map object is by order of insertion, we need to write our own code if we want to sort the map by the keys or the values to get a sorted map.

We can easily get a sorted map in our JavaScript code with the JavaScript sort() function.

Let’s say we have the following Map.

var map = new Map(); map.set('Apple','Good'); map.set('Pear','No'); map.set('Banana','Maybe'); map.set('Lemon','Yes');

We can get a sorted map by keys in our JavaScript code with the sort function applied to the keys in the following way.

sorted_map_by_keys = new Map([. map].sort((a, b) => String(a[0]).localeCompare(b[0]))) console.log(sorted_map_by_keys); // Output Map(4) 'Good', 'Banana' => 'Maybe', 'Lemon' => 'Yes', 'Pear' => 'No'>

You can see now that the map is sorted in alphabetical order by keys.

How to Sort a Map by Values in JavaScript

As we saw above, it is easy to sort a map by the keys of the map. We can also sort a map by values easily in our Javascript code.

If your map has string values or a mix of string and numeric values, we can get a sorted map by string values in the following way using the JavaScript localecompare() function.

Let’s say we have the same map as above. Let’s sort the map by values.

sorted_map_by_str_values = new Map([. map].sort((a, b) => String(a[1]).localeCompare(b[1]))) console.log(sorted_map_by_str_values); // Output Map(4) 'Good', 'Banana' => 'Maybe', 'Pear' => 'No', 'Lemon' => 'Yes'>

If your map only has numeric values, we should use a different sorting function.

Let’s say we have a different map with numeric values.

var map = new Map(); map.set('Apple',4); map.set('Pear',2); map.set('Banana',1); map.set('Lemon',3);

To sort this map by its values, we will use a different sorting function for numeric values.

sorted_map_by_num_values = new Map([. map].sort((a, b) => a[1] - b[1])) console.log(sorted_map_by_num_values); // Output Map(4) 1, 'Pear' => 2, 'Lemon' => 3, 'Apple' => 4>

As you can see, the map is now sorted by values.

Hopefully this article has been useful for you to understand how to obtain a sorted map in your JavaScript code.

Other Articles You’ll Also Like:

• 1. JavaScript toFixed – How to Convert a Number to a String
• 2. How to Repeat a String in JavaScript
• 3. Using JavaScript to Remove All Pipe Characters From String
• 4. Set the Height of a Div Using JavaScript
• 5. Using JavaScript to Check If String Contains Only Certain Characters
• 6. Add Commas to Number in JavaScript
• 7. Remove Undefined Values From an Array in JavaScript
• 8. How to Get the First Character of a String in JavaScript
• 9. Using JavaScript to Round to 4 Decimal Places
• 10. Using JavaScript to Replace a Space with an Underscore

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Источник