JavaScript レストパラメータ完全ガイド

概要: このチュートリアルでは、JavaScript のレストパラメータを使用して、パラメータをまとめて配列に格納する方法を学習します。

JavaScript レストパラメータ入門

ES6 は、レストパラメータと呼ばれる新しい種類のパラメータを提供します。これは、3 つのドット（...）のプレフィックスを持ちます。レストパラメータを使用すると、不特定多数の引数を配列として表現できます。次の構文を参照してください。

function fn(a,b,...args) {
   //...
}Code language: JavaScript (javascript)

最後のパラメータ（args）には、3 つのドット（...）のプレフィックスが付いています。これはレストパラメータ（...args）と呼ばれます。

関数に渡すすべての引数は、パラメータリストにマッピングされます。上記の構文では、最初の引数は a に、2 番目の引数は b にマッピングされ、3 番目、4 番目以降の引数は、配列としてレストパラメータ args に格納されます。例えば、

fn(1, 2, 3, "A", "B", "C");Code language: JavaScript (javascript)

args 配列には、次の値が格納されます。

[3,'A','B','C']Code language: JSON / JSON with Comments (json)

最初の 2 つのパラメータのみを渡すと、レストパラメータは空の配列になります。

fn(1,2);

args は次のようになります。

[]Code language: JSON / JSON with Comments (json)

レストパラメータは引数リストの最後に配置する必要があることに注意してください。次のコードはエラーになります。

function fn(a,...rest, b) {
 // error
}Code language: JavaScript (javascript)

エラー

SyntaxError: Rest parameter must be last formal parameterCode language: JavaScript (javascript)

JavaScript レストパラメータのその他の例

次の例を参照してください。

function sum(...args) {
    let total = 0;
    for (const a of args) {
        total += a;
    }
    return total;
}

sum(1, 2, 3);Code language: JavaScript (javascript)

スクリプトの出力は次のとおりです。

この例では、args は配列です。したがって、for..of ループを使用して要素を反復処理し、合計することができます。

sum() 関数の呼び出し元が、数値、文字列、ブール値など、さまざまな種類のデータ型の引数を渡す可能性があり、数値の合計のみを計算したいとします。

function sum(...args) {
  return args
    .filter(function (e) {
      return typeof e === 'number';
    })
    .reduce(function (prev, curr) {
      return prev + curr;
    });
}Code language: JavaScript (javascript)

次のスクリプトは、新しい sum() 関数を使用して、数値引数のみを合計します。

let result = sum(10,'Hi',null,undefined,20); 
console.log(result);Code language: JavaScript (javascript)

出力

レストパラメータがない場合は、関数の arguments オブジェクトを使用する必要があることに注意してください。

ただし、arguments オブジェクト自体は Array 型のインスタンスではありません。したがって、filter() メソッドを直接使用することはできません。ES5 では、次のように Array.prototype.filter.call() を使用する必要があります。

function sum() {
  return Array.prototype.filter
    .call(arguments, function (e) {
      return typeof e === 'number';
    })
    .reduce(function (prev, curr) {
      return prev + curr;
    });
}
Code language: JavaScript (javascript)

ご覧のとおり、レストパラメータを使用すると、コードがより洗練されます。引数を数値、文字列、ブール値、null などの特定の型に基づいてフィルタリングする必要があるとします。次の関数は、それを行うのに役立ちます。

function filterBy(type, ...args) {
  return args.filter(function (e) {
    return typeof e === type;
  });
}Code language: JavaScript (javascript)

JavaScript レストパラメータとアロー関数

アロー関数には、arguments オブジェクトがありません。したがって、アロー関数に引数を渡す場合は、レストパラメータを使用する必要があります。次の例を参照してください。

const combine = (...args) => {
  return args.reduce(function (prev, curr) {
    return prev + ' ' + curr;
  });
};

let message = combine('JavaScript', 'Rest', 'Parameters'); // =>
console.log(message); // JavaScript Rest ParametersCode language: JavaScript (javascript)

出力

JavaScript Rest Parameters

combine() 関数は、不特定多数の引数を受け取り、これらの引数を連結するアロー関数です。

動的関数における JavaScript レストパラメータ

JavaScript では、Function コンストラクタを使用して動的関数を作成できます。また、動的関数でレストパラメータを使用することも可能です。次に例を示します。

var showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);Code language: PHP (php)

出力

[ 1, 2, 3 ]Code language: JSON / JSON with Comments (json)

このチュートリアルでは、JavaScript のレストパラメータを使用して、不特定多数の引数を配列として表現する方法を学習しました。

このチュートリアルは役に立ちましたか？