一つの配列の要素が、もう一つの配列の要素に含まれているか知りたい場合（filterとincludes）

例）

宝くじの当選番号が発表されました！
winningNumbers = [ 2, 5, 7 ];

私の持っている宝くじの番号は、これ！
myNumbers = [ 1, 2, 5, 6, 8, 9, 10];

当選番号と一致している番号は、どれだろう！？
出力結果：[ 2, 5]

2つも一致している！やったー！

っていうのを、やります。

---

方法

includes関数とfilter関数を使うことで、簡単にできます。

---

書き方

詳細は下記に記載してます。

const winningNumbers = [ 2, 5, 7 ];
const myNumbers = [ 1, 2, 5, 6, 7, 9, 10];
const matchNumber = myNumbers.filter(myNumber => winningNumbers.includes(myNumber));
console.log(matchNumber);

---

includes関数とは

与えられた値が配列内に存在するかどうかを調べ、Boolean値を返します。配列に値が含まれている場合はtrueを返し、含まれていない場合はfalseを返します。

例）

const array = [1, 2, 3, 4, 5];
const value1 = 3;
var checkIncluded = array.includes(value1); // true

const value2 = 6;
var checkIncluded = array.includes(value2); // false

上記の例では、value1である３、またはvalue2である６が、arrayの配列内に含まれているか判断しています。含まれていれば、trueになり、含まれていなければfalseになります。

---

filter関数とは

与えられた条件に一致する（true）要素だけの新しい配列を作成します。元の配列は変更されず、新しい配列が作成されます。

例）

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(element => element % 2 === 0);
console.log(newArray); // [2, 4]

上記の例では、array配列の中から偶数の要素だけを取り出し、newArrayという新しい配列を作成しています。element % 2 === 0という条件式は、要素が2で割り切れるかどうかを判定しています。割り切れた場合trueを返し、割り切れなかった場合はfalseを返します。したがって、newArrayには2と4が含まれます。

---

includes関数とfilter関数を組み合わせる！

ここまで、理解できれば、あとは、includes関数とfilter関数を合体させればいけそうですね！
最初に書いたコードと同じものを今一度記載します！

const winningNumbers = [ 2, 5, 7 ];
const myNumbers = [ 1, 2, 5, 6, 7, 9, 10];
const matchNumber = myNumbers.filter(myNumber => winningNumbers.includes(myNumber));
console.log(matchNumber);

この、winningNumbers.includes(myNumber)で、
winningNumbersという配列の中(.includes)に、myNumberは、ありますか？という処理が行われています。
じゃあ、myNumberって？
myNumbersの配列の中の要素を一つずつ取り出して、myNumberに入れています。
1回目は１、2回目は２、3回目は５・・・・・7回目は１０。
ここで、winningNumbersという配列の中にmyNumberがあれば(trueであれば)、matchNumberという新しい配列の中に入っていく、という感じです。

---

余談

逆に、winningNumbersに含まれていなかったmyNumberを知りたい場合

『!』をつけましょう。

const winningNumbers = [ 2, 5, 7 ];
const myNumbers = [ 1, 2, 5, 6, 7, 9, 10];
const notMatchNumber = myNumbers.filter(myNumber => !winningNumbers.includes(myNumber));
console.log(notMatchNumber);

.filter(myNumber => !winningNumbers.includes(myNumber))
こんな感じで、!をつけるとその逆、つまり一致していない場合の配列が作られます。

---

!とは。

! は論理演算子の一つで、単項演算子の否定演算子を表します。この演算子を使うと、演算子が作用する値を反転させることができます。
つまり、.includes(myNumber)でtrueになったものはfalseで返し、falseになったものはtrueで返されます。

---

以上です！
最後まで見て頂きありがとうございました！

いいなって思ったら、「スキ」ボタン押してくれると励みになりますので、よろしくお願いします！