🧗🏻 🧒🏿 🌧️ JavaScript：include vs indexOf ♂️ 🔢 🙅🏻

ECMAScript 2016以降、配列を操作する新しいincludeメソッドがJavaScriptに登場しました。コアは、indexOfに非常によく似ています。この記事では、このメソッドが導入された理由と、indexOfとの違いを詳細に検討します。

配列

そのため、Array.prototype.includesメソッドは、配列に目的の値が含まれているかどうかを判断し、 trueまたはfalseを返します。したがって、整数を返すindexOfとは異なり、includesはboolean型の値を返します。この革新は、開発者がよりクリーンで理解しやすいコードを書くのに役立ちます。

たとえば、indexOfを使用して要素が配列に含まれているかどうかを確認する標準的な例を次に示します。

var numbers = [3, 5, 8, 11, 23, 7]; if (numbers.indexOf(1) !== -1) { // ... }

インクルードを使用すると、同じことが次のように記述できます。

 var numbers = [3, 5, 8, 11, 23, 7]; if (numbers.includes(1)) { // ... }

また、このメソッドを実装するとき、indexOfを操作するときに気づいたいくつかの非自明な機能が考慮されました。 NaN値に関して、このメソッドの動作は異なります。

例を考えてみましょう：

 var numbers = [3, 5, 8, 11, 23, 7, NaN]; if (numbers.indexOf(NaN) !== -1) { //     } if (numbers.includes(NaN)) { //    }

したがって、indexOf（ NaN ）は、値が配列内にあるかどうかにかかわらず常に-1を返し、include（ NaN ）は、この要素が配列内にあるかどうかに応じてtrueまたはfalseを返します。

性能

javascriptメソッドのパフォーマンスを評価することはそれほど明白なことではありません。実際、異なるブラウザーでは、ブラウザーが記述されている言語に応じて同じ機能を異なる方法で実装できるためです。さらに、この評価が行われるコンピューターに大きく依存します。しかし、それにもかかわらず、私は少し分析を試みました。

10,000個の正の整数の配列を作成し、 jsbench.github.ioを分析に使用しました。どちらの場合も、実験の純度のために、同じアレイが使用されました。評価は、ブラウザChrome 53およびFirefox 48で実行されました。

クロム
	含む	indexOf
要素は配列の真ん中に	8.361 ops /秒±0.38％	31,296 ops /秒±0.65％
要素は配列の先頭	22,043,904 ops /秒±1.89％	136,512,737 ops /秒±2.06％
希望する要素配列にない	4.018 ops /秒±0.71％	95,221 ops /秒±0.53％

Firefox
	含む	indexOf
要素は配列の真ん中に	84,880 ops /秒±0.59％	86.612 ops /秒±1.35％
要素は配列の先頭	34,087,623 ops /秒±0.99％	33,196,839 ops /秒±0.84％
希望する要素配列にない	25,253 ops /秒±2.75％	14,994 ops /秒±1.16％

indexOfは、Chromeで常に高速に動作し、Firefoxには実質的に顕著な違いはありません（配列に検索する要素がない場合を除く）。また、Firefoxでの新しいメソッドの動作は、一般的にindexOfとincludeが論理的に同じ計算の複雑さを持つ必要があるため、より論理的なようです。

行

同様のメソッドが、ECMAScript 2015以降の文字列を処理するために追加されました。Firefoxの以前のバージョン18〜39では、このメソッドはcontainsという名前で存在していましたが、互換性の問題により、includes（）に名前が変更されました。

結論として、この方法はまだすべてのブラウザでサポートされているわけではないことに注意してください。

ブラウザ	配列	行
クロム	47	41
Firefox	43	40
IE	いや	いや
オペラ	34	いや
サファリ	9	9

JavaScript：include vs indexOf

配列

性能

行

More articles: