【JavaScript】連想配列を使うくらいならMapやSetを使う

概要

• Vuforiaに触れる機会があって、久々にJSを弄り回していたら、かつて不便だった箇所が便利になっていたのでメモる
• サンプルは動作を見せる為に【jsfiddle】というサイトに書いたのでリンクを貼っておく

不便だったやつ

• Key-Value型のデータを持つときに連想配列を使っていたが…
  • 不純物入りオブジェクトをfor (～ in ～)で展開しようとして数が合わなくて、Object.keys(連想配列)とかしないといけないとか
  • 実は純粋な配列ではないらしくてfor (～ of ～) 使えないとか
  • lengthを取ったら、長さ0で衝撃を受けたとか
• データが重複をしない配列が欲しい時に、連想配列のKeyを駆使するか、ただの配列から重複を取り除く処理をしていた（重複データを持っていないとダメな場合は、素直にfilterとかで弾くしかないと思うけど…）

リファレンス

• Map
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype
• Set
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set
  • IEだけ対応が怪しいので注意

サンプル

Key-Value型データの保持にMapを使う（jsfiddleへ）

let datas = new Map();
for (let i = 0; i < 3; i++) {
  let key = 'key' + i;
  let data = {
    name: 'name' + i,
    value: 'value' + i
  }
  datas.set(key, data);
}

// ----- 出力例 -----
// entities()は、Key-Valueを配列で返してくれる。
console.log('★entries()で出力');
for (let [k, v] of datas.entries()) {
  console.log(k + ' = ' + JSON.stringify(v));
}

// keys()は、Keyだけの配列を介してくれる
console.log('★keys()で出力');
for (let k of datas.keys()) {
  console.log(k + ' = ' + JSON.stringify(datas.get(k)));
}

// values()は、valueだけの配列を介してくれる。Keyは取れない
console.log('★values()で出力');
for (let v of datas.values()) {
  console.log(JSON.stringify(v));
}

重複しないデータの保持にSetを使う（jsfiddleへ）

let dataSet = new Set();
dataSet.add('hoge');
dataSet.add('fuga');
dataSet.add('hoge');

// ----- 出力 -----
console.log('★forEach()で出力')
dataSet.forEach(k => {
  console.log(k);
});

console.log('★for (～ of ～)で出力')
for (let k of dataSet) {
  console.log(k);
}