ES 6入門教程ノート(6)-関数の拡張

10176 ワード

1関数パラメータのデフォルト値
基本的な使い方
ES 6の前に、関数パラメータはデフォルト値を指定できません.
function print(x, y) {
    y = y || 'World';
    console.log(x, y);
}

print('Hello') // "Hello World"
print('Hello', 'Gamer') // "Hello Gamer"
print('Hello', false); // "Hello World"
上記のコードでは、print関数内部でパラメータyが与えられているかどうかを確認し、ない場合は、デフォルト値をWorldと指定します.しかし、このような書き方には、最後の行のコードが示すように、パラメータyに送る値がfalseであれば、その割当値は機能せず、デフォルトの値に変更されます.
この問題を避けるためには、通常はパラメータyが割り当てられているかどうかを判断し、ない場合はデフォルト値を付与します.
if (typeof y === 'undefined') {
    y = 'World';
}
ES 6では、関数のパラメータのデフォルト値を設定することができます.すなわち、パラメータ定義の後に直接書くことができます.
function print(x, y = 'World') {
    console.log(x, y);
}

print('Hello') // "Hello World"
print('Hello', 'Gamer') // "Hello Gamer"
print('Hello', false); // "Hello false"
ES 6の書き方はES 5より簡潔で自然です.
この他に、ES 6の書き方にはもう二つの利点があります.まず、コードを読む人は関数体やドキュメントを見る必要がなく、どのパラメータが省略されているかをすぐに知ることができます.第二に、将来のコード最適化に有利であり、将来的にこのパラメータを徹底的に除去しても、古いコードの運行に影響しない.
プロファイルのデフォルト値と組み合わせて使用します.
パラメータのデフォルト値は、プロファイルのデフォルト値と結合して使用できます.
function print({x, y = 10}) {
    console.log(x, y);
}

print({}) // undefined 10
print({x:1}) // 1 10
print({x:1 y:2}) // 1 2
print() // TypeError
上のコードでは、パラメータがオブジェクトである場合のみ、変数xとyは、デフォーカシング値によって生成されます.パラメータが提供されていないとエラーが発生します.
関数パラメータのデフォルト値を提供することにより、このような状況を回避することができます.
function print({x, y = 10} = {}) {
    console.log(x, y);
}

print() // undefined 10
上記のコードの中で、printを呼び出してパラメータを提供しませんでした.デフォルトでは空のオブジェクトです.
パラメータのデフォルト値の位置
通常、デフォルト値を定義しているパラメータは、関数の最後のパラメータであるべきです.非テールの場合、このパラメータは明示的入力undefined以外は省略できないだろう.
関数のlength属性
関数のlength属性は、デフォルト値が指定されていないパラメータの個数を返します.
2レスパラメータ
ES 6は、関数の余分なパラメータを取得するためにrestパラメータを導入する.
function add(...values) {
    let sum = 0;
    for (let val of values) {
        sum += val;
    }
    return sum;
}

add(2, 5, 3) // 10
上記のコードのadd関数は、restパラメータを用いて、任意の数のパラメータに入ることができる.
3厳格モード
ES 5から始まり、関数内部では厳格なモードに設定できます.
function func(a, b) {
    'use strict';
    // code
}
ES 6では、関数パラメータがデフォルト値、デフォーカシング値、または拡張演算子を使用していると、関数内部では厳密モードに設定できなくなります.そうでなければエラーが発生します.
このような制限を回避するには、全体的な厳格なモードを設定することが合法的である.
'use strict';

function func(a, b = a) {
    // code
}
注:本文の内容はES 6標準入門から来ています.修正があります.