【JavaScript】2つの配列を比較して共通する要素の数を数え、一致率を求める方法
ここに2つの配列があるとします。1つはある試験の正解を格納した配列、もう1つは受験者が記入した解答を格納した配列です。ただし、何らかの理由で配列の順序がシャッフルされてしまい、対応する順番には並んでいません。ただし、異なる問題が同じ答えを持つことはないものと保証されています。
そこで私たちの課題は、この2つの配列を受け取って互いに共通する要素をすべて検出し、一致した解答の数に基づいて受験者の得点率を計算する関数を作成することです。
実装例
const correct = ['India', 'Japan', 56, 'Mount Everest', 'Nile', 'Neil Armstrong', 'Inception', 'Lionel Messi', 'Joe Biden', 'Vatican City'];
const answered = ['Nile', 'Neil Armstrong', 'Joe Biden', 'Mount Everest', 'Vatican City', 'Inception', 'Japan', 56, 'China', 'Cristiano Ronaldo'];
const findPercentage = (first, second) => {
const count = first.reduce((acc, val) => {
if (second.includes(val)) {
return ++acc;
}
return acc;
}, 0);
return (count / first.length) * 100;
};
console.log(`受験者の得点は ${findPercentage(correct, answered)}% です`);
出力結果
コンソールには次のように表示されます。
受験者の得点は 80% です
この例では、10問中8問が正解しているため、得点率は 80% となります。
コードの解説
reduce(): 正解配列(correct)を先頭から順に走査し、初期値0からカウントを積み上げていきます。includes(): 各正解が解答配列(answered)に含まれているかどうかを判定します。含まれていればカウントを1増やします。- 最後に、一致数を配列の長さで割って100倍することで、得点率(%)を求めています。
より高速な代替案:Set を使う方法
includes() は配列を線形探索するため、要素数が多い場合は処理が遅くなります。事前に解答配列を Set に変換しておけば、存在確認がほぼ定数時間(O(1))で行え、パフォーマンスが大幅に向上します。
const findPercentage = (first, second) => {
const secondSet = new Set(second);
const count = first.filter(val => secondSet.has(val)).length;
return (count / first.length) * 100;
};
filter() と Set.prototype.has() を組み合わせたこの書き方は、コードも簡潔になり、大規模なデータセットでも高速に動作します。目的に応じて使い分けてください。
-
JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】
JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード 以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&
-
JavaScriptで2つの配列を乗算する方法|forループとmap()の実装例
JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch