Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 27, 2023 09:15 pm GMT

Basic and advance Array sorting

Basic

Sort an array by one value is relatively simple because a compare function passed to array sort follows this rule to apply the sorting order based on:

Return value	Sorting order
Negative	less (sort `a` before `z`)
Zero	equal (keep original order `a` and `z`)
Positive	greater (sort `z` before `a`)

Taking that in mind there are different approach to take depending of the data type.

String

You can use .sort() without parameters to order strings, but is recommended to use localeCompare because it can be configured to ignore punctuation (accents), returns -1, 0, 1 if a < z, a == z, a > z.

const animals = [ 'cat', 'dog', 'wolf', 'lion', 'sheep', 'antelope']animals.sort((a, z) => a.localeCompare(z))console.log(animals) // [ 'antelope', 'cat', 'dog', 'lion', 'sheep', 'wolf' ]

Numeric

Subtraction works on numeric fields, because a - z gives -, 0, + if a < z, a == z, a > z.

let numbers = [ 0, 20, 2, 3, 30, 10, 1 ]numbers.sort((a, z) => a - z)console.log(numbers) //[ 0, 1, 2, 3, 10, 20, 30 ]

Date

Date (with or without time) compares with subtraction because date math converts to milliseconds since 1970.

const dates = ['Mar 18 2016', '09/24/2017', 'Jan 22 2022', '1998-05-21']dates.sort((a, z) => new Date(a) - new Date(z))console.log(dates) // [ '1998-05-21', 'Mar 18 2016', '09/24/2017', 'Jan 22 2022' ]

Boolean

Boolean compare with subtraction, which is guaranteed to turn true and false to 1 and 0 (therefore the subtraction produces -1 or 0 or 1).

const boolean = [true, false, true, false, true]boolean.sort((a, z) => Boolean(a) - Boolean(z))console.log(Boolean) //[ false, false, true, true, true ]

Drawing attention with the Boolean() constructor, even if they're already Boolean.

Reverse Order

Swapping the comparison values

animals.sort((a, z) => z.localeCompare(a))numbers.sort((a, z) => z - a)dates.sort((a, z) => new Date(z) - new Date(a))boolean.sort((a, z) => Boolean(z) - Boolean(a))

Or negate the comparison

take in mind the negate trick because it can be useful later

animals. Sort((a, z) => -( a.localeCompare(z) ))numbers.sort((a, z) => -( a - z ))dates.sort((a, z) => -( new Date(a) - new Date(z) ))boolean.sort((a, z) => -( Boolean(a) - Boolean(z) ))

take in mind the negate trick because it can be useful later for advance sorting

Advanced

To sort an array of objects we are going to use all the previous examples, but if we need to made sorting using multiple properties, we are going to need some special tricks.

const records = [  {    id: '1',    country: 'Colombia',    value: 500,    hasDetail: true,    timestamp: '2023-04-27T02:23:39.000Z'  },  {    id: '2',    country: 'Spain',    value: 1_000,    hasDetail: true,    timestamp: '2015-04-27T23:31:05.000Z'  },  {    id: '3',    country: 'Argentina',    value: 1_000,    hasDetail: false,    timestamp: '2000-01-01T00:00:00.000Z'  },    {    id: '5',    country: 'Colombia',    value: 2_000,    hasDetail: true,    timestamp: '2023-04-27T02:23:39.000Z'  },  {    id: '6',    country: 'Spain',    value: 1_000,    hasDetail: false,    timestamp: '2018-04-27T23:31:05.000Z'  },  {    id: '4',    country: 'Argentina',    value: 100,    hasDetail: true,    timestamp: '2020-01-01T23:15:00.000Z'  }]

This raw data (without sorting) using console. Table(records) will show:

id	country	value	hasDetail	timestamp
'1'	'Colombia'	500	true	'2023-04-27T02:23:39.000Z'
'2'	'Spain'	1000	true	'2015-04-27T23:31:05.000Z'
'3'	'Argentina'	1000	false	'2000-01-01T00:00:00.000Z'
'5'	'Colombia'	2000	true	'2023-04-27T02:23:39.000Z'
'6'	'Spain'	1000	false	'2018-04-27T23:31:05.000Z'
'4'	'Argentina'	100	true	'2020-01-01T23:15:00.000Z'

First, we need to create a sort object with each property.

records.sort((a, z) => {  const sort = {    id: a.id.localeCompare(z.id),    country: a.country.localeCompare(z.country),    value: a.value - z.value,    hasDetail: Boolean(a.hasDetail) - Boolean(z.hasDetail),    timestamp: new Date(a.timestamp) - new Date(z.timestamp)  }  ...})

Then return the order according to your needs using the || operator, taking in mind that it follows the priority from left to right and, to reverse order use the negate trick in any field.

records.sort((a, z) => {  ...  return sort.country || -sort.value || sort.timestamp})

And the result of the sorted information will be:

id	country	value	hasDetail	timestamp
'3'	'Argentina'	1000	false	'2000-01-01T00:00:00.000Z'
'4'	'Argentina'	100	true	'2020-01-01T23:15:00.000Z'
'5'	'Colombia'	2000	true	'2023-04-27T02:23:39.000Z'
'1'	'Colombia'	500	true	'2023-04-27T02:23:39.000Z'
'2'	'Spain'	1000	true	'2015-04-27T23:31:05.000Z'
'6'	'Spain'	1000	false	'2018-04-27T23:31:05.000Z'

Note: .sort() mutes the array, .toSorted() do the same but returns a new array with the elements sorted.

Bonus

These array sorting methods are available as snippets on the Arrow Functions Snippets extension for VSCode.

Thats All Folks!
Happy Coding

Original Link: https://dev.to/equiman/basic-and-advance-array-sorting-21d4

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To