📱

【JavaScript】Map オブジェクトについてのまとめ

2024/05/23に公開

LeetCodeでMapオブジェクト(ハッシュマップ)を使用して問題を解きました。
この記事ではMapオブジェクトについて学んだ内容をまとめています。

前回の記事
https://zenn.dev/sato_frontend/articles/9bee0b0a455c1d

概要

nums: 数値が格納されている配列
target: 目標の数値

nums配列内の2つの数字を足してtargetの値になる組み合わせの値のindexを返す

上記の課題が課され、下記のようなコードがRuntimeの少ないコードだということを学習しました。

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function(nums, target) {
    const map = new Map();

    for(let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if(map.has(complement)) {
            return[map.get(complement),i]
        }
        map.set(nums[i], i);
    }
};

Mapオブジェクトについてもう少し調べました。

Mapオブジェクトとは

連想配列を操作する - Mapオブジェクト Map(マップ)は、キー/値のセット──いわゆる連想配列(ハッシュ)を管理するためのオブジェクト。2.3.6項でも触れたように、従来のJavaScriptでは、まずはオブジェクトリテラルを連想配列として利用するのが一般的でした。しかし、ES2015でようやく、専用のオブジェクトが提供されたわけです。

山田 祥寛. 改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (p.388). 株式会社技術評論社. Kindle 版.

→今回のコードでは

const map = new Map();

上記でMapコンストラクターを使用してマップを初期化しています。
今回は空で初期化してますが、Mapコンストラクターには引数として、[キー, 値]形式の2次元配列を渡すことができます。


オブジェクトリテラルとはとの相違点

  1. 任意のキーを設定できる
  2. マップのサイズを取得できる
  3. クリーンなマップを作成できる
  4. パフォーマンスに優れる

オブジェクトリテラルとは

オブジェクトリテラル(オブジェクト)は名前をキーにアクセスできる配列で

const obj = {
    name: 'canopus',
    age: 30
}

こういうやつですね

参照元:山田 祥寛. 改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (p.130). 株式会社技術評論社. Kindle 版.

has() メソッドについて

has() メソッドは、指定されたキーに対する要素が存在するかどうかを示す論理値を返します。

論理値 = true/false

var twoSum = function(nums, target) {
    const map = new Map();

    for(let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if(map.has(complement)) { // ここでcomplementに格納された値がmapにあるか確認している
            return[map.get(complement),i]
        }
        map.set(nums[i], i);
    }
};

setメソッドについて

set() メソッドは、指定されたキーと値を持つ要素を Map オブジェクトに追加したり、更新したりします。

今回のコードの場合、complementがmap内にない場合に、for文の最後で、mapに
キー:nums[i]
値:i (index)
として格納します

nums = [2,7,11,15]
target = 9

の場合、下記のコードを実行すると、for文一回目のループでは

map = [
[2,0]
]

となります。

var twoSum = function(nums, target) {
    const map = new Map();

    for(let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if(map.has(complement)) {
            return[map.get(complement),i]
        }
        map.set(nums[i], i); // mapに[2,0]がセットされる
    }
};

getメソッドについて

get() メソッドは、指定された要素を Map オブジェクトから返します。指定されたキーに関連付けられた値がオブジェクトである場合は、そのオブジェクトの参照を受け取ることになり、そのオブジェクトに対して変更を行った場合は、 Map オブジェクトの中にあるものに変更が行われます。

get(key)

で値があれば値を返す

なので、2回目のループで

var twoSum = function(nums, target) {
    const map = new Map();

    for(let i = 0; i < nums.length; i++) {
        const complement = target - nums[i]; // 9-7=2で2回目のループではcomplementには2が格納される
        if(map.has(complement)) { // hasメソッドでmap内に2というキーが存在するか確認する
            return[map.get(complement),i] // trueになるので、配列内でgetメソッドを使いcomplementをキーにして値(この場合は'2'のインデックスである0)を取得、iを格納し返却する
        }
        map.set(nums[i], i);
    }
};

というようになります。

まとめ

何気なく使っていたMapオブジェクトについて調べることでメソッドの使い方やどんな動きをするのかがスッキリしてとても勉強になりました。

基本的なメソッド等の知識をしっかりと身につけることが大事だなと思いました。

参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/get
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/set

参考書籍
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
https://amzn.asia/d/gn3RpHX

Discussion