es6で配列の要素の有無を判定するなら、Setのほうが速そう

es6で配列の要素の有無を判定するなら、Setのほうが速そう:

あらかじめ複数個の要素を格納しておいて、とある要素が含まれるか否かを調べたい場合、これまでは配列（ Array ）を使っていました。

es6(ECMAScript 2015) からは、そういった目的によりマッチした Set というオブジェクトが標準ビルトインされているようです！

ArrayとSetで、要素の有無を調べる時の速度（パフォーマンス）の差が気になったので、サクっと調べてみました。

Array - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

Set - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

調べ方

• 配列の全個数を 100、10,000、1,000,000 と変化させます。
• それぞれの個数の時、最初の値と最後の値で検索した時にかかる時間を調べます。
• Chromeブラウザを使います。（Safari、Edgeでもやりたい…）

下のコードで調べました！

for (let i = 1; i <= 3; i++) { 
  const length = Math.pow(100, i); 
  const last = length - 1; 
  const first = 0; 
 
  // 0からlength-1までの数で埋めたArrayとSetを用意 
  const array = Array.from({ 
    length 
  }).map((_, i) => i); 
  const set = new Set(array); 
 
  console.log('-----'); 
  console.log(length.toLocaleString()); 
 
  // Array（最後の値） 
  console.time('array_last'); 
  array.indexOf(last) !== -1; 
  console.timeEnd('array_last'); 
 
  // Array（最初の値） 
  console.time('array_first'); 
  array.indexOf(first) !== -1; 
  console.timeEnd('array_first'); 
 
  // Set（最後の値） 
  console.time('set_last'); 
  set.has(last); 
  console.timeEnd('set_last'); 
 
  // Set（最初の値） 
  console.time('set_first'); 
  set.has(first); 
  console.timeEnd('set_first'); 
} 

結果

それぞれの条件で、最後の要素の検索にかかった時間（カッコ内は最初の要素）

ブラウザ	件数	Array	Set
chrome	100	0.0068359375ms (0.008056640625ms)	0.002685546875ms (0.005859375ms)
chrome	10,000	0.024169921875ms (0.00390625ms)	0.001953125ms (0.001953125ms)
chrome	1,000,000	1.690185546875ms (0.003662109375ms)	0.0029296875ms (0.004150390625ms)

ほとんどの項目で、Setでの検索が優っていることが確認できます！

まとめ

もちろん new Set() しないといけないし、Arrayじゃないとダメな時もあるけど、検索にかかる時間をとにかく短くしたい！って時には良さそうです。

しょしんしゃなので、まちがっているところがあったら、やさしくおしえてください。

おわり