はじめに
実際のフロントエンドの現場で「配列の要素を"昇順"に並べ替えてください」と言われることは結構多くあると思ったんで（たとえば、価格の安い順にデータを表示させたい、といった場面）配列の要素を昇順に並べ替える方法を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
↧