JavaScriptのsort()を使ってみる

配列のソートを行えるsort()メソッドを使ってみます。

サンプルコード

まずはソートのルールを定義する関数を引数に設定しない場合です。

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // [1, 100000, 21, 30, 4]

値が文字列の場合は昇順でソートされ、数値の場合は文字列に変換された上でソートされます。
ソートのデモページ

次に引数にソートのルールを定義した場合です。

// 昇順にソート
var array1 = [4, 2, 5, 1, 3];
array1.sort(function(a, b) {
  if (a < b) {
    return -1;
  }
  if (b > a) {
    return 1;
  }
  return 0;
});
console.log(array1); // [1, 2, 3, 4, 5]

// 昇順にソート2
var array2 = [4, 2, 5, 1, 3];
array2.sort(function(a, b) {
  return a - b;
});
console.log(array2); // [1, 2, 3, 4, 5]

// 降順にソート
var array3 = [4, 2, 5, 1, 3];
array3.sort(function(a, b) {
  return b - a;
});
console.log(array3); // [5, 4, 3, 2, 1]

関数でルールを定義する場合、引数2つを比較して「-1」「1」「0」のどれかを返すようにします。
単純に数値を昇順や降順でソートしたい場合、array2やarray3でやっているように2つの引数を減算するだけでソートできます。
ソートのデモページ2

連想配列の場合も値の1つを使ってソートができます。

var array1 = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];
// valueで昇順にソート
array1.sort(function (a, b) {
  return a.value - b.value;
});
console.log(array1);
// 結果:
// [
//   {name: 'The', value: -12},
//   {name: 'Magnetic', value: 13},
//   {name: 'Edward', value: 21},
//   {name: 'Sharpe', value: 37},
//   {name: 'Zeros', value: 37},
//   {name: 'And', value: 45}
// ];

var array2 = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];
// nameで昇順にソート
array2.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // 大文字と小文字を無視する
  var nameB = b.name.toUpperCase(); // 大文字と小文字を無視する
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  return 0;
});
console.log(array2);
// 結果:
// [
//   {name: 'And', value: 45},
//   {name: 'Edward', value: 21},
//   {name: 'Magnetic', value: 13},
//   {name: 'Sharpe', value: 37},
//   {name: 'The', value: -12},
//   {name: 'Zeros', value: 37}
// ];

ソートのデモページ3

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年5月
1234567
891011121314
15161718192021
22232425262728
293031