言語の更新中に追加されるすべての新機能は、何百万もの開発者のニーズから抽出されたものであり、標準採用によりプログラマーの負担が軽減され、利便性がもたらされます。
私たちはよくこのように書きます
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: 少传了参数
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。