sugulogの日記

JavaScriptのMapオブジェクトを扱うメソッド一覧。現役エンジニアが今まで使ったことのあるMapオブジェクトのメソッドを集めてみました。

スポンサードリンク

f:id:sugulog:20220211210711p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、現役エンジニアが今まで使ったことのあるMapオブジェクトのメソッドを集めてみましたということで

  • JavaScriptのMapオブジェクトを扱うメソッド

について簡単に解説します!!

その為このブログを読むことで、JavaScriptのMapオブジェクトを扱うメソッドついて理解が深まるのはもちろん、何か困ったときのカンニングペーパーとして参考になります。

是非最後までご愛読ください。

 

今回は、

・Mapオブジェクト

JavaScriptのMapオブジェクトを扱うメソッド

の順で解説していきます。

では早速、みていきましょう!!

・Mapオブジェクト

Mapオブジェクトとはキーと値を組み合わせた複数のデータを取り扱うオブジェクトのことです。

今まで扱ってきた普通のオブジェクトも同様にキーと値を組み合わせて複数のデータを取り扱えますがMapオブジェクトにはより特化した機能が存在しています。

まずは基本的なデータを設定する、取得する方法について見ていきます。

f:id:sugulog:20220211114938p:plain

Mapオブジェクトはnew演算子を使用し生成します。

データを設定する際はMapオブジェクト.set(キー, 値)で設定します。

既に設定されている同じキー名に対し値を設定した場合は上書きされます。

データが設定されたMapオブジェクトは以下のような構造になっています。

f:id:sugulog:20220211114957p:plain

キーと値を組み合わせたデータ構造になっているのが確認できます。

またMapオブジェクト部分を省略し以下のように記述することも可能です。

f:id:sugulog:20220211122125p:plain注意点としてセミコロン(;)は最後のsetのみに記述します。

さらにMapオブジェクト生成時にデータを設定することも可能です。

f:id:sugulog:20220211122716p:plain

生成時の引数に[[キー, 値],[キー, 値]...]という形で設定します。

そしてデータを取得する際はMapオブジェクト.get(キー)で取得します。

f:id:sugulog:20220211123320p:plain

f:id:sugulog:20220211115901p:plain

指定したキーに紐づく値が取得できているのが確認できます。

JavaScriptのMapオブジェクトを扱うメソッド

・clear()

キーと値を全て削除するメソッドのこと。

・delete()

引数に指定したキーの値を削除し削除できたかどうかを真偽値で判定するメソッドのこと。

・entries()

キーと値からなるイテレータオブジェクトを返すメソッドのこと

・get()

引数に指定したキーの値を取得するメソッドのこと。

sugulog.hatenadiary.jp

・has()

引数に指定したキーの値が存在するかを真偽値で判定するメソッドのこと。

・keys()

キーからなるイテレータオブジェクトを返すメソッドのこと。

・set

値を設定するメソッドのこと。第一引数にキー、第二引数に値を定義する。既に設定されているキーに対しては値を上書する。

sugulog.hatenadiary.jp

・size

キーと値のペア数を取得するメソッドのこと。

・values()

値からなるイテレータオブジェクトを返すメソッドのこと。

 

以上、今回のブログでした。

JavaScriptのMapオブジェクトを扱うメソッドついて理解が深まり、何か困ったときのカンニングペーパーとして参考になりそうでしたか??

全てを覚えきるのは難しいのでカンニングペーパーとしてどんどん活用してください。

今回のToDo

より詳しく知りたいメソッドを1つ選び、さらに詳しく調べてみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!