JavaScriptで配列内の値を昇順・降順に並び替える方法

今回は、JavaScriptで配列内の数値を昇順・降順に並び替える際の方法を紹介したいと思います。

ここでは、JavaScriptで並び替えを実現するメソッドであるsort()を使用する事になります。文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることが出来ます。

文字列の並び替えの場合

//昇順の場合
const strings = ['c', 'a', 'z', 'j']

const sort = strings.sort((a,b) => (a < b ? -1 : 1))

console.log(sort);

//[ 'a', 'c', 'j', 'z' ]

//降順の場合
const strings = ['c', 'a', 'z', 'j']

const sort = strings.sort((a,b) => (a > b ? -1 : 1))

console.log(sort);

//[ 'z', 'j', 'c', 'a' ]

アルファベット順で昇順、降順に並び替えられます。

数列の並び替えの場合

//昇順の場合

const strings = [3, 2, 9, 4]

const sort = strings.sort((a,b) => (a < b ? -1 : 1))

console.log(sort);

//[ 2, 3, 4, 9 ]

//降順の場合

const strings = [3, 2, 9, 4]

const sort = strings.sort((a,b) => (a > b ? -1 : 1))

console.log(sort);

// [ 9, 4, 3, 2 ]

加えて、配列内の数値が文字列であっても、sort()を使用する事が可能です。

//昇順の場合

const strings = ['3', '2', '9', '4']

const sort = strings.sort((a,b) => (a < b ? -1 : 1))

console.log(sort);

//[ '2', '3', '4', '9' ]

//降順の場合

const strings = ['3', '2', '9', '4']

const sort = strings.sort((a,b) => (a > b ? -1 : 1))

console.log(sort);

// [ '9', '4', '3', '2' ]

ここまでsort()の使い方を紹介してきましたが、注意しなければいけない点があるので、それも紹介します。
まずは以下のコードを見て下さい。

const str1 = ['ha', 'na', 'ma', 'ru'];
const sort = str1.sort();
 
console.log(sort); //[ 'ha', 'ma', 'na', 'ru' ]
console.log(str1); //[ 'ha', 'ma', 'na', 'ru' ]

最初に定数str1に定義されていた['ha', 'na', 'ma', 'ru']がsort()メソッドを使用した後に
str1に定義されている値を確認すると、[ 'ha', 'ma', 'na', 'ru' ]に変更されています。

つまりsort()メソッドは「破壊的メソッド」であり、｀元の配列を変更してしまいます。

よって、元の配列を残したまま、sort()メソッドを使用したい場合は、sliceで配列のコピーをします。

const str1 = ['ha', 'na', 'ma', 'ru'];
var str2 = str1.slice();
str2.sort();
 
console.log(str1); //['ha', 'na', 'ma', 'ru']
console.log(str2); //['ha', 'ma', 'na', 'ru' ]

このように書く事が出来ます。