JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

配列内の再帰的な乗算処理をJavaScriptで実装する方法

本記事では、ネストされた配列(入れ子構造の配列)に含まれる数値の積(乗算結果)を求めるJavaScript関数の実装方法を解説します。

問題の概要

扱う対象は、数値だけでなく、null・undefined・false などのfalsy値、さらに文字列も含まれる可能性がある多次元配列です。この関数が満たすべき要件は以下のとおりです。

  • ネストされた配列内のすべての数値を掛け合わせた積を返す
  • 0 や null、undefined、false などのfalsy値は無視する
  • 文字列などの数値以外の値も除外する

実装のポイント

配列が入れ子になっているため、再帰呼び出しを使って各階層を順番に処理するのが最もシンプルで効果的なアプローチです。具体的には以下の手順で処理を行います。

  1. 積の初期値として 1 を用意する
  2. 各要素に対して Array.isArray() で配列かどうかを判定する
  3. 配列であれば自分自身を再帰的に呼び出してその結果を掛ける
  4. 配列でなければ arr[i] || 1 のように評価し、falsy値の場合は 1 を掛けることで影響を排除する

コード例

const arr = [1, 5, 2, null, [
    2, 5, null, undefined, false, 5, [
        1, 3, false, 0, 2
    ], 4, 2, false
], 4, 6, 0
];
const recursiveMultiplication = arr => {
    let prod = 1;
    for(let i = 0; i < arr.length; i++){
        if(Array.isArray(arr[i])){
            prod *= recursiveMultiplication(arr[i]);
        }else{
            prod *= arr[i] || 1;
        };
    };
    return prod;
};
console.log(recursiveMultiplication(arr));

実行結果

コンソールに出力される結果は以下のとおりです。

576000

解説

このコードでは、arr[i] || 1 という論理OR演算子の性質を活用しています。JavaScriptでは 0、null、undefined、false はすべてfalsy値として評価されるため、これらが登場した場合は代わりに 1 が掛けられます。1 を掛けても結果は変わらないため、事実上それらの値がスキップされる仕組みです。

また、要素が配列だった場合には recursiveMultiplication() が再帰的に呼び出され、どれだけ深くネストされていてもすべての階層の数値が確実に処理されます。

このように再帰と論理OR演算子を組み合わせることで、わずか十数行のコードで柔軟な乗算処理を実現できます。

  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文([...arr])などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. JavaScriptにおける配列の分割代入(Destructuring)の基本と使い方

    分割代入(Destructuring)とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015(ES6)で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo