JavaScript で ES6 マップを並べ替える

Saad Aslam 2023年10月12日
  1. JavaScript での ES6 マップの概要
  2. .sort() メソッドを使用して JavaScript で ES6 マップをソートする
  3. JavaScript の文字列キーで ES6 マップを並べ替える
  4. JavaScript の数字キーで ES6 マップを並べ替える
JavaScript で ES6 マップを並べ替える

この記事では、JavaScript を使用して ES6 マップを並べ替えるための基本的な手順を詳しく説明し、それらの手順を示します。

JavaScript での ES6 マップの概要

オブジェクトをマップとして使用することには、ES6 で導入された Map という名前の新しいコレクション型によって対処されるいくつかの欠点があります。

Map オブジェクトは定義によりキーと値のペアを格納し、格納するペアのキーまたは値には任意の型の値を使用できます。 さらに、Map オブジェクトは、キーが Map に挿入された元のシーケンスを記憶します。

.sort() メソッドを使用して JavaScript で ES6 マップをソートする

Map 内のキーを並べ替えたい場合は、.sort() メソッド を使用して実行できます。 例えば、var waqarMap = new Map([...mapA].sort()). Spread 演算子 (...), を使用して、Map のすべてのエントリを配列で取得できます。これを並べ替え手法を使用して並べ替えます。

配列内のメンバーをソートするために、sort() 関数は次のロジックを利用します。

  • 比較関数の戻り値が 0 より大きい場合、配列は a の前に b が来るようにソートする必要があります。
  • 比較関数の戻り値が 0 より小さい場合、ソート順で ab の前に来る必要があります。
  • 比較関数の戻り値が 0 の場合、ab の順序は以前と同じままにする必要があります。

Map を 2つの方法で配置します。1つ目はキーが文字列であることに基づいており、2つ目はキーが数値であることに基づいています。

まず、文字列のキー コンポーネントから始めましょう。

JavaScript の文字列キーで ES6 マップを並べ替える

waqarMap という新しい変数を作成し、Map() クラスのオブジェクトを生成して初期化します。

var waqarMap = new Map();

ここで、2つのパラメーターを受け取る .set() 関数を使用して、いくつかの値を Map に追加します。 最初のパラメータはソートを実行するために使用されるキーで、2 番目のパラメータはキーの横にコンソールに表示されるキーの値です。

この時点で、マップが手元にあり、並べ替える準備ができています。

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

sort() 関数を使用するだけで、キーが文字列値である Map を並べ替えることができます。

var sortedMap = new Map([...waqarMap].sort());

Map がソートされたので、コンソールに出力する必要があります。

console.log(sortedMap);

ES6 マップを文字列キーの昇順で並べ替えるソース コード

var waqarMap = new Map();

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

var sortedMap = new Map([...waqarMap].sort());

console.log(sortedMap);

昇順の出力:

Map {
  'a' => 'one',
  'b' => 'two',
  'c' => 'three',
  'd' => 'four',
  'e' => 'five',
  'f' => 'six' }

メソッド .sort() を適用する場合、.reverse(). と呼ばれる別の関数をここで使用する必要があります。 これは、マップを降順に並べ替えるために必要です。

この手順を除いて、残りの手順は同じです。

var sortedMap = new Map([...waqarMap].sort().reverse());

降順で出力:

Map {
  'f' => 'six',
  'e' => 'five',
  'd' => 'four',
  'c' => 'three',
  'b' => 'two',
  'a' => 'one' }

JavaScript の数字キーで ES6 マップを並べ替える

numberMap, という新しい変数を作成し、Map() クラスのオブジェクトを生成して初期化します。 .set() 関数を使用してマップに値を追加します。

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

ここで、Map のキーは数値であり、sort() メソッドは引数として関数を提供する必要があります。 関数は、プロシージャへの引数として送信される並べ替え順序を決定します。

var sortedMap = new Map([...numberMap.entries()].sort());
console.log(sortedMap);

ES6 マップを番号キーで昇順に並べ替えるソース コード

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

var sortedMap = new Map([...numberMap.entries()].sort());

console.log(sortedMap);

昇順の出力:

Map {
  '1' => 'Saad',
  '2' => 'Aslam',
  '3' => 'Nabeel',
  '4' => 'Zeeshan',
  '5' => 'Sindhu',
  '6' => 'Khan' }

ソートされた順序とは逆の順序でデータをソートしたい場合は、.reverse() という別の関数を使用する必要があります。 この手順は Map を降順に並べ替えるために必要であり、残りは同じであるため、2つの手順の違いはこれだけです。

var sortedMap = new Map([...numberMap.entries()].sort().reverse());

降順で出力:

Map {
  '6' => 'Khan',
  '5' => 'Sindhu',
  '4' => 'Zeeshan',
  '3' => 'Nabeel',
  '2' => 'Aslam',
  '1' => 'Saad' }
著者: Saad Aslam
Saad Aslam avatar Saad Aslam avatar

I'm a Flutter application developer with 1 year of professional experience in the field. I've created applications for both, android and iOS using AWS and Firebase, as the backend. I've written articles relating to the theoretical and problem-solving aspects of C, C++, and C#. I'm currently enrolled in an undergraduate program for Information Technology.

LinkedIn

関連記事 - JavaScript Map