JavaScriptで2つの配列の対応する要素の差（絶対値）を計算し新しい配列として返す方法

2つの配列の要素差を絶対値で求める方法

例えば、次のような2つの配列があるとします。

const arr1 = [1,2,3,4,5,6];
const arr2 = [9,8,7,5,8,3];

ここで必要となるのは、このような2つの配列を受け取り、対応する要素同士の差の絶対値を要素として持つ新しい配列を返すJavaScript関数です。

上記の配列の場合、期待される出力は以下のようになります。

const output = [8, 6, 4, 1, 3, 3];

この処理は、Math.abs()メソッドを活用することでシンプルに実装できます。まず結果を格納するための空の配列を用意し、forループで各要素に順番にアクセスしながら差の絶対値をpushしていき、最後にその配列を返すだけです。

サンプルコード

実際のコードは以下の通りです。

const arr1 = [1,2,3,4,5,6];
const arr2 = [9,8,7,5,8,3];

const absDifference = (arr1, arr2) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
        const el = Math.abs((arr1[i] || 0) - (arr2[i] || 0));
        res[i] = el;
    };
    return res;
};
console.log(absDifference(arr1, arr2));

実行結果

コンソールには次のような出力が表示されます。

[ 8, 6, 4, 1, 3, 3 ]

ポイント解説

• (arr1[i] || 0): 要素が undefined の場合に自動的に 0 に置き換わるため、2つの配列の長さが異なっていてもエラーにならず安全に動作します。
• Math.abs(): 負の値を正の値へ変換するため、どちらの配列の値が大きいかに関係なく、常に正の数だけからなる配列が返されます。
• アロー関数を使うことで、処理全体を簡潔で読みやすい形にまとめられます。

このように、forループと Math.abs() を組み合わせるだけで、2つの配列の対応する要素の差を正の値として簡単に計算できます。よりモダンな書き方としては、Array.prototype.map() を使って同様の処理を実現することも可能です。