JavaScript連想配列ソートの徹底解説！7つのサンプルコードでマスター

はじめに
●連想配列とは
●連想配列のソート方法
- ○サンプルコード1：キーでソート
- ○サンプルコード2：値でソート
●応用例とサンプルコード
●使い方
●注意点
●対処法
●カスタマイズ方法
- ○サンプルコード6：カスタムソート関数
- ○サンプルコード7：ソート済みの配列を新たな配列に追加
まとめ

はじめに

この記事を読めば、JavaScriptの連想配列ソートをマスターできるようになります。

初心者でも分かるように、連想配列とは何か、どのようにソートするのか、使い方や注意点、カスタマイズ方法を徹底解説します。

7つのサンプルコードを参考に、自分のプロジェクトで活用できるようになりましょう。

●連想配列とは

連想配列とは、キーと値のペアで構成された配列のことです。

JavaScriptでは、オブジェクトを連想配列として扱うことができます。

●連想配列のソート方法

連想配列をソートするには、キーまたは値を基準にして並び替えを行います。

○サンプルコード1：キーでソート

// 連想配列を定義
const obj = { apple: 3, banana: 1, orange: 2 };

// キーでソート
const sortedKeys = Object.keys(obj).sort();
console.log(sortedKeys); // ["apple", "banana", "orange"]

// ソートされたキーを使って新しい連想配列を作成
const sortedObj = {};
for (const key of sortedKeys) {
  sortedObj[key] = obj[key];
}
console.log(sortedObj); // { apple: 3, banana: 1, orange: 2 }

このサンプルコードでは、連想配列のキーをソートし、新しい連想配列にその順序で追加しています。

Object.keys()でキーの配列を取得し、sort()で昇順に並び替えを行っています。

○サンプルコード2：値でソート

// 連想配列を定義
const obj = { apple: 3, banana: 1, orange: 2 };

// 値でソート
const sortedKeys = Object.keys(obj).sort((a, b) => obj[a] - obj[b]);
console.log(sortedKeys); // ["banana", "orange", "apple"]

// ソートされたキーを使って新しい連想配列を作成
const sortedObj = {};
for (const key of sortedKeys) {
  sortedObj[key] = obj[key];
}
console.log(sortedObj); // { banana: 1, orange: 2, apple: 3 }

このサンプルコードでは、連想配列の値を基準にソートし、新しい連想配列にその順序で追加しています。

sort()関数に比較関数を渡すことで、値を基準に昇順に並び替えを行っています。

●応用例とサンプルコード

連想配列のソート方法を応用して、さまざまなケースに対応できるようになりましょう。

○サンプルコード3：オブジェクトの配列をソート

// オブジェクトの配列を定義
const fruits = [
  { name: "apple", price: 3 },
  { name: "banana", price: 1 },
  { name: "orange", price: 2 },
];

// priceでソート
const sortedFruits = fruits.sort((a, b) => a.price - b.price);
console.log(sortedFruits);
// [{ name: "banana", price: 1 }, { name: "orange", price: 2 }, { name: "apple", price: 3 }]

このサンプルコードでは、オブジェクトの配列をソートしています。

sort()関数に比較関数を渡すことで、指定したプロパティ（この場合はprice）を基準に昇順に並び替えを行っています。

○サンプルコード4：複数のキーでソート

// オブジェクトの配列を定義します
const items = [
  { category: "fruit", name: "apple", price: 3 },
  { category: "fruit", name: "banana", price: 1 },
  { category: "vegetable", name: "carrot", price: 2 },
  { category: "vegetable", name: "broccoli", price: 1 },
];

// categoryとpriceでソートします
const sortedItems = items.sort((a, b) => {
  if (a.category === b.category) {
    return a.price - b.price;
  }
  return a.category.localeCompare(b.category);
});
console.log(sortedItems);

このサンプルコードでは、複数のキー（categoryとprice）でソートを行っています。

比較関数内で、まずcategoryを比較し、同じ場合はpriceで比較して並び替えを行います。

○サンプルコード5：昇順・降順の切り替え

// オブジェクトの配列を定義します
const fruits = [
  { name: "apple", price: 3 },
  { name: "banana", price: 1 },
  { name: "orange", price: 2 },
];

// 昇順・降順を切り替える関数を定義します
const sortFruits = (fruits, key, order = "asc") => {
  return fruits.sort((a, b) => {
    if (order === "asc") {
      return a[key] - b[key];
    } else {
      return b[key] - a[key];
    }
  });
};

// 昇順でソートします
const ascendingFruits = sortFruits(fruits, "price");
console.log(ascendingFruits);

// 降順でソートします
const descendingFruits = sortFruits(fruits, "price", "desc");
console.log(descendingFruits);

このサンプルコードでは、昇順・降順のソートを行うために、sortFruits関数に第3引数として"desc"を渡しています。

このように、order引数を使って昇順・降順の切り替えが可能です。

●使い方

ソートしたい配列を定義します。
必要に応じて、比較関数を定義してソート条件を指定します。
sort()関数を使用して、配列をソートします。

●注意点

sort()関数は、元の配列を破壊的に変更します。
元の配列を保持したい場合は、slice()などを使ってコピーを作成し、そのコピーに対してソートを行ってください。
sort()関数はデフォルトで文字列の比較を行います。
数値の比較を行いたい場合は、明示的に比較関数を渡してください。

●対処法

昇順・降順の切り替えを行う場合は、比較関数内で条件分岐を行ってください。
複数のキーでソートする場合は、比較関数内で各キーを比較し、それぞれの比較結果を組み合わせてソート条件を指定してください。

●カスタマイズ方法

カスタムソート関数を作成し、独自の比較方法を実装できます。
ソート済みの配列を新たな配列に追加することで、複数のソート条件を組み合わせることができます。

○サンプルコード6：カスタムソート関数

// オブジェクトの配列を定義します
const items = [
  { category: "fruit", name: "apple", price: 3 },
  { category: "fruit", name: "banana", price: 1 },
  { category: "vegetable", name: "carrot", price: 2 },
  { category: "vegetable", name: "broccoli", price: 1 },
];

// カスタムソート関数を定義します
const customSort = (a, b) => {
  if (a.category === b.category) {
    return a.price - b.price;
  }
  return a.category.localeCompare(b.category);
};

// カスタムソート関数を使用して、配列をソートします
const sortedItems = items.sort(customSort);
console.log(sortedItems);

○サンプルコード7：ソート済みの配列を新たな配列に追加

// 2つのソート済みの配列を定義します
const sortedFruits = [
  { name: "apple", price: 3 },
  { name: "banana", price: 1 },
  { name: "cherry", price: 2 },
];
const sortedVegetables = [
  { name: "carrot", price: 2 },
  { name: "broccoli", price: 1 },
  { name: "spinach", price: 3 },
];

// ソート済みの配列を新たな配列に追加します
const combinedArray = sortedFruits.concat(sortedVegetables);
console.log(combinedArray);