JavaScriptで配列に含むか検索する5つの方法！

JavaScriptで配列に要素を含んでいるか検索する方法について書いています。
配列の要素を含むか確認する時には、下記のメソッドを使います。

includesメソッドで含むか確認する

配列からincludesメソッドを使うことで、要素を含んでいるか確認することができます。
includesメソッドは要素がある場合はtrueを返して、要素がない場合はfalseを返します。

例えば、下記のように使います。

let drinks = ['beer', 'wine', 'milk', 'coffee']
let result = drinks.includes('coffee')

if (result) {
    console.log("drinksにcoffeeが含まれる")
}

最初にdrinks配列を4つの要素で初期化して作成しています。

次の行で、includesを呼び出しています。
引数に渡しているのは、検索する要素です。今回は「coffee」を渡しています。
そのため、drinks配列に「coffee」を含むか探します。

要素が見つかった(含んでいた)場合は、trueが返ってきます。
見つからなかった場合には、falseが返ってきます。

今回のコードだと、要素を含んでいるので、if文の処理を通ります。
「drinksにcoffeeが含まれる」が出力されて、処理が終了します。

indexOfメソッドで含むか確認する

配列からindexOfメソッドを使って、要素を含んでいるか確認できます。
indexOfメソッドは要素がある場合には要素番号を返してくれます。ない場合には-1が返ってきます。

例えば、下記のように使います。

let drinks = ['beer', 'wine', 'milk', 'coffee']
let result = drinks.indexOf('milk')

if (result !== -1) {
    console.log("drinksにmilkが含まれる")
}

最初にdrinks配列を4つの要素で初期化して作成しています。

次の行で、indexOfを呼び出しています。
引数に渡しているのは、検索する要素です。今回は「milk」を渡しています。

要素が見つかった(含んでいた)場合は、要素番号が返ってきます。
見つからなかった場合には、「-1」が返ってきます。

今回のコードだと、要素を含んでいます。
「milk」は配列の0番目から数えて、2番目なので、result変数には「2」が返ってきます。

if文の処理を「-1」じゃなかったら通るので、「drinksにmilkが含まれる」を出力して、処理を終了します。

直接if文に返り値を入れない

if文に直接、下記のようにindexOfメソッドの返り値を入れると、2点問題があります。

if (result) {
    console.log("drinksにmilkが含まれる")
}

0番目の要素があった場合は「0」が返ってきますが、要素があるのにif文の中を通りません。
また、要素がなかった場合の「-1」の時にもif文の中を通るので、indexOfの要素番号を条件に使う場合には「-1」と比べる必要があります。

findIndexメソッドで含むか確認する

findIndexメソッドを使うと、配列の要素を比較関数で調べて、比較値とあっていた場合に要素番号を返します。

let drinks = ['beer', 'wine', 'milk', 'coffee']

let result = drinks.findIndex((value) => value === 'coffee')
if (result !== -1) {
    console.log("drinksにcoffeeが含まれる:" + result)
}

最初にdrinks配列を4つの要素で初期化して作成しています。

次の行で、findIndexを呼び出しています。
引数に渡しているのは比較関数です。要素がひとつずつvalueとして渡されて、比較されます。
今回は「coffee」と同じかを比較しています。

同じ要素があるので、要素番号の「3」がresult変数に返ってきます。
比較した結果、同じ要素がない場合は、「-1」が返ってきます。

結果、「drinksにcoffeeが含まれる:3」が返ってきて処理が終了します。

一部を比較する

比較関数なので、関数の中で自由に要素を比較することが可能です。
下記では、先頭文字が「m」だった時の要素番号を返すようにしました。

let drinks = ['beer', 'wine', 'milk', 'coffee']

let result = drinks.findIndex((value) => {
    return 'm' === value.substring(0, 1)
})
console.log(result) // 2

比較関数の中で、要素の先頭の文字をsubstringで抜き出して、比較しています。
先頭の文字が「m」なのは0番目から数えて、2番目の「milk」なので、要素番号として「2」が返ってきます。

findIndexメソッドについては、こちらに詳細記事を書いているので、確認してみてください。

JavaScriptで配列の要素番号を検索する方法！(findIndexメソッド)

JavaScriptでfindIndexメソッドを使用して、配列の要素番号を探す方法について書いています。 findIndexは要素の位置番号を返してくれます。 要素自体を取得したい場合には、findメソッドを使用すると良いです。 簡単に解...

codelikes.com

2022.06.20

everyで含むか確認する

everyメソッドでも比較関数を使って、配列の値を検証します。
配列の要素を全て比較して、全て条件に合っていたときにtrueを返します。それ以外はfalseになります。

let scores = [50, 60, 70, 66, 55]

let result = scores.every((value) => {
    return value >= 50
})
console.log(result) // true

最初にscores配列を5つの数値を入れて作成しました。

その次にscores配列からeveryメソッドを呼んでいます。
比較関数の内容は「value >= 50」としています。
全ての要素(value変数)が50以上の場合には、result変数にtrueが返ってきます。
ひとつでも、違う場合にはfalseです。

今回は、全ての要素が比較関数で書いた条件に合います。
console.logで出力すると、trueが返ってきていることが確認できました。

someで含むか確認する

someメソッドでも比較関数を使って、配列の値を検証します。
someメソッドでは配列の要素を全て比較して、ひとつでも条件にあっていたときにtrueになります。
それ以外はfalseになります。

everyメソッドと違うのは、ひとつでもあっていた場合にtrueになるというところです。

let scores = [33, 58, 70, 69, 55]

let result = scores.some((value) => {
    return value >= 70
})
console.log(result) // true

先ほどのプログラムを少し変えて、someメソッドで比較するようにしてみました。
someメソッドの引数に比較関数を渡しています。

今回は「value >= 70」で比較しています。
scores配列に70以上の値が、ひとつあるので、合っていることになってtrueが返ってきます。
結果、console.logで出力するとtrueになりました。

このように、someではひとつでも条件に合っていればtrueになります。
ひとつも条件に合わない場合にはfalseが返ってきます。

配列に含むか検索するメソッドまとめ

紹介した5つのメソッドを表にまとめてみました。

それぞれ、下記のようなシーンで使うと良いのではないでしょうか。