JavaScriptのMapオブジェクト keys()メソッドの使い方

JavaScriptのmapオブジェクトのkeys()メソッドについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptのMapオブジェクトとは？
JavaScriptのmapオブジェクトのkeys()概要
JavaScriptのmapオブジェクトのkeys()を使ったサンプルコードの紹介
1. keys()を使ったサンプルコード1
2. keys()を使ったサンプルコード2
JavaScript mapオブジェクトの他メソッドについて

JavaScriptのMapオブジェクトとは？

キー（key）とキーに対応する値（value）を対応させて保持するオブジェクトで、Setオブジェクトと併せて、ES6(ES2015)から追加された比較的新しいデータタイプです。
配列に似ており、Javascript でデータを扱う上でよく使うデータ型として知られています。
またJSのオブジェクト型とも非常に似ておりますが、文字列や数値、真偽値（Boolean）をキーとなる値に対して自由に設定できる違いがあります。
JS,TypeScript,Node.jsなどで開発していくうえで重要なデータタイプとなっています。

それでは、次に本題の説明に移ります。

JavaScriptのmapオブジェクトのkeys()概要

mapオブジェクトのkeys()は、mapオブジェクト内のすべてのキーを反復可能なイテレーターで返します。

構文、使い方

mapオブジェクトのkeys()は、mapオブジェクトのすべてのキーを反復可能なオブジェクトとして返します。

使い方は以下の通りです。

// mapオブジェクトを定義
const map = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

// mapオブジェクトのキーを取得
const keys = map.keys();

// 反復可能なオブジェクトを繰り返し処理
for (const key of keys) {
console.log(key);
}

// mapオブジェクトを定義

const map = new Map([

['key1', 'value1'],

['key2', 'value2']

]);

// mapオブジェクトのキーを取得

const keys = map.keys();

// 反復可能なオブジェクトを繰り返し処理

for (const key of keys) {

console.log(key);

}

引数について

keys()の引数はありません。

返り値について

keys()は、mapオブジェクトのキーを含む配列を返します。

このメソッドを利用した便利なテクニック

mapオブジェクトのkeys()を使うと、オブジェクトのキーを取得して配列に変換することができます。

これを使うと、オブジェクトの値をループ処理して処理することができます。

また、オブジェクトのキーをソートしたり、重複を削除したりすることも可能です。

現場で実際にどのように使われているか

JavaScriptのmapオブジェクトのkeys()は、mapオブジェクト内の全てのキーを取得するために使用されます。

例えば、以下のようなコードで使用できます。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);

const keys = map.keys();

for (const key of keys) {
console.log(key); // 'name', 'age'
}

const map = new Map();

map.set('name', 'John');

map.set('age', 30);

const keys = map.keys();

for (const key of keys) {

console.log(key); // 'name', 'age'

}

JavaScriptのmapオブジェクトのkeys()と一緒によく使われる処理

values()と一緒に使われることが多いです。

keys()を使うと、オブジェクトのキーを取得できますが、values()を使うと、それに対応する値を取得できます。

そのため、keys()とvalues()を一緒に使うことで、オブジェクトのキーと値を取得して処理することができます。

使用する上での注意点

– keys()は、mapオブジェクトの各キーを反復処理するために使用する必要があります。
– 各キーは、mapオブジェクト内で一意でなければなりません。
– 各キーは、プリミティブ型またはオブジェクト型である必要があります。

JavaScriptのmapオブジェクトのkeys()と似た処理のJSメソッド、違い

Object.values()と似ていますが、下記の違いがあります。

Object.keys()はオブジェクトのキーを取得します
Object.values()はオブジェクトの値を取得します

JavaScriptのmapオブジェクトのkeys()を使ったサンプルコードの紹介

keys()を使ったサンプルコード1

const map = new Map([
  [""name"", ""John""],
  [""age"", 30]
]);

const keys = map.keys();

console.log(keys.next());
console.log(keys.next());

const map = new Map([

[""name"", ""John""],

[""age"", 30]

]);

const keys = map.keys();

console.log(keys.next());

{ value: “”name””, done: false } { value: “”age””, done: false }

keys()を使ったサンプルコード2

const map = new Map([
  [""name"", ""John""],
  [""age"", 30]
]);

for (const key of map.keys()) {
  console.log(key);
}

const map = new Map([

[""name"", ""John""],

[""age"", 30]

]);

for (const key of map.keys()) {

console.log(key);

}

name age

JavaScript mapオブジェクトの他メソッドについて

JavaScriptのmapオブジェクトの他メソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名	機能	リンク
map new Map()	新しいマップオブジェクトを作成します	JavaScript mapオブジェクト newMapメソッドの使い方
map.prototype.set()	マップ内のキーの値を設定します	JavaScript mapオブジェクト setメソッドの使い方
map.prototype.get()	マップ内のキーの値を取得します	JavaScript mapオブジェクト getメソッドの使い方
map.prototype.clear()	マップからすべての要素を削除します	JavaScript mapオブジェクト clearメソッドの使い方
map.prototype.delete()	キーで指定されたマップ要素を削除します	JavaScript mapオブジェクト deleteメソッドの使い方
map.prototype.has()	キーがマップに存在する場合、trueを返します	JavaScript mapオブジェクト hasメソッドの使い方
map.prototype.forEach()	マップ内の各キー/値ペアのコールバックを呼び出す	JavaScript mapオブジェクト foreachメソッドの使い方
map.prototype.entries()	マップ内の[key、value]ペアを持つイテレーターオブジェクトを返します	JavaScript mapオブジェクト entriesメソッドの使い方
map.prototype.keys()	マップ内にキーを含むイテレーターオブジェクトを返します	JavaScript mapオブジェクト keysメソッドの使い方
map.prototype.values()	マップ内の値のイテレーターオブジェクトを返します	JavaScript mapオブジェクト valuesメソッドの使い方
map size property	マップ要素の数を返します	JavaScript mapオブジェクト sizeプロパティの使い方