JavaScript 2つの配列を比較して、一方の配列の値に全て一致した場合に「true」を判定する条件

Question

表題の通りなのですが、
2つの配列を比較して、一方の配列 (下記で言えば「arr2」) の全ての値が、
「arr1」に含まれている場合に「true」を判定する条件式を導きだすののに四苦八苦しています。

var arr1 = ["a", "b", "c", "d", "e", "f", "g"];
var arr2 = ["a", "b", "c"];

自分でも下記の検索条件で色々と調査したのですが、
なかなか合致する解決策にたどりつけていません。

■Google検索
https://www.google.com/search?q=javascript+%E9%85%8D%E5%88%97%E6%AF%94%E8%BC%83

どうぞ宜しくお願いいたします。m(_ _)m

Comments

[maisumakun]

・arr1・arr2に入りうる値は「文字列だけ」ですか？他のものも考えられますか？
・arr2に同じ項目が複数入っていた場合はどうしますか？
・動作環境はどのようなものを考えていますか？

[ArimaTetsuya]

maisumakun さん
ご質問ありがとうございます。

・arr1・arr2に入りうる値は「文字列だけ」ですか？他のものも考えられますか？
→文字列だけです。

・arr2に同じ項目が複数入っていた場合はどうしますか？
→arr2に複数入ることはありません。チェックボックでチェックしたvalueの値が入ります。

・動作環境はどのようなものを考えていますか？
→動作環境はWebブラウザ(PC・SP)で、チェックボックを使用したand検索をしようとしています。
　ちなみに、arr1には、検索対象にdata属性で設定している、文字列値が入ります。

お手数おかけいたしますが、宜しくお願いいたします。

[otn]

> なかなか合致する解決策にたどりつけていません。
> ■Google検索

検索結果の「配列の差分を取得する」ような記事が求める物です。
arry2 から arry1 を引いた差分が空の時に真にすればいいです。

[ArimaTetsuya]

otn さん
アドバイスありがとうございます。
そちらのロジックも今後考えてみます。
宜しくお願いいたします。

Answer 1

基本的な指針としては Automatic9045 さんと同じです。

ループ内での評価結果として、arr2 と同じ配列（tmp）が作成できれば、配列長で判断できます。

1. tmp を空の配列として初期化。
2. for ループで比較し、arr2 のアイテムが arr1に含まれているならtmp.push()する。
3. ループを抜けたあと、arr2とtmp それぞれの配列長は同じ？

ループ内での評価用条件式 ary.indexOf(elm) > 0 の代わりに Array.prototype.includes() も使えます。

追記）解決されているようなので

var arr1 = ["a", "b", "c", "d", "e", "f", "g"];
var arr2 = ["a", "b", "c"];

var tmp = [];
for( str of arr2 ) { // for of を使う例
  if( arr1.includes( str ) ) { // 条件式
    tmp.push(str)
  }
}
console.log( tmp ); // ["a", "b", "c"]
console.log( tmp.length == arr2.length ); // true

---

発展になりますが、次のように、arr1 に arr2 の要素と同じ値が複数個含まれるときも考えて良いと思います。

var arr1 = ["a", "b", "c", "d", "a", "e", "f", "g"]; // "a" が複数個ある例
var arr2 = ["a", "b", "c"];

Comments

[ArimaTetsuya]

AkitoshiManabe さん
ご回答ありがとうございます。
まだまだ理解できないところはありますが、
勉強していきます。
ありがとうございました。m(_ _)m

[Automatic9045]

分かりやすさ重視の方法で回答しましたが、なるほど、そのように最適化することが出来るんですね。勉強になりました。

Answer 2

こんにちは。

かなり調べても望むものが見つからなかったときは、自分で実装の仕方を考える他ありません。
私が実装するとしたら、
「arr2の各要素について、arr1に含まれているか調べる」
という方法をとると思います。

• 配列の各要素について試行を実施し、全ての試行がtrueとなるか試すArray.prototype.every()関数
• 配列内に特定の要素が存在するか調べるArray.prototype.indexOf()関数

この2つを組み合わせれば綺麗に書けます。

初学者のうちはforは非常に身近なためよく使いがちですが、forループで実装しようとするとどうしても直感的に理解しづらいコードになってしまいます。書いているご自身でも、自分が何を書いているのかよく分からなくなってしまっているのではないでしょうか。
今回提案したevery関数の他にも、find関数など、配列操作を可読性高く書くためのモダンな関数が沢山用意されているので、是非ご自分で調べてみて下さい。

---

##≪以下ネタバレ、出来る限りご自分で頑張ってみて下さい≫

if (arr2.every(element => arr1.indexOf(element) != -1)) {
  console.log("全部ありました");
}

Comments

[ArimaTetsuya]

Automatic9045 さん
ご回答ありがとうございます。

var arr1 = ["a", "b", "c", "d", "e", "f", "g"];
var arr2 = ["a", "b", "c"];
var arrCheck = false;
for (var i = 0; i < arr1.length; i++) {
if(arr2.indexOf(arr1[i]) >= 0) {
arrCheck = true;
break;
}
}
return arrCheck;

上記の記述で試したのですが、なかなかうまく行かず、、、。
勉強が足りないです。

[maisumakun]

> 上記の記述で試したのですが、なかなかうまく行かず、、、。

arr1とarr2が逆ではないでしょうか？

[Automatic9045]

(削除)

--追記--
変なことを書きました。このコメントは誤りです。失礼しました。
とはいえ、これだと動きません。
スマートな方法について追記しておきます。

[ArimaTetsuya]

maisumakun さん
ありがとうございます。
逆にしましたができませんでした。

Automatic9045 さん
ご確認ありがとうございます。

[ArimaTetsuya]

Automatic9045 さん
追記ありがとうございます。(ネ◯バレもありがとうございます。)
直ぐに試してみます。
宜しくお願いいたします。

[ArimaTetsuya]

Automatic9045 さん
解決できました。
ありがとうございました。m(_ _)m