ありそうでないメソッド、それが重複排除です。

Underscore.jsやLodashには uniq() てのがあって、こんな感じ↓で使えます。

const arr0 = [11, 22, 11, 22, 33];
const arr1 = _.uniq(arr0);

JavaScriptにはありません。

Set を使う

単純な値ならこれが一番簡単。

Set は重複しない値を格納できるオブジェクトです。 ... で展開して配列オブジェクトへ再変換します。

• Set | MDN

const arr0 = [11, 22, 11, 22, 33];
const arr1 = [...new Set(arr0)];
console.log(arr1); // => [ 11, 22, 33 ]

includes() で確認する

これが一番素直。

includes() は配列が指定の要素を含むかどうか調べるやつです。 重複してなかったら追加するだけ。

• Array.prototype.includes() – JavaScript | MDN
• Array.prototype.reduce() | MDN

const arr0 = [11, 22, 11, 22, 33];

const arr1 = arr0.reduce((a, v) => {
  if (!a.includes(v)) {
    a.push(v);
  }
  return a;
}, []);

console.log(arr1); // => [ 11, 22, 33 ]

reduce() に自信がなければ forEach() でも。

const arr1 = [];
arr0.forEach((v) => {
  if (!arr1.includes(v)) {
    arr1.push(v);
  }
});

some() でやる

Set も includes() もオブジェクトの場合は完全に同じインスタンスでないと反応しないので、その場合は some() がよろしいかと。

もっと自由度が高い。

• Array.prototype.some() – JavaScript | MDN

const arr0 = [
  { id: '11', num: 1 },
  { id: '22', num: 2 },
  { id: '11', num: 3 },
  { id: '22', num: 4 },
  { id: '33', num: 5 },
];

const arr1 = arr0.reduce((a, v) => {
  if (!a.some((e) => e.id === v.id)) {
    a.push(v);
  }
  return a;
}, []);

console.log(arr1);
// [ { id: '11', num: 1 },
//   { id: '22', num: 2 },
//   { id: '33', num: 5 } ]

重複分は先に出てくるやつが優先です。

Map を使う

これもオブジェクトに対応。初見で「ぎょえー」てなりそう。

• Map | MDN

const arr0 = [
  { id: '11', num: 1 },
  { id: '22', num: 2 },
  { id: '11', num: 3 },
  { id: '22', num: 4 },
  { id: '33', num: 5 },
];

const arr1 = [...new Map(arr0.map((v) => [v.id, v])).values()];

console.log(arr1);
// [ { id: '11', num: 3 },
//   { id: '22', num: 4 },
//   { id: '33', num: 5 } ]

仕組みは Set と some() の組み合わせです、だいたい。

1. map() でIDとオブジェクト本体の組み合わせへ変換
2. 組み合わせを元に Map オブジェクトを作成。ここでID（ Map のキー）が重複するものは排除）
3. values() でオブジェクト（ Map の値）のみの反復子を得る
4. スプレッド構文 ... を伴う配列初期化子 [] で配列に。完成

重複分は後ろにあるやつが優先（上書き）です。

おしまい

なんか良いのある？

参考

• Set – JavaScript | MDN
• Map | MDN
• スプレッド構文 – JavaScript | MDN
• Array.prototype.reduce() | MDN
• Array.prototype.includes() – JavaScript | MDN
• Array.prototype.some() – JavaScript | MDN

現代的JavaScriptおれおれアドベントカレンダー2017 – 21日目

概要

基本的な使い方は Map や Set と一緒です。キーに使われるオブジェクトの参照カウントを増やさないとかそういうアレで、「弱い参照」で保持します。メモリリーク対策とかに。

Map 、 Set との違い

基本は Map 、 Set と同様なんだけど、キーが弱い参照（後述）になります。

できること:

• get() (WeakMap)
• set() (WeakMap)
• add() (WeakSet)
• has()
• delete()

できないこと:

• size
• forEach()
• clear()
• keys()
• 他

キーはオブジェクトのみ

Map は何でもキーに使えたんだけど、 WeakMap はオブジェクトだけです。

まあ意味ないしね。

弱い参照？

JavaScript界隈では新しい概念のはず。

プログラム内で使ってる情報ってメモリに置かれるじゃないですか。あれって使われてる間は保持されてて、使われなくなったら消してくれるんですよ、誰かが。上位のプログラムが。

で、問題はどうやって「使われているか」を判断するかなんだけど、変数から参照されてる数を覚えておく、というのがよくある基本的な仕組みです。そんでその数を「参照カウンタ」とか呼んだりします。参照カウンタが0になったらもう誰も見てないから消しちゃおう、ていうね。

変数はスコープが終わると消えて、参照カウンタが減って、他から参照されてなければ参照先の情報も消える、と。

弱い参照だと、その参照カウンタを増やさずにおくことができます。なので、弱い参照が残っていてもメモリ上の情報は消えてしまうこともあります。

WeakMapのキーは弱い参照

WeakMapのキーとしてのみ使われている場合、そのリソースは削除されます。

• 23.3 WeakMap Objects

WeakMap objects are collections of key/value pairs where the keys are objects and values may be arbitrary ECMAScript language values. A WeakMap may be queried to see if it contains a key/value pair with a specific key, but no mechanism is provided for enumerating the objects it holds as keys. If an object that is being used as the key of a WeakMap key/value pair is only reachable by following a chain of references that start within that WeakMap, then that key/value pair is inaccessible and is automatically removed from the WeakMap. WeakMap implementations must detect and remove such key/value pairs and any associated resources.

（強調は引用者。）

弱参照とか言ったけど、仕様書ではそういう単語は使ってないし、実装方法が任意なので参照カウンタが用いられているとも限らないです。たぶん使ってると思うんだけど。

値の方は普通の参照です。

継承して

仕様書によると「サブクラスとして使えるように設計されている」とのことです。

内部の初期処理が必要なので、コンストラクタで super 呼び出ししないと怒られます。

class ElementData extends WeakMap {
  constructor() {
    // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from deriv
  }
}

HTML要素をキーに

DOMノードだったら同じ内容で別インスタンスみたいなものってあんまり作られない感じがするので、キーにするのに良さそう。jQueryの data() みたいなやつ。

const elementData = new WeakMap();

const el = document.querySelector('#foo');
elementData(el, { text: '追加情報 ' });

console.log(elementData.get(el));

Reactとかでがんがん要素再生成しますーみたいな設計の場合は、たぶん識別子とか持ってるんじゃないかな。そんなら普通の Map で十分そう。いや自動削除ないか。

実際の利用ケース

Stack Overflowの解答から。

• ‌javascript - What are the actual uses of ES6 WeakMap? - Stack Overflow

Some use cases that would otherwise cause a memory leak and are enabled by WeakMaps include:

• Keeping private data about a specific object and only giving access to it to people with a reference to the Map. A more ad-hoc approach is coming with the private-symbols proposal but that’s a long time from now.
• Keeping data about library objects without changing them or incurring overhead.
• Keeping data about a small set of objects where many objects of the type exists to not incur problems with hidden classes JS engines use for objects of the same type.
• Keeping data about host objects like DOM nodes in the browser.
• Adding a capability to an object from the outside (like the event emitter example in the other answer).

載せといてなんだけど正直何言ってんのかよくわかんない……。

その他

キー一覧機能の提供は禁止

速度問題に発展しがちなので、そういうのは実装しちゃだめ (must not) と仕様書に書かれてます。

（あれ、そういう理解で合ってるよね？）

参考

• ECMAScript® 2017 Language Specification
  • 23.3 WeakMap Objects
• WeakMap – JavaScript | MDN
• WeakSet – JavaScript | MDN
• /javascript

現代的JavaScriptおれおれアドベントカレンダー2017 – 19日目

良いか？？？

概要

Array#map() じゃなくて Map というビルトインコンストラクタです。

辞書 (dictionary) みたいなノリで使えます。

const map = new Map();

map.set(100, 'Number 100');
console.log(map.get(100));  // => "Number 100"

for (let [key, value] of map) {
    console.log(`[${key}] = [${value}]`);
}

使い方

new で作って名前と値の組み合わせの情報を格納します。

情報の追加と取得

set() で追加（と上書き）、 get() で取得。

const map = new Map();
const key = 100;

// set
map.set(key, { message: 'Hello World!' });

// get
const value = map.get(key);

concole.log(key, value);

set() は map オブジェクト自体を返すので、メソッドチェインみたいに書けます。

map
  .set(100, 'Hello')
  .set(101, 'World')
  .set(102, '!')

あんまり書かない方が良いと思うけど。

有無の確認

const map = new Map();

console.log(map.has(1));  // => false

map.set(1, 'one');
console.log(map.has(1));  // => true

削除

delete() でキーを指定して消します。削除できた場合は true が、もともと値を持っていなかった場合は false が帰ります。 delete 演算子と違うね。

あと clear() で全部消します。こちらは常に undefined を返す。

const map = new Map();
let deleted;

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

console.log('Size:', map.size);  // => Size: 3
console.log('#101', map.get(101));  // => #101 Goodmorning Universe!

// ひとつ削除
deleted = map.delete(101);
console.log('Size:', map.size);  // => Size: 2
console.log('#101', map.get(101));  // => #101 undefined
console.log('Delete successfully?', deleted);  // => true

// 削除済みのものを削除
deleted = map.delete(101);
console.log('Delete successfully?', deleted);  // => false

// 全部削除
map.clear();
console.log('Size:', map.size);  // => Size: 0

キーは何でも

オブジェクトの場合は基本的に toString() で文字列に変換されるんだけど、 Map の場合は型も含めてそのままキーになります。 1 と "1" は別物扱いです。

const map = new Map();

// 数値の1と文字列の"1"
map.set(1, 'Number 1');
map.set('1', 'String 1');

console.log(map.get(1));  // => "Number 1"
console.log(map.get('1'));  // => "String 1"

各種オブジェクトをそのまま突っ込むこともできます。

繰り返す

forEach() あるいは for-of ループでぐるぐるできます。

あと size という、配列の length みたいなプロパティがあります。

const map = new Map();
let deleted;

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

console.log('Size:', map.size);  // => Size: 3

map.forEach((value, key) => {
    console.log('forEach', key, value);
})

for (let [key, value] of map) {
    console.log('for-of', key, value);
}

forEach() 以外の、 Array.prototype 系のメソッドはないです。

キー、値をまとめて取得

keys() でキーだけ、 values() で値だけ、さらに entries() でキーと値の組のイテレータを得られます。

const map = new Map();

map.set(100, 'Hello World!');
map.set(101, 'Goodmorning Universe!');
map.set(102, 'How is it going man?');

for (let key of map.keys()) {
    console.log('key', key);
}

for (let value of map.values()) {
    console.log('value', value);
}

for (let [key, value] of map.entries()) {
    console.log('key-value', key, value);
}

[] アクセスはだめ

マップじゃなくて普通のインスタンスプロパティへのアクセスになります。

const map = new Map();

map.set(100, 'Hello World!');
map[101] = 'Goodmorning Universe!';

console.log(map.size);  // => 1
console.log(map.get(100));  // => "Hello World!"
console.log(map.get(101));  // => undefined
console.log(map['101']);  // => "Goodmorning Universe!"

オブジェクトに追加情報を持たせる

他に独自の情報を持ちたいけど元のオブジェクトに触りたくないなーというとき、そのオブジェクト自体をキーにして、追加情報を別途置いておくことができます。

const map = new Map();

const el = document.querySelector('#foo');
const someDataForTheElement = {};
map.set(el, someDataForTheElement);

でも別インスタンスになると別物っていう扱いになっちゃうので、永続的に使える識別子があればそっちの方が良さそう。

使い道

と、ここまで書いてきたけど正直これっていう使い道が思いつかない……。

オブジェクト Object （ないし {} ）でも同じようなことはできます。今までずっとこっちでやってきましたね。

const map = {};
map[100] = 'A hundred';
map[101] = 'A hundred and one';

console.log(100, map[100]);  // => "A hundred"

Object.keys(map)
    .forEach((key) => {
        const value = map[key];
        console.log(key, value);
    });

反復処理とかちょっとアレだけどまあどうにかなるし、まだあんまりよくわかんない。

Object と Map の違い

• [] の代わりに set() 、 get() を使う
• キーに文字列以外も使える（ 1 と "1" が別物扱い）
• 反復処理 for-of できる
• size で数を取れる

MDNには

こう載ってる。

• Map – JavaScript | MDN

『オブジェクトとマップの比較』より。

これは Map をいつも使えばいいということではありません。オブジェクトはまだ多くの場面で使えます。Map インスタンスはコレクションとして使う場合のみに役に立ちます。以前オブジェクトをこのように使っていたコードに Map を使うことを考えてみるべきです。オブジェクトはメンバ変数とメソッドを備えたレコードとして使われます。もしまだどちらを使えばいいかわからないなら、以下の質問に答えてみてください。

• キーがいつも実行時までわからない、またはキーを直接調べる必要がありますか?
• すべての値が同じ型で、交換して使用できますか?
• 文字列でないキーが必要ですか?
• キーと値のペアを時々、追加または削除しますか?
• 簡単に量が変わるキーと値のペアがありますか?
• そのコレクションをイテレートしますか?

これらはあなたが Map をコレクションとして使いたいときのサインです。もし対照的に、固定された量のキーがあり、それら個々に操作し、Mapの使い方と区別する場合、オブジェクトを使いましょう。

その他

NaN が合致する

JavaScriptの細かい話で良く出てくるやつなんですが、 NaN “Not a Number” は特殊な値で、自身と等値になりません。

const n = NaN;
console.log(n === n);  // false (wow)

が、マップのキーとして使う場合、（内部で）同じ値とみなしてくれます。

const map = new Map();

map.set(NaN, 'Not a Number');
console.log(map.get(NaN));  // => "Not a Number"
map.set(NaN, '!');
console.log(map.get(NaN));  // => "!"

もちろん NaN と文字列 "NaN" は合致しません。やったね。

オブジェクト Object のキー

上の方で「 obj[key] の key は基本的に文字列に」みたいに言ったけど、 Symbol てのも使えるようになりました。

参考

• ECMAScript® 2017 Language Specification
  • 23.1 Map Objects
  • 23.1.3 Properties of the Map Prototype Object … 各種メソッドとプロパティ
  • 7.2.10 SameValueZero ( x, y ) … get() でキーの合致を確認する内部処理
  • 12.3.2.1 Runtime Semantics: Evaluation … obj[key] の解釈
  • 7.1.14 ToPropertyKey ( argument ) … obj[key] の key の解釈
• Map – JavaScript | MDN
• Symbol – JavaScript | MDN