ECMAScript6 関数のデフォルトパラメータ_JavaScript のヒント

言語の更新中に追加されるすべての新機能は、何百万もの開発者のニーズから抽出されたものであり、標準採用によりプログラマーの負担が軽減され、利便性がもたらされます。

私たちはよくこのように書きます

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

簡単に言うと、x と y はデフォルト値 0 を提供します。渡されない場合、x と y は値 0 で計算されます。合格すると、実際の値が計算に使用されます。

別の例は、ajax の定義です

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

ネイティブ JS でカプセル化された単純な ajax 関数。URL は必須ですが、async と dataType が入力されていない場合、デフォルトでは JSON 形式のデータを同期的にリクエストして返します。

もう 1 つの例は、長方形クラスの定義です

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

新規作成時にパラメータを渡さないと、デフォルトの幅と高さ 200*300 の四角形が作成されます。

calc、ajax 関数、Rectangle クラスのいずれであっても、関数本体でデフォルト値を処理する必要があります。言語がそれを独自に処理できれば便利だと思いませんか。 ES6 はこの機能 (デフォルト パラメーター) を提供します。以下は、ES6 の新機能で書き直された calc、ajax、および Rectangle です。

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

ご覧のとおり、ES6 ではデフォルト値の部分が中括弧から括弧に移動され、「||」演算も削減され、関数本体がスリム化されました。パラメータのデフォルト値は、パラメータが定義されている場所に置く必要があります。これは非常に単純に見えます。 O(∩_∩)O

デフォルトのパラメータは、中央に

を定義するなど、任意の位置で定義できます。

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

はデフォルトのパラメータ async を定義し、url と success が必要です。この場合、中間のパラメータを unknown

に設定する必要があります。

ajax('../user.action', undefined, function() {
   
})

注意してください。これを当然のことと考えず、undefined を null に変更しないでください。null == unknown であっても、null を渡した後は、関数本体の async は true ではなく null になります。

次の点に注意する必要があります:

1. デフォルトパラメータを定義した後、関数の長さ属性が削減されます。つまり、いくつかのデフォルトパラメータは長さの計算に含まれません。

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. Let と const を使用してデフォルト値を再度宣言することはできません。var は

にすることができます。

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

もう 1 つの興味深い点は、デフォルトのパラメータは値型であってはならず、関数呼び出しである可能性があるということです

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

ここでパラメータ success が関数呼び出しであることがわかります。ajax を呼び出すときに 3 番目のパラメータが渡されない場合、getCallback 関数が実行され、success に割り当てられた新しい関数が返されます。これは、プログラマーに想像力の余地を与える非常に強力な機能です。

たとえば、この機能を使用して特定のパラメータを強制的に渡すことができます。そうでないとエラーが報告されます

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。