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

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

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

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

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

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

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

values()メソッドは、mapオブジェクトの各値を含む新しいイテレーターオブジェクトを返します。

構文、使い方

values()の構文:

map.values()

1	map.values()

使い方:
map.values()を使用すると、mapオブジェクトの値を取得できます。

引数について

mapオブジェクトのvalues()は、mapオブジェクト内の値を取得するための関数です。引数はありません。

返り値について

mapオブジェクトのvalues()は、mapオブジェクト内の全ての値を含む配列を返します。

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

JavaScriptのmapオブジェクトのvalues()を使うと、オブジェクトのプロパティの値を取得して配列に変換することができます。

これを使うと、オブジェクトのプロパティを簡単に反復処理したり、オブジェクトのプロパティをソートしたり、オブジェクトのプロパティを検索したりすることができます。

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

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

例えば、以下のようなコードを使用して、mapオブジェクト内の値を取得できます。

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

let values = myMap.values();

for (let value of values) {
console.log(value); // value1, value2
}

let myMap = new Map();

myMap.set('key1', 'value1');

myMap.set('key2', 'value2');

let values = myMap.values();

for (let value of values) {

console.log(value); // value1, value2

}

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

forEach()でループ処理を行うのが一般的です。

mapオブジェクトのvalues()は、オブジェクトのすべての値を配列として取得するため、forEach()を使用してそれらを処理することができます。

使用する上での注意点

values()メソッドは、mapオブジェクト内の全ての値を含む配列を返します。

注意すべき点として、mapオブジェクト内の値の順序は保証されないことです。

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

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

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

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

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

// オブジェクトを定義

const map = new Map();

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

map.set('age', '30');

// values()を使用してオブジェクトの値を取得
const values = map.values();

// 取得した値を表示
console.log(values);

// オブジェクトを定義

const map = new Map();

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

map.set('age', '30');

// values()を使用してオブジェクトの値を取得

const values = map.values();

// 取得した値を表示

console.log(values);

MapIterator { ‘John’, ’30’ }

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プロパティの使い方