JavaScriptのarray.includes()メソッドとは?配列に特定の要素が含まれているか判定する方法
JavaScriptのarray.includes()メソッドは、配列の中に指定した要素が含まれているかどうかを判定するために使用します。戻り値はブール値(true / false)で、要素が見つかればtrue、見つからなければfalseを返します。
構文
array.includes(ele, start)
各パラメータの意味は以下のとおりです。
- ele:検索したい要素(必須)
- start:検索を開始する位置(省略可能)。デフォルトは0で、配列の先頭から検索が始まります
それでは、JavaScriptでarray.includes()メソッドを実際に実装してみましょう。
例1:数値の配列に特定の値が含まれているか判定する
<!DOCTYPE html>
<html>
<body>
<h2>車のバリエーション</h2>
<button onclick="display()">結果を表示</button>
<p id="test"></p>
<script>
var carid = ["110", "230", "299", "399"];
document.getElementById("test").innerHTML = carid;
function display() {
var n = carid.includes("230");
document.getElementById("test").innerHTML = "配列に230が含まれているか? = " + n;
}
</script>
</body>
</html>
出力

上記の「結果を表示」ボタンをクリックすると、次のように判定結果が表示されます。

配列caridには"230"が含まれているため、trueが返されます。
例2:文字列の配列に特定の要素が含まれているか判定する
<!DOCTYPE html>
<html>
<body>
<h2>車のバリエーション</h2>
<p>配列に「Crossover」は含まれていますか?</p>
<button onclick="display()">結果を表示</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible"];
var res2 = car.entries();
for (val of res2) {
document.getElementById("test").innerHTML += val + "<br>";
}
function display() {
var res = car.includes("Crossover");
document.getElementById("test").innerHTML = res;
}
</script>
</body>
</html>
出力

上記の「結果を表示」ボタンをクリックすると、次のようになります。

この例では、配列carには"Hatchback"と"Convertible"のみが含まれており、"Crossover"は存在しないため、falseが返されます。
ポイントまとめ
includes()は大文字と小文字を区別しますNaNの判定にも対応しており、[NaN].includes(NaN)はtrueを返します(indexOf()との違い)- 第2引数に負の値を指定すると、配列の末尾からの相対位置として扱われます
- 対応ブラウザはIEを除く主要なモダンブラウザです
-
JavaScriptのArray.prototype.includes()メソッドとは?配列内に特定の要素が含まれるか判定する方法
Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement:検索対象となる要素を指定します。 fromIndex(省略可能):検索を開始するインデックス位置です。省略した場合は先頭(0)から検索されます。 サンプルコード 以下は、in
-
【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例:関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l