BETA

速習ECMAScript2018を勉強する Map / Set 編

投稿日:2018-11-11
最終更新:2018-11-11

コレクション関連 Map/Set

  • コレクション専用のオブジェクト命令とのこと。
  • オブジェクトリテラルで代用できるのことが多いので、実際まだ有効活用されているのは、少ないんじゃないでしょうか。
const obj = { a: 'AAA' };
const m = new Map();
m.set('hoge', 'hogeHoge');
m.set('foo', 'fooFoo');
m.set('boo', 'booBoo')
m.set(obj, true) // キーに文字列以外も可能になった

console.log(m.get('boo'))
console.log(m.get(obj))
console.log('m', m)
node test.js
booBoo
true
m:  Map {
  'hoge' => 'hogeHoge',
  'foo' => 'fooFoo',
  'boo' => 'booBoo',
  { a: 'AAA' } => true }  // オブジェクトリテラル
  • 実行すると、例では、キーがオブジェクトリテラルで表現されています。
  • オブジェクト自体は内容を変えずに、オブジェクトに他の属性を付与できそうですね。

ループ処理

const obj = { a: 'AAA' };
const m = new Map();
m.set('hoge', 'hogeHoge');
m.set('foo', 'fooFoo');
m.set('boo', 'booBoo')
m.set(obj, true) // キーに文字列以外も可能になった

for(let key of m.keys()) {
  console.log('Key: ', key)
}
for(let value of m.values()) {
  console.log('Value: ', value)
}
for(let [key, value] of m.entries()) {
  console.log('Key, Value: ', `${key} : ${value}`)
}
m.delete('hoge')
console.log(m)
m.clear()
console.log(m)
  • オブジェクトはループ処理がいまいちですから、Mapはオブジェクトのループ処理には、もってこいですね。
  • get / set などのメソッドも今どきの命令の仕方です。

Set も確認してみます。

  • Set は重複値を除外するので、値がすべてユニークな値になります。
  • 重複を避けたいときに使う命令ですが、後から重複した値は、反映されないので注意も必要です。
  • プリミティブ値と、参照値で挙動が違うので、参照値をいれると同一値が入っているのがわかります。
const obj_1 = { a: 'AAA' };
const obj_2 = { a: 'AAA' };
console.log('obj比較: ', obj_1 === obj_2)
const str1 = 'BBB'
const str2 = 'BBB'
console.log('String比較: ', str1 === str2)
const s = new Set();
s.add(1);
s.add(2);
s.add(3);
s.add(3);
s.add(obj_1);
s.add(2);
s.add(1);
s.add(obj_2);
s.add(str1)
s.add(str2)

console.log(s)

for(let value of s) {
  console.log(value)
}
node test.js
obj比較:  false
String比較:  true
Set { 1, 2, 3, { a: 'AAA' }, { a: 'AAA' }, 'BBB' }
1
2
3
{ a: 'AAA' }
{ a: 'AAA' }
BBB
  • 使えるメソッドは、Map / Set は同じ形式ですので、共通した取り回しが可能です。
  • 基本新しい命令は、便利になっているので、積極的に使っていきたいんですが、Mapに関しては、オブジェクトリテラルとは挙動がだいぶ違うので、置き換えはし難い感じです。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@atoris1192の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!