Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@oxalis-san

JavaScript Mapの覚書き

JavaScriptのMapの目的、初期化方法、簡単な使い方。

Mapの目的

Objectよりもキーと値の紐付け(マップ)を表すのに適切なオブジェクトを提供することです。MDNのMapが詳しいです。

Mapの初期化

デフォルトコンストラクタMap()で作成してsetで個別に代入することもできますが、配列リテラルでも初期化できます。

配列リテラルによる初期化
'use strict'
new Map([[0, 0], ["a", "a"], [0.1, 0.1]])
// Map(3) { 0 → 0, a → "a", 0.1 → 0.1 }

Mapの高階関数による処理

Mapの要素を取得するメソッドはentries()keys()values()ですが、いずれもイテレーターを返します。現状ではイテレーターはfiltermapのような高階関数を実装しないため、一度Arrayに変換してから高階関数を適用する必要があります。

キーがある型の要素からなるMapを作成する

typeof k === "string"stringを目的の型に置換して別の型でも適用できます。

string型の場合
'use strict'
const m = new Map([[0, 0], ["a", "a"], [0.1, 0.1]])
new Map([...m.entries()].filter(([k, v]) => typeof k === "string"))
// Map { a → "a" }

値がある型の要素からなるMapを作成する

typeof entry[1] === "string"stringを目的の型に置換して別の型でも適用できます。

string型の場合
'use strict'
const m = new Map([[0, 0], ["a", "a"], [0.1, 0.1]])
new Map([...m.entries()].filter(([k, v]) => typeof v === "string"))
// Map { a → "a" }

値を文字列へ変換したMapを作成する

'use strict'
const m = new Map([[0, 0], ["a", "a"], [0.1, 0.1]])
new Map([...m.entries()].map(([k, v]) => [k, v?.toString()]))
// Map(3) { 0 → "0", a → "a", 0.1 → "0.1" }

v?.toString()?.は値がundefinedの場合の例外を防ぐために必要です。

値がundefinedの要素を除外したMapを作成する

'use strict'
// Map(4) { 0 → 0, a → "a", 0.1 → 0.1, undefined → undefined }
const m = new Map([[0, 0], ["a", "a"], [0.1, 0.1], ["undefined", undefined]])
new Map([...m.entries()].filter(([k, v]) => v !== undefined))
// Map(3) { 0 → 0, a → "a", 0.1 → 0.1 }

この投稿の方針

  • 辞書の要素は分割代入する。「entry => ...」→「([k, v]) => ...」
  • 配列はスプレッド構文で作成する。「Array.from(...)」→「[...x]」
1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?