ES5およびES6環境で処理関数のデフォルトパラメータを操作する方法

今回はES5、ES6環境で加工関数のデフォルトパラメータを操作する方法を紹介します。 ES5、ES6環境で加工関数のデフォルトパラメータを操作する際の注意事項は以下の通りです。実際のケースを見てみましょう。

関数のデフォルト値は、堅牢性を大幅に向上させるものです (つまり、プログラムをより堅牢にします)

MDN 関数のデフォルト パラメーターの説明: 関数のデフォルト パラメーターを使用すると、値がないか未定義が渡された場合にデフォルト パラメーターを使用できます。

ES5

実装するには論理演算子または || を使用してください

ご存知のとおり、ES5 バージョンでは関数のデフォルト値を直接処理する方法はありません
自分で関数を強化する 関数は通常次のように行われます:

function doSomething (name, age) {
 name = name || 'default name'
 age = age || 18
 console.log(name, age)
}

関数の 2 つのパラメーター名と年齢をデフォルト値として処理します。そうでない場合は、デフォルト値を使用します。

関数を実行した後、何も問題はないようです:

doSomething()    // default name, 18
doSomething('Niko') // Niko    , 18
doSomething(, 12)  // default name, 12

しかし、そのようなコードを実行すると、いくつかの予期しない結果が得られます:

doSomething('Niko', 0) // Niko, 18

パラメーター 0 については、上記のデフォルトのパラメーターであることがわかります。実装方法に問題があります

以下の 4 つの 式 と同様に、それらはすべて間違った出力になります。これは明らかに関数のデフォルト パラメータの上記の MDN 定義を満たしていません:

console.log(0     || 'wrong')
console.log(''    || 'wrong')
console.log(null   || 'wrong')
console.log(false   || 'wrong')

正しい姿勢

したがって、ES5 での正しいデフォルト値の処理は次のようになります:

function doSomething (name, age) {
 if (name === undefined) {
  name = 'default name'
 }
 if (age === undefined) {
  age = 18
 }
 console.log(name, age)
}

三項演算子 演算子を使用して操作を簡素化します

または、三項演算子形式に短縮することもできます:

function doSomething (name, age) {
 name = name === undefined ? 'default name' : name
 age = age === undefined ? 18       : age
 console.log(name, age)
}

関数を使用して to encapsulate

しかし、関数を書くたびにこれらの操作を繰り返し行うのは大変なので
、このロジックを単純にカプセル化します:

function defaultValue (val, defaultVal) {
 return val === undefined ? defaultVal : val
}
function doSomething (name, age) {
 name = defaultValue(name, 'default name')
 age = defaultValue(age , 18)
 console.log(name, age)
}

この方法では、非常に簡単に ES5 に実装できます。関数のデフォルト パラメーターのロジック

ワンママ

上記の defaultValue 関数の実装方法に関して、弱い型付け言語の利点を適切に活用した後、このメソッドを使用して三項演算子の操作を保存できます:

function defaultValue () {
 return arguments[+(arguments[0] === undefined)]
}

引数が関数のすべての実パラメータを表すことはわかっています

arguments[0] を使用して最初の実パラメータを取得し、その後、未定義との一致比較を実行します

式の結果を外層の Number に変換します、この値を次の値として使用します。 添え字は、引数内の対応するパラメータを取得します。

ブール値から変換されるため、選択肢は0と1の2つだけです。

これも上記の三項演算子の機能を実現します。

ES6

ES6 バージョンのデフォルトの関数値は、基本的に上記で実装したルーチンです

しかし、ネイティブであるため、より簡潔に使用できる対応する新しい構文が存在します:

function doSomething (name = 'default name', age = 18) {
 console.log(name, age)
}

ES6は、関数宣言パラメータの直後に = [defaultValue] を記述することでパラメータのデフォルト値を設定できる新しい構文を提供します。

このメソッドを直接使用すると、関数内のデフォルト値を確認する必要がなくなり、関数は本来行うべきことに集中できるようになります。

特定の必須パラメータの例外をスローする方法

ES6 のこの新しい構文により、特定の必須パラメータにエラーリマインダーを提供できます:

function requireParams () {
 throw new Error('required params')
}
function doSomething (name = requireParams(), age = 18) {
 // do something
}

name パラメータが未定義の場合、デフォルト値のルールは次のようになります。トリガー

してからrequireParams関数を呼び出し、関数内で直接Errorを投げます

複雑な構造パラメータのデフォルト値処理

上記の処理はすべて単純な基本型データに対して処理されますが、次のような関数があります:

function init ({id, value}) {}
init({
 id: 'tagId',
 value: 1
})

如果在ES5环境下，针对这种参数的默认值处理将会变得无比复杂

首先要判断这一个参数是否存在，然后在判断参数中的所有key是否存在

而在ES6中，可以这样来做：

function init ({
 id  = 'defaultId',
 value = 1
} = {}) {
 console.log(id, value)
}
init()

首先在解构函数的后边添加默认值= {}，然后针对每一项参数添加默认值，很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置：defaultValue

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样优化js async函数

如何使用node搭建服务器,写接口,调接口,跨域

以上がES5およびES6環境で処理関数のデフォルトパラメータを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。