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

JavaScript

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

・includesメソッド
・indexOfメソッド
・findIndexメソッド
・everyメソッド
・someメソッド
PR

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が含まれる」が出力されて、処理が終了します。

PR

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」が返ってきます。

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つのメソッドを表にまとめてみました。

メソッド比較方法返り値
includes引数の値と同じかtrueまたはfalse
indexOf引数の値と同じか配列の要素番号。見つからない場合は「-1」
findIndex比較関数で探す配列の要素番号。見つからない場合は「-1」
every比較関数で探す要素が比較内容に全て合っている場合にtrue、そうでない場合false
some比較関数で探す要素がひとつでも合っている場合にtrue、そうでない場合false

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

・includesメソッド:単純に要素があるか調べたい
・indexOfメソッド:単純に要素があるか調べて、要素番号が欲しい
・findIndexメソッド:比較関数で要素があるか調べて、要素番号が欲しい
・everyメソッド:全ての要素が比較関数の条件に合っているか調べたい
・everyメソッド:全ての要素の中で、ひとつでも比較関数の条件に合っているか調べたい

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました