JavaScriptのincludesがfalseになる｜型・オブジェクト・検索位置の確認

配列の中にあるはずの値をincludes()で探したのに、結果がfalseになる。画面には同じ数字が見えていても、文字列と数値が混ざっていたり、似た内容の別オブジェクトを探していたりすると、期待した結果になりません。

まず要素の型、次にオブジェクトの参照、最後に検索を始める位置を見ると、比較したい条件がはっきりします。以下のコードは、includes()に対応したブラウザーの開発者ツールやNode.jsで、それぞれ独立して実行できます。

数値と文字列が混ざっていないかを見る

const values = ["2", "10"];
console.log(values.includes(2));
console.log(values.includes("2"));

出力は順にfalse、trueです。配列の要素は文字列の"2"で、数値の2とは一致しません。includes()は、探す値に合わせて要素の型を自動変換する処理ではありません。

フォームやAPIから来る値を使う場合も、数値として比較するのか、文字列の識別子として比較するのかを先に決めると迷いにくくなります。先頭に0が付く識別子まで一律に数値化せず、データの意味に合わせて入力側の型をそろえるのが基本です。

オブジェクトは同じ参照かを確かめる

const selected = { id: 7 };
const rows = [selected];
console.log(rows.includes({ id: 7 }));
console.log(rows.includes(selected));

こちらもfalse、trueの順です。{ id: 7 }をもう一度書くと、内容が同じでも別のオブジェクトが作られます。配列に入れたselectedそのものを渡した場合は一致します。

includes()は、オブジェクトの全項目をたどって同じ内容かを検査する関数ではありません。APIから読み直したデータや、新しく組み立てたオブジェクトを探すときは、同じ参照を持っているのか、項目の値を比べたいのかで書き方が変わります。

項目の値で探すときはsomeを使う

const rows = [{ id: 7 }, { id: 12 }];
console.log(rows.some(row => row.id === 7));
console.log(rows.some(row => row.id === "7"));

idが数値の7である要素があるため、最初はtrueです。次は文字列の"7"と厳密比較しているのでfalseになります。

some()は、渡した条件を満たす要素が一つでもあればtrueを返します。この例ではidだけを比較しています。同じidを持つ別のデータまで同一とみなしてよいか、ほかの項目も必要かは、扱うデータに合わせて条件を決められます。単にfalseを消すために比較を緩めるより、何を一致とするかをコードに表すと意図が伝わります。

NaNはindexOfとの違いに注意する

console.log([NaN].includes(NaN));
console.log([NaN].indexOf(NaN));
console.log([-0].includes(+0));

出力はtrue、-1、trueです。includes()はSameValueZeroという比較規則を使い、NaN同士を一致として扱います。indexOf()は同じ配列でもNaNを見つけられず、見つからないことを表す-1を返します。プラスの0とマイナスの0はincludes()で一致します。

多くの値では厳密比較に近い結果になりますが、「includes()は常に===と同じ」と覚えるとNaNでつまずきます。含まれるかだけを知りたいのか、要素の位置が必要なのかも合わせて選ぶと、戻り値の取り違えを防げます。

第2引数で検索範囲を狭めていないかを見る

const values = [5, 8, 13];
console.log(values.includes(8));
console.log(values.includes(8, 2));

結果はtrue、falseです。第2引数の2は「2番目の値」ではなく、0から数えたインデックス2から探す指定です。この配列では13だけが検索されるので、インデックス1にある8は見つかりません。第2引数を省略すると先頭から探します。

意図しないfalseが続く場合は、実際の配列の中身と型、同じオブジェクトを渡しているか、検索開始位置の順に照らし合わせると、必要な修正を選びやすくなります。

配列の比較と並べ替えを続けて行う場合は、数値ソートと元配列を残す書き方も参考になります。文字列の見た目が同じなのに一致しない場合は、Unicode正規化のNFC・NFKCの違いを調べると、型とは別の問題にも気づけます。

参考資料

• ECMAScript仕様：Array.prototype.includes
• MDN：Array.prototype.includes()
• MDN：Array.prototype.some()