Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

カテゎリヌ: JavaScript

ゞェネレヌタず自䜜むテレヌタで各皮オブゞェクトもぐヌるぐる。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 23日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 23日目

抂芁

function* で、むテレヌタを返すゞェネレヌタ関数を䜜成できたす。䞭で yield が䜿えたす。

function* createIdGenerator() {
  let currentId = 100;
  while (true) {
    yield currentId++;
  }
}

const iterator = createIdGenerator();
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

これはオブゞェクトを反埩可胜(むテラブル)にするのに䟿利です。

const obj = {
  *[Symbol.iterator]() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj) {
  console.log(item);
}

むテレヌタ

著名なデザむンパタヌンのひず぀です。配列でないオブゞェクトでも、共通のむンタヌフェむスで反埩凊理を行えるようにしたす。

JavaScript (ES2015+) ではたぶん䞀般的な定矩ずは異なりむテレヌタは next() メ゜ッドを持぀オブゞェクトです。具䜓的なむンタヌフェむスは埌述したす。

JavaScriptでのむテレヌタ

むテラブルなオブゞェクトで [Symbol.iterator]() ずいうすごい名前のメ゜ッドを実行するず、むテレヌタを埗られたす。

const iterable = new Set([100, 200, 300]);

// むテレヌタ生成
const it = iterable[Symbol.iterator]();

while (true) {
  // 反埩凊理を進め、珟段階の状態を埗る
  const result = it.next();

  // 繰り返し条件を確認
  if (result.done) {
    break;
  }
  
  // 項目取埗
  const item = result.value;

  console.log(item);
}

Set オブゞェクトはむテラブルなオブゞェクトなので、 [Symbol.iterator]() を実行するずむテレヌタ it を生成しお返しおくれたす。

そのむテレヌタ it は next() メ゜ッドを持ちたす。このメ゜ッド呌び出しを繰り返しお反埩 (iterate) しおいきたす。

next() メ゜ッドは実行するたびに、なんだろ、結果オブゞェクト result を生成しお返したす。結果オブゞェクトっお呌び方で良いかな。 IteratorResult ずいう名前のむンタヌフェむス埌述を満たすオブゞェクトです。

この結果オブゞェクトはたた、二぀のプロパティを持ちたす。 value が反埩途䞭の珟段階の倀で、 done がもう反埩し終えたかが栌玍される真停倀です。

これらを䜿っお配列でも䜕でもぐるぐるできたす。

for-of で䜿う

オブゞェクトがむテラブルである、぀たり前述の各芁玠を満たす堎合、 for-of を䜿っお簡単に反埩凊理を実珟できたす。

const iterable = new Set([100, 200, 300]);

for (let item of iterable) {
  console.log(item);
}

わあ短い。

ゞェネレヌタで生成する

[Symbol.iterator]() をちゃんず自䜜すればどんなオブゞェクトでもむテラブルにできたす。

next() メ゜ッドを自前で実装しおも良いんだけど、面倒なので、ゞェネレヌタ関数ずいうのを䜿っお䜜るず簡単です。

ゞェネレヌタ

function* を䜿っおゞェネレヌタ関数を宣蚀できたす。ゞェネレヌタ関数を実行するずゞェネレヌタオブゞェクトを埗られたす。

function* createGenerator() {
  const values = [100, 200, 300];

  for (let i = 0; i < values.length; i++) {
    const item = values[i];
    yield item;
  }
}

const generator = createGenerator();

ゞェネレヌタオブゞェクトは加えおむテラブルでもあるで for-of で䜿えたす。わヌい。

for (let item of generator) {
  console.log(item);
}

generator[Symbol.iterator]() の結果は元のオブゞェクト generator になりたす。

たた同時にむテレヌタでもあるので next() を持ちたす。コヌドは曞かなくおも良いかね。

yield

さらっず䜿ったけど、ゞェネレヌタ関数の䞭では yield ずいう匏を䜿えたす。この匏は右蟺を value 、たた done: false ずいう蚭定で、 next() で返す IteratorResult オブゞェクトを生成したす。

必ずしも for 文で䜿う必芁はないです。

function* oneTwoThree() {
  yield 1;
  yield 2;
  yield 3;
}

const it = oneTwoThree();

let result;
result = it.next();
console.log(result.value);  // => 1
result = it.next();
console.log(result.value);  // => 2
result = it.next();
console.log(result.value);  // => 3

[Symbol.iterator]() を実装する

いよいよ [Symbol.iterator]() です。 * を付けお、ゞェネレヌタ関数ずいうかゞェネレヌタメ゜ッドになりたす。

const obj = {
  *[Symbol.iterator]() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj) {
  console.log(item);
}

他のむテレヌタ生成メ゜ッドを䜜る

obj じゃなくお obj.iterator() のようにメ゜ッドを呌んでやる必芁があるけれど、他の名前でも倧䞈倫。

目的別に䜕通りか甚意しおも良いかもね。

const obj = {
  *iterator() {
    const max = 3;
    for (let i = 0; i < max; i++) {
      yield i;
    }
  }
};

for (let item of obj.iterator()) {
  console.log(item);
}

むテレヌタのむンタヌフェむス

いっぱい出おきたのでたずめ。

  • 反埩可胜(むテラブル)なオブゞェクト … [Symbol.iterator]() をも぀オブゞェクト Iterable 
  • [Symbol.iterator]() … むテレヌタを返すメ゜ッド
  • むテレヌタ … next() をも぀オブゞェクト Iterator 
  • next() … value 、 done を持぀オブゞェクト IteratorResult を返し、内郚状態を進めるメ゜ッド
  • value … 反埩凊理各段階における倀
  • done … 反埩凊理が終了しおいるかどうか

[Symbol.iterator]()

Symbol.iterator ずいうシンボルが、名前ずいうか䜕だろ、識別子になっおるメ゜ッドです。 [] は動的にプロパティ名を決めるや぀です。別皿参照。あずシンボル Symbol に぀いおも。

なんならどこかで Symbol.iterator = 'iterate' ずか定矩されおるず考えおください。

Iterable むンタヌフェむス

オブゞェクトがこのむンタヌフェむスを満たしおいるず、 for-of ずか ... ずかが䜿えたす。

  • [Symbol.iterator]() … むテレヌタオブゞェクトを返す

Iterator むンタヌフェむス

このむンタヌフェむスを満たすオブゞェクトをむテレヌタオブゞェクトず呌びたす。

  • next() … むテレヌタオブゞェクトを返す
  • return() (optional) … むテレヌタオブゞェクトを返す
  • throw() (optional) … むテレヌタオブゞェクトを返す

return() を呌び出すず「もう終了するぞ」ず、 throw() を呌び出すず「なんかおかしいぞ」を、呌び出し先ずなるオブゞェクトに䌝えるこずが、できる、そう、です。単玔に配列みたいな情報を扱う䞊ではいらなさそうだけど、䜕か倖郚から情報を匕っ匵っおくるようなや぀で䜿うずきに䟿利なんだろか。わかんない。

IteratorResult むンタヌフェむス

next() 他のメ゜ッドはこのむンタヌフェむスを満たすオブゞェクトを返す必芁がありたす。

  • done
  • value

分割代入やスプレッド挔算子 ...

これら実はむテラブルオブゞェクトが察象です。配列じゃなくおも自䜜のオブゞェクトでも、 [Symbol.iterator]() を備えおいれば䜿えたす。

function* oneTwoThree() {
  yield 1;
  yield 2;
  yield 3;
}

// 分割代入
const [one, two, three] = oneTwoThree();
console.log(one);
console.log(two);
console.log(three);

// スプレッド挔算子
function say(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}
say(...oneTwoThree());

ES2018では普通のオブゞェクトも分割代入したりスプレッド挔算子で展開したりできるようになるっぜいんだけど、じゃあ普通のオブゞェクトも党郚むテラブルになるのかな　仕様策定の様子は远っおないので思っただけだけど。

分割代入ず ... の䜿い方は別皿参照。

その他

[Symbol.iterator]() お䜕だよ

なんで普通の名前じゃないんだ Symbol なんだ、 toString() みたいにしなかったんだ。

だいたいむテレヌタはむテラブル

「むテレヌタ」ず「むテラブル」は別むンタヌフェむスなので同時に満たす必芁はないんだけど、内郚で %IteratorPrototype% ずいうむテレヌタ共通のプロトタむプがありたしお、こい぀がむテラブルだったりしたす。

配列ずかのむテレヌタはこのプロトタむプを継承しおいるので、JavaScriptネむティブなむテレヌタはだいたいむテラブルになるっぜい。 TypedArray は専甚のものを持たないが、普通の配列 Array の凊理を利甚しおいる。

ちなみに %IteratorPrototype% の [Symbol.iterator]() は this を返したす。

むテラブルではないむテレヌタ

の䟋。

class MyIterator {
  constructor(values) {
    this.values = values;
    this.index = 0;
  }

  // 自前で実装するぞ
  next() {
    const value = this.values[this.index];
    this.index += 1;
    return {
      value: value,
      done: this.index >= this.values.length,
    };
  }
};

const values = [100, 200, 300];

// むテレヌタずしお利甚
const it = new MyIterator(values);
let result;
result = it.next();
console.log(result.value);

// むテラブルずしお利甚できない
// Exception: TypeError: (new MyIterator(...)) is not iterable
for (let item of new MyIterator(values)) {
  console.log(item);
}

普通のむテレヌタ

Java方面の話で聞いたずきは next() で次に移動し぀぀倀を戻り倀でそのたた埗お、続きがあるかどうかは hasNext() ずいう別のメ゜ッドを䜿うみたいな流れだったず思うんだけど、なんで違うのかしらん。

時代が倉わっおむテレヌタパタヌン自䜓が倉わった

むンタヌフェむス vs プロトコル

ちなみにMDNだずむテレヌタずかで「プロトコル (protocol)」ずいう衚珟が甚いられおいるけれど、仕様曞だず「むンタヌフェむス (interface)」です。たあ同じものでしょ。

たしかSwiftはprotocolずいう衚珟しおたよね。

function ず * の間で改行できる

適圓に空癜文字を眮ける様子。

function
* goo() {
}

async はだめだったのに。

参考

曎新履歎

  • 2017/12/23 TypedArray がむテラブルじゃないみたいな勘違いしおたのを修正

むテレヌタずfor-of文で配列以倖もぐヌるぐる。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 22日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 22日目

抂芁

配列ずか Map ずかは for-of 文を䜿っお、添え字アクセス [] を䜿わずにぐるぐるできたす。

const arr = ['Hello', 'World', '!'];

for (let item of arr) {
  console.log(item);
}

普通のオブゞェクトでは䜿えないけど、むンタヌフェむスを远加すれば䜿えるようにもなりたす。

䜿い方

普通の for 文を䜿っお配列で arr[i] する代わりに for-of でいきなり倀を取っおこれたす。

const arr = ['Hello', 'World', '!'];

for (let item of arr) {
  console.log(item);
}

配列以倖でも反埩可胜なオブゞェクト埌述で䜿えたす。

const map = new Map([[1, 11], [2, 22], [3, 33]]);

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

文字列ず絵文字

文字列でも䜿えたす。絵文字ずかのサロゲヌトペアを䞊手に扱っおくれたす。やったね。

const str = '#sushi🍣';

console.log('--- for ---');
for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

console.log('--- for-of ---');
for (let item of str) {
  console.log(item);
}


--- for ---
#
s
u
s
h
i
ￜ
ￜ
--- for-of ---
#
s
u
s
h
i
🍣

反埩可胜なオブゞェクト

for-of 文は反埩可胜なオブゞェクトに察しお利甚するこずができたす。

察応しおないオブゞェクトだず゚ラヌに。

const obj = {};

for (let item of obj) {  // TypeError: obj[Symbol.iterator] is not a function
    console.log(item);
}

反埩可胜なオブゞェクト

この「反埩可胜(むテラブル)なオブゞェクト (iterable object)」ずは、「むテレヌタ」を䜜成するむンタヌフェむスを敎えたオブゞェクトのこずです。配列 Array や Map 等が該圓したす。

むンタヌフェむスが敎っおいれば䜕でも良いので、自䜜するこずもできたす。

// 反埩可胜なオブゞェクト
const iterable = {
  // for-ofに必芁なむンタヌフェむス
  [Symbol.iterator]() {
    const max = 10;
    let n = 0;

    const iterator = {
      next() {
        return { value: n++, done: n > max };
      },
    };

    return iterator;
  },
};

// よっしゃヌ䜿うぞヌ
for (let item of iterable) {
  console.log(item);
}

詳现は別皿参照。

その他

for-in ず for-of

もちろん別物なんだけど、同じ項 (13.7.5) でたずめお定矩されおるので、兄匟みたいなものらしい。

for-in はカンマ , 区切りの倀を眮ける

なんでOKなんだろ。

const arr1 = [100];
const arr2 = [200];

arr1.foo = 123;
arr2.bar = 123;
for (let index in arr1, arr2) {
  console.log(index);
}

もちろん末尟のもの arr2 が有効になりたす。

0
bar

for-of でやるず構文゚ラヌです。

const arr1 = [100];
const arr2 = [200];

for (let item of arr1, arr2) {  // SyntaxError: Unexpected token ,
  console.log(item);
}

for-in で初期倀を曞ける堎面が

"use strict" の厳栌モヌドでない堎面で、 var をここで䜿甚する堎合のみ、初期倀を眮ける。 let を䜿ったり、別の堎所で var 宣蚀しおからの代入だずだめ。

const arr = [1, 2, 3];

for (var index = 'wow' in arr) {
  console.log(index);
}

ずいっおもその初期倀が適甚される堎面おあるんだろか。

謎仕様だなヌ。埌方互換のためなのかな。

参考

  • ECMAScript® 2017 Language Specification
    • 13.7.5 The for-in and for-of Statements
    • 13.7.5.12 Runtime Semantics: ForIn/OfHeadEvaluation ( TDZnames, expr, iterationKind ) … むテレヌタの䜜成。初期凊理的な
    • 13.7.5.13 Runtime Semantics: ForIn/OfBodyEvaluation ( lhs, stmt, iterator, iterationKind, lhsKind, labelSet ) … むテレヌタを䜿っお反埩凊理する
    • 13.7.5.15 EnumerateObjectProperties ( O ) … for-in 甚のむテレヌタ
    • 6.1.5.1 Well-Known Symbols … Symbole.iterator
    • 7.4.1 GetIterator ( obj [ , method ] )
    • 7.4.5 IteratorStep ( iterator ) … むテレヌタで反埩
    • 25.1 Iteration
    • B.3.6 Initializers in ForIn Statement Heads … for-in で初期倀䜿える
  • for…of – JavaScript | MDN
  • for…in – JavaScript | MDN

WeakMap、WeakSetで「匱い参照」を䜿えるようになったぞ。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 21日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , , , ,

珟代的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のキヌずしおのみ䜿われおいる堎合、そのリ゜ヌスは削陀されたす。

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.

WeakMapオブゞェクトはkey/valueペアのコレクションです。keyはオブゞェクト、valueはECMAScript蚀語の任意の倀を取りたす。WeakMapはあるkey/valueペアを栌玍しおいるかを、特定のkeyを甚いお確認できるよう芁求されるかもしれたせんが、キヌずしお保持しおいるオブゞェクトの列挙に぀いおの手順は提䟛されおいたせん。もしWeakMapのkey/valueペアのキヌずしお䜿われおいるオブゞェクトが、そのWeakMap内から開始する参照チェむンを蟿っおのみ到達できる堎合、そのkey/valueペアはアクセスできず、たた自動的にそのWeakMapから削陀されたす。WeakMapの実装は、このようなkey/valueペア及び関連リ゜ヌスを怜出し、削陀する必芁がありたす。

匷調は匕甚者。

匱参照ずか蚀ったけど、仕様曞ではそういう単語は䜿っおないし、実装方法が任意なので参照カりンタが甚いられおいるずも限らないです。たぶん䜿っおるず思うんだけど。

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

継承しお

仕様曞によるず「サブクラスずしお䜿えるように蚭蚈されおいる」ずのこずです。

内郚の初期凊理が必芁なので、コンストラクタで 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の解答から。

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).

WeakMapを䜿わないずメモリリヌクを匕き起こす利甚ケヌス:

  • あるオブゞェクトに関するプラむベヌトな情報を保持し、Mapぞの参照を経由しおのアクセスのみを公開する。より盎接的な手段ずしおプラむベヌトシンボルが提案されおいるが、ただ時間かかりそう
  • ラむブラリオブゞェクトに関する情報を、ラむブラリを倉曎したりオヌバヌヘッドを招かずに保持する
  • 小さなオブゞェクトの組み合わせに関する情報を保持する。この皮の倚数のオブゞェクトは、JS゚ンゞンが同皮のオブゞェクトのために䜿う隠しクラスに関する問題を匕き起こさないために存圚する蚳泚: ごめんむミフ
  • ブラりザのDOMノヌドのような、ホストオブゞェクトに関する情報を保持する
  • あるオブゞェクトの倖偎から胜力 (capability) を远加する他の解答にあるむベント゚ミッタの䟋みたいに

茉せずいおなんだけど正盎䜕蚀っおんのかよくわかんない  。

その他

キヌ䞀芧機胜の提䟛は犁止

速床問題に発展しがちなので、そういうのは実装しちゃだめ (must not) ず仕様曞に曞かれおたす。

あれ、そういう理解で合っおるよね

参考

倀だけ芚えおおくならSetずいう手が。珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 20日目

投皿日時:
カテゎリヌ: JavaScript
タグ: , , ,

珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 20日目

抂芁

Map のキヌだけを保持する版です。

const set = new Set();
set.add(1);
set.add(2);

console.log(set.size);  // 2
console.log(set.has(2));  // => true

䜿い方

なんずなく Map ず同じ感じ。ただし倀を远加するのは set() じゃなくお add() になっおたす。

// 䜜成
const set = new Set();

// 远加
set.add(1);
set.add(2);
set.add(3);
set.add(1);  // 同じ倀は無芖される

// 有無
console.log(set.has(2));  // => true

// 削陀
set.delete(2);
console.log(set.has(2));  // => false

// サむズ
console.log('Size:', set.size);  // 2

// 反埩
set.forEach((value) => {
    console.log('forEach', value);
})

for (let value of set) {
    console.log('for-of', value);
}

// 倀だけたずめお取埗
const values = set.values();

// 党削陀
set.clear();

keys() もある

ただし keys() ず values() は完党に同じ関数です。

console.log(set.keys === set.values);  // => true

あず entries() もあっお、なんか想像通りの倉な感じの結果を返したす。むンタヌフェむスを統䞀する的なや぀なんだろか。

その他

キヌ vs 倀

Set の仕様内では “value” ずいう衚珟を䜿っおるっぜい。でも重耇しないずいう特性はキヌっぜいよね。

参考

デヌタ保持ならObjectよりMapの方が良いの珟代的JavaScriptおれおれアドベントカレンダヌ2017 – 19日目

投皿日時:
カテゎリヌ: 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 をい぀も䜿えばいいずいうこずではありたせん。オブゞェクトはただ倚くの堎面で䜿えたす。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