[JavaScript] 配列の要素を昇順に並べ替えたい

はじめに

実際のフロントエンドの現場で「配列の要素を"昇順"に並べ替えてください」と言われることは結構多くあると思ったんで（たとえば、価格の安い順にデータを表示させたい、といった場面）配列の要素を昇順に並べ替える方法をES6の書き方で簡単にまとめました。

オブジェクトを要素に持たない配列の場合

問題

// この配列を
const array1 = [1, 30, 4, 21, 100000];

// 昇順に並べ替えたい
[1, 4, 21, 30, 10000]

// どうやって実装する？

実装方法

// sort関数は破壊的なメソッドなのでまずは配列をコピーする
const cloneArray = [...sampleArray];
const sortedArray = cloneArray.sort((a,b) => a - b );
console.log(sortedArray);

// expected output
[1, 4, 21, 30, 100000]

オブジェクトを要素に持つ配列の場合

問題

// この配列を
const items = [
  { name: 'tanaka', value: 24 },
  { name: 'kimura', value: 35 },
  { name: 'suzuki', value: 23 },
];

// 値順にソートしたい
[
  { name: 'tanaka', value: 23 },
  { name: 'kimura', value: 24 },
  { name: 'suzuki', value: 35 },
];

// どうやって実装する？

実装方法

sort関数のコールバック関数で、valueプロパテを指定して並べ替えればOKです

// sort関数は破壊的なメソッドなのでまずは配列をコピーする
const cloneItems = [...items];
cloneItems.sort((a,b) => a.value - b.value);
console.log(cloneItems);

// expected output
[
  { name: 'tanaka', value: 23 },
  { name: 'kimura', value: 24 },
  { name: 'suzuki', value: 35 },
];

参考文献

Array.prototype.sort() | MDN